/*
 * godzinowo.pl UI
 * Klasyczny CSS bez Tailwind/Tachyons. Nazwy klas są domenowe,
 * a komponenty są projektowane pod panel SaaS z wieloma obiektami.
 */

:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --sidebar-a: #071226;
    --sidebar-b: #0b162c;
    --sidebar-muted: #91a4c4;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #38bdf8;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --violet: #7c3aed;
    --ink: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    --shadow-strong: 0 20px 55px rgba(15, 23, 42, 0.11);
    --radius: 8px;
    --radius-md: 8px;
    --radius-sm: 8px;
    --font: Inter, "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Schedule duplication and explicit end dates */
.shift-copy-button {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 13px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: color-mix(in srgb, var(--position-color, #2563eb) 78%, #0f172a);
    background: color-mix(in srgb, var(--position-color, #2563eb) 15%, #ffffff);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.shift-copy-button:hover {
    color: #ffffff;
    background: var(--position-color, #2563eb);
    transform: scale(1.08);
}

.shift-copy-button:focus-visible {
    outline: 2px solid var(--position-color, #2563eb);
    outline-offset: 2px;
}

.shift-copy-button .icon {
    width: 13px;
    height: 13px;
}

.shift-copy-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.shift-card-topline {
    display: flex;
    gap: 5px;
    align-items: center;
    padding-right: 30px;
}

.shift-drag-handle {
    margin-left: auto;
    color: color-mix(in srgb, var(--position-color, #2563eb) 45%, #94a3b8);
    font-size: 13px;
    line-height: 1;
}

.schedule-duplicate-modal {
    width: min(720px, 100%);
}

/* Company-wide history of manual changes to worked time */
.work-change-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #dce6f2;
    border-radius: 14px;
    background: #f8fbff;
}

.work-change-filters .form-actions {
    flex-wrap: nowrap;
}

.work-change-list {
    display: grid;
    gap: 9px;
}

.work-change-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(150px, auto);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e0e8f2;
    border-radius: 13px;
    background: #ffffff;
}

.work-change-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eaf2ff;
}

.work-change-icon .icon {
    width: 18px;
    height: 18px;
}

.work-change-main header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.work-change-main header small,
.work-change-main header strong,
.work-change-main header span {
    display: block;
}

.work-change-main header small {
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
}

.work-change-main header strong {
    margin-top: 3px;
    color: #172033;
    font-size: 13px;
}

.work-change-main header span,
.work-change-main header time {
    margin-top: 3px;
    color: #7a899d;
    font-size: 9px;
}

.work-change-main header time {
    white-space: nowrap;
}

.work-change-diff {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.work-change-diff span {
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #41526a;
    background: #f3f6fa;
    font-size: 9px;
}

.work-change-diff span.is-direct {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.work-change-diff span.is-derived {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.work-change-diff span > small {
    display: block;
    margin-top: 3px;
    color: #8491a3;
    font-size: 7px;
}

.work-change-diff b {
    margin-right: 6px;
    color: #1f2d42;
}

.work-change-summary,
.work-change-note {
    margin: 9px 0 0;
    color: #5f7188;
    font-size: 9px;
}

.work-change-note {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #6d4c1c;
}

.work-change-note .icon {
    width: 13px;
    height: 13px;
}

.work-change-card > aside {
    display: grid;
    justify-items: end;
    text-align: right;
}

.work-change-card > aside span {
    color: #273449;
    font-size: 10px;
    font-weight: 800;
}

.work-change-card > aside small {
    margin-top: 2px;
    color: #8794a6;
    font-size: 8px;
}

.work-change-card > aside a {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-top: 9px;
    color: #2563eb;
    font-size: 9px;
    font-weight: 800;
}

.work-change-card > aside a .icon {
    width: 12px;
    height: 12px;
}

@media (max-width: 1100px) {
    .work-change-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-change-filters .form-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .work-change-filters {
        grid-template-columns: 1fr;
    }

    .work-change-filters .form-actions,
    .work-change-filters .button {
        grid-column: auto;
        width: 100%;
    }

    .work-change-card {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .work-change-icon {
        width: 36px;
        height: 36px;
    }

    .work-change-card > aside {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

svg,
img {
    display: block;
}

.icon {
    flex: 0 0 auto;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 24px 18px;
    color: #eaf1ff;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.28), transparent 34%),
        linear-gradient(180deg, var(--sidebar-b), var(--sidebar-a));
}

.brand,
.auth-brand {
    display: flex;
    gap: 12px;
    align-items: center;
}

.brand {
    padding: 0 8px 28px;
}

.brand-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
}

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
    font-size: 18px;
    font-weight: 750;
}

.brand-name {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.brand-subtitle {
    display: block;
    color: var(--sidebar-muted);
    font-size: 13px;
}

.nav-group {
    margin-top: 20px;
}

.quick-nav {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-label {
    margin: 0 8px 10px;
    color: var(--sidebar-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    color: #d8e3f5;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(29, 78, 216, 0.76));
    transform: translateX(2px);
}

.nav-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #9bdcff;
}

.workspace {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 80px;
    padding: 16px 32px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(246, 248, 251, 0.86);
    backdrop-filter: blur(18px);
}

.search {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 54px;
    max-width: 760px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 16px 0 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    outline: none;
}

.search:focus-within {
    border-color: rgba(37, 99, 235, 0.65);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.search .icon {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    color: var(--muted);
    place-items: center;
}

.search .icon svg {
    width: 18px;
    height: 18px;
}

.search kbd {
    display: none;
}

.topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

.context-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.context-switcher label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.context-switcher select {
    width: clamp(170px, 16vw, 240px);
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    background: transparent;
    outline: none;
    font-size: 14px;
    font-weight: 750;
}

.account-chip {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 170px;
    min-height: 44px;
    padding: 4px 10px 4px 4px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #059669, #047857);
    font-size: 13px;
    font-weight: 700;
}

.account-chip strong,
.account-chip span {
    display: block;
}

.account-chip strong {
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
}

.account-chip span span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.account-chip .avatar {
    display: grid;
    line-height: 1;
    place-items: center;
    text-align: center;
}

.icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: #ffffff;
    transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.icon-button:hover {
    color: var(--primary);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--shadow);
}

.content {
    padding: 32px;
}

.impersonation-bar {
    position: sticky;
    z-index: 19;
    top: 80px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 32px;
    border-bottom: 1px solid #f5c46b;
    color: #713f12;
    background: linear-gradient(90deg, #fffbeb, #fff7d6);
    box-shadow: 0 8px 22px rgba(146, 93, 13, 0.08);
}

.impersonation-bar-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: #92400e;
    background: #fde68a;
}

.impersonation-bar-icon .icon {
    width: 18px;
    height: 18px;
}

.impersonation-bar-copy,
.impersonation-bar-copy strong,
.impersonation-bar-copy small {
    display: block;
    min-width: 0;
}

.impersonation-bar-copy strong {
    font-size: 12px;
}

.impersonation-bar-copy small {
    margin-top: 2px;
    color: #8a5a18;
    font-size: 10px;
}

.impersonation-stop-button {
    min-height: 36px;
    padding: 0 13px;
    border-color: #d97706;
    color: #78350f;
    background: #ffffff;
    box-shadow: none;
    font-size: 10px;
}

.impersonation-stop-button:hover {
    color: #ffffff;
    background: #b45309;
}

.page-header {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: 0;
}

.page-lead {
    max-width: 820px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
    font-weight: 650;
    white-space: nowrap;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.button:hover {
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.27);
    transform: translateY(-1px);
}

.button.secondary {
    color: var(--ink);
    border-color: var(--border);
    background: #ffffff;
    box-shadow: none;
}

.button.secondary:hover {
    background: var(--surface-soft);
    box-shadow: var(--shadow);
}

.button.danger {
    background: var(--danger);
    box-shadow: none;
}

.button.success {
    background: var(--success);
    box-shadow: none;
}

.compact-button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}

.notice {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    color: #1e3a8a;
    background: #eff6ff;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(8, 16, 32, 0.52);
    animation: modal-backdrop-fade 160ms ease-out;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-panel {
    width: min(920px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 32px 90px rgba(8, 16, 32, 0.28);
    animation: modal-panel-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modal-backdrop-fade {
    from {
        background: rgba(8, 16, 32, 0);
    }
    to {
        background: rgba(8, 16, 32, 0.52);
    }
}

@keyframes modal-panel-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.compact-modal {
    width: min(440px, 100%);
    padding: 20px;
    border-radius: 8px;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.modal-header .icon-button {
    flex: 0 0 auto;
}

.modal-header .icon-button span {
    font-size: 26px;
    line-height: 1;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.modal-info-grid article {
    padding: 16px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #f8fafc;
}

.modal-info-grid strong,
.modal-info-grid p {
    display: block;
}

.modal-info-grid strong {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 15px;
}

.modal-info-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.modal-status-list {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.modal-status-list h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 17px;
}

.modal-status-list dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.modal-status-list div {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.modal-status-list dt {
    color: var(--ink);
    font-weight: 750;
}

.modal-status-list dd {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.credential-modal-grid {
    display: grid;
    gap: 10px;
}

.credential-modal-grid article {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.credential-modal-grid span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

.credential-modal-grid strong {
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 17px;
    letter-spacing: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.settings-card {
    padding: 18px;
    border-color: #dbe4ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}

.settings-card-heading {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.settings-card-heading .panel-title {
    font-size: 19px;
}

.settings-card-heading .panel-subtitle {
    margin-top: 4px;
    font-size: 13px;
}

.settings-card-icon {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #2563eb;
    background: #f8fbff;
}

.settings-card-icon .icon {
    width: 18px;
    height: 18px;
}

.settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.settings-form .field.full {
    grid-column: 1 / -1;
}

.settings-form input {
    min-height: 44px;
    border-color: #dbe4ef;
    border-radius: 8px;
    background: #fbfdff;
}

.settings-actions {
    grid-column: 1 / -1;
    align-self: end;
    justify-content: flex-start;
    margin-top: 2px;
}

.settings-actions .button {
    width: auto;
    min-width: 148px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    white-space: nowrap;
}

.settings-summary {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 20px;
    align-items: center;
    grid-column: 1 / -1;
    padding: 18px;
}

.settings-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    font-weight: 650;
}

.settings-user {
    display: flex;
    gap: 13px;
    align-items: center;
}

.settings-user .panel-title {
    font-size: 19px;
}

.settings-summary dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.settings-summary dl div {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}

.settings-summary dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-summary dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-weight: 750;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card,
.panel,
.table-card,
.timeline,
.module-card,
.employee-status,
.kiosk-card,
.auth-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 16px;
    align-items: center;
    min-height: 132px;
    padding: 22px;
    border-color: rgba(191, 219, 254, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94)),
        #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -58px;
    bottom: -72px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.11), transparent 68%);
    pointer-events: none;
}

.stat-grid .stat-card:nth-child(2)::before {
    background: linear-gradient(90deg, #7c3aed, #38bdf8);
}

.stat-grid .stat-card:nth-child(3)::before {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.stat-grid .stat-card:nth-child(4)::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.stat-icon {
    display: grid;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 8px;
    color: var(--primary);
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
}

.stat-icon .icon {
    width: 22px;
    height: 22px;
}

.accent-violet.stat-card::before,
.accent-violet .stat-card::before {
    background: linear-gradient(90deg, #7c3aed, #38bdf8);
}

.accent-violet .stat-icon {
    color: var(--violet);
    border-color: #ddd6fe;
    background: linear-gradient(180deg, #f5f3ff, #ede9fe);
    box-shadow: 0 12px 26px rgba(124, 58, 237, 0.12);
}

.accent-green.stat-card::before,
.accent-green .stat-card::before {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.accent-green .stat-icon {
    color: var(--success);
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #ecfdf5, #dcfce7);
    box-shadow: 0 12px 26px rgba(22, 163, 74, 0.12);
}

.accent-orange.stat-card::before,
.accent-orange .stat-card::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.accent-orange .stat-icon {
    color: #ea580c;
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed, #ffedd5);
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.13);
}

.stat-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.stat-value {
    margin: 8px 0 0;
    color: #071226;
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
}

.stat-change {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}

.warning-text {
    color: #c2410c;
}

.muted-text {
    color: var(--muted);
}

.presence-strip {
    margin-bottom: 24px;
}

.dashboard-presence {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(191, 219, 254, 0.86);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.1), transparent 34%),
        radial-gradient(circle at 100% 10%, rgba(20, 184, 166, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.08);
}

.presence-strip-header {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.presence-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.presence-stat-card {
    min-height: 122px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.presence-stat-card:hover {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.11);
    transform: translateY(-2px);
}

.dashboard-panel {
    overflow: hidden;
    border-color: rgba(191, 219, 254, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.96) 100%);
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.08);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.9fr);
    gap: 24px;
}

.dashboard-grid-single {
    grid-template-columns: 1fr;
}

.lower-grid {
    margin-top: 24px;
}

.dashboard-grid > .panel,
.dashboard-grid > .table-card,
.dashboard-grid .timeline {
    border-color: rgba(191, 219, 254, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.08);
}

.panel {
    padding: 22px;
}

.panel-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-title {
    margin: 0;
    color: #071226;
    font-size: 19px;
    font-weight: 700;
}

.panel-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #075985;
    background: #e0f2fe;
    font-size: 12px;
    font-weight: 700;
}

.badge.success {
    color: #166534;
    background: #dcfce7;
}

.badge.warning {
    color: #92400e;
    background: #fef3c7;
}

.badge.danger {
    color: #991b1b;
    background: #fee2e2;
}

.badge.muted {
    color: #475569;
    background: #f1f5f9;
}

.object-list {
    display: grid;
    gap: 12px;
}

.object-row {
    display: grid;
    grid-template-columns: 40px minmax(180px, 1fr) 150px 120px 80px 92px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.object-row.admin-row {
    grid-template-areas:
        "avatar identity status"
        "avatar usage actions";
    grid-template-columns: 44px minmax(0, 1fr) auto;
    row-gap: 8px;
}

.object-row.admin-row > .object-avatar {
    grid-area: avatar;
}

.object-row.admin-row > div:nth-child(2) {
    grid-area: identity;
    min-width: 0;
}

.object-row.admin-row > .admin-billing-status {
    grid-area: status;
    justify-self: end;
}

.object-row.admin-row > .admin-billing-usage {
    grid-area: usage;
}

.object-row.admin-row > .actions {
    grid-area: actions;
    justify-self: end;
}

.admin-billing-usage {
    display: inline-flex;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
    color: #64748b;
}

.admin-billing-usage strong,
.admin-billing-usage small {
    display: inline;
    margin: 0;
}

.object-row:hover {
    border-color: rgba(147, 197, 253, 0.92);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.object-row strong,
.object-row small {
    display: block;
}

.object-row small {
    margin-top: 4px;
    color: #64748b;
    font-weight: 650;
}

.object-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(191, 219, 254, 0.82);
    border-radius: 8px;
    color: var(--primary);
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.object-avatar .icon {
    width: 18px;
    height: 18px;
}

.object-employees {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--ink);
    font-weight: 750;
}

.presence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.presence-tile {
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--border);
    border-bottom-width: 3px;
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.presence-tile strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    line-height: 1;
}

.presence-tile span {
    color: #475569;
    font-weight: 750;
}

.presence-tile.green {
    border-bottom-color: var(--success);
}

.presence-tile.orange {
    border-bottom-color: var(--warning);
}

.presence-tile.violet {
    border-bottom-color: var(--violet);
}

.presence-tile.blue {
    border-bottom-color: var(--primary);
}

.presence-live-duration {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: #065f46;
    background: #dcfce7;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.presence-live-duration.is-anomaly {
    color: #b42318;
    background: #fff1ed;
    box-shadow: inset 0 0 0 1px #fecdca, 0 4px 12px rgb(180 35 24 / 10%);
}

.presence-live-start {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 650;
}

.presence-live-alert {
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    max-width: 180px;
    margin-top: 5px;
    color: #b42318;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
}

.presence-live-alert .icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.live-dot {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--muted);
    font-weight: 650;
}

.live-dot::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    content: "";
}

.wide-link {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 18px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 8px;
    color: var(--primary);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.table-card {
    overflow: hidden;
    border-color: rgba(203, 213, 225, 0.9);
    background: #ffffff;
}

.data-section {
    margin-top: 24px;
}

.table-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e6edf5;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: #ffffff;
    font-size: 13px;
    font-weight: 650;
}

.table-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr) minmax(150px, 0.5fr) auto;
    gap: 12px;
    align-items: end;
    padding: 16px 24px;
    border-bottom: 1px solid #e6edf5;
    background: #fbfdff;
}

.table-filter-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}

.table-filter-actions .button {
    min-height: 42px;
    white-space: nowrap;
}

.table-limit-note {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 11px 24px;
    border-bottom: 1px solid #e6edf5;
    color: #52637a;
    background: #ffffff;
    font-size: 13px;
    font-weight: 650;
}

.table-limit-note .icon {
    width: 17px;
    height: 17px;
    color: #2563eb;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #0f172a;
    font-size: 13px;
}

.data-table th,
.data-table td {
    padding: 14px 24px;
    border-bottom: 1px solid #e7edf4;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: #64748b;
    background: #fbfdff;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.data-table thead th {
    border-bottom-color: #dfe7f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.data-table tbody tr {
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.data-table tbody tr:not(.table-edit-row):hover {
    background: #fbfdff;
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.35);
}

.data-table tbody tr:not(.table-edit-row):hover td {
    border-bottom-color: #dbeafe;
}

.data-table td:first-child {
    font-weight: 650;
}

.data-table td:first-child small,
.data-table small {
    display: inline-block;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.data-table .badge {
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
}

.data-table .badge.success {
    color: #047857;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.data-table .badge.warning {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.data-table .badge.danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.data-table .badge.muted {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.data-table .row-actions-inline,
.data-table .actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    margin-top: 0;
}

.data-table td:last-child .button,
.data-table .row-actions-inline .button,
.data-table .actions .button {
    min-height: 32px;
    padding: 0 10px;
    border-color: #dbe4ef;
    border-radius: 8px;
    color: #0f172a;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.data-table td:last-child .button:hover,
.data-table .row-actions-inline .button:hover,
.data-table .actions .button:hover {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #f8fbff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.07);
    transform: none;
}

.data-table td:last-child form {
    display: inline-flex;
    margin: 0;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.next-schedule-list,
.stack {
    display: grid;
    gap: 16px;
}

.next-shift {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.next-shift:hover {
    border-color: rgba(147, 197, 253, 0.92);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.date-box {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 8px;
    color: #1d4ed8;
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.date-box strong,
.date-box small,
.next-shift strong,
.next-shift small {
    display: block;
}

.date-box strong {
    font-size: 20px;
    line-height: 1;
}

.date-box small,
.next-shift small {
    color: #64748b;
    font-weight: 650;
}

.timeline {
    padding: 24px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.timeline-item + .timeline-item {
    margin-top: 12px;
}

.timeline-dot {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.timeline-item p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.field-hint {
    display: block;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: var(--ink);
    background: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
    outline: none;
    font-size: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field textarea {
    min-height: 86px;
    padding-top: 10px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(37, 99, 235, 0.62);
    background: #fbfdff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.field.full {
    grid-column: 1 / -1;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-grid.single {
    grid-template-columns: 1fr;
}

.form-actions {
    display: flex;
    align-items: end;
}

.form-footer {
    margin-top: 18px;
}

.check-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: 44px;
    padding: 12px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: var(--ink);
    background: #ffffff;
    font-weight: 650;
}

.field .check-row {
    display: flex;
}

.check-row.compact {
    min-height: 28px;
}

.check-row input[type="checkbox"],
.choice-tile input[type="checkbox"] {
    display: grid;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 2px 0 0;
    padding: 0;
    place-content: center;
    border: 1px solid #aebcd0;
    border-radius: 5px;
    appearance: none;
    background: #ffffff;
    box-shadow: none;
}

.check-row input[type="checkbox"]::before,
.choice-tile input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--primary);
    transform: scale(0);
    transition: transform 120ms ease;
}

.check-row input[type="checkbox"]:checked,
.choice-tile input[type="checkbox"]:checked {
    border-color: rgba(37, 99, 235, 0.85);
    background: #eff6ff;
}

.check-row input[type="checkbox"]:checked::before,
.choice-tile input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.check-row span,
.check-row strong,
.check-row small {
    display: block;
}

.check-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.check-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.login-method-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.login-method-grid .check-row {
    min-height: 100%;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.login-method-grid .check-row:has(input[type="checkbox"]:checked) {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff, #ffffff);
    box-shadow: inset 3px 0 0 #2563eb;
}

.compact-form {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    padding-top: 14px;
}

.table-edit-row td {
    padding-top: 0;
    border-top: 0;
    background: #fbfdff;
}

.table-edit-row {
    display: none;
}

.inline-edit {
    padding: 8px 0 14px;
}

.inline-edit summary {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: var(--primary-dark);
    background: #ffffff;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.inline-edit summary::-webkit-details-marker {
    display: none;
}

.list-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.list-search {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    padding: 0 8px 0 12px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.list-search .icon {
    color: var(--muted);
}

.list-search input {
    width: clamp(220px, 24vw, 360px);
    min-height: 38px;
    border: 0;
    color: var(--ink);
    background: transparent;
    outline: none;
}

.row-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.row-actions-inline .button,
.resource-actions .button {
    min-height: 34px;
}

.company-billing-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(96px, 1fr)) auto;
    gap: 8px;
    align-items: end;
    min-width: 620px;
}

.company-billing-form label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.company-billing-form label span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
}

.company-billing-form input[type="number"] {
    width: 100%;
    min-height: 36px;
    padding: 0 9px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.company-billing-form .company-vat-toggle {
    display: flex;
    gap: 7px;
    align-items: center;
    min-height: 36px;
    padding: 0 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}

.company-billing-form .company-vat-toggle input {
    width: 16px;
    height: 16px;
}

.company-billing-form .company-vat-toggle span {
    color: #334155;
    font-size: 12px;
    text-transform: none;
}

.workday-actions-cell {
    white-space: nowrap;
}

.workday-actions-cell .badge,
.workday-actions .button {
    flex: 0 0 auto;
}

.workday-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 0;
    margin-left: 8px;
    padding: 3px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}

.workday-actions .workday-action-button {
    min-height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.workday-actions .workday-action-button:hover {
    color: #1d4ed8;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: none;
}

.workday-actions .workday-action-button .icon {
    width: 16px;
    height: 16px;
}

.data-table .workday-actions .workday-action-button {
    min-height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: transparent;
    font-size: 12px;
    box-shadow: none;
}

.data-table .workday-actions .workday-action-button:hover {
    color: #1d4ed8;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.form-page-panel {
    max-width: 1180px;
}

.location-positions-panel {
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    padding: 0;
    border-color: rgba(191, 219, 254, 0.92);
    background:
        radial-gradient(circle at 100% 0%, rgba(219, 234, 254, 0.8), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.location-positions-panel::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #2563eb, #60a5fa);
    content: "";
}

.location-positions-header {
    padding: 26px 28px 22px;
    border-bottom: 1px solid rgba(219, 234, 254, 0.9);
}

.location-positions-heading,
.location-positions-title-row,
.location-position-main {
    display: flex;
    align-items: center;
}

.location-positions-heading {
    gap: 14px;
}

.location-positions-icon,
.location-position-create-icon,
.location-positions-empty-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: #2563eb;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.5);
}

.location-positions-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.location-positions-title-row {
    gap: 10px;
}

.location-positions-count {
    display: inline-grid;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    font-weight: 850;
}

.location-position-create-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 24px 28px 0;
    padding: 18px;
    border: 1px solid rgba(191, 219, 254, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 35px rgba(37, 99, 235, 0.08);
}

.location-position-create-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.location-position-create-card .field {
    min-width: 0;
}

.location-position-color-field {
    max-width: 170px;
}

.location-position-color-field input[type="color"] {
    width: 100%;
    min-height: 44px;
    padding: 4px;
}

.location-position-create-card .field-hint {
    margin-top: 6px;
}

.location-position-add-button {
    min-height: 44px;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.location-position-list-heading {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    margin: 26px 28px 12px;
}

.location-position-list-heading span {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.location-position-list-heading small {
    color: #64748b;
    font-size: 12px;
}

.location-position-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 0 28px 28px;
}

.location-position-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 74px;
    padding: 13px 13px 13px 15px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.location-position-row:hover {
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.location-position-main {
    min-width: 0;
    gap: 12px;
}

.location-position-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--position-color, #2563eb) 38%, #ffffff);
    border-radius: 12px;
    color: var(--position-color, #1d4ed8);
    background: color-mix(in srgb, var(--position-color, #2563eb) 14%, #ffffff);
    font-size: 15px;
    font-weight: 900;
}

.location-position-main div {
    min-width: 0;
}

.location-position-row strong {
    display: block;
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.location-position-row small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 650;
}

.location-position-row form {
    flex: 0 0 auto;
    margin: 0;
}

.location-position-color-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.location-position-color-form input[type="color"] {
    width: 42px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
}

.location-position-delete {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #94a3b8;
    background: transparent;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.location-position-delete:hover {
    border-color: #fecaca;
    color: #dc2626;
    background: #fef2f2;
}

.location-position-delete .icon {
    width: 16px;
    height: 16px;
}

.location-positions-empty {
    display: grid;
    grid-column: 1 / -1;
    gap: 5px;
    justify-items: center;
    padding: 34px 20px;
    border: 1px dashed #bfdbfe;
    border-radius: 14px;
    color: #64748b;
    background: rgba(239, 246, 255, 0.55);
    text-align: center;
}

.location-positions-empty-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 13px;
}

.location-positions-empty strong {
    color: #0f172a;
    font-size: 14px;
}

.location-positions-empty small {
    max-width: 420px;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .location-positions-panel {
        margin-top: 28px;
    }

    .location-positions-header {
        padding: 22px 20px 18px;
    }

    .location-position-create-card {
        grid-template-columns: 1fr;
        margin: 20px 20px 0;
    }

    .location-position-create-icon {
        display: none;
    }

    .location-position-add-button {
        width: 100%;
    }

    .location-position-list-heading {
        display: grid;
        gap: 4px;
        margin: 24px 20px 12px;
    }

    .location-position-list {
        grid-template-columns: 1fr;
        padding: 0 20px 22px;
    }
}

@media (max-width: 1100px) {
    .company-list-search {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 980px) {
    .object-row.admin-row {
        grid-template-areas:
            "avatar identity"
            "status status"
            "usage usage"
            "actions actions";
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .object-row.admin-row > .admin-billing-status,
    .object-row.admin-row > .actions {
        justify-self: stretch;
    }

    .object-row.admin-row > .actions,
    .object-row.admin-row > .actions form,
    .object-row.admin-row > .actions .button {
        width: 100%;
    }
}

/* Compact admin dashboard on laptop-sized screens. */
.admin-dashboard-screen .object-list {
    container-type: inline-size;
}

.admin-dashboard-screen .object-row.admin-row {
    gap: 8px 12px;
    padding: 11px 12px;
}

@container (min-width: 860px) {
    .admin-dashboard-screen .object-row.admin-row {
        grid-template-areas: "avatar identity usage status actions";
        grid-template-columns: 42px minmax(180px, 1fr) minmax(145px, auto) minmax(125px, auto) auto;
    }

    .admin-dashboard-screen .object-row.admin-row > .admin-billing-status,
    .admin-dashboard-screen .object-row.admin-row > .actions {
        justify-self: end;
    }
}

@media (min-width: 1120px) and (max-width: 1280px) {
    .admin-dashboard-screen .dashboard-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
        gap: 16px;
    }

    .admin-dashboard-screen .dashboard-grid > .panel {
        padding: 18px;
    }
}

/* Fast public registration */
.registration-quick-form {
    max-width: 760px;
    margin-inline: auto;
}

.registration-trial-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    margin: 4px auto 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 15px;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}

.registration-trial-summary > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #1d4ed8;
    background: #dbeafe;
}

.registration-trial-summary > span .icon {
    width: 19px;
    height: 19px;
}

.registration-trial-summary strong,
.registration-trial-summary small {
    display: block;
}

.registration-trial-summary strong {
    color: #17335f;
    font-size: 13px;
}

.registration-trial-summary small {
    margin-top: 3px;
    color: #65758d;
    font-size: 10px;
    line-height: 1.5;
}

.registration-trial-summary > a {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.registration-trial-summary > a .icon {
    width: 13px;
    height: 13px;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 76px;
}

.password-field button {
    position: absolute;
    top: 50%;
    right: 8px;
    min-width: 57px;
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eff6ff;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.password-field button:hover {
    background: #dbeafe;
    box-shadow: 0 5px 14px rgb(37 99 235 / 12%);
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgb(239 68 68 / 9%);
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
}

.registration-partner-note {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    color: #5b21b6;
    background: #f5f3ff;
    font-size: 10px;
    line-height: 1.45;
}

.registration-partner-note .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

@media (max-width: 680px) {
    .registration-trial-summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .registration-trial-summary > span {
        width: 38px;
        height: 38px;
    }

    .registration-trial-summary > a {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .company-list-search {
        grid-template-columns: auto minmax(0, 1fr);
        padding-block: 8px;
    }

    .company-list-search select {
        grid-column: 1 / -1;
        width: 100%;
    }

    .company-list-search .button {
        width: 100%;
    }

    .company-partner-fields {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .company-partner-remove {
        padding: 0 18px 18px;
    }
}

.form-grid-comfortable {
    gap: 16px;
}

.employee-day-page {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.day-editor-panel,
.day-history-column .panel {
    border-radius: 8px;
}

.day-history-column {
    display: grid;
    gap: 18px;
}

.day-overview-line {
    display: grid;
    grid-template-columns: minmax(80px, auto) minmax(120px, 1fr) minmax(80px, auto) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.day-overview-line span,
.day-overview-line b,
.day-overview-line small {
    display: block;
}

.day-overview-line b {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.day-overview-line small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-overview-line i {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--success), var(--primary));
}

.day-overview-line em {
    padding: 4px 9px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
}

.day-delta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: -6px 0 18px;
}

.day-delta-grid article {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.day-delta-grid span,
.day-delta-grid strong {
    display: block;
}

.day-delta-grid span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-delta-grid strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.day-delta-grid article.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.day-delta-grid article.is-warning strong {
    color: #c2410c;
}

.day-edit-form {
    display: grid;
    gap: 16px;
}

.calendar-picker-form {
    display: grid;
    gap: 10px;
}

.calendar-picker-form .button {
    width: 100%;
}

.date-stepper {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 8px;
}

.date-stepper .icon-button {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.date-stepper input {
    min-width: 0;
}

.day-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.day-quick-actions {
    align-items: center;
}

.break-editor {
    padding: 14px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #f8fafc;
}

.break-editor .report-section-header {
    margin-bottom: 10px;
}

.break-editor .report-section-header h3 {
    font-size: 15px;
}

.day-delete-form {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}

.day-delete-form small {
    max-width: 360px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.break-list {
    display: grid;
    gap: 10px;
}

.break-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.day-history-list,
.audit-list,
.compact-event-list {
    display: grid;
    gap: 8px;
}

.day-history-row,
.audit-list article,
.compact-event-list article {
    display: grid;
    gap: 4px;
    padding: 11px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.day-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.day-history-row.is-active {
    border-color: rgba(37, 99, 235, 0.42);
    background: #eff6ff;
}

.day-history-row strong,
.day-history-row small,
.audit-list strong,
.audit-list span,
.audit-list small {
    display: block;
}

.day-history-row small,
.audit-list span,
.audit-list small,
.compact-event-list small {
    color: var(--muted);
    font-size: 12px;
}

.compact-event-list article {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
}

.compact-event-list article > span {
    color: var(--primary-dark);
    font-weight: 750;
}

.day-manager {
    padding: 8px 0 14px;
}

.day-manager > summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    color: var(--ink);
    background: #ffffff;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.day-manager > summary::-webkit-details-marker {
    display: none;
}

.day-manager-summary-main {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.day-manager-summary-main .icon {
    color: var(--primary);
}

.day-manager-summary-main strong,
.day-manager-summary-main small {
    display: block;
}

.day-manager-summary-main small {
    color: var(--muted);
    font-size: 12px;
}

.day-manager-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.day-manager-status.warning {
    color: #92400e;
    background: #fef3c7;
}

.day-manager-body {
    display: grid;
    gap: 12px;
    padding-top: 12px;
}

.day-manager-alert {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #7c2d12;
    background: #fff7ed;
}

.day-manager-alert strong,
.day-manager-alert span {
    display: block;
}

.day-manager-alert strong {
    color: #431407;
}

.day-manager-alert span {
    font-size: 13px;
    font-weight: 700;
}

.day-session-list {
    display: grid;
    gap: 12px;
}

.day-session-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.day-session-card.is-open {
    border-color: #fbbf24;
    box-shadow: inset 4px 0 0 #f59e0b;
}

.day-session-card-header,
.day-session-timeline {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.day-session-card-header strong,
.day-session-card-header small {
    display: block;
}

.day-session-card-header small {
    color: var(--muted);
    font-size: 12px;
}

.day-session-timeline {
    display: grid;
    grid-template-columns: minmax(70px, auto) minmax(70px, 1fr) minmax(70px, auto) auto;
    padding: 12px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.day-session-timeline span,
.day-session-timeline b,
.day-session-timeline small {
    display: block;
}

.day-session-timeline b {
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
}

.day-session-timeline small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.day-session-timeline i {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--success), var(--primary));
}

.day-session-timeline em {
    justify-self: end;
    padding: 4px 8px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
}

.day-session-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.85fr) minmax(160px, 0.85fr) minmax(190px, 1fr) minmax(190px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.day-session-note input {
    min-width: 0;
}

.quick-time-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: end;
}

.quick-time-actions button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: var(--primary-dark);
    background: #ffffff;
    font-size: 12px;
    font-weight: 750;
}

.quick-time-actions button:hover {
    border-color: rgba(37, 99, 235, 0.42);
    background: #eff6ff;
}

.report-filters {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #fbfdff;
}

.report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.report-kpi {
    padding: 16px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.report-kpi span,
.report-kpi small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.report-kpi strong {
    display: block;
    margin: 6px 0 3px;
    color: var(--ink);
    font-size: 26px;
    line-height: 1.1;
}

.report-kpi em {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
}

.report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 18px;
}

.report-grid.lower-grid {
    margin-top: 18px;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.report-section {
    min-width: 0;
    padding: 16px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.report-section-header {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.report-section-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
}

.report-section-header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.report-section-note {
    margin: -6px 0 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.daily-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.daily-chart-summary article {
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
}

.daily-chart-summary span,
.daily-chart-summary small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.daily-chart-summary strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.15;
}

.bar-chart {
    display: grid;
    grid-template-columns: repeat(31, minmax(10px, 1fr));
    gap: 5px;
    align-items: end;
    min-height: 220px;
    padding-top: 10px;
}

.bar-chart-day {
    position: relative;
    display: grid;
    gap: 6px;
    align-items: end;
    min-width: 0;
    height: 210px;
    outline: none;
}

.bar-chart-day .bar {
    display: block;
    align-self: end;
    min-height: 4px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--primary), #60a5fa);
}

.bar-chart-day.has-work .bar {
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.bar-chart-day::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: max-content;
    max-width: 150px;
    padding: 7px 9px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 90ms ease, transform 90ms ease;
}

.bar-chart-day:hover::after,
.bar-chart-day:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bar-chart-day:first-child::after {
    left: 0;
    transform: translate(0, 4px);
}

.bar-chart-day:first-child:hover::after,
.bar-chart-day:first-child:focus-visible::after {
    transform: translate(0, 0);
}

.bar-chart-day:last-child::after {
    right: 0;
    left: auto;
    transform: translate(0, 4px);
}

.bar-chart-day:last-child:hover::after,
.bar-chart-day:last-child:focus-visible::after {
    transform: translate(0, 0);
}

.bar-chart-day small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-align: center;
}

.ranking-list,
.location-report-list {
    display: grid;
    gap: 10px;
}

.ranking-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.ranking-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ranking-row strong,
.ranking-row small {
    display: block;
}

.ranking-row small,
.location-report-list small {
    color: var(--muted);
    font-size: 12px;
}

.ranking-row > span {
    color: var(--ink);
    font-weight: 750;
}

.ranking-bar {
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.ranking-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #38bdf8);
}

.location-report-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 12px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.location-report-list small {
    grid-column: 1 / -1;
}

.report-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #edf2f7;
    border-radius: 8px;
}

.report-table-scroll .data-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.report-work-table {
    min-width: 860px;
}

.report-work-table th,
.report-work-table td {
    white-space: nowrap;
}

.report-work-table .wrap-cell {
    min-width: 150px;
    max-width: 210px;
    white-space: normal;
}

.table-heading-help {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.field-label-with-help {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    align-self: flex-start;
}

.field-label-with-help > label {
    margin: 0;
}

.field-label-with-help .context-help {
    flex: 0 0 auto;
    padding: 0;
}

.context-help {
    position: relative;
    display: inline-grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid #bfd2ec;
    border-radius: 50%;
    color: #2563eb;
    background: #ffffff;
    cursor: help;
    outline: none;
}

.context-help .icon {
    width: 11px;
    height: 11px;
}

.context-explain {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 5px 7px;
    border-radius: 7px;
    color: #1d4ed8;
    background: #eff6ff;
    font-weight: 750;
    cursor: help;
    outline: none;
}

.context-explain.is-live,
.payroll-table-rate.is-live {
    color: #b45309;
    background: #fef3c7;
}

.context-explain.is-invalid,
.payroll-table-rate.is-invalid {
    color: #b91c1c;
    background: #fee2e2;
}

.context-help::after,
.context-explain::after {
    position: absolute;
    z-index: 50;
    bottom: calc(100% + 9px);
    left: 50%;
    width: min(300px, 72vw);
    padding: 10px 12px;
    border: 1px solid #cad8ea;
    border-radius: 10px;
    color: #ffffff;
    background: #172033;
    box-shadow: 0 12px 30px rgb(15 23 42 / 22%);
    content: attr(data-explain);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 120ms ease 450ms, transform 120ms ease 450ms;
}

.context-help:hover::after,
.context-help:focus::after,
.context-explain:hover::after,
.context-explain:focus::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.report-filters + .report-kpis,
.report-filters + .report-kpis + .report-grid,
.report-filters + .report-kpis + .report-grid + .report-grid {
    position: relative;
}

.report-filters:has(+ .report-kpis) {
    margin-bottom: 0;
    border-color: rgba(203, 213, 225, 0.82);
    border-radius: 8px 8px 0 0;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.8)),
        #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.report-filters:has(+ .report-kpis) + .report-kpis {
    gap: 16px;
    margin: 0;
    padding: 24px 24px 0;
    border-right: 1px solid rgba(203, 213, 225, 0.82);
    border-left: 1px solid rgba(203, 213, 225, 0.82);
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.09), transparent 34%),
        radial-gradient(circle at 100% 8%, rgba(20, 184, 166, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi {
    position: relative;
    overflow: hidden;
    min-height: 148px;
    padding: 20px;
    border-color: rgba(191, 219, 254, 0.88);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi:nth-child(2)::before {
    background: linear-gradient(90deg, #7c3aed, #38bdf8);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi:nth-child(3)::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi:nth-child(4)::before {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.report-filters:has(+ .report-kpis) + .report-kpis .report-kpi strong {
    margin-top: 10px;
    font-size: 30px;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid {
    gap: 22px;
    margin: 0;
    padding: 24px;
    border-right: 1px solid rgba(203, 213, 225, 0.82);
    border-left: 1px solid rgba(203, 213, 225, 0.82);
    background: #ffffff;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid {
    padding-top: 0;
    border-bottom: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 0 0 8px 8px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .report-section,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-section {
    overflow: hidden;
    padding: 0;
    border-color: rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.065);
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .report-section-header,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-section-header {
    margin: 0;
    padding: 20px 22px;
    border-bottom: 1px solid #edf2f7;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.85), rgba(255, 255, 255, 0.76)),
        #ffffff;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .report-section-header h3,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-section-header h3 {
    font-size: 19px;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .report-section-note,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-section-note {
    margin: 0;
    padding: 16px 22px 0;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .daily-chart-summary,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .bar-chart,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .ranking-list,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-table-scroll,
.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .location-report-list {
    margin: 16px 22px 22px;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .daily-chart-summary article {
    border-color: rgba(226, 232, 240, 0.9);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .bar-chart {
    min-height: 250px;
    padding: 14px 8px 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid .ranking-row {
    padding: 14px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    background: #ffffff;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .report-table-scroll {
    border-radius: 8px;
    border-color: #e2e8f0;
}

.report-filters:has(+ .report-kpis) + .report-kpis + .report-grid + .report-grid .location-report-list article {
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.billing-dashboard {
    display: grid;
    gap: 24px;
    margin: 0 -1px -1px;
    padding: 24px;
    border-top: 1px solid #edf2f7;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.09), transparent 34%),
        radial-gradient(circle at 100% 8%, rgba(20, 184, 166, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 44%, #f7fafc 100%);
}

.billing-kpis {
    gap: 16px;
    margin-bottom: 0;
}

.billing-kpis .report-kpi {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    padding: 20px;
    border-color: rgba(191, 219, 254, 0.88);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.billing-kpis .report-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.billing-kpis .report-kpi:nth-child(2)::before {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.billing-kpis .report-kpi:nth-child(3)::before {
    background: linear-gradient(90deg, #7c3aed, #38bdf8);
}

.billing-kpis .report-kpi:nth-child(4)::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.billing-kpis .report-kpi strong {
    margin-top: 10px;
    font-size: 30px;
}

.billing-kpis .report-kpi span {
    color: #475569;
}

.billing-panel {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
    backdrop-filter: blur(12px);
}

.billing-panel .report-section-header {
    margin: 0;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.72)),
        #ffffff;
}

.billing-panel .report-section-header h3 {
    font-size: 20px;
    letter-spacing: 0;
}

.billing-panel .report-section-header span {
    color: #64748b;
    font-weight: 750;
}

.billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.billing-location-list,
.compact-payment-list {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.billing-location-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px 22px;
    padding: 22px;
    border: 1px solid rgba(219, 234, 254, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)),
        #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.billing-location-card::before {
    content: "";
    position: absolute;
    inset: 18px auto 18px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}

.billing-location-main {
    min-width: 0;
}

.billing-location-status {
    justify-self: end;
}

.billing-location-card strong,
.billing-location-card small {
    display: block;
}

.billing-location-card strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.billing-location-card small,
.compact-payment-list small {
    color: var(--muted);
    font-size: 12px;
}

.billing-meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.billing-meta div {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82)),
        #ffffff;
}

.billing-meta div:nth-child(1) {
    background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.billing-meta div:nth-child(2) {
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
}

.billing-meta div:nth-child(3) {
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

.billing-meta div:nth-child(4) {
    background: linear-gradient(180deg, #fefce8, #ffffff);
}

.billing-meta dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
}

.billing-meta dd {
    margin: 5px 0 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.compact-payment-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92)),
        #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.compact-payment-list article > span {
    color: var(--ink);
    font-weight: 850;
}

.compact-payment-list em {
    grid-column: 1 / -1;
    justify-self: start;
    font-style: normal;
}

.billing-note {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    background: #eff6ff;
}

.billing-note strong {
    color: #0f172a;
}

.billing-note span {
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
}

.kiosk-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kiosk-credentials span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #475569;
    background: #eef6ff;
    font-size: 12px;
    font-weight: 750;
}

.kiosk-credentials strong {
    color: #0f172a;
    letter-spacing: 0.03em;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.choice-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid rgba(203, 213, 225, 0.8);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.choice-tile:hover {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.choice-tile:has(input[type="checkbox"]:checked) {
    border-color: #2563eb;
    background: linear-gradient(160deg, #eff6ff, #ffffff 60%);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.13);
}

.choice-tile-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px 15px 13px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.choice-tile-info {
    flex: 1;
    min-width: 0;
}

.choice-tile-name {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice-tile-city {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.choice-tile-select {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0 0 14px 14px;
    color: #334155;
    background: rgba(248, 250, 252, 0.9);
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
    outline: none;
    transition: background-color 160ms ease;
}

.choice-tile-select:focus {
    background: rgba(239, 246, 255, 0.95);
}

.choice-tile:has(input[type="checkbox"]:checked) .choice-tile-select {
    border-top-color: rgba(147, 197, 253, 0.6);
    background: rgba(239, 246, 255, 0.8);
}

.field .choice-tile {
    display: flex;
}

.schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 6px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 8% 0%, rgba(59, 130, 246, 0.11), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(14, 165, 233, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(239, 246, 255, 0.72) 100%);
}

.schedule-create-panel {
    position: relative;
    overflow: hidden;
    padding: 30px 34px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 54%, rgba(239, 246, 255, 0.92) 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.schedule-create-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #8b5cf6);
}

.schedule-create-panel::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.13), transparent 68%);
    pointer-events: none;
}

.correction-create-panel {
    margin: 0 0 18px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: none;
}

.schedule-create-panel .panel-header {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.schedule-create-panel .panel-title {
    font-size: 25px;
    letter-spacing: 0;
}

.schedule-create-panel .panel-subtitle {
    color: #64748b;
    font-size: 15px;
}

.schedule-info-button {
    min-height: 42px;
    padding: 0 16px;
    border-color: rgba(191, 219, 254, 0.9);
    border-radius: 8px;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.schedule-info-button:hover {
    color: #1d4ed8;
    background: #ffffff;
}

.schedule-create-form {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(190px, 1.15fr) minmax(190px, 1.15fr) minmax(155px, 0.82fr) minmax(155px, 0.82fr) minmax(135px, 0.72fr) minmax(135px, 0.72fr);
    align-items: end;
    gap: 18px;
}

.schedule-create-form .field {
    min-width: 0;
}

.schedule-create-form .schedule-note {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: end;
}

.schedule-create-form .field label {
    margin-bottom: 8px;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.schedule-create-form .field input,
.schedule-create-form .field select,
.schedule-create-form .field textarea {
    min-height: 54px;
    border-color: rgba(203, 213, 225, 0.95);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.schedule-create-form .field input:hover,
.schedule-create-form .field select:hover,
.schedule-create-form .field textarea:hover {
    border-color: #cbd5e1;
}

.schedule-create-form .field input:focus,
.schedule-create-form .field select:focus,
.schedule-create-form .field textarea:focus {
    border-color: rgba(37, 99, 235, 0.72);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 14px 34px rgba(37, 99, 235, 0.08);
}

.schedule-create-form .field textarea {
    min-height: 54px;
    max-height: 112px;
    padding-top: 15px;
    resize: vertical;
}

.schedule-note {
    grid-column: span 3;
}

.schedule-submit {
    display: flex;
    justify-content: flex-start;
    grid-column: span 2;
    min-height: 54px;
    align-self: end;
}

.schedule-submit .button {
    flex: 0 0 auto;
    width: auto;
    min-width: 225px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 8px;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
    white-space: nowrap;
}

.schedule-submit .button:hover {
    box-shadow: 0 22px 42px rgba(37, 99, 235, 0.28);
}

@media (max-width: 1180px) {
    .schedule-create-form {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .schedule-note {
        grid-column: span 2;
    }

    .schedule-submit {
        grid-column: span 1;
    }

    .schedule-submit .button {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .schedule-create-panel {
        padding: 18px;
    }

    .schedule-create-form {
        grid-template-columns: 1fr;
    }

    .schedule-note {
        grid-column: auto;
    }
}

.schedule-panel {
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(191, 219, 254, 0.86);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.08);
}

.schedule-panel .panel-header {
    margin-bottom: 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.schedule-panel .panel-title {
    font-size: 24px;
}

.schedule-panel .panel-subtitle {
    color: #64748b;
}

.schedule-panel .actions {
    gap: 10px;
}

.schedule-panel .actions .button {
    min-height: 42px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.schedule-panel .actions .schedule-export-button {
    min-width: 128px;
    padding-inline: 16px;
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
    font-weight: 850;
}

.schedule-panel .actions .schedule-export-button .icon {
    width: 17px;
    height: 17px;
    color: currentColor;
}

.schedule-panel .actions .schedule-export-button:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary-dark), #1e40af);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.3);
}

.schedule-position-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 8px;
    background: #ffffff;
}

.schedule-position-legend strong {
    flex: 0 0 auto;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.schedule-position-legend div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.position-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--position-color, #2563eb) 32%, #ffffff);
    border-radius: 999px;
    color: #0f172a;
    background: color-mix(in srgb, var(--position-color, #2563eb) 11%, #ffffff);
    font-size: 12px;
    font-weight: 800;
}

.position-legend-item i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--position-color, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--position-color, #2563eb) 18%, #ffffff);
}

.schedule-workspace-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.schedule-visibility-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #dce5f1;
    border-radius: 10px;
    color: #52627a;
    background: #ffffff;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.schedule-visibility-button:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
    background: #eff6ff;
}

.schedule-visibility-button .icon {
    width: 14px;
    height: 14px;
}

.module-screen .schedule-create-form > .schedule-date-field,
.module-screen .schedule-create-form > .schedule-time-fields {
    grid-column: span 2;
}

.schedule-time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.module-screen .schedule-time-fields > .field {
    grid-column: auto;
}

.schedule-break-field .field-hint {
    white-space: nowrap;
}

[data-employee-picker] {
    position: relative;
}

[data-employee-picker].is-enhanced > select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.schedule-employee-picker-trigger {
    position: relative;
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 14px;
    overflow: hidden;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    color: #334155;
    background: #fbfcfe;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.schedule-employee-picker-trigger::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    content: "";
    transform: translateY(-65%) rotate(45deg);
}

.schedule-employee-picker-trigger:focus,
.schedule-employee-picker-trigger[aria-expanded="true"] {
    border-color: #60a5fa;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.schedule-employee-picker-popup {
    position: absolute;
    z-index: 40;
    top: 69px;
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #cbd9e9;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
}

.schedule-employee-picker-popup[hidden] {
    display: none;
}

.schedule-employee-picker-popup > label {
    display: grid;
    gap: 5px;
    padding: 11px;
    border-bottom: 1px solid #e7edf5;
    background: #f8fafc;
}

.schedule-employee-picker-popup > label > span {
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.module-screen .schedule-employee-picker-popup input {
    min-height: 38px;
    padding: 0 11px;
    background: #ffffff;
}

.schedule-employee-picker-options {
    display: grid;
    max-height: 260px;
    padding: 6px;
    overflow-y: auto;
}

.schedule-employee-picker-options button {
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #334155;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.schedule-employee-picker-options button:hover,
.schedule-employee-picker-options button.is-selected {
    color: #1d4ed8;
    background: #eff6ff;
}

.schedule-employee-picker-empty {
    padding: 18px 10px;
    color: #94a3b8;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.module-screen .schedule-create-panel:has(.schedule-employee-picker-popup:not([hidden])) {
    z-index: 5;
    overflow: visible;
}

.schedule-preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.schedule-presets-empty {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 700;
}

.schedule-presets-empty[hidden] {
    display: none;
}

.module-screen .schedule-quick-times .schedule-presets-manage {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin-left: auto;
    border-style: dashed;
    color: #2563eb;
}

.schedule-presets-manage .icon {
    width: 12px;
    height: 12px;
}

.schedule-multi-day-trigger {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    width: min(100%, 430px);
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #dce5f1;
    border-radius: 11px;
    color: #334155;
    background: #fbfcfe;
    text-align: left;
    cursor: pointer;
}

.schedule-multi-day-trigger:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.schedule-multi-day-trigger > span:nth-child(2) {
    display: grid;
    gap: 2px;
}

.schedule-multi-day-trigger strong {
    font-size: 9px;
}

.schedule-multi-day-trigger small {
    color: #8492a6;
    font-size: 8px;
    font-weight: 650;
}

.schedule-multi-day-trigger > .icon {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

[data-schedule-selected-date-inputs] {
    display: none;
}

.module-screen .schedule-date-picker-modal {
    width: min(670px, 100%);
    padding: 0;
    overflow: hidden;
}

.module-screen .schedule-date-picker-modal > .modal-header,
.module-screen .schedule-presets-modal > .modal-header {
    margin: 0;
    padding: 20px 22px 18px;
    border-bottom: 1px solid #e5edf6;
    background: linear-gradient(145deg, #ffffff, #f7faff);
}

.module-screen .schedule-date-picker-modal > .modal-header .eyebrow,
.module-screen .schedule-presets-modal > .modal-header .eyebrow {
    margin: 0 0 5px;
}

.module-screen .schedule-date-picker-modal > .modal-header .panel-subtitle,
.module-screen .schedule-presets-modal > .modal-header .panel-subtitle {
    margin-bottom: 0;
}

.schedule-date-picker-body {
    padding: 20px 22px 22px;
}

.schedule-date-picker-nav {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.schedule-date-picker-nav strong {
    color: #263449;
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
}

.schedule-date-picker-nav button,
.schedule-date-picker-grid button {
    display: grid;
    place-items: center;
    border: 1px solid #dce5f1;
    color: #52627a;
    background: #ffffff;
    cursor: pointer;
}

.schedule-date-picker-nav button {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.schedule-date-picker-nav .icon {
    width: 14px;
    height: 14px;
}

.schedule-date-picker-weekdays,
.schedule-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.schedule-date-picker-weekdays {
    margin-bottom: 6px;
}

.schedule-date-picker-weekdays span {
    padding: 5px 0;
    color: #8492a6;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.schedule-date-picker-grid button {
    min-height: 50px;
    align-content: center;
    gap: 2px;
    padding: 5px 3px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
}

.schedule-date-picker-grid button > span {
    line-height: 1;
}

.schedule-date-picker-grid button > small {
    overflow: hidden;
    max-width: 100%;
    color: #b45309;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-date-picker-grid button:hover {
    border-color: #60a5fa;
    color: #1d4ed8;
    background: #eff6ff;
}

.schedule-date-picker-grid button.is-muted {
    opacity: 0.42;
}

.schedule-date-picker-grid button.is-selected {
    border-color: #2563eb;
    color: #ffffff;
    background: #2563eb;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.2);
}

.schedule-date-picker-grid button.is-primary {
    border-color: #16a34a;
    color: #166534;
    background: #dcfce7;
    box-shadow: inset 0 0 0 2px #ffffff;
    opacity: 1;
}

.schedule-date-picker-grid button.is-busy:not(.is-selected) {
    border-color: #f5c36b;
    color: #92400e;
    background: #fff7e6;
}

.schedule-date-picker-grid button.is-busy.is-selected:not(.is-primary) {
    box-shadow: inset 0 0 0 2px #fbbf24, 0 7px 16px rgba(37, 99, 235, 0.2);
}

.schedule-date-picker-grid button.is-busy.is-selected:not(.is-primary) > small {
    color: #fef3c7;
}

.schedule-date-picker-grid button.is-primary.is-busy {
    box-shadow: inset 0 0 0 2px #f59e0b;
}

.schedule-date-picker-grid button.is-primary.is-busy > small {
    color: #166534;
}

.schedule-date-picker-grid button.has-availability-limit:not(.is-primary) {
    box-shadow: inset 0 -3px 0 #8b5cf6;
    min-height: 62px;
}

.schedule-date-picker-grid button.has-availability-limit > small.schedule-availability-hours {
    color: #6741c7;
}

.schedule-date-picker-grid button > small.schedule-availability-hours {
    display: -webkit-box;
    color: #6741c7;
    line-height: 1.2;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.schedule-date-picker-legend i.is-availability {
    border-color: #8b5cf6;
    background: #ede9fe;
}

.absence-workspace .availability-day-select input[type="checkbox"] {
    appearance: none;
    display: grid;
    place-items: center;
    order: 2;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #b8c7dc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.absence-workspace .availability-day-select input[type="checkbox"]:hover {
    border-color: #5c8df0;
    transform: scale(1.05);
}

.absence-workspace .availability-day-select input[type="checkbox"]:checked {
    border-color: #2563eb;
    background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.3 8.2 2.8 2.8 6.6-6.6'/%3E%3C/svg%3E") center/13px 13px no-repeat;
    box-shadow: 0 4px 10px rgba(37,99,235,.25);
}

.absence-workspace .availability-day-select input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(37,99,235,.2);
    outline-offset: 2px;
}

.absence-workspace .availability-editor .availability-kind label span {
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.14);
    color: #eaf2ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.absence-workspace .availability-editor .availability-kind label:hover span {
    border-color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.21);
}

.absence-workspace .availability-editor .availability-kind input:focus-visible + span {
    outline: 3px solid rgba(147,197,253,.38);
    outline-offset: 2px;
}

.absence-workspace .availability-editor .availability-kind input:checked + span {
    border-color: #ffffff;
    background: #ffffff;
    color: #174a9e;
    box-shadow: 0 7px 18px rgba(4,18,45,.22);
}

.schedule-date-picker-grid.is-loading {
    opacity: 0.62;
    pointer-events: none;
}

.schedule-date-picker-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf2f7;
}

.schedule-date-picker-legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #64748b;
    font-size: 8px;
    font-weight: 750;
}

.schedule-date-picker-legend i {
    width: 10px;
    height: 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.schedule-date-picker-legend i.is-primary {
    border-color: #16a34a;
    background: #dcfce7;
}

.schedule-date-picker-legend i.is-selected {
    border-color: #2563eb;
    background: #2563eb;
}

.schedule-date-picker-legend i.is-busy {
    border-color: #f5c36b;
    background: #fff7e6;
}

.schedule-date-picker-note {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 10px 0 0;
    color: #718096;
    font-size: 8px;
    line-height: 1.45;
}

.schedule-date-picker-note .icon {
    width: 13px;
    height: 13px;
    color: #2563eb;
}

.module-screen .schedule-presets-modal {
    width: min(680px, 100%);
    padding: 0;
    overflow: hidden;
}

.schedule-presets-form-body {
    display: grid;
    gap: 14px;
    padding: 20px 22px 22px;
}

.schedule-presets-intro {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 11px;
    background: linear-gradient(145deg, #eff6ff, #f8fbff);
}

.schedule-presets-intro > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #1d4ed8;
    background: #dbeafe;
}

.schedule-presets-intro .icon {
    width: 17px;
    height: 17px;
}

.schedule-presets-intro > div {
    display: grid;
    gap: 3px;
}

.schedule-presets-intro strong {
    color: #25334a;
    font-size: 10px;
}

.schedule-presets-intro small {
    color: #64748b;
    font-size: 8px;
    line-height: 1.45;
}

.schedule-presets-rows {
    display: grid;
    gap: 8px;
    max-height: 310px;
    overflow-y: auto;
}

.schedule-preset-row {
    display: grid;
    grid-template-columns: 30px repeat(2, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce6f2;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(22, 48, 85, 0.045);
}

.schedule-preset-order {
    display: grid;
    width: 28px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #1d4ed8;
    background: #eaf2ff;
    font-size: 9px;
    font-weight: 850;
}

.schedule-preset-row label {
    display: grid;
    gap: 5px;
}

.schedule-preset-row label span {
    color: #64748b;
    font-size: 8px;
    font-weight: 750;
}

.schedule-preset-row input {
    min-height: 42px;
}

.schedule-preset-row-actions {
    display: flex;
    gap: 4px;
}

.schedule-preset-row-actions button {
    width: 30px;
    height: 42px;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    color: #52627a;
    background: #ffffff;
    font-weight: 850;
    cursor: pointer;
}

.schedule-preset-row-actions button:last-child {
    color: #dc2626;
    background: #fff7f7;
}

.schedule-preset-row-actions button:disabled {
    opacity: 0.35;
    cursor: default;
}

.schedule-presets-form-empty {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 22px 18px;
    border: 1px dashed #cbd9e9;
    border-radius: 11px;
    color: #8492a6;
    background: #fbfdff;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.schedule-presets-form-empty > span {
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 3px;
    place-items: center;
    border-radius: 10px;
    color: #2563eb;
    background: #eaf2ff;
}

.schedule-presets-form-empty .icon {
    width: 15px;
    height: 15px;
}

.schedule-presets-form-empty strong {
    color: #334155;
    font-size: 10px;
}

.schedule-presets-form-empty small {
    color: #8492a6;
    font-size: 8px;
}

.schedule-presets-form-empty[hidden] {
    display: none;
}

.module-screen .schedule-preset-add-button {
    width: 100%;
    border-style: dashed;
    color: #1d4ed8;
    background: #ffffff;
    box-shadow: none;
}

.module-screen .schedule-date-picker-modal > .modal-footer,
.module-screen .schedule-presets-modal form > .modal-footer {
    gap: 10px;
    margin: 0;
    padding: 16px 22px;
    border-top: 1px solid #e5edf6;
    background: #f8fbff;
}

.module-screen .schedule-date-picker-modal > .modal-footer .button,
.module-screen .schedule-presets-modal form > .modal-footer .button {
    min-width: 128px;
}

.schedule-visibility-options {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
}

.schedule-visibility-options label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
}

.schedule-visibility-options input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.schedule-visibility-options span {
    display: grid;
    gap: 2px;
}

.schedule-visibility-options strong {
    color: #334155;
    font-size: 10px;
}

.schedule-visibility-options small {
    color: #8492a6;
    font-size: 8px;
}

body.schedule-hide-hours [data-schedule-element="hours"],
body.schedule-hide-breaks [data-schedule-element="breaks"],
body.schedule-hide-duration [data-schedule-element="duration"],
body.schedule-hide-position [data-schedule-element="position"],
body.schedule-hide-breaks.schedule-hide-duration .shift-card-footer {
    display: none !important;
}

body.schedule-hide-hours .shift-card-topline {
    display: none;
}

.schedule-position-summary {
    margin: 16px 18px 0;
    overflow: hidden;
    border: 1px solid #dce6f4;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffffff, #f8fbff);
}

.schedule-position-summary-header {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    border-bottom: 1px solid #e5edf6;
}

.schedule-position-summary-header > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.schedule-position-summary-header > div > span:last-child {
    display: grid;
    gap: 2px;
}

.schedule-position-summary-header strong {
    color: #263449;
    font-size: 12px;
}

.schedule-position-summary-header small,
.schedule-position-summary-header > span {
    color: #718096;
    font-size: 9px;
    font-weight: 700;
}

.schedule-position-summary-header > span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef3f9;
    white-space: nowrap;
}

.schedule-position-summary-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #2563eb;
    background: #dbeafe;
}

.schedule-position-summary-icon .icon {
    width: 16px;
    height: 16px;
}

.schedule-position-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: #e5edf6;
}

.schedule-position-summary-list article {
    min-width: 0;
    padding: 13px 15px;
    background: #ffffff;
    box-shadow: inset 3px 0 0 var(--position-color, #94a3b8);
}

.schedule-position-summary-name,
.schedule-position-summary-list article > strong,
.schedule-position-summary-list article > small {
    display: flex;
    align-items: center;
}

.schedule-position-summary-name {
    gap: 7px;
    overflow: hidden;
    color: #52627a;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-position-summary-name i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--position-color, #94a3b8);
}

.schedule-position-summary-list article > strong {
    margin-top: 7px;
    color: #172033;
    font-size: 18px;
    line-height: 1;
}

.schedule-position-summary-list article > small {
    margin-top: 5px;
    color: #8492a6;
    font-size: 8px;
    font-weight: 700;
}

.schedule-position-summary-empty {
    padding: 16px;
    color: #8492a6;
    background: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.schedule-calendar-layout-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 18px 0;
}

.schedule-calendar-layout-toolbar > span {
    display: grid;
    gap: 2px;
}

.schedule-calendar-layout-toolbar > span strong {
    color: #334155;
    font-size: 10px;
}

.schedule-calendar-layout-toolbar > span small {
    color: #8492a6;
    font-size: 8px;
}

.schedule-calendar-layout-switcher {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dce5f1;
    border-radius: 10px;
    background: #f1f5f9;
}

.schedule-calendar-layout-switcher button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 31px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: #64748b;
    background: transparent;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.schedule-calendar-layout-switcher button:hover,
.schedule-calendar-layout-switcher button.is-active {
    color: #1d4ed8;
    background: #ffffff;
}

.schedule-calendar-layout-switcher button.is-active {
    box-shadow: 0 5px 14px rgba(22, 48, 85, 0.09);
}

.schedule-calendar-layout-switcher .icon {
    width: 13px;
    height: 13px;
}

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(275px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 16px;
    scrollbar-color: rgba(148, 163, 184, 0.75) transparent;
}

.module-screen .schedule-calendar.is-list-view {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
}

.module-screen .schedule-calendar.is-list-view .calendar-day {
    min-height: 0;
}

.module-screen .schedule-calendar.is-list-view .calendar-day-header {
    margin-bottom: 10px;
}

.month-day-date {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.month-day-label {
    display: none;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.module-screen .schedule-month-calendar.is-list-view {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
}

.module-screen .schedule-month-calendar.is-list-view .month-weekday,
.module-screen .schedule-month-calendar.is-list-view .month-day.is-muted {
    display: none;
}

.module-screen .schedule-month-calendar.is-list-view .month-day,
.module-screen .schedule-month-calendar.is-list-view .month-day-link {
    min-height: 0;
}

.module-screen .schedule-month-calendar.is-list-view .month-day-link {
    display: grid;
    grid-template-columns: minmax(135px, 170px) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
}

.module-screen .schedule-month-calendar.is-list-view .month-day-label {
    display: inline;
}

.module-screen .schedule-month-calendar.is-list-view .month-day-header {
    display: grid;
    gap: 5px;
    justify-content: stretch;
}

.module-screen .schedule-month-calendar.is-list-view .month-day-count {
    padding-left: 35px;
}

.module-screen .schedule-month-calendar.is-list-view .month-shift-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.module-screen .schedule-month-calendar.is-list-view .month-day-footer {
    margin: 0;
    padding: 8px 0 0;
    border: 0;
    white-space: nowrap;
}

.module-screen .schedule-month-calendar.is-list-view .month-day-empty {
    min-height: 30px;
}

.calendar-day {
    min-height: 445px;
    padding: 16px;
    border: 1px solid rgba(219, 234, 254, 0.95);
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.calendar-day.is-today {
    border-color: rgba(37, 99, 235, 0.52);
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, #ffffff 100%);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.11), inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.calendar-day.is-drop-target {
    border-color: rgba(37, 99, 235, 0.72);
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 20px 44px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 2px 2px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.calendar-day-header span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-day-header strong {
    display: inline-flex;
    min-width: 58px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(191, 219, 254, 0.88);
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.shift-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--position-color, #2563eb) 28%, #ffffff);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--position-color, #2563eb) 12%, #ffffff) 0%, #ffffff 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.shift-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--position-color, #2563eb);
}

.shift-card:hover {
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.11);
    transform: translateY(-2px);
}

.shift-card.is-dragging {
    opacity: 0.55;
}

.shift-card.is-saving {
    opacity: 0.72;
    pointer-events: none;
}

.shift-card.is-saving .shift-card-trigger {
    cursor: progress;
}

.shift-card-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 15px 15px 15px 18px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.shift-card-trigger strong,
.shift-card-trigger small {
    display: block;
}

.shift-card-trigger strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
}

.shift-card-trigger small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
}

.shift-card-meta {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: space-between;
}

.shift-time {
    width: max-content;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--position-color, #2563eb) 28%, #ffffff);
    border-radius: 999px;
    color: color-mix(in srgb, var(--position-color, #2563eb) 70%, #0f172a);
    background: color-mix(in srgb, var(--position-color, #2563eb) 9%, #ffffff);
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.09);
}

.shift-note-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #2563eb;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.shift-note-icon .icon {
    width: 14px;
    height: 14px;
}

.shift-edit-modal {
    width: min(660px, 100%);
}

.shift-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.shift-edit-form .field.full {
    grid-column: 1 / -1;
}

.shift-delete-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
}

.shift-actions {
    display: flex;
    align-items: end;
}

.text-danger {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    border: 0;
    color: var(--danger);
    background: transparent;
    font-weight: 700;
}

.empty-slot {
    display: grid;
    min-height: 112px;
    place-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.72);
    border-radius: 8px;
    color: #94a3b8;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(241, 245, 249, 0.76));
    font-size: 14px;
    font-weight: 750;
}

.schedule-month-panel {
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(191, 219, 254, 0.86);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.08);
}

.schedule-month-panel .panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.schedule-month-panel .panel-title {
    font-size: 25px;
}

.schedule-month-panel .actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.schedule-month-panel .actions .button {
    min-height: 40px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.schedule-month-panel .actions .button:not(.secondary) {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.schedule-month-panel .actions .schedule-export-button {
    min-width: 128px;
    padding-inline: 16px;
    font-weight: 850;
}

.schedule-month-panel .actions .schedule-export-button .icon {
    width: 17px;
    height: 17px;
}

.schedule-month-panel .actions .schedule-export-button:hover {
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.3);
}

.schedule-month-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.schedule-month-stats div {
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid rgba(219, 234, 254, 0.95);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.72);
}

.schedule-month-stats strong,
.schedule-month-stats span {
    display: block;
}

.schedule-month-stats strong {
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
}

.schedule-month-stats span {
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.schedule-month-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 8px;
    background: #e2e8f0;
    gap: 1px;
}

.month-weekday {
    padding: 11px 10px;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.month-day {
    min-width: 0;
    min-height: 148px;
    background: #ffffff;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.month-day:hover {
    background: #f8fbff;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.month-day.is-muted {
    background: #f8fafc;
}

.month-day.is-muted .month-day-link {
    opacity: 0.48;
}

.month-day.is-today {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.48);
}

.month-day.has-shifts {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.month-day-link {
    display: flex;
    min-height: 148px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    flex-direction: column;
    gap: 8px;
}

.month-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.month-day-number {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: #0f172a;
    background: #eff6ff;
    font-size: 13px;
    font-weight: 900;
}

.month-day.is-today .month-day-number {
    color: #ffffff;
    background: #2563eb;
}

.month-day-count {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-shift-list {
    display: grid;
    gap: 6px;
}

.month-shift {
    overflow: hidden;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--position-color, #2563eb) 28%, #ffffff);
    border-radius: 8px;
    background: color-mix(in srgb, var(--position-color, #2563eb) 10%, #ffffff);
    box-shadow: inset 3px 0 0 var(--position-color, #2563eb);
}

.month-shift strong,
.month-shift span,
.month-shift small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.month-shift strong {
    color: color-mix(in srgb, var(--position-color, #2563eb) 72%, #0f172a);
    font-size: 11px;
    font-weight: 900;
}

.month-shift span {
    margin-top: 2px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 850;
}

.month-shift small {
    margin-top: 1px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.month-shift-more,
.month-day-footer,
.month-day-empty {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.month-shift-more {
    padding: 2px 1px;
}

.month-day-footer {
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.month-day-empty {
    display: flex;
    flex: 1;
    align-items: center;
    color: #94a3b8;
}

@media (max-width: 1180px) {
    .schedule-month-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-month-calendar {
        grid-template-columns: repeat(7, minmax(126px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 720px) {
    .module-screen .schedule-date-picker-modal > .modal-header,
    .module-screen .schedule-presets-modal > .modal-header,
    .schedule-date-picker-body,
    .schedule-presets-form-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .module-screen .schedule-date-picker-modal > .modal-footer,
    .module-screen .schedule-presets-modal form > .modal-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .module-screen .schedule-date-picker-modal > .modal-footer .button,
    .module-screen .schedule-presets-modal form > .modal-footer .button {
        flex: 1;
        min-width: 0;
    }

    .schedule-break-field .field-hint {
        white-space: normal;
    }

    .schedule-workspace-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-visibility-button {
        justify-content: center;
    }

    .schedule-position-summary-header,
    .schedule-calendar-layout-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-position-summary-header > span {
        align-self: flex-start;
    }

    .schedule-calendar-layout-switcher {
        width: 100%;
    }

    .schedule-calendar-layout-switcher button {
        flex: 1;
        justify-content: center;
    }

    .schedule-preset-row {
        grid-template-columns: 28px repeat(2, minmax(0, 1fr));
    }

    .schedule-preset-row-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }

    .module-screen .schedule-month-calendar.is-list-view .month-day-link {
        grid-template-columns: 1fr;
    }

    .module-screen .schedule-month-calendar.is-list-view .month-day-header {
        display: flex;
        justify-content: space-between;
    }

    .module-screen .schedule-month-calendar.is-list-view .month-day-count {
        padding-left: 0;
    }

    .schedule-month-panel {
        padding: 18px;
    }

    .schedule-month-panel .panel-header {
        display: grid;
    }

    .schedule-month-panel .actions {
        justify-content: stretch;
    }

    .schedule-month-panel .actions .button {
        flex: 1 1 auto;
    }

    .schedule-month-stats {
        grid-template-columns: 1fr;
    }
}

.employee-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 22px;
}

.employee-overview {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(0, 1.4fr);
    gap: 22px;
    margin-bottom: 22px;
}

.employee-status {
    padding: 28px;
}

.employee-status-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 28px;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 48%),
        #ffffff;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.employee-status-card::after {
    content: "";
    position: absolute;
    right: -64px;
    bottom: -76px;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
}

.employee-status-card .panel-header,
.employee-status-card .status-clock {
    position: relative;
    z-index: 1;
}

.employee-kpis {
    align-self: stretch;
    margin-bottom: 0;
}

.employee-kpis.report-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-kpis .report-kpi {
    display: grid;
    align-content: space-between;
    min-height: 150px;
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.status-clock {
    display: grid;
    gap: 4px;
    margin: 34px 0 0;
}

.status-clock strong {
    color: var(--ink);
    font-size: 58px;
    line-height: 1;
}

.status-clock span,
.employee-note {
    color: var(--muted);
}

.employee-note {
    margin: 0;
}

.employee-panel .timeline {
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
}

.employee-panel .timeline-item {
    padding: 18px 0;
}

.employee-panel .timeline-dot {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.employee-week-panel {
    padding: 20px;
    border-color: #dbe4ef;
    background: #ffffff;
    overflow: hidden;
}

.employee-week-panel .panel-header {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.employee-week-panel .actions {
    gap: 8px;
}

.employee-week-panel .actions .button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}

.employee-week-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 12px;
}

.employee-week-day {
    display: grid;
    align-content: start;
    min-height: 340px;
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fbfdff;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.employee-week-day.is-today {
    border-color: rgba(37, 99, 235, 0.72);
    background: #f8fbff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.employee-week-day header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 3px 2px;
}

.employee-week-day header span {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
}

.employee-week-day header strong {
    color: #0f172a;
    font-size: 17px;
}

.employee-shift-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.employee-shift-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.employee-shift-card strong,
.employee-shift-card span,
.employee-shift-card small {
    display: block;
}

.employee-shift-card strong {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
}

.employee-shift-card span,
.employee-shift-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.employee-shift-time {
    width: max-content;
    margin-top: 0;
    padding: 3px 9px;
    border-radius: 999px;
    color: #1d4ed8 !important;
    background: #eff6ff;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.employee-shift-card .badge {
    width: max-content;
}

.employee-week-empty {
    display: grid;
    min-height: 108px;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.58);
}

.employee-week-day footer {
    margin-top: auto;
    padding: 11px 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #1d4ed8;
    background: #ffffff;
    font-size: 12px;
    text-align: center;
    font-weight: 650;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
}

.hours-help {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.hours-help article {
    padding: 14px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    background: #ffffff;
}

.hours-help strong,
.hours-help span {
    display: block;
}

.hours-help strong {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 14px;
}

.hours-help span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.hours-help b {
    color: var(--ink);
}

.status-help-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.status-help-list li {
    display: grid;
    grid-template-columns: minmax(105px, max-content) minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.status-help-list span {
    display: block;
}

.location-assignment-count {
    gap: 5px;
}

.location-assignment-count strong {
    color: inherit;
    font-size: 13px;
}

.employee-premium-screen {
    display: grid;
    gap: 22px;
}

.employee-page-hero {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 150px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    border: 1px solid rgba(147, 197, 253, 0.42);
    border-radius: 16px;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 15%, rgba(56, 189, 248, 0.34), transparent 31%),
        linear-gradient(135deg, #172554 0%, #1d4ed8 60%, #0284c7 100%);
    box-shadow: 0 24px 58px rgba(30, 64, 175, 0.2);
}

.employee-page-hero::after {
    content: "";
    position: absolute;
    right: -65px;
    bottom: -120px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.employee-page-hero-copy,
.employee-page-hero-meta {
    position: relative;
    z-index: 1;
}

.employee-page-hero-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
}

.employee-page-hero-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.employee-page-hero-icon .icon {
    width: 26px;
    height: 26px;
}

.employee-page-hero .eyebrow,
.employee-page-hero h1,
.employee-page-hero p {
    color: inherit;
}

.employee-page-hero .eyebrow {
    margin-bottom: 5px;
    opacity: 0.72;
}

.employee-page-hero h1 {
    margin: 0;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.08;
}

.employee-page-hero-copy > div > p:last-child {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.76);
}

.employee-page-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.employee-page-hero-meta span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.employee-page-hero-meta .icon {
    width: 15px;
    height: 15px;
}

.employee-empty-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
}

.employee-empty-profile > span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.1);
}

.employee-empty-profile p {
    margin: 4px 0 0;
}

.employee-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.employee-quick-links > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    color: inherit;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.employee-quick-links > a:hover {
    border-color: #93c5fd;
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.employee-quick-links > a > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #eff6ff;
}

.employee-quick-links strong,
.employee-quick-links small {
    display: block;
}

.employee-quick-links strong {
    color: #0f172a;
    font-size: 14px;
}

.employee-quick-links small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.employee-quick-links > a > .icon {
    width: 17px;
    color: #94a3b8;
}

.text-link {
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.employee-calendar-panel,
.employee-data-card {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.07);
}

.employee-calendar-panel {
    padding: 24px;
}

.employee-section-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
}

.employee-section-toolbar .eyebrow {
    margin-bottom: 5px;
}

.employee-calendar-controls {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.employee-location-filter {
    display: flex;
    align-items: center;
    gap: 9px;
}

.employee-location-filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.employee-location-filter label .icon {
    width: 15px;
    height: 15px;
    color: #2563eb;
}

.employee-location-filter select {
    min-width: 190px;
    min-height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    background-color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
}

.employee-view-switcher {
    display: inline-flex;
    padding: 3px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fafc;
}

.employee-view-switcher a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.employee-view-switcher a.is-active {
    color: #ffffff;
    background: #2563eb;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.24);
}

.employee-view-switcher .icon {
    width: 14px;
    height: 14px;
}

.employee-calendar-controls .actions,
.employee-hours-toolbar .actions {
    display: flex;
    gap: 7px;
}

.employee-calendar-controls .button,
.employee-hours-toolbar .button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
}

.button.icon-only {
    width: 36px;
    padding: 0;
}

.employee-calendar-stats,
.employee-hours-summary {
    display: grid;
    gap: 10px;
}

.employee-calendar-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.employee-calendar-stats article,
.employee-hours-summary article {
    padding: 14px 16px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: inset 3px 0 0 #3b82f6;
}

.employee-calendar-stats span,
.employee-calendar-stats strong,
.employee-hours-summary span,
.employee-hours-summary strong,
.employee-hours-summary small {
    display: block;
}

.employee-calendar-stats span,
.employee-hours-summary span,
.employee-hours-summary small {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.employee-calendar-stats strong,
.employee-hours-summary strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: 21px;
}

.employee-month-calendar .month-day {
    min-height: 138px;
}

.employee-month-calendar .month-day-link {
    min-height: 138px;
}

.employee-month-calendar .month-shift span {
    font-size: 10px;
}

.employee-week-calendar {
    grid-template-columns: repeat(7, minmax(175px, 1fr));
}

.employee-week-day {
    min-height: 300px;
}

.employee-shift-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--position-color, #2563eb) 25%, #ffffff);
    background: linear-gradient(135deg, color-mix(in srgb, var(--position-color, #2563eb) 8%, #ffffff), #ffffff);
}

.employee-shift-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--position-color, #2563eb);
}

.employee-leave-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
    gap: 18px;
    align-items: stretch;
}

.employee-leave-form-panel {
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.panel-heading-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eff6ff;
}

.employee-leave-form {
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.employee-leave-form .form-actions {
    grid-column: 1 / -1;
}

.form-error-summary {
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    background: #fef2f2;
    font-size: 13px;
}

.form-error-summary ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.employee-leave-balance {
    display: flex;
    min-height: 100%;
    padding: 26px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(145deg, #0f766e, #0d9488 58%, #14b8a6);
    flex-direction: column;
    box-shadow: 0 22px 46px rgba(15, 118, 110, 0.2);
}

.employee-leave-balance .eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.employee-leave-balance > strong {
    margin-top: 24px;
    font-size: 58px;
    line-height: 1;
}

.employee-leave-balance > span {
    margin: 7px 0 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.employee-leave-balance > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    font-size: 13px;
}

.employee-leave-value {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.employee-leave-value small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 500;
}

.absence-workspace .absence-balances article > small {
    display: block;
    margin-top: 4px;
    color: #7a8aa2;
    font-size: 9px;
    line-height: 1.35;
}

.employee-data-card .table-toolbar,
.employee-hours-toolbar {
    padding: 22px 24px;
}

.employee-hours-toolbar {
    margin: 0;
}

.employee-hours-controls {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.employee-hours-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px 24px;
    background: #f8fafc;
}

.employee-hours-summary small {
    margin-top: 5px;
}

.employee-table-scroll {
    overflow-x: auto;
}

.employee-table-scroll .data-table {
    min-width: 820px;
}

.employee-hours-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.5;
}

.employee-hours-note .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #2563eb;
}

@media (max-width: 1120px) {
    .employee-page-hero,
    .employee-section-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-page-hero-meta,
    .employee-calendar-controls,
    .employee-hours-controls {
        justify-content: flex-start;
        justify-items: start;
    }

    .employee-leave-layout {
        grid-template-columns: 1fr;
    }

    .employee-leave-balance {
        min-height: 280px;
    }

    .employee-hours-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-month-calendar {
        grid-template-columns: repeat(7, minmax(125px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .employee-page-hero {
        padding: 22px 20px;
    }

    .employee-page-hero-copy {
        align-items: flex-start;
    }

    .employee-page-hero-icon {
        width: 44px;
        height: 44px;
    }

    .employee-quick-links,
    .employee-calendar-stats,
    .employee-hours-summary {
        grid-template-columns: 1fr;
    }

    .employee-calendar-panel {
        padding: 18px;
    }

    .employee-calendar-controls {
        width: 100%;
    }

    .employee-hours-controls,
    .employee-location-filter {
        width: 100%;
    }

    .employee-location-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-location-filter select {
        width: 100%;
    }

    .employee-view-switcher,
    .employee-calendar-controls .actions,
    .employee-hours-toolbar .actions {
        width: 100%;
    }

    .employee-view-switcher a,
    .employee-calendar-controls .actions .button,
    .employee-hours-toolbar .actions .button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .employee-leave-form-panel {
        padding: 20px;
    }

    .status-clock strong {
        font-size: 44px;
    }
}

.status-circle {
    display: grid;
    width: 176px;
    height: 176px;
    margin: 18px auto 28px;
    place-items: center;
    border: 13px solid #dbeafe;
    border-radius: 50%;
    color: var(--primary);
    background: #ffffff;
    font-size: 34px;
    font-weight: 750;
}

.rcp-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rcp-actions form,
.kiosk-actions form {
    display: contents;
}

.rcp-button {
    display: grid;
    width: 100%;
    min-height: 96px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-size: 18px;
    font-weight: 750;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.rcp-button:hover {
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px);
}

.rcp-button.break {
    color: #7c2d12;
    background: #ffedd5;
}

.rcp-button.out {
    background: #0f172a;
}

.rcp-button.missed {
    color: #991b1b;
    background: #fee2e2;
}

.kiosk-shell,
.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.18), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(37, 99, 235, 0.12), transparent 32%),
        var(--bg);
}

.auth-app-body {
    min-height: 100vh;
    color: var(--ink);
    background: #071226;
}

.auth-app-body .auth-shell {
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.22), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(37, 99, 235, 0.24), transparent 28%),
        linear-gradient(135deg, #071226, #123447 54%, #063b3c);
}

.auth-shell.wide {
    align-items: start;
}

.kiosk-card,
.auth-card {
    width: min(980px, 100%);
    padding: 30px;
}

.auth-card {
    width: min(560px, 100%);
    padding: 42px;
    border-color: rgba(226, 232, 240, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.auth-card.wide {
    width: min(980px, 100%);
}

.registration-card {
    width: min(860px, 100%);
}

.auth-brand {
    justify-content: center;
    margin-bottom: 30px;
}

.auth-logo {
    display: block;
    width: min(240px, 70%);
    height: auto;
}

.auth-header {
    display: grid;
    justify-items: center;
    margin-bottom: 22px;
    text-align: center;
}

.auth-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
}

.auth-header p {
    margin: 8px 0 0;
    color: var(--muted);
}

.auth-alert {
    margin-bottom: 16px;
}

.auth-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    background: #f0fdf4;
    font-weight: 700;
    text-align: center;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-form-link {
    justify-self: end;
    margin-top: -5px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    font-size: 18px;
}

.auth-footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    color: var(--muted);
}

.auth-footer a {
    color: var(--primary);
    font-weight: 700;
}

.auth-footer-secondary {
    margin-top: 10px;
    font-size: 13px;
}

.auth-panel-form {
    box-shadow: none;
}

.auth-panel-form .form-grid {
    gap: 14px;
}

.registration-check {
    margin-top: 16px;
}

.registration-footer {
    justify-content: center;
    margin-top: 20px;
}

.registration-footer .button {
    min-width: 180px;
    justify-content: center;
}

.registration-card {
    overflow: hidden;
    padding: 34px;
}

.registration-card .auth-brand {
    margin-bottom: 20px;
}

.registration-card .auth-logo {
    width: min(210px, 64%);
}

.registration-section {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e2eaf5;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.registration-section-heading {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 16px;
}

.registration-section-heading > span {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 850;
}

.registration-section-heading strong,
.registration-section-heading small {
    display: block;
}

.registration-section-heading strong {
    color: #172033;
    font-size: 14px;
}

.registration-section-heading small {
    margin-top: 2px;
    color: #718096;
    font-size: 11px;
}

.invoice-details-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.invoice-details-fields > .full {
    grid-column: 1 / -1;
}

.invoice-customer-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.invoice-customer-type legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.invoice-customer-type label {
    position: relative;
    cursor: pointer;
}

.invoice-customer-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.invoice-customer-type label > span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: center;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid #d8e3f0;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.invoice-customer-type label > span > .icon {
    grid-row: 1 / 3;
    width: 20px;
    height: 20px;
    color: #2563eb;
}

.invoice-customer-type strong,
.invoice-customer-type small {
    display: block;
}

.invoice-customer-type strong {
    color: #172033;
    font-size: 13px;
}

.invoice-customer-type small {
    color: #718096;
    font-size: 11px;
}

.invoice-customer-type input:checked + span {
    border-color: #60a5fa;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 8%);
}

.invoice-customer-type input:focus-visible + span {
    outline: 3px solid rgb(37 99 235 / 18%);
    outline-offset: 2px;
}

.registration-invoice-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    color: #166534;
    background: #f0fdf4;
}

.registration-invoice-note > .icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.registration-invoice-note strong,
.registration-invoice-note span {
    display: block;
}

.registration-invoice-note span {
    margin-top: 3px;
    color: #3f6550;
    font-size: 12px;
    line-height: 1.45;
}

.invoice-details-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #cfe0fa;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #f4f8ff);
}

.invoice-details-summary.needs-attention {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fffaf2, #fff7ed);
}

.invoice-details-summary-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: #2563eb;
    background: #eaf2ff;
}

.invoice-details-summary.needs-attention .invoice-details-summary-icon {
    color: #c2410c;
    background: #ffedd5;
}

.invoice-details-summary-heading {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.invoice-details-summary-heading h3 {
    margin: 2px 0 0;
    color: #172033;
    font-size: 17px;
}

.invoice-details-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.invoice-details-summary-grid small,
.invoice-details-summary-grid strong {
    display: block;
}

.invoice-details-summary-grid small {
    color: #718096;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.invoice-details-summary-grid strong {
    margin-top: 3px;
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
}

.invoice-details-summary-content > p {
    margin: 11px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.invoice-details-modal-body {
    display: grid;
    gap: 18px;
    padding-top: 18px;
}

.invoice-details-impact {
    margin-top: 0;
}


.kiosk-header {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.kiosk-title {
    margin: 0;
    font-size: 38px;
    line-height: 1.1;
}

.kiosk-top-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kiosk-clock {
    color: var(--primary);
    font-size: 32px;
    font-weight: 750;
}

.kiosk-form {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.kiosk-status-panel,
.correction-panel {
    margin-top: 18px;
}

.kiosk-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.rcp-app-body {
    min-height: 100vh;
    color: #ecfdf5;
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.22), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(37, 99, 235, 0.24), transparent 28%),
        linear-gradient(135deg, #06111f, #0c1729 48%, #082f2b);
}

.rcp-app {
    display: grid;
    min-height: 100vh;
    padding: 32px;
    align-content: center;
    gap: 28px;
    place-items: center;
}

.rcp-live-clock {
    padding: 12px 18px;
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 34px;
    line-height: 1;
}

.rcp-stage {
    display: grid;
    align-items: center;
    justify-items: center;
    width: min(980px, 100%);
    min-height: 0;
}

.rcp-panel {
    padding: 24px;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.rcp-panel-narrow {
    width: min(620px, 100%);
    margin: 0 auto;
}

.rcp-card-logo {
    display: block;
    width: min(220px, 72%);
    height: auto;
    margin: 0 auto 22px;
}

.rcp-setup-form,
.rcp-location-form,
.rcp-login-form {
    display: grid;
    gap: 14px;
}

.rcp-location-form {
    margin-top: 16px;
}

.rcp-message {
    min-height: 22px;
    margin: 14px 0 0;
    color: #1e40af;
    font-weight: 650;
    text-align: center;
}

.rcp-kiosk-grid {
    display: grid;
    grid-template-columns: minmax(360px, 560px);
    gap: 22px;
    align-items: center;
    justify-content: center;
    width: min(100%, 820px);
}

.rcp-kiosk-grid:has(.rcp-action-panel:not([hidden])) {
    grid-template-columns: minmax(420px, 620px);
}

.rcp-kiosk-grid:has(.rcp-action-panel:not([hidden])) .rcp-identity-panel {
    display: none;
}

.rcp-location-line {
    display: block;
    margin-bottom: 22px;
    text-align: center;
}

.rcp-location-line span,
.rcp-worker span,
.rcp-worker small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.rcp-worker strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
}

.text-button {
    border: 0;
    color: var(--primary-dark);
    background: transparent;
    font-weight: 750;
}

.rcp-primary-action {
    min-height: 64px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), #0f766e);
    font-size: 20px;
    font-weight: 650;
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.28);
}

.rcp-change-location {
    width: max-content;
    margin: -2px auto 0;
    border: 0;
    color: var(--primary-dark);
    background: transparent;
    font-size: 13px;
    font-weight: 750;
}

.rcp-action-panel {
    display: grid;
    align-content: start;
    gap: 22px;
    text-align: center;
}

.rcp-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rcp-action-grid.single-action {
    grid-template-columns: minmax(260px, 360px);
    justify-content: center;
}

.rcp-action-tile {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 18px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    font-size: 22px;
    font-weight: 650;
    text-align: center;
    box-shadow: 0 16px 36px rgba(22, 163, 74, 0.24);
}

.rcp-action-tile.break {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

.rcp-action-tile.out {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.rcp-success {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: rgba(6, 17, 31, 0.86);
    backdrop-filter: blur(8px);
}

.rcp-success div {
    display: grid;
    gap: 10px;
    max-width: 560px;
    padding: 34px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #0f766e);
    text-align: center;
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34);
}

.rcp-success strong {
    font-size: 34px;
}

.rcp-success span {
    color: #dcfce7;
    font-size: 18px;
}

.error-panel {
    border-color: #fecaca;
    color: #7f1d1d;
    background: #fef2f2;
}

.error-panel p {
    margin: 6px 0 0;
}

.empty-state {
    padding: 28px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: #ffffff;
    text-align: center;
}

.empty-state.compact {
    padding: 14px;
    text-align: left;
}

/* Feedback and feature requests */
.feedback-page-header {
    align-items: flex-start;
}

.feedback-error {
    margin-bottom: 18px;
}

.feedback-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.feedback-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 17px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, #ffffff, #f8fbff);
    box-shadow: var(--shadow);
}

.feedback-stat::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), #38bdf8);
    content: "";
}

.feedback-stat span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.feedback-stat strong {
    color: var(--ink);
    font-size: 27px;
}

.feedback-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
    margin-bottom: 30px;
}

.feedback-form-panel,
.feedback-filter-panel {
    padding: 22px;
}

.feedback-form-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: #eff6ff;
}

.feedback-form textarea {
    min-height: 150px;
}

.feedback-tips {
    padding: 22px;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    background: linear-gradient(155deg, #eff6ff, #ffffff);
    box-shadow: var(--shadow);
}

.feedback-tips h2 {
    margin: 0 0 18px;
    font-size: 17px;
}

.feedback-tips ol {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feedback-tips li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.feedback-tips li > span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.feedback-tips li div {
    display: grid;
    gap: 3px;
}

.feedback-tips small {
    color: var(--muted);
    line-height: 1.35;
}

.feedback-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
    gap: 12px;
    align-items: end;
}

.feedback-filter-actions {
    display: flex;
    gap: 8px;
}

.feedback-history {
    margin-top: 26px;
}

.feedback-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 14px;
}

.feedback-section-heading h2 {
    margin: 0;
    font-size: 21px;
}

.feedback-section-heading > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.feedback-list {
    display: grid;
    gap: 14px;
}

.feedback-ticket {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 22px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.feedback-ticket.is-new::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #f59e0b;
    content: "";
}

.feedback-ticket-main:last-child {
    grid-column: 1 / -1;
}

.feedback-ticket-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.feedback-ticket-id {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.feedback-ticket-date {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.feedback-ticket h3 {
    margin: 12px 0 7px;
    font-size: 18px;
}

.feedback-ticket-description {
    margin: 0;
    color: #334155;
    line-height: 1.6;
    white-space: pre-line;
}

.feedback-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 12px;
}

.feedback-ticket-meta a {
    color: var(--primary);
    font-weight: 700;
}

.feedback-admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: var(--radius-sm);
    background: #f8fbff;
}

.feedback-admin-form button {
    justify-self: start;
}

.feedback-response {
    display: flex;
    gap: 12px;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    background: #f0fdf4;
}

.feedback-response > span {
    color: #15803d;
}

.feedback-response p {
    margin: 5px 0;
    color: #166534;
    line-height: 1.5;
    white-space: pre-line;
}

.feedback-response small {
    color: #4b7d5c;
}

.feedback-history .empty-state p {
    margin: 7px 0 0;
}

@media (max-width: 1100px) {
    .feedback-layout,
    .feedback-ticket {
        grid-template-columns: 1fr;
    }

    .feedback-filters {
        grid-template-columns: 1fr 1fr;
    }

    .feedback-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .feedback-stats,
    .feedback-filters,
    .feedback-admin-form {
        grid-template-columns: 1fr;
    }

    .feedback-stat {
        min-height: 68px;
    }

    .feedback-filter-actions {
        flex-wrap: wrap;
    }

    .feedback-ticket-date {
        width: 100%;
        margin-left: 0;
    }
}

/* Premium feedback experience */
.feedback-screen {
    width: min(100%, 1480px);
    margin: 0 auto;
}

.feedback-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 54px;
    align-items: center;
    min-height: 310px;
    margin-bottom: 24px;
    padding: 44px 48px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 24px;
    color: #ffffff;
    background:
        radial-gradient(circle at 8% 8%, rgba(56, 189, 248, 0.25), transparent 30%),
        linear-gradient(125deg, #07162f 0%, #0b2450 48%, #123d82 100%);
    box-shadow: 0 28px 70px rgba(15, 45, 95, 0.2);
}

.feedback-hero::after {
    position: absolute;
    z-index: -1;
    right: 30%;
    bottom: -125px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 42px rgba(255, 255, 255, 0.025),
        0 0 0 88px rgba(255, 255, 255, 0.018);
    content: "";
}

.feedback-hero-orb {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    pointer-events: none;
}

.feedback-hero-orb-one {
    top: -90px;
    right: 12%;
    width: 210px;
    height: 210px;
    background: rgba(59, 130, 246, 0.23);
}

.feedback-hero-orb-two {
    right: -50px;
    bottom: -85px;
    width: 190px;
    height: 190px;
    background: rgba(45, 212, 191, 0.16);
}

.feedback-hero-copy {
    max-width: 760px;
}

.feedback-hero-kicker {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(147, 197, 253, 0.24);
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.07);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.feedback-hero-kicker .icon {
    width: 15px;
    height: 15px;
}

.feedback-hero h1 {
    max-width: 720px;
    margin: 18px 0 12px;
    color: #ffffff;
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.06;
}

.feedback-hero-copy > p {
    max-width: 690px;
    margin: 0;
    color: #cbdaf1;
    font-size: 15px;
    line-height: 1.7;
}

.feedback-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
    color: #dbeafe;
    font-size: 12px;
    font-weight: 650;
}

.feedback-hero-trust span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.feedback-hero-trust .icon {
    width: 16px;
    height: 16px;
    color: #67e8f9;
}

.feedback-hero-summary {
    padding: 20px;
    border: 1px solid rgba(191, 219, 254, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
}

.feedback-hero-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feedback-hero-summary-head i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.13);
}

.feedback-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.feedback-hero-metrics article {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(4, 18, 45, 0.2);
}

.feedback-hero-metrics span {
    overflow: hidden;
    color: #a9bddb;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-hero-metrics strong {
    color: #ffffff;
    font-size: 25px;
    font-weight: 750;
}

.feedback-hero-progress {
    overflow: hidden;
    height: 5px;
    margin-top: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
}

.feedback-hero-progress span {
    display: block;
    min-width: 8px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #34d399);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.55);
}

.feedback-hero-summary > small {
    display: block;
    margin-top: 10px;
    color: #a9bddb;
    font-size: 10px;
    line-height: 1.4;
}

.feedback-screen > .feedback-error {
    padding: 16px 18px;
    border-radius: 14px;
}

.feedback-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    margin-bottom: 34px;
}

.feedback-form-panel {
    overflow: hidden;
    padding: 28px;
    border-color: #dce6f4;
    border-radius: 20px;
    box-shadow: 0 20px 54px rgba(22, 48, 85, 0.08);
}

.feedback-form-panel .panel-header {
    align-items: flex-start;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e8eef6;
}

.feedback-step-label {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.feedback-form-panel .panel-title {
    font-size: 22px;
    letter-spacing: -0.02em;
}

.feedback-form-panel .panel-subtitle {
    max-width: 690px;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.5;
}

.feedback-form-icon {
    width: 48px;
    height: 48px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

.feedback-form-icon .icon {
    width: 21px;
    height: 21px;
}

.feedback-form {
    gap: 22px;
}

.feedback-form .field > label,
.feedback-field-heading label {
    margin-bottom: 9px;
    color: #1e293b;
    font-size: 12px;
    font-weight: 780;
}

.feedback-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.feedback-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    gap: 10px;
    align-items: center;
    min-height: 84px;
    margin: 0 !important;
    padding: 14px;
    border: 1px solid #dce5f1;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.feedback-type-card:hover {
    border-color: #93c5fd;
    background: #fbfdff;
    box-shadow: 0 12px 26px rgba(30, 64, 175, 0.08);
    transform: translateY(-2px);
}

.feedback-type-card:has(input:checked) {
    border-color: #60a5fa;
    background: linear-gradient(145deg, #f5f9ff, #eff6ff);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 12px 28px rgba(37, 99, 235, 0.1);
}

.feedback-type-card input,
.feedback-priority-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.feedback-type-card:focus-within {
    outline: 3px solid rgba(37, 99, 235, 0.14);
    outline-offset: 2px;
}

.feedback-type-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
}

.feedback-type-icon .icon {
    width: 19px;
    height: 19px;
}

.feedback-type-icon.is-bug {
    color: #e11d48;
    background: #fff1f2;
}

.feedback-type-icon.is-idea {
    color: #d97706;
    background: #fffbeb;
}

.feedback-type-icon.is-other {
    color: #2563eb;
    background: #eff6ff;
}

.feedback-type-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.feedback-type-copy strong {
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-type-copy small {
    color: #7b8ba3;
    font-size: 10px;
    font-weight: 550;
    line-height: 1.3;
}

.feedback-type-check {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: transparent;
    background: #ffffff;
    transition: 160ms ease;
}

.feedback-type-check .icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.feedback-type-card:has(input:checked) .feedback-type-check {
    border-color: var(--primary);
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.feedback-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.feedback-field-heading > span,
.feedback-optional {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 650;
}

.feedback-priority-picker {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding: 5px;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #f6f8fc;
}

.feedback-priority-picker label {
    position: relative;
    flex: 1 1 150px;
    margin: 0;
    cursor: pointer;
}

.feedback-priority-picker label > span {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    transition: 160ms ease;
}

.feedback-priority-picker label:hover > span {
    color: #334155;
    background: rgba(255, 255, 255, 0.72);
}

.feedback-priority-picker label:has(input:checked) > span {
    border-color: #dce5f1;
    color: #172033;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.08);
}

.feedback-priority-picker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.feedback-priority-picker i.is-low {
    background: #22c55e;
}

.feedback-priority-picker i.is-normal {
    background: #f59e0b;
}

.feedback-priority-picker i.is-high {
    background: #ef4444;
}

.feedback-input-wrap {
    position: relative;
}

.feedback-input-wrap > .icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 14px;
    width: 17px;
    height: 17px;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
}

.feedback-form .feedback-input-wrap input {
    min-height: 48px;
    padding-left: 42px;
}

.feedback-form input,
.feedback-form textarea {
    border-color: #dce5f1;
    border-radius: 11px;
    background: #fbfcfe;
}

.feedback-form input:hover,
.feedback-form textarea:hover {
    border-color: #b9c8dd;
    background: #ffffff;
}

.feedback-form textarea {
    min-height: 168px;
    padding: 14px 15px;
    line-height: 1.55;
}

.feedback-safe-hint {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    color: #718096;
}

.feedback-safe-hint .icon {
    width: 14px;
    height: 14px;
    color: #3b82f6;
}

.feedback-submit-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e8eef6;
}

.feedback-submit-row > span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #7b8ba3;
    font-size: 10px;
    font-weight: 650;
}

.feedback-submit-row > span .icon {
    width: 15px;
    height: 15px;
}

.feedback-submit {
    min-width: 190px;
    min-height: 48px;
    border-radius: 11px;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.feedback-submit .icon {
    width: 17px;
    height: 17px;
}

.feedback-side-column {
    display: grid;
    gap: 16px;
}

.feedback-assurance,
.feedback-tips {
    overflow: hidden;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(22, 48, 85, 0.08);
}

.feedback-assurance {
    position: relative;
    isolation: isolate;
    min-height: 255px;
    border: 1px solid #c7d9f6;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.25), transparent 42%),
        linear-gradient(145deg, #123567, #1d4f98);
}

.feedback-assurance::after {
    position: absolute;
    z-index: -1;
    right: -48px;
    bottom: -65px;
    width: 180px;
    height: 180px;
    border: 28px solid rgba(255, 255, 255, 0.045);
    border-radius: 50%;
    content: "";
}

.feedback-assurance-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: #bae6fd;
    background: rgba(255, 255, 255, 0.1);
}

.feedback-assurance-status {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #bfdbfe;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.feedback-assurance-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.13);
}

.feedback-assurance h2 {
    max-width: 250px;
    margin: 10px 0 8px;
    color: #ffffff;
    font-size: 21px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.feedback-assurance p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #c5d5ec;
    font-size: 11px;
    line-height: 1.6;
}

.feedback-tips {
    border: 1px solid #dce6f4;
    background: #ffffff;
}

.feedback-tips h2 {
    margin: 0 0 20px;
    color: #172033;
    font-size: 17px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.feedback-tips ol {
    gap: 18px;
}

.feedback-tips li {
    position: relative;
}

.feedback-tips li:not(:last-child)::after {
    position: absolute;
    top: 32px;
    left: 14px;
    width: 1px;
    height: 16px;
    background: #dbeafe;
    content: "";
}

.feedback-tips li > span {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.feedback-tips li strong {
    color: #263449;
    font-size: 11px;
}

.feedback-tips small {
    font-size: 10px;
}

.feedback-filter-panel {
    margin-bottom: 26px;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(22, 48, 85, 0.07);
}

.feedback-history {
    margin-top: 32px;
    padding-bottom: 20px;
}

.feedback-section-heading {
    margin-bottom: 16px;
    padding: 0 2px;
}

.feedback-section-heading h2 {
    color: #172033;
    font-size: 23px;
    letter-spacing: -0.025em;
}

.feedback-section-heading > span {
    padding: 7px 11px;
    border: 1px solid #dce5f1;
    border-radius: 999px;
    color: #64748b;
    background: #ffffff;
    font-size: 10px;
}

.feedback-ticket {
    padding: 22px;
    border-color: #dce6f4;
    border-radius: 18px;
    box-shadow: 0 15px 38px rgba(22, 48, 85, 0.065);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.feedback-ticket:hover {
    border-color: #c7d9f1;
    box-shadow: 0 20px 48px rgba(22, 48, 85, 0.1);
    transform: translateY(-1px);
}

.feedback-ticket.is-new::before {
    width: 5px;
    background: linear-gradient(180deg, #f59e0b, #f97316);
}

.feedback-history .empty-state {
    position: relative;
    overflow: hidden;
    min-height: 160px;
    padding: 46px 24px;
    border-color: #cddbeb;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0, rgba(219, 234, 254, 0.75), transparent 52%),
        #ffffff;
    box-shadow: 0 14px 36px rgba(22, 48, 85, 0.045);
}

.feedback-history .empty-state strong {
    color: #263449;
    font-size: 14px;
}

.feedback-history .empty-state p {
    color: #7b8ba3;
    font-size: 11px;
}

@media (max-width: 1220px) {
    .feedback-hero {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 30px;
        padding: 38px;
    }

    .feedback-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .feedback-type-grid {
        grid-template-columns: 1fr;
    }

    .feedback-type-card {
        min-height: 70px;
    }
}

@media (max-width: 980px) {
    .feedback-hero {
        grid-template-columns: 1fr;
    }

    .feedback-hero-summary {
        max-width: 560px;
    }

    .feedback-layout {
        grid-template-columns: 1fr;
    }

    .feedback-side-column {
        grid-template-columns: 1fr 1fr;
    }

    .feedback-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .feedback-hero {
        gap: 26px;
        min-height: 0;
        padding: 28px 22px;
        border-radius: 18px;
    }

    .feedback-hero h1 {
        font-size: 31px;
    }

    .feedback-hero-trust {
        gap: 10px;
    }

    .feedback-hero-metrics {
        gap: 5px;
    }

    .feedback-hero-metrics article {
        padding: 10px 7px;
    }

    .feedback-form-panel {
        padding: 20px;
        border-radius: 16px;
    }

    .feedback-form-icon {
        display: none;
    }

    .feedback-type-grid,
    .feedback-side-column {
        grid-template-columns: 1fr;
    }

    .feedback-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .feedback-submit {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .stat-grid,
    .presence-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid,
    .schedule-layout,
    .report-grid,
    .report-grid.lower-grid,
    .billing-grid,
    .employee-day-page,
    .employee-overview,
    .rcp-kiosk-grid,
    .employee-panel,
    .hours-help {
        grid-template-columns: 1fr;
    }

    .report-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-chart-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        height: auto;
    }

    .topbar,
    .page-header,
    .kiosk-header {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .search {
        max-width: none;
    }

    .topbar-actions,
    .kiosk-top-actions {
        flex-wrap: wrap;
    }

    .topbar-actions {
        justify-content: flex-start;
        justify-self: stretch;
    }

    .context-switcher,
    .account-chip {
        flex: 1 1 220px;
    }

    .rcp-app {
        padding: 22px;
    }

    .rcp-action-grid {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 22px;
    }

    .impersonation-bar {
        top: 68px;
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 10px 18px;
    }

    .impersonation-bar form {
        grid-column: 1 / -1;
    }

    .impersonation-stop-button {
        width: 100%;
    }

    .object-row,
    .object-row.admin-row,
    .day-delta-grid,
    .day-edit-grid,
    .break-row,
    .day-session-form,
    .kiosk-form,
    .form-grid,
    .report-filters,
    .table-filter-bar,
    .shift-edit-form,
    .kiosk-actions,
    .rcp-actions,
    .choice-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .schedule-note {
        grid-column: auto;
    }

    .context-switcher select {
        width: 100%;
        min-width: 0;
    }

    .list-toolbar-actions,
    .list-search {
        width: 100%;
    }

    .list-search input {
        width: 100%;
    }

    .table-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 640px) {

    .invoice-details-fields,
    .invoice-customer-type,
    .invoice-details-summary,
    .invoice-details-summary-grid {
        grid-template-columns: 1fr;
    }

    .invoice-details-fields > .full {
        grid-column: auto;
    }

    .invoice-details-summary-icon {
        display: none;
    }

    .invoice-details-summary > .button {
        width: 100%;
        justify-content: center;
    }

    .invoice-details-summary-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .registration-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .registration-footer .button {
        width: 100%;
    }

    .stat-grid,
    .report-kpis,
    .billing-meta,
    .modal-info-grid,
    .modal-status-list dl,
    .settings-grid,
    .settings-summary dl,
    .presence-grid,
    .presence-stat-grid {
        grid-template-columns: 1fr;
    }

    .presence-strip-header {
        align-items: stretch;
        flex-direction: column;
    }

    .content,
    .kiosk-shell,
    .auth-shell {
        padding: 18px;
    }

    .auth-card,
    .registration-card {
        padding: 24px 18px;
    }

    .page-title,
    .auth-header h1,
    .kiosk-title {
        font-size: 28px;
    }

    .table-card {
        overflow-x: auto;
    }

    .billing-location-card,
    .day-manager-alert,
    .day-manager > summary,
    .day-overview-line,
    .day-history-row,
    .compact-event-list article,
    .day-session-card-header,
    .day-session-timeline,
    .compact-payment-list article {
        grid-template-columns: 1fr;
    }

    .day-manager > summary,
    .day-manager-alert,
    .day-delete-form,
    .day-session-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .day-session-timeline em {
        justify-self: start;
    }

}

/* ── Sidebar submenu ── */
.nav-subnav,
.nav-subnav li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-subnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 4px 18px;
}

.nav-sublink {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: rgba(200, 218, 245, 0.75);
    text-decoration: none;
    white-space: nowrap;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.nav-sublink:hover,
.nav-sublink.is-active {
    color: #ffffff;
    background: rgba(37, 99, 235, 0.55);
    transform: translateX(2px);
}

.nav-sublink .nav-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* ── Settings save bar ── */
.settings-save-bar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding: 0 0 8px;
}

/* ── Notice variants ── */
.notice-error {
    border-color: #fca5a5;
    color: #7f1d1d;
    background: #fef2f2;
}


/* Admin company directory */
body.modal-is-open {
    overflow: hidden;
}

.company-list-search {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(130px, auto) minmax(170px, auto) auto auto;
    width: min(100%, 850px);
    min-width: 0;
}

.company-list-search input {
    width: 100%;
    min-width: 0;
}

.company-list-search select {
    min-width: 0;
    min-height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: #334155;
    background-color: #f8fbff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    outline: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.company-list-search select:focus {
    border-color: rgba(37, 99, 235, 0.62);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.admin-company-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.07), transparent 30%),
        #f8faff;
}

.admin-company-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #dbe7f6;
    border-radius: 20px;
    background: linear-gradient(155deg, #ffffff 0%, #ffffff 68%, #f6f9ff 100%);
    box-shadow: 0 14px 34px rgba(31, 52, 82, 0.07);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.admin-company-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #2563eb, #38bdf8 65%, #8b5cf6);
}

.admin-company-card:hover {
    border-color: #b8d1f5;
    box-shadow: 0 20px 42px rgba(31, 52, 82, 0.11);
    transform: translateY(-2px);
}

.admin-company-card-header {
    display: flex;
    gap: 14px;
    align-items: center;
}

.admin-company-avatar,
.company-modal-icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 15px;
    color: #1d4ed8;
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    font-size: 18px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.company-modal-icon .icon {
    width: 23px;
    height: 23px;
}

.company-modal-icon.is-plan {
    color: #6d28d9;
    border-color: #ddd6fe;
    background: linear-gradient(145deg, #f5f3ff, #ede9fe);
}

.company-modal-icon.is-danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: linear-gradient(145deg, #fff1f2, #fee2e2);
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.1);
}

.admin-company-identity {
    min-width: 0;
    flex: 1;
}

.admin-company-identity > div {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.admin-company-identity h3 {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-company-identity .badge {
    flex: 0 0 auto;
}

.admin-company-identity p {
    overflow: hidden;
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-company-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.admin-company-metrics > div {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 92px;
    padding: 13px;
    border: 1px solid #e3eaf4;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.82);
}

.admin-company-metrics > div > span {
    position: absolute;
    top: 11px;
    right: 11px;
    color: #93a4ba;
}

.admin-company-metrics .icon {
    width: 17px;
    height: 17px;
}

.admin-company-metrics small {
    align-self: end;
    padding-right: 20px;
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    text-transform: uppercase;
}

.admin-company-metrics strong {
    margin-top: 5px;
    color: #172033;
    font-size: 17px;
    line-height: 1.2;
}

.admin-company-seat-usage {
    display: grid;
    gap: 7px;
}

.admin-company-seat-usage > div {
    display: flex;
    justify-content: space-between;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.admin-company-seat-usage > div strong {
    color: #1d4ed8;
}

.admin-company-seat-usage > i {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #e7eef8;
}

.admin-company-seat-usage > i span {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.admin-company-seat-usage > small {
    color: #718096;
    font-size: 11px;
}

.admin-company-seat-usage.is-location-billing {
    padding: 13px 14px;
    border: 1px solid #dbe7f6;
    border-radius: 13px;
    background: linear-gradient(135deg, #f8fbff, #f3f7ff);
}

.admin-company-seat-usage.is-location-billing > div strong {
    padding: 3px 8px;
    border-radius: 999px;
    background: #e6efff;
}

.admin-company-details {
    display: grid;
    grid-template-columns: minmax(105px, 1.35fr) minmax(110px, 1.25fr) minmax(50px, .55fr) minmax(84px, .8fr);
    margin: 0;
    padding: 14px 0;
    border-block: 1px solid #e8eef6;
}

.admin-company-details > div {
    min-width: 0;
    padding: 0 13px;
    border-right: 1px solid #e8eef6;
}

.admin-company-details > div:first-child {
    padding-left: 0;
}

.admin-company-details > div:last-child {
    padding-right: 0;
    border-right: 0;
}

.admin-company-details dt {
    color: #8a99ad;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-company-details dd {
    overflow: hidden;
    margin: 5px 0 0;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-company-actions form {
    margin-left: auto;
}

.admin-company-actions .button {
    min-height: 38px;
    padding-inline: 12px;
    border-radius: 10px;
    font-size: 12px;
}

.admin-company-empty {
    display: flex;
    grid-column: 1 / -1;
    gap: 14px;
    align-items: center;
    min-height: 170px;
    padding: 28px;
    border: 1px dashed #bfd2eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
}

.admin-company-empty > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: #2563eb;
    background: #eaf2ff;
}

.admin-company-empty div {
    flex: 1;
}

.admin-company-empty strong,
.admin-company-empty p {
    display: block;
}

.admin-company-empty p {
    margin: 5px 0 0;
    color: #64748b;
}

.company-create-modal {
    width: min(900px, 100%);
    height: auto;
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
}

.company-create-modal > .company-modal-header {
    flex: 0 0 auto;
    padding: 24px 24px 18px;
}

.company-plan-modal {
    width: min(790px, 100%);
    height: min(820px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
}

.company-plan-modal > .company-modal-header {
    flex: 0 0 auto;
    padding: 24px 24px 18px;
}

.company-modal-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6edf6;
}

.company-modal-header .panel-title {
    margin: 2px 0 4px;
    font-size: 24px;
}

.company-create-form,
.company-plan-form {
    gap: 16px;
}

.company-create-form {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 0;
    overflow: hidden;
    max-height: calc(100dvh - 155px);
}

.company-create-scroll {
    min-height: 0;
    padding: 18px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.company-create-scroll > .form-grid > .full {
    grid-column: 1 / -1;
}

.company-partner-modal {
    width: min(650px, 100%);
    height: auto;
}

.company-partner-form {
    display: grid;
    gap: 0;
}

.company-partner-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(210px, .8fr);
    gap: 14px;
    padding: 20px 24px 22px;
}

.company-partner-fields .field > span {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.company-partner-remove {
    padding: 0 24px 20px;
}

.company-partner-remove .button {
    width: 100%;
}

.company-plan-form {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.company-plan-scroll {
    min-height: 0;
    padding: 0 24px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.company-delete-modal {
    width: min(680px, 100%);
    height: auto;
}

.company-delete-body {
    display: grid;
    gap: 18px;
    padding-top: 20px;
}

.company-delete-warning {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 15px 16px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    color: #991b1b;
    background: #fff7f7;
}

.company-delete-warning > .icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.company-delete-warning p {
    margin: 4px 0 0;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.55;
}

.company-delete-confirmation {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.company-delete-confirmation input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #dc2626;
}

.company-form-section {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid #edf1f7;
}

.company-form-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.company-form-section > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 850;
}

.company-form-section strong,
.company-form-section small {
    display: block;
}

.company-form-section strong {
    color: #172033;
    font-size: 14px;
}

.company-form-section small {
    margin-top: 2px;
    color: #718096;
    font-size: 11px;
}

.company-create-note,
.company-plan-impact {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #cfe0fa;
    border-radius: 14px;
    color: #1e429f;
    background: #f3f8ff;
}

.company-create-note > .icon,
.company-plan-impact > .icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
}

.company-create-note strong,
.company-create-note small {
    display: block;
}

.company-create-note small {
    margin-top: 3px;
    color: #516985;
    line-height: 1.45;
}

.company-modal-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
    padding: 15px 24px 18px;
    border-top: 1px solid #e8eef6;
    background: #ffffff;
    box-shadow: 0 -12px 28px rgb(15 23 42 / 7%);
}

.company-plan-current {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    flex: 0 0 auto;
    margin: 18px 24px;
    padding: 16px 18px;
    border: 1px solid #e1e9f4;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #f5f3ff);
}

.company-plan-current > div:last-child {
    text-align: right;
}

.company-plan-current small,
.company-plan-current strong,
.company-plan-current span {
    display: block;
}

.company-plan-current small {
    color: #718096;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.company-plan-current strong {
    margin-top: 3px;
    color: #172033;
    font-size: 16px;
}

.company-plan-current span {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.company-plan-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.company-billing-unit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.company-billing-unit legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.company-billing-unit label {
    position: relative;
    cursor: pointer;
}

.company-billing-unit input {
    position: absolute;
    opacity: 0;
}

.company-billing-unit label > span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid #dce6f3;
    border-radius: 14px;
    background: #fbfdff;
}

.company-billing-unit label > span > .icon {
    grid-row: 1 / 3;
    width: 20px;
    height: 20px;
    color: #2563eb;
}

.company-billing-unit label strong,
.company-billing-unit label small {
    display: block;
}

.company-billing-unit label small {
    color: #718096;
    font-size: 11px;
    line-height: 1.4;
}

.company-billing-unit label:has(input:checked) > span {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px #dbeafe;
    background: #f5f9ff;
}

.admin-company-seat-usage.is-location-billing,
.seat-usage-panel.is-location-billing {
    border-color: #bfdbfe;
    background: #f0f7ff;
}

.seat-billing-actions-grid.is-single,
.seat-billing-history-grid.is-single {
    grid-template-columns: 1fr;
}

.company-input-suffix {
    position: relative;
}

.company-input-suffix input {
    padding-right: 78px;
}

.company-input-suffix > span {
    position: absolute;
    top: 50%;
    right: 11px;
    color: #718096;
    font-size: 11px;
    font-weight: 750;
    pointer-events: none;
    transform: translateY(-50%);
}

.company-plan-vat-toggle {
    display: flex;
    grid-column: 1 / -1;
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid #dce6f3;
    border-radius: 14px;
    background: #fbfdff;
    cursor: pointer;
}

.company-plan-vat-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.company-plan-vat-toggle .premium-selection-check {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    color: transparent;
    background: #ffffff;
}

.company-plan-vat-toggle:has(input:checked) {
    border-color: #93c5fd;
    background: #f2f7ff;
}

.company-plan-vat-toggle:has(input:checked) .premium-selection-check {
    color: #ffffff;
    border-color: #2563eb;
    background: #2563eb;
}

.company-plan-vat-toggle strong,
.company-plan-vat-toggle small {
    display: block;
}

.company-plan-vat-toggle strong {
    color: #172033;
    font-size: 13px;
}

.company-plan-vat-toggle small {
    margin-top: 2px;
    color: #718096;
    font-size: 11px;
}

.company-plan-preview {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #d9e5f5;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.company-plan-preview > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eaf2ff;
}

.company-plan-preview small,
.company-plan-preview strong,
.company-plan-preview p {
    display: block;
}

.company-plan-preview small {
    color: #718096;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.company-plan-preview strong {
    margin-top: 2px;
    color: #172033;
    font-size: 17px;
}

.company-plan-preview p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 11px;
}

.company-plan-preview em {
    padding: 6px 9px;
    border-radius: 999px;
    color: #64748b;
    background: #eef2f7;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.company-plan-preview em.is-changed {
    color: #1d4ed8;
    background: #dbeafe;
}

.company-plan-impact {
    margin-top: 12px;
    color: #744210;
    border-color: #f6d98d;
    background: #fffbeb;
}

.company-plan-impact strong {
    color: #713f12;
}

.company-plan-impact p {
    margin: 4px 0 0;
    color: #765a2b;
    font-size: 12px;
    line-height: 1.5;
}

.admin-user-company-filter {
    display: flex;
    gap: 9px;
    align-items: end;
}

.admin-user-company-filter > label:first-child {
    display: grid;
    gap: 5px;
}

.admin-user-company-filter > label:first-child > span {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-user-company-filter select {
    min-width: 220px;
    min-height: 40px;
    padding: 0 36px 0 11px;
    border: 1px solid #d8e1ee;
    border-radius: 8px;
    color: #172033;
    background: #ffffff;
    font-weight: 700;
}

.time-event-source {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 32px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #dce6f2;
    border-radius: 999px;
    color: #334155;
    background: #f8fafc;
    white-space: nowrap;
}

.time-event-source i {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    color: #2563eb;
    background: #e7f0ff;
}

.time-event-source i .icon {
    width: 13px;
    height: 13px;
}

.time-event-source strong {
    font-size: 11px;
}

.time-event-source.is-rfid i {
    color: #7c3aed;
    background: #f1eafe;
}

.time-event-source.is-qr i {
    color: #047857;
    background: #dcfce7;
}

.time-event-source.is-manual i {
    color: #b45309;
    background: #fef3c7;
}

@media (max-width: 1180px) {
    .admin-company-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-company-filter {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-user-company-filter .list-search {
        flex: 1;
    }
}

@media (max-width: 720px) {
    .admin-company-grid {
        gap: 12px;
        padding: 12px;
    }

    .admin-company-card {
        padding: 17px;
        border-radius: 16px;
    }

    .admin-company-metrics {
        grid-template-columns: 1fr;
    }

    .admin-company-metrics > div {
        min-height: 70px;
    }

    .admin-company-details,
    .company-plan-fields,
    .company-plan-current {
        grid-template-columns: 1fr;
    }

    .company-billing-unit {
        grid-template-columns: 1fr;
    }

    .admin-company-details > div {
        padding: 9px 0;
        border-right: 0;
        border-bottom: 1px solid #e8eef6;
    }

    .admin-company-details > div:last-child {
        border-bottom: 0;
    }

    .admin-company-actions,
    .admin-company-actions form,
    .admin-company-actions .button,
    .company-modal-actions .button {
        width: 100%;
    }

    .company-modal-header {
        grid-template-columns: auto 1fr;
    }

    .company-modal-header > .icon-button {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .company-create-form {
        grid-template-columns: 1fr;
    }

    .company-plan-current > div:last-child {
        text-align: left;
    }

    .company-plan-preview {
        grid-template-columns: auto 1fr;
    }

    .company-plan-preview em {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .admin-user-company-filter > label,
    .admin-user-company-filter select,
    .admin-user-company-filter .list-search,
    .admin-user-company-filter .list-search input,
    .admin-user-company-filter .button,
    .company-list-search,
    .company-list-search input {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 980px) {
    .object-row.admin-row {
        grid-template-areas:
            "avatar identity"
            "status status"
            "usage usage"
            "actions actions";
        grid-template-columns: 44px minmax(0, 1fr);
    }
}