@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {
    color-scheme: dark;
    --bg-main: #14171a;
    --bg-panel: #20252a;
    --ink: #f3f5f1;
    --muted: #aeb8b2;
    --line: #394149;
    --accent: #ff795c;
    --accent-soft: #4d2d27;
    --accent-ink: #1d1f20;
    --ok: #4ed18c;
    --bad: #ff7179;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-main: #eef2f5;
    --bg-panel: #ffffff;
    --ink: #17212b;
    --muted: #667684;
    --line: #d7e0e7;
    --accent: #e75f45;
    --accent-soft: #ffe1da;
    --accent-ink: #ffffff;
    --ok: #22865c;
    --bad: #d44d57;
    --shadow: 0 14px 34px rgba(28, 45, 60, 0.13);
}

* {
    box-sizing: border-box;
}

.watermark-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    pointer-events: none;
    background-repeat: repeat;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 82% 6%, rgba(255, 121, 92, 0.16) 0, transparent 30%),
        radial-gradient(circle at 8% 90%, rgba(65, 156, 180, 0.14) 0, transparent 32%),
        var(--bg-main);
}

dialog[open] {
    position: fixed;
    inset: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    margin: auto;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 80% 5%, #352924 0, transparent 28%),
        radial-gradient(circle at 10% 90%, #173539 0, transparent 30%),
        var(--bg-main);
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.login-wrap {
    width: min(100%, 420px);
}

.login-theme-switch {
    margin: 0 0 12px;
}

.login-panel {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
    box-shadow: var(--shadow);
}

.login-logo {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
}

.login-logo img,
.brand-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.login-form {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.login-form label {
    color: var(--muted);
    font-size: 13px;
}

.login-form input,
.login-form button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 11px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.login-form button {
    margin-top: 6px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    cursor: pointer;
}

.login-panel > .alert {
    margin-top: 20px;
    margin-bottom: 0;
}

.login-panel > .alert + .login-form {
    margin-top: 18px;
}

.pin-modal-backdrop {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(8, 11, 13, 0.76);
}

.pin-modal {
    box-sizing: border-box;
    width: min(calc(100vw - 32px), 380px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
    box-shadow: var(--shadow);
}

.pin-modal h2,
.pin-modal p {
    margin: 0;
}

.pin-modal h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
}

.pin-modal h2 + p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.pin-modal .login-form {
    gap: 11px;
    margin-top: 24px;
}

.pin-modal .login-form label + input {
    margin-top: -4px;
}

.pin-modal .login-form input,
.pin-modal .login-form button {
    box-sizing: border-box;
    width: 100%;
}

.pin-submit-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}
.pin-modal .login-form.is-submitting .pin-submit-loading { display: flex; }
.pin-submit-loading i { animation: pin-submit-spin .8s linear infinite; }

@keyframes pin-submit-spin {
    to { transform: rotate(360deg); }
}

.pin-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 2px;
}

.pin-numpad-key {
    margin-top: 0;
    border-color: var(--line);
    background: #252c32;
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.pin-numpad-key:hover,
.pin-numpad-key:focus {
    border-color: #5aa4ff;
    outline: none;
    background: #2e5685;
    color: #fff;
}

.pin-numpad-key:active {
    background: #203a5b;
}

.pin-numpad-key:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.pin-numpad-clear,
.pin-numpad-backspace {
    font-size: 15px;
    color: var(--muted);
}

.pin-modal-alert {
    margin-top: 18px;
    margin-bottom: 0;
}

.has-global-toast [data-login-message] .alert,
.has-global-toast [data-pin-message] .alert {
    display: none;
}

.pin-modal input[type="password"] {
    letter-spacing: 8px;
    text-align: center;
    font-size: 20px;
}

.pin-cancel-form {
    margin-top: 18px;
    text-align: center;
}

.pin-cancel-form button {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

@media (max-width: 480px) {
    .pin-modal-backdrop { padding: 16px; }
    .pin-modal { width: 100%; max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; }
    .pin-modal input[type="password"] { letter-spacing: 6px; }
}

.app-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    transition: grid-template-columns 0.25s ease;
}

.app-shell.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--line);
    background: rgba(24, 28, 32, 0.92);
    backdrop-filter: blur(6px);
    padding: 20px;
    overflow-y: auto;
    transition: opacity 0.2s ease, padding 0.25s ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-hidden .sidebar {
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
}

.brand {
    padding: 0;
    margin-bottom: 20px;
    background: transparent;
}

.brand h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
}

.brand p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #b9c4cc;
}

.user-session {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid #3b4650;
    border-radius: 8px;
    background: linear-gradient(135deg, #202931 0%, #182027 100%);
    box-shadow: inset 3px 0 0 #58baff;
}

.user-session-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-session-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    flex-basis: 42px;
    overflow: hidden;
    border: 1px solid #6ac4ff;
    border-radius: 50%;
    background: #163143;
    color: #8bd4ff;
    font-size: 21px;
}

.user-session-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.user-session-copy strong {
    overflow: hidden;
    color: #f2f7fa;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-session-copy span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-session-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-session-role {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    color: #8bd4ff;
    font-size: 11px;
    font-weight: 700;
}

.user-session-role i {
    font-size: 12px;
}

.user-session a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ff9d90;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.user-session a:hover { color: #ff6f5c; }

.user-session-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.user-session-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-session-edit {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #3b4650;
    border-radius: 6px;
    background: #202931;
    color: #cfd8dd;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.user-session-actions .theme-switch-toggle {
    flex: 0 0 auto;
}

.user-session-edit:hover { border-color: #58baff; background: #22445a; color: #e2f5ff; }

.user-session .user-session-edit { color: #cfd8dd; }
.user-session .user-session-edit:hover { color: #e2f5ff; }
.user-session .user-session-edit.active { border-color: #58baff; background: #22445a; color: #e2f5ff; }

.theme-switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -8px 0 20px;
    padding: 12px;
    border: 1px solid #3b4650;
    border-radius: 8px;
    background: #1c242b;
}

.theme-switch-copy {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    min-width: 0;
}

.theme-switch-copy > i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid #51616d;
    border-radius: 8px;
    color: #ffd08a;
    background: #2b3136;
}

.theme-switch-copy span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.theme-switch-copy small {
    grid-column: 2;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.theme-switch-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 54px;
    height: 30px;
    border: 1px solid #52616c;
    border-radius: 999px;
    background: #303940;
    transition: background 160ms ease, border-color 160ms ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #17212b;
    background: #ffcf7a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    transition: transform 180ms ease, background 160ms ease;
}

.theme-switch-toggle.is-dark .theme-switch-thumb {
    transform: translateX(24px);
    color: #eaf6ff;
    background: #58baff;
}

.theme-switch-toggle:hover .theme-switch-track,
.theme-switch-toggle:focus .theme-switch-track {
    border-color: var(--accent);
    outline: none;
}

.menu-item.sidebar-attendance-link {
    margin: -8px 0 20px;
    border-color: #7cf0c2;
    color: #063024;
    background: #4ed18c;
    box-shadow: 0 10px 20px rgba(78, 209, 140, 0.22);
    font-weight: 800;
}

.menu-item.sidebar-attendance-link > i { color: #063024; }
.menu-item.sidebar-attendance-link:hover { border-color: #a6ffd8; color: #05251c; background: #62e6a3; }
.menu-item.sidebar-attendance-link.active { border-color: #a6ffd8; color: #05251c; background: #62e6a3; }
.menu-item.sidebar-attendance-link.active > i { color: #05251c; }

.user-management-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent-ink);
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.user-management-new:hover { background: #ff8c74; }

.user-management-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(460px, 1.5fr);
    align-items: start;
    gap: 18px;
    min-width: 0;
}

.user-management-form-card,
.user-management-list-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.user-management-form-card { padding: 18px; }
.user-management-list-card { padding: 18px; }

.user-management-list-card,
.user-management-tab-panel,
.user-management-paginated-table {
    min-width: 0;
    max-width: 100%;
}

.user-management-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.user-management-heading-icon,
.user-management-row-avatar {
    display: grid;
    place-items: center;
    border: 1px solid #58baff;
    border-radius: 50%;
    background: #173142;
    color: #8bd4ff;
}

.user-management-heading-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 17px;
}

.user-management-heading h2 {
    margin: 0;
    font-size: 17px;
}

.user-management-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.user-management-form { display: grid; gap: 15px; }

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

.user-management-form label > span {
    display: block;
    margin-bottom: 6px;
    color: #b9cbd6;
    font-size: 12px;
}

.user-management-form input,
.user-management-form select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.user-management-form input:focus,
.user-management-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 121, 92, 0.16);
}

.user-management-form input::placeholder { color: #83909a; }

.user-management-form select {
    color-scheme: dark;
    cursor: pointer;
}

.user-management-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d5e6ee;
    cursor: pointer;
    font-size: 13px;
}

.user-management-status input {
    width: 17px;
    min-height: 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.user-management-status i { color: var(--accent); }

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

.user-management-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 13px;
    color: var(--accent-ink);
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.user-management-actions button:hover { background: #ff8c74; }

.user-management-actions .filter-reset {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 13px;
    color: var(--muted);
    background: #252c32;
    font: inherit;
    cursor: pointer;
}

.user-management-actions .filter-reset:hover { border-color: #73818b; color: var(--ink); }

.user-management-list-card .section-title { margin-bottom: 14px; }

.user-management-list {
    display: grid;
    gap: 8px;
}

.user-management-row {
    display: grid;
    grid-template-columns: 34px minmax(150px, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #34404a;
    border-radius: 7px;
    background: #20272d;
}

.user-management-row.is-disabled { opacity: 0.68; }

.user-management-row-avatar {
    width: 32px;
    height: 32px;
    border-color: #4b6070;
    background: #27313a;
    color: #b8d9ec;
    font-size: 14px;
}

.user-management-row-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.user-management-row-copy strong,
.user-management-row-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-management-row-copy strong { font-size: 13px; }
.user-management-row-copy span { color: var(--muted); font-size: 11px; }

.user-management-role,
.user-management-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.user-management-role {
    min-height: 26px;
    border: 1px solid #4a6678;
    border-radius: 999px;
    padding: 4px 10px;
    color: #a9d8f3;
    background: #26323b;
}
.user-management-state.is-enabled { color: #8de8be; }
.user-management-state.is-disabled { color: #d5b1aa; }

.user-management-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8bd4ff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.user-management-edit:hover { color: #d4efff; }

@media (max-width: 980px) {
    .user-management-layout { grid-template-columns: minmax(0, 1fr); }

    .user-management-table-tools {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
    }

    .user-management-tabs,
    .user-management-search,
    .user-management-search label {
        width: 100%;
    }

    .user-management-search {
        flex: 0 0 auto;
        align-items: center;
        justify-content: stretch;
    }

    .user-management-search label {
        height: 40px;
        min-height: 40px;
    }

    .user-management-paginated-table,
    .user-management-table-wrap {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .user-management-table-wrap {
        overflow-x: scroll;
        padding-bottom: 6px;
    }

    .user-management-table {
        width: max-content;
        min-width: 660px;
    }
}

@media (max-width: 620px) {
    .user-management-form-grid { grid-template-columns: 1fr; }

    .user-management-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .user-management-role,
    .user-management-state {
        grid-column: 2;
    }

    .user-management-edit {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
    }
}

.user-management-table-card {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.user-management-table-card .section-title {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.user-management-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.user-management-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.user-management-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--muted);
    background: #252c32;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.user-management-role.level-9 {
    border-color: #d8a64a;
    color: #ffd991;
    background: #3b2f1b;
}

.user-management-role.level-6 {
    border-color: #58baff;
    color: #a8dbff;
    background: #173142;
}

.user-management-role.level-7 {
    border-color: #8f7cff;
    color: #c8beff;
    background: #282448;
}

.user-management-role.level-2 {
    border-color: #4ed18c;
    color: #a7e8c2;
    background: #1f3b2f;
}

.user-management-role.level-3 {
    border-color: #2f8f7a;
    color: #7fe0cb;
    background: #123832;
}

.user-management-tabs button:hover { border-color: #687782; color: var(--ink); }

.user-management-tabs button.is-active {
    border-color: var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
}

.user-management-tabs button span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
}

.user-management-tabs button.is-active span {
    color: var(--accent-ink);
    background: rgba(29, 31, 32, 0.16);
}

.user-management-search {
    display: flex;
    flex: 1 1 280px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.user-management-search label {
    display: flex;
    align-items: center;
    width: min(100%, 360px);
    height: 40px;
    min-height: 40px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 11px;
    color: var(--muted);
    background: #252c32;
}

.user-management-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
}

.user-management-search input::placeholder { color: #83909a; }

.user-management-search:focus-within label {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 121, 92, 0.16);
}

.user-management-tab-panel[hidden] { display: none; }

.user-management-search-empty { margin-top: 12px; }

.user-management-table-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.user-management-table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
}

.user-management-table th {
    padding: 10px 18px;
    border-bottom: 1px solid #34404a;
    background: #252c32;
    color: #8fa3b0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.user-management-table td {
    padding: 12px 18px;
    border-bottom: 1px solid #2e3942;
    background: #1c2126;
    color: #c6d3da;
    font-size: 13px;
    vertical-align: middle;
}

.user-management-table tbody tr:last-child td { border-bottom: 0; }
.user-management-table tbody tr:hover td { background: #222b32; }
.user-management-table tbody tr.is-disabled td { background: #202326; }
.user-management-table tbody tr.is-disabled:hover td { background: #252a2e; }

.user-management-table .user-management-role-column { text-align: center; }

.user-management-table td.user-management-role-column { vertical-align: middle; }

.user-management-table-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.user-management-table-person > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid #4a6678;
    border-radius: 50%;
    background: #26323b;
    color: #a8dbf7;
    font-size: 13px;
    overflow: hidden;
}

.user-management-table-person > span img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.user-management-table-person div { display: grid; min-width: 0; gap: 2px; }
.user-management-table-person strong,
.user-management-table-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-management-table-person strong { color: #f1f7fa; font-size: 13px; }
.user-management-table-person small { color: var(--muted); font-size: 11px; }

.user-management-table-action { text-align: right; }

.user-management-table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.user-management-table-actions form { margin: 0; }

.user-management-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.user-management-toggle.is-disable {
    border-color: #73544d;
    background: #392927;
    color: #ffb4a7;
}

.user-management-toggle.is-disable:hover { border-color: #d87b6c; background: #50332e; }

.user-management-toggle.is-enable {
    border-color: #477263;
    background: #1f3932;
    color: #9ee0bd;
}

.user-management-toggle.is-enable:hover { border-color: #6dbf90; background: #294b3f; }

.user-management-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #3c647a;
    border-radius: 5px;
    background: #1a303e;
    color: #9ad9ff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.user-management-edit:hover { border-color: #58baff; background: #22445a; color: #e2f5ff; }

.user-management-edit-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #6a5a9c;
    border-radius: 5px;
    background: #241f38;
    color: #cbb8ff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.user-management-edit-profile:hover { border-color: #9d84ff; background: #322a4d; color: #e6dcff; }

.user-management-login-as {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #b98a3d;
    border-radius: 5px;
    background: #3a2c16;
    color: #ffcf8a;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.user-management-login-as:hover { border-color: #e0a94f; background: #4d3a1c; color: #ffe2b0; }

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #3d3020;
    border: 1px solid #bc8937;
    color: #f1e4c8;
}

.impersonation-banner i.bi-person-badge { color: #ffc15e; }

.impersonation-banner-return {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: #ffc15e;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.impersonation-banner-return:hover { background: #4d3a1c; }


.user-management-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.user-management-modal.is-open { display: flex; }

.user-management-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 12, 0.76);
    backdrop-filter: blur(4px);
}

.user-management-modal-panel {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #465867;
    border-radius: 8px;
    background: #1c242b;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

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

.user-management-modal-header .user-management-heading { margin-bottom: 0; }

.user-management-modal-close {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    padding: 0;
    border: 1px solid #45525c;
    border-radius: 5px;
    background: #242e35;
    color: #b7c5cc;
    cursor: pointer;
}

.user-management-modal-close:hover { color: #fff; border-color: #7e909c; }

.profile-edit-panel { width: min(720px, 100%); }

.profile-edit-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.profile-edit-fieldset:disabled {
    opacity: .6;
}

.profile-edit-fieldset:disabled input,
.profile-edit-fieldset:disabled select {
    cursor: not-allowed;
}

.request-form-fieldset {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.request-form-fieldset:disabled {
    opacity: .6;
}

.request-form-fieldset:disabled input,
.request-form-fieldset:disabled textarea,
.request-form-fieldset:disabled select,
.request-form-fieldset:disabled button {
    cursor: not-allowed;
}

.profile-edit-page-panel {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.profile-edit-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 4px;
}

.profile-edit-photo-field {
    display: grid;
    gap: 8px;
}

.profile-edit-photo-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.profile-edit-photo-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-edit-photo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    flex: 0 0 56px;
    overflow: hidden;
    border: 1px solid #3b4650;
    border-radius: 50%;
    background: #202931;
    color: #8bd4ff;
    font-size: 22px;
}

.profile-edit-photo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.profile-edit-photo-preview-ktp {
    border-radius: 6px;
}

.profile-edit-photo-row input[type="file"] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

.profile-edit-ktp-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 8px 10px;
    font-size: 12px;
}

.profile-edit-pin-section {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #313c44;
}

.profile-edit-pin-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-edit-pin-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.profile-edit-pin-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.profile-edit-pin-trigger {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #3b4650;
    border-radius: 6px;
    padding: 8px 13px;
    color: #cfd8dd;
    background: #202931;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.profile-edit-pin-trigger:hover { border-color: #58baff; background: #22445a; color: #e2f5ff; }

.profile-edit-actions { justify-content: flex-end; }

.profile-edit-actions .profile-edit-pin-trigger {
    border: 1px solid #3b4650;
    color: #cfd8dd;
    background: #202931;
}

.profile-edit-actions .profile-edit-pin-trigger:hover { border-color: #58baff; background: #22445a; color: #e2f5ff; }

@media (max-width: 640px) {
    .profile-edit-photo-grid { grid-template-columns: minmax(0, 1fr); }

    .profile-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-edit-actions .profile-edit-pin-trigger,
    .profile-edit-actions .form-submit-button {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
}

.user-management-confirm {
    position: fixed;
    z-index: 1010;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.user-management-confirm.is-open { display: flex; }

.user-management-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 12, 0.76);
    backdrop-filter: blur(4px);
}

.user-management-confirm-panel {
    position: relative;
    z-index: 1;
    width: min(390px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #465867;
    border-radius: 8px;
    background: #1c242b;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.user-management-confirm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.user-management-confirm-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: rgba(255, 121, 92, 0.12);
    color: var(--accent);
}

.user-management-confirm-panel h2 {
    margin: 0;
    font-size: 18px;
}

.user-management-confirm-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.user-management-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.user-management-confirm-actions button {
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 13px;
    color: var(--accent-ink);
    background: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.user-management-confirm-actions button:hover { background: #ff8c74; }

.user-management-confirm-actions .filter-reset {
    border-color: var(--line);
    color: var(--muted);
    background: #252c32;
}

.user-management-confirm-actions .filter-reset:hover { border-color: #73818b; color: var(--ink); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 620px) {
    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    .data-table-wrap,
    .user-management-table-wrap,
    .staff-performance-top-products-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .user-management-actions,
    .user-management-confirm-actions,
    .attendance-modal-actions,
    .check-in-confirm-actions {
        align-items: stretch;
    }

    .user-management-actions button,
    .user-management-actions .filter-reset,
    .user-management-confirm-actions button,
    .attendance-modal-actions button,
    .check-in-confirm-actions button {
        width: 100%;
    }

    .user-management-table-card .section-title { padding: 15px; }
    .user-management-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .user-management-tabs,
    .user-management-search,
    .user-management-search label {
        width: 100%;
    }

    .user-management-search {
        justify-content: stretch;
    }

    .user-management-paginated-table,
    .user-management-table-wrap {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .user-management-table-wrap {
        overflow-x: scroll;
        padding-bottom: 6px;
    }

    .user-management-table {
        width: max-content;
        min-width: 660px;
    }

    .user-management-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .user-management-pagination button,
    .user-management-pagination span {
        width: 100%;
    }

    .user-management-modal { align-items: center; padding: 12px; }
    .user-management-modal-panel { width: 100%; max-height: calc(100dvh - 24px); border: 1px solid #465867; border-radius: 8px; }
    .user-management-confirm { padding: 12px; }
    .user-management-confirm-panel { width: 100%; max-height: calc(100dvh - 24px); }
}

.menu-group {
    margin-bottom: 18px;
}

.menu-group h4 {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    transition: all 0.2s ease;
}

.menu-item > i {
    width: 18px;
    color: var(--muted);
    font-size: 16px;
    text-align: center;
}

.menu-item:hover {
    border-color: var(--line);
    background: #293037;
}

.menu-item.active {
    background: #303940;
    border-color: var(--accent);
}

.menu-item.active > i {
    color: var(--accent);
}

.menu-item-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.main-panel {
    min-width: 0;
    max-width: 100vw;
    padding: 28px;
}

.sidebar-toggle {
    display: grid;
    gap: 4px;
    width: 36px;
    height: 36px;
    place-content: center;
    margin-bottom: 16px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #252c32;
    cursor: pointer;
}

.sidebar-toggle:hover {
    border-color: var(--accent);
}

.sidebar-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--ink);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    margin-bottom: 18px;
}

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

h1 {
    margin: 6px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 4vw, 40px);
}

.subtitle {
    margin: 0;
    color: var(--muted);
}

.today-pill {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #252c32;
    font-weight: 600;
}

.today-pill.user-management-new {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.alert::before {
    flex: 0 0 auto;
    font-family: 'bootstrap-icons';
    font-size: 17px;
    line-height: 1.25;
}

.alert.warning {
    background: #3d3020;
    border: 1px solid #bc8937;
}

.alert.warning::before {
    content: '\f33a';
    color: #ffc15e;
}

.alert.error {
    background: #492b2b;
    border: 1px solid #b95757;
}

.alert.error::before {
    content: '\f623';
    color: #ff9b9b;
}

.alert.success {
    background: #183d2d;
    border: 1px solid var(--ok);
}

.alert.success::before {
    content: '\f26b';
    color: var(--ok);
}

.form-static-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #3d3020;
    border: 1px solid #bc8937;
}

.form-static-notice::before {
    flex: 0 0 auto;
    font-family: 'bootstrap-icons';
    font-size: 17px;
    line-height: 1.25;
    content: '\f33a';
    color: #ffc15e;
}

.cctv-camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cctv-camera-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cctv-camera-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #05070a;
}

.cctv-camera-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cctv-camera-media img[hidden] {
    display: none;
}

.cctv-camera-media:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.cctv-camera-media:-webkit-full-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.cctv-camera-media:fullscreen img,
.cctv-camera-media:-webkit-full-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cctv-camera-offline {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    justify-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.cctv-camera-offline[hidden] {
    display: none;
}

.cctv-camera-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    justify-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.cctv-camera-loading[hidden] {
    display: none;
}

.cctv-camera-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--muted);
    animation: cctv-camera-spin 0.8s linear infinite;
}

@keyframes cctv-camera-spin {
    to {
        transform: rotate(360deg);
    }
}

.cctv-camera-offline i {
    font-size: 26px;
}

.cctv-camera-play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.cctv-camera-play-btn:hover,
.cctv-camera-play-btn:focus {
    background: rgba(0, 0, 0, 0.65);
    outline: none;
    transform: scale(1.06);
}

.cctv-camera-play-btn[hidden] {
    display: none;
}

.cctv-camera-media.is-playing .cctv-camera-play-btn {
    opacity: 0;
    background: transparent;
}

.cctv-camera-media.is-playing.show-controls .cctv-camera-play-btn,
.cctv-camera-media.is-playing .cctv-camera-play-btn:focus {
    opacity: 1;
    background: rgba(0, 0, 0, 0.45);
}

.cctv-camera-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.cctv-camera-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cctv-camera-name strong {
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cctv-camera-name small {
    color: var(--muted);
}

.cctv-camera-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cctv-camera-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cctv-camera-fullscreen-btn {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: #252c32;
    cursor: pointer;
}

.cctv-camera-fullscreen-btn:hover,
.cctv-camera-fullscreen-btn:focus {
    border-color: #5aa4ff;
    outline: none;
    color: #9ec9ff;
}

.cctv-form-allowed-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #20262b;
}

.cctv-form-allowed-level-option {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    color: var(--ink);
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
}

.cctv-form-allowed-level-option input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.alert ul {
    margin: 8px 0 0;
}

.has-global-toast .alert {
    display: none;
}

input.erp-input-invalid,
select.erp-input-invalid,
textarea.erp-input-invalid,
.rich-text-content.erp-input-invalid {
    border-color: #ff7f7f !important;
    background-color: rgba(255, 127, 127, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.16) !important;
}

input.erp-input-invalid:focus,
select.erp-input-invalid:focus,
textarea.erp-input-invalid:focus,
.rich-text-content.erp-input-invalid:focus {
    border-color: #ff9b9b !important;
    box-shadow: 0 0 0 4px rgba(255, 127, 127, 0.22) !important;
}

.erp-field-invalid > span,
.erp-field-invalid > label,
.erp-field-invalid legend {
    color: #ff9b9b;
}

.erp-toast-stack {
    position: fixed;
    z-index: 3000;
    right: calc(18px + var(--erp-toast-viewport-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--erp-toast-viewport-bottom, 0px));
    display: grid;
    width: min(100% - 24px, 390px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px) - var(--erp-toast-viewport-bottom, 0px));
    gap: 10px;
    align-content: end;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: none;
    transform: translateZ(0);
}

.erp-toast {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 11px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px 12px 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--ink);
    background: #20252a;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
    pointer-events: auto;
    animation: erp-toast-enter 220ms ease-out both;
}

.erp-toast.is-leaving {
    animation: erp-toast-leave 180ms ease-in both;
}

.erp-toast > .bi {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
}

.erp-toast-content {
    min-width: 0;
}

.erp-toast-content strong,
.erp-toast-content p {
    margin: 0;
}

.erp-toast-content strong {
    display: block;
    font-size: 13px;
}

.erp-toast-content p {
    margin-top: 3px;
    color: #c8d1d6;
    font-size: 12px;
    line-height: 1.45;
}

.erp-toast-close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #aeb8b2;
    background: transparent;
    cursor: pointer;
}

.erp-toast-close:hover,
.erp-toast-close:focus {
    outline: none;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
}

.erp-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    transform-origin: left center;
    animation: erp-toast-progress var(--toast-duration) linear forwards;
}

.erp-toast-error { border-color: #b95757; background: #2c2224; }
.erp-toast-error > .bi { color: #ff9b9b; background: rgba(255, 155, 155, 0.13); }
.erp-toast-error .erp-toast-progress { background: #ff7f7f; }

.erp-toast-warning { border-color: #bc8937; background: #2c281f; }
.erp-toast-warning > .bi { color: #ffc15e; background: rgba(255, 193, 94, 0.14); }
.erp-toast-warning .erp-toast-progress { background: #ffc15e; }

.erp-toast-success { border-color: var(--ok); background: #1d2d27; }
.erp-toast-success > .bi { color: var(--ok); background: rgba(78, 209, 140, 0.13); }
.erp-toast-success .erp-toast-progress { background: var(--ok); }

.erp-toast-info { border-color: #58baff; background: #202a32; }
.erp-toast-info > .bi { color: #8bd4ff; background: rgba(139, 212, 255, 0.13); }
.erp-toast-info .erp-toast-progress { background: #8bd4ff; }

@keyframes erp-toast-enter {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes erp-toast-leave {
    to { opacity: 0; transform: translateY(16px); }
}

@keyframes erp-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .erp-toast-stack {
        right: calc(20px + var(--erp-toast-viewport-right, 0px));
        left: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--erp-toast-viewport-bottom, 0px));
        width: min(340px, calc(100vw - 48px - var(--erp-toast-viewport-right, 0px)));
        max-width: none;
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px) - var(--erp-toast-viewport-bottom, 0px));
        transform: translateZ(0);
    }

    .erp-toast {
        grid-template-columns: 32px minmax(0, 1fr) 28px;
        gap: 9px;
        padding: 12px 10px 15px;
    }
}

.check-in-alert {
    width: 100%;
}

.check-in-layout {
    display: grid;
    grid-template-columns: minmax(480px, 820px) minmax(360px, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
}

.check-in-primary-column {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-card {
    padding: 18px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    background: var(--bg-panel);
    border: 1px solid var(--line);
    animation: rise 0.5s ease both;
}

.kpi-card h2 {
    margin: 10px 0;
    font-family: 'Space Grotesk', sans-serif;
}

.kpi-card.omzet {
    border-top: 5px solid #5aa4ff;
}

.kpi-card.returns {
    border-top: 5px solid #ff8c8c;
}

.kpi-card.cost {
    border-top: 5px solid #ffc15e;
}

.kpi-card.gross {
    border-top: 5px solid #4ed18c;
}

.kpi-card.margin {
    border-top: 5px solid #c99cff;
}

.kpi-card.net {
    border-top: 5px solid var(--accent);
}

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

.dashboard-chart {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: #1c2126;
}

.dashboard-chart-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-chart-heading h2,
.dashboard-chart-heading p {
    margin: 0;
}

.dashboard-chart-heading h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
}

.dashboard-chart-heading p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-chart-heading i {
    color: var(--accent);
    font-size: 22px;
}

.dashboard-chart-canvas {
    position: relative;
    height: 260px;
}

.dashboard-filter,
.dashboard-custom-dates {
    display: flex;
    align-items: end;
    gap: 12px;
}

.dashboard-filter {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
    flex-wrap: wrap;
}

.dashboard-filter label {
    display: grid;
    flex: 1 1 160px;
    min-width: 140px;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-filter .staff-performance-product-filter {
    flex: 0 0 520px;
    width: 520px;
    min-width: 520px;
    max-width: 560px;
}

.dashboard-filter .staff-performance-product-filter input[type="search"] {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    font-size: 12px;
}

.dashboard-filter .staff-performance-product-filter .lookup-control {
    width: 520px;
    max-width: 100%;
}

.dashboard-filter .staff-performance-sort-filter {
    flex: 0 1 220px;
    min-width: 200px;
    max-width: 260px;
}

.dashboard-filter .staff-performance-category-filter {
    flex: 0 1 260px;
    min-width: 220px;
    max-width: 320px;
}

.dashboard-filter select,
.dashboard-filter input,
.dashboard-filter button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.dashboard-filter select {
    min-width: 160px;
    width: 100%;
}

.dashboard-filter .lookup-results {
    background: #252c32;
}

.dashboard-filter .lookup-result {
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 10px;
    color: var(--ink);
    background: transparent;
    font-size: 13px;
    text-align: left;
}

.dashboard-filter .lookup-result:hover,
.dashboard-filter .lookup-result:focus {
    background: #303940;
}

.dashboard-filter button {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    cursor: pointer;
}

.dashboard-filter[data-month-only-filter="1"] button[type="submit"] {
    display: none;
}

.dashboard-custom-dates.is-hidden {
    display: none;
}

.profit-loss-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.profit-loss-total-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.profit-loss-card,
.profit-loss-statement,
.profit-loss-monthly {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.profit-loss-card {
    padding: 16px;
}

.profit-loss-total-summary .profit-loss-card {
    min-width: 0;
}

.profit-loss-card span,
.profit-loss-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.profit-loss-card strong {
    display: block;
    margin: 7px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
}

.profit-loss-card.income strong,
.profit-loss-positive { color: #8de8be; }
.profit-loss-card.gross strong { color: #ffc15e; }
.profit-loss-gross-profit { color: #ffc15e; }
.profit-loss-card.expense strong,
.profit-loss-negative { color: #ff9b9b; }
.profit-loss-card.net-profit strong { color: #44c7c1; }
.profit-loss-card.net-loss strong { color: #ff8c8c; }

.profit-loss-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    gap: 14px;
}

.profit-loss-statement,
.profit-loss-monthly { padding: 16px; }

.profit-loss-statement dl { margin: 0; }

.profit-loss-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.profit-loss-line dt,
.profit-loss-line dd { margin: 0; }
.profit-loss-line dd { font-weight: 700; text-align: right; }
.profit-loss-line.deduction dd { color: #ff9b9b; }
.profit-loss-line.subtotal { font-weight: 700; }
.profit-loss-line.total { border-bottom: 0; color: #44c7c1; font-weight: 700; font-size: 16px; }

.dashboard-versus {
    margin-bottom: 14px;
}

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

.versus-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.versus-metric p {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--muted);
}

.versus-metric strong {
    font-family: 'Space Grotesk', sans-serif;
}

.versus-metric small {
    color: var(--muted);
    text-align: right;
}

.versus-change {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.versus-change.up {
    color: #8de8be;
    background: #173f35;
}

.versus-change.down {
    color: #ff9b9b;
    background: #492b2b;
}

.versus-change.neutral {
    color: #c1c8cd;
    background: #2b3136;
}

.versus-metric.sales { border-left: 4px solid #ffc15e; }
.versus-metric.profit { border-left: 4px solid #4ed18c; }
.versus-metric.returns { border-left: 4px solid #ff8c8c; }
.customer-performance-metric.new-customers { border-left: 4px solid #ffc15e; }
.customer-performance-metric.active-customers { border-left: 4px solid #5aa4ff; }
.customer-performance-metric.purchases { border-left: 4px solid #c99cff; }
.customer-performance-metric.profit { border-left: 4px solid #4ed18c; }

.dashboard-staff-ranking {
    margin-bottom: 14px;
}

.dashboard-payment-methods {
    margin-bottom: 14px;
}

.dashboard-payment-content {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 1.2fr);
    align-items: center;
    gap: 22px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.dashboard-payment-chart {
    position: relative;
    height: 270px;
}

.payment-method-list {
    display: grid;
    gap: 8px;
}

.payment-method-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.payment-method-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.payment-method-item strong {
    white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif;
}

.payment-method-dot {
    display: inline-block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.payment-method-dot-0 { background: #5aa4ff; }
.payment-method-dot-1 { background: #4ed18c; }
.payment-method-dot-2 { background: #ffc15e; }
.payment-method-dot-3 { background: #c99cff; }
.payment-method-dot-4 { background: #ff8c8c; }
.payment-method-dot-5 { background: #44c7c1; }

.dashboard-payment-empty {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #1c2126;
}

.staff-ranking-table {
    min-width: 620px;
}

.staff-rank {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #c1c8cd;
    background: #2b3136;
    font-size: 12px;
    font-weight: 700;
}

.staff-rank.rank-1 { color: #1d1f20; background: #ffc15e; }
.staff-rank.rank-2 { color: #1d1f20; background: #c1c8cd; }
.staff-rank.rank-3 { color: #1d1f20; background: #d9892b; }

.staff-ranking-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
}

.staff-ranking-name i {
    color: var(--accent);
}

.staff-ranking-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    aspect-ratio: 1 / 1;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 16px;
    overflow: hidden;
}

.staff-ranking-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.staff-return-value {
    color: #ff9b9b;
    font-weight: 700;
}

.staff-profit-value {
    color: #8de8be;
    font-weight: 700;
}

.staff-sales-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(128px, 1fr));
    gap: 6px;
    min-width: 390px;
}

.staff-sales-card {
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.staff-sales-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.staff-sales-card strong {
    display: block;
    margin-top: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.staff-sales-net strong { color: #ffc15e; }
.staff-sales-returns strong { color: #ff9b9b; }
.staff-sales-profit strong { color: #8de8be; }
.staff-sales-average-net strong { color: #c99cff; }
.staff-sales-average-profit strong { color: #44c7c1; }

.staff-rating-dissatisfied { color: #ff8c8c; }
.staff-rating-neutral { color: #ffc15e; }
.staff-rating-satisfied { color: #8de8be; }
.staff-rating-unrated { color: #9ec9ff; }
.staff-rating-list { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

.staff-rating-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 6px;
    min-width: 230px;
}

.staff-rating-card {
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.staff-rating-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.staff-rating-card strong {
    display: block;
    margin-top: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
}

.staff-activity-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    gap: 6px;
    min-width: 210px;
}

.staff-activity-card {
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.staff-activity-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.staff-activity-card strong {
    display: block;
    margin-top: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
}

.staff-activity-sales strong { color: #9ec9ff; }
.staff-activity-returns strong { color: #ff9b9b; }
.staff-activity-sold-items strong { color: #8de8be; }
.staff-activity-returned-items strong { color: #ffc15e; }
.staff-activity-average-items strong { color: #c99cff; }
.staff-activity-average-products strong { color: #44c7c1; }

.staff-performance-analysis {
    margin-bottom: 14px;
}

.staff-performance-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 14px;
}

.staff-performance-analysis-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-dashboard-card {
    grid-column: 1 / -1;
}

.sales-dashboard-ratings {
    margin-bottom: 14px;
}

.sales-dashboard-growth { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.sales-dashboard-rank-card { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-left: 3px solid #68727a; border-radius: 8px; background: #1c2126; }
.sales-dashboard-rank-card > i { color: #d4d9dc; font-size: 30px; }
.sales-dashboard-rank-card span, .sales-dashboard-rank-card small { display: block; color: var(--muted); font-size: 12px; }
.sales-dashboard-rank-card strong { display: block; margin: 2px 0; color: #d4d9dc; font-family: 'Space Grotesk', sans-serif; font-size: 29px; }
.sales-dashboard-rank-card.rank-one { border-left-color: #ffc15e; background: #29251c; }
.sales-dashboard-rank-card.rank-one > i, .sales-dashboard-rank-card.rank-one strong { color: #ffc15e; }
.sales-dashboard-rank-card.rank-two { border-left-color: #9fc4db; background: #202a31; }
.sales-dashboard-rank-card.rank-two > i, .sales-dashboard-rank-card.rank-two strong { color: #c7e3f4; }
.sales-dashboard-rank-card.rank-three { border-left-color: #d9935e; background: #29221d; }
.sales-dashboard-rank-card.rank-three > i, .sales-dashboard-rank-card.rank-three strong { color: #f0b181; }
.sales-dashboard-rank-card.rank-other { border-left-color: #4d5961; background: #1a1f23; }
.sales-dashboard-rank-card.rank-other > i, .sales-dashboard-rank-card.rank-other strong { color: #aeb6ba; }
.sales-dashboard-rank-card.health-good { border-left-color: #4ed18c; background: #1d2b25; }
.sales-dashboard-rank-card.health-good > i, .sales-dashboard-rank-card.health-good strong { color: #8de8be; }
.sales-dashboard-rank-card.health-prima { border-left-color: #58baff; background: #1b2935; }
.sales-dashboard-rank-card.health-prima > i, .sales-dashboard-rank-card.health-prima strong { color: #8bd4ff; }
.sales-dashboard-rank-card.health-watch { border-left-color: #ffc15e; background: #29251c; }
.sales-dashboard-rank-card.health-watch > i, .sales-dashboard-rank-card.health-watch strong { color: #ffc15e; }
.sales-dashboard-rank-card.health-critical { border-left-color: #ff8c8c; background: #2e1f22; }
.sales-dashboard-rank-card.health-critical > i, .sales-dashboard-rank-card.health-critical strong { color: #ffabab; }
.sales-dashboard-rank-card.health-not-started { border-left-color: #68727a; background: #1a1f23; }
.sales-dashboard-rank-card.health-not-started > i, .sales-dashboard-rank-card.health-not-started strong { color: #aeb6ba; }
.sales-dashboard-recommendations { min-width: 0; }
.sales-dashboard-recommendations .section-title { margin-bottom: 8px; }
.sales-dashboard-recommendation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sales-dashboard-recommendation-list article { display: flex; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #1c2126; }
.sales-dashboard-recommendation-list article > i { flex: 0 0 auto; color: #75c9f3; font-size: 20px; }
.sales-dashboard-recommendation-list strong { display: block; font-size: 13px; }
.sales-dashboard-recommendation-list p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.supervisor-health-indicators { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.supervisor-health-indicator { min-width: 0; padding: 11px; border: 1px solid var(--line); border-top: 3px solid #75c9f3; border-radius: 8px; background: #252c32; }
.supervisor-health-indicator:nth-child(2) { border-top-color: #ffc15e; }
.supervisor-health-indicator:nth-child(3) { border-top-color: #ff8c8c; }
.supervisor-health-indicator:nth-child(4) { border-top-color: #8de8be; }
.supervisor-health-indicator:nth-child(5) { border-top-color: #c99cff; }
.supervisor-health-indicator.is-pending { border-top-color: #68727a; opacity: 0.75; }
.supervisor-health-indicator-heading { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.supervisor-health-indicator-heading i { color: #d4d9dc; font-size: 16px; }
.supervisor-health-indicator strong, .supervisor-health-indicator small, .supervisor-health-indicator em { display: block; }
.supervisor-health-indicator strong { margin-top: 7px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; overflow-wrap: anywhere; }
.supervisor-health-indicator small { min-height: 30px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.supervisor-health-indicator .versus-change { margin-top: 7px; }
.supervisor-health-indicator em { margin-top: 8px; color: #75c9f3; font-size: 11px; font-style: normal; font-weight: 700; }

.supervisor-staff-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.supervisor-staff-health-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 3px solid #68727a; border-radius: 8px; background: #1c2126; }
.supervisor-staff-health-card.health-good { border-left-color: #4ed18c; }
.supervisor-staff-health-card.health-prima { border-left-color: #58baff; }
.supervisor-staff-health-card.health-watch { border-left-color: #ffc15e; }
.supervisor-staff-health-card.health-critical { border-left-color: #ff8c8c; }
.supervisor-staff-health-card.health-not-started { border-left-color: #68727a; opacity: 0.78; }
.supervisor-staff-health-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.supervisor-staff-health-heading > i { color: #d4d9dc; font-size: 20px; }
.supervisor-staff-health-card.health-good .supervisor-staff-health-heading > i { color: #8de8be; }
.supervisor-staff-health-card.health-prima .supervisor-staff-health-heading > i { color: #8bd4ff; }
.supervisor-staff-health-card.health-watch .supervisor-staff-health-heading > i { color: #ffc15e; }
.supervisor-staff-health-card.health-critical .supervisor-staff-health-heading > i { color: #ffabab; }
.supervisor-staff-health-heading h3, .supervisor-staff-health-heading p { margin: 0; }
.supervisor-staff-health-heading h3 { font-size: 15px; }
.supervisor-staff-health-heading p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.supervisor-staff-health-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.supervisor-staff-health-indicators > div { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #252c32; }
.supervisor-staff-health-indicators span, .supervisor-staff-health-indicators small { display: block; color: var(--muted); font-size: 10px; }
.supervisor-staff-health-indicators strong { display: block; margin: 4px 0; font-family: 'Space Grotesk', sans-serif; font-size: 12px; white-space: nowrap; }

.supervisor-health-legend-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #1c2126; }
.supervisor-health-legend-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.supervisor-health-legend-label i { color: #75c9f3; }
.supervisor-health-legend-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #252c32; color: #aeb6ba; font-size: 11px; font-weight: 700; white-space: nowrap; }
.supervisor-health-legend-chip.health-prima { border-color: #58baff; color: #8bd4ff; }
.supervisor-health-legend-chip.health-good { border-color: #4ed18c; color: #8de8be; }
.supervisor-health-legend-chip.health-watch { border-color: #ffc15e; color: #ffc15e; }
.supervisor-health-legend-chip.health-critical { border-color: #ff8c8c; color: #ffabab; }
.supervisor-health-legend-chip.health-not-started { border-color: #68727a; opacity: 0.85; }

.sales-dashboard-rating-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sales-dashboard-rating-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-dashboard-rating-card.skip { border-left-color: #9ec9ff; }
.sales-dashboard-rating-card.dissatisfied { border-left-color: #ff8c8c; }
.sales-dashboard-rating-card.neutral { border-left-color: #ffc15e; }
.sales-dashboard-rating-card.satisfied { border-left-color: #8de8be; }

.sales-dashboard-rating-card > i {
    flex: 0 0 auto;
    font-size: 24px;
}

.sales-dashboard-rating-card span,
.sales-dashboard-rating-card small,
.sales-dashboard-rating-card b {
    display: block;
}

.sales-dashboard-rating-card span,
.sales-dashboard-rating-card small {
    color: var(--muted);
    font-size: 11px;
}

.sales-dashboard-rating-card strong {
    display: block;
    margin: 3px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
}

.sales-dashboard-rating-card .versus-change {
    margin-top: 7px;
}

.staff-performance-analysis-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.staff-performance-rank-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-left: 3px solid #68727a;
    border-radius: 8px;
    background: #1c2126;
    color: #c1c8cd;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.staff-performance-rank-card.rank-1 { border-left-color: #ffc15e; background: #29251c; color: #ffc15e; }
.staff-performance-rank-card.rank-2 { border-left-color: #9fc4db; background: #202a31; color: #c7e3f4; }
.staff-performance-rank-card.rank-3 { border-left-color: #d9935e; background: #29221d; color: #f0b181; }
.staff-performance-rank-card.rank-4 { border-left-color: #4d5961; background: #1a1f23; color: #aeb6ba; }

.staff-performance-analysis-identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}

.staff-performance-analysis-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 18px;
    overflow: hidden;
}

.staff-performance-analysis-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.staff-performance-analysis-heading h3,
.staff-performance-analysis-heading p {
    margin: 0;
}

.staff-performance-analysis-heading h3 {
    font-size: 16px;
}

.staff-performance-analysis-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 480px) {
    .staff-performance-rank-card {
        width: 100%;
    }

    .staff-performance-analysis-identity {
        flex-basis: 100%;
    }
}

.staff-performance-versus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.staff-performance-versus-metric {
    min-width: 0;
    padding: 9px;
    border-left: 3px solid var(--line);
    background: #252c32;
}

.staff-performance-versus-metric.sales { border-color: #ffc15e; }
.staff-performance-versus-metric.profit { border-color: #4ed18c; }
.staff-performance-versus-metric.returns { border-color: #ff8c8c; }
.staff-performance-versus-metric.transactions { border-color: #9ec9ff; }
.staff-performance-versus-metric.sold-items { border-color: #44c7c1; }
.staff-performance-versus-metric.members { border-color: #c99cff; }
.staff-performance-versus-metric.priority-bonus-paid { border-color: #ffc15e; }
.staff-performance-versus-metric.rating-skip { border-color: #aeb8b2; }
.staff-performance-versus-metric.rating-dissatisfied { border-color: #ff8c8c; }
.staff-performance-versus-metric.rating-neutral { border-color: #ffc15e; }
.staff-performance-versus-metric.rating-satisfied { border-color: #4ed18c; }

.staff-performance-versus-metric span,
.staff-performance-versus-metric small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.staff-performance-versus-metric small .sales-dashboard-comparison-value,
.sales-dashboard-rating-card small .sales-dashboard-comparison-value {
    display: inline;
    color: #ffc15e;
    font-weight: 700;
}

.staff-performance-versus-metric strong {
    display: block;
    margin: 4px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.staff-performance-versus-metric strong.priority-bonus-negative { color: #ffabab; }

.staff-performance-versus-metric .versus-change {
    margin-top: 7px;
}

.staff-performance-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.staff-performance-insight {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.staff-performance-insight span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.staff-performance-insight strong {
    display: block;
    margin-top: 3px;
    color: #dce3e8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.staff-performance-upsell {
    grid-column: span 2;
}

.staff-performance-top-products {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.staff-performance-top-products-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.staff-performance-top-products-heading h4,
.staff-performance-top-products-heading span,
.staff-performance-top-products-empty {
    margin: 0;
}

.staff-performance-top-products-heading h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
}

.staff-performance-top-products-heading span,
.staff-performance-top-products-empty {
    color: var(--muted);
    font-size: 11px;
}

.staff-performance-top-products-table-wrap {
    overflow-x: auto;
}

.staff-performance-top-products-table {
    width: 100%;
    min-width: 390px;
    border-collapse: collapse;
    font-size: 12px;
}

.staff-performance-top-products-table th,
.staff-performance-top-products-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.staff-performance-top-products-table th {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.staff-performance-top-products-table th:first-child,
.staff-performance-top-products-table td:first-child {
    width: 28px;
    color: #ffc15e;
    font-weight: 700;
}

.staff-performance-top-products-table th:nth-child(3),
.staff-performance-top-products-table td:nth-child(3),
.staff-performance-top-products-table th:last-child,
.staff-performance-top-products-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.staff-performance-top-products-table td:last-child {
    color: #8de8be;
    font-family: 'Space Grotesk', sans-serif;
}

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

.info-card,
.coming-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    background: #1c2126;
}

.status.ok {
    color: var(--ok);
}

.status.bad {
    color: var(--bad);
}

.coming-soon-wrap {
    max-width: 640px;
}

.not-found-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 24px;
}

.not-found-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    padding: 40px 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

.not-found-card .eyebrow {
    margin-bottom: 8px;
}

.not-found-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 38px;
}

.not-found-card h1 {
    margin: 0 0 12px;
    font-size: clamp(22px, 3vw, 30px);
}

.not-found-copy {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.6;
}

.not-found-route {
    display: inline-block;
    margin-bottom: 24px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-main);
    color: var(--muted);
    font-size: 13px;
}

.not-found-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.not-found-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.not-found-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.not-found-card-forbidden {
    border-color: #b95757;
}

.not-found-glyph-forbidden {
    background: rgba(255, 107, 107, 0.14);
    color: #ff6b6b;
}

.system-error-wrap {
    min-height: 100vh;
}

.system-error-card {
    max-width: 520px;
}

.system-error-glyph {
    background: rgba(255, 113, 121, 0.15);
    color: var(--bad);
}

.system-error-detail {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-main);
    text-align: left;
}

.system-error-detail summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--muted);
}

.system-error-detail dl {
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
}

.system-error-detail dt {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.system-error-detail dd {
    margin: 2px 0 0;
    color: var(--ink);
    word-break: break-word;
}

.system-error-detail code {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-panel);
    font-size: 12px;
    line-height: 1.5;
}

.system-error-logout {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.system-error-logout:hover {
    background: var(--bg-main);
}

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

.summary-card {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-panel);
}

.summary-card p,
.summary-card h2 {
    margin: 0;
}

.summary-card h2 {
    margin-top: 8px;
    font-family: 'Space Grotesk', sans-serif;
}

.summary-card.member { border-left: 4px solid #5aa4ff; }
.summary-card.grosir { border-left: 4px solid #4ed18c; }
.summary-card.non-member { border-left: 4px solid #ff9f43; }
.summary-card.non-member p { white-space: nowrap; }
.summary-card.total { border-left: 4px solid var(--accent); }
.summary-card.cash-flow-total { border-left: 4px solid #ffc15e; }
.summary-card.cash-flow-in { border-left: 4px solid #4ed18c; }
.summary-card.cash-flow-out { border-left: 4px solid #ff8c8c; }

#bank-transfer-summary .summary-card:last-child,
#bank-transfer-bri-summary .summary-card:last-child {
    grid-column: span 2;
}

.sales-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.product-performance-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.product-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.product-performance-panel {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.product-performance-grid .product-performance-panel {
    margin-bottom: 0;
}

.product-performance-grid .product-performance-panel-full {
    grid-column: 1 / -1;
}

.product-performance-table td strong,
.product-performance-table td small {
    display: block;
}

.product-performance-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.data-table th.product-data-stock-column,
.data-table td.product-data-stock-column {
    width: 64px;
    max-width: 64px;
    white-space: nowrap;
    text-align: center;
}

.summary-card.sales-cost { border-left: 4px solid #ffc15e; }
.summary-card.sales-sale { border-left: 4px solid #5aa4ff; }
.summary-card.sales-profit { border-left: 4px solid var(--ok); }
.summary-card.sales-returns { border-left: 4px solid #ff8c8c; }
.summary-card.sales-margin { border-left: 4px solid #c48dff; }

.transaction-type {
    display: inline-block;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.transaction-type.sale {
    color: #9ec9ff;
    background: #203a5b;
}

.transaction-type.return {
    color: #ffb4b4;
    background: #492b2b;
}

.data-table tbody tr.sales-return-row td {
    border-color: rgba(255, 140, 140, 0.25);
    background: rgba(136, 47, 47, 0.18);
}

.data-table tbody tr.sales-return-row:hover td {
    background: rgba(136, 47, 47, 0.3);
}

.data-table tbody tr.product-data-out-of-stock td {
    border-color: rgba(255, 140, 140, 0.25);
    background: rgba(136, 47, 47, 0.18);
}

.data-table tbody tr.product-data-out-of-stock:hover td {
    background: rgba(136, 47, 47, 0.3);
}

.customer-filter {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.customer-crm-summary,
.customer-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.customer-crm-summary article,
.customer-detail-metrics article,
.customer-detail-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.customer-crm-summary article,
.customer-detail-metrics article {
    padding: 12px;
}

.customer-crm-summary article {
    min-height: 78px;
    position: relative;
}

.customer-crm-summary span,
.customer-detail-metrics span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.customer-crm-summary strong,
.customer-detail-metrics strong {
    display: block;
    margin-top: 5px;
    color: #dce3e8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.customer-crm-summary .metric-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.metric-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8da0aa;
    cursor: help;
}

.metric-tooltip-trigger:hover,
.metric-tooltip-trigger:focus-visible {
    color: var(--accent);
    outline: none;
}

.metric-tooltip {
    position: absolute;
    z-index: 10;
    top: calc(100% + 7px);
    left: 50%;
    display: none !important;
    width: 220px;
    padding: 8px 10px;
    border: 1px solid #4a5961;
    border-radius: 6px;
    background: #111619;
    color: #dce3e8 !important;
    font-size: 12px !important;
    line-height: 1.4;
    text-align: left;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
}

.metric-tooltip-trigger:hover .metric-tooltip,
.metric-tooltip-trigger:focus-visible .metric-tooltip {
    display: block !important;
}

.customer-detail-link {
    color: var(--ink);
    text-decoration: none;
}

.customer-detail-link:hover { color: var(--accent); }

.customer-detail-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.customer-detail-contact > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.customer-detail-contact > span:last-child i {
    color: var(--accent);
}

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

.customer-detail-panel { padding: 14px; }
.customer-detail-wide { grid-column: 1 / -1; }

.customer-detail-list,
.customer-note-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-detail-list li,
.customer-note-list article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.customer-detail-list span,
.customer-detail-list small,
.customer-note-list small { display: block; color: var(--muted); font-size: 11px; }
.customer-detail-list strong { white-space: nowrap; font-size: 12px; }
.customer-note-list article { display: block; }
.customer-note-list article p { margin: 8px 0; white-space: pre-wrap; }

.customer-follow-up-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 150px auto;
    gap: 8px;
    margin-bottom: 12px;
}

.customer-follow-up-form textarea,
.customer-follow-up-form select,
.customer-follow-up-form input,
.customer-follow-up-form button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.customer-follow-up-form textarea { min-height: 70px; resize: vertical; }
.customer-follow-up-form button { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); font-weight: 700; cursor: pointer; }

.sales-filter {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.return-history-filter,
.request-history-filter {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.return-history-filter label,
.request-history-filter label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.return-history-filter label:first-of-type,
.request-history-filter label:first-of-type {
    flex: 1;
}

.return-history-filter input,
.return-history-filter select,
.return-history-filter button,
.request-history-filter input,
.request-history-filter select,
.request-history-filter button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.return-history-filter select,
.request-history-filter select {
    min-width: 154px;
}

.return-history-filter button,
.request-history-filter button {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    cursor: pointer;
}

.sales-filter label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.sales-filter input,
.sales-filter select,
.sales-filter button,
.filter-reset {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.sales-filter select {
    min-width: 132px;
    appearance: none;
    padding-right: 32px;
    background-color: #252c32;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.sales-filter select option {
    color: var(--ink);
    background: #252c32;
}

.sales-filter button {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    cursor: pointer;
}

.filter-reset {
    color: var(--muted);
    text-decoration: none;
}

.customer-filter label {
    display: grid;
    flex: 1;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.customer-filter input,
.customer-filter select,
.customer-filter button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.customer-filter button {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    cursor: pointer;
}

.return-form {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.request-form {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.request-form-section h2,
.product-request-history h2 {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
}

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

.request-field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.request-field-wide {
    grid-column: 1 / -1;
}

.request-field input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.request-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 32px 8px 10px;
    color: var(--ink);
    background-color: #252c32;
    font: inherit;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.request-field select option {
    color: var(--ink);
    background: #252c32;
}

.request-field select:focus,
.request-field input:focus {
    border-color: var(--accent);
    outline: none;
}

.request-field input.field-invalid,
.request-field select.field-invalid,
.request-field textarea.field-invalid {
    border-color: #dc3545;
}

.request-field input.field-invalid:focus,
.request-field select.field-invalid:focus,
.request-field textarea.field-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.request-field textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.request-field textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.rich-text-editor {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #252c32;
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--line);
    background: #20252a;
}

.rich-text-toolbar button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus {
    border-color: var(--line);
    outline: none;
    color: var(--accent);
    background: #303940;
}

.rich-text-content {
    min-height: 110px;
    padding: 10px;
    color: var(--ink);
    font-size: 14px;
    outline: none;
}

.rich-text-content:empty::before {
    content: 'Ketik detail barang yang di-request';
    color: var(--muted);
}

.store-issue-rich-text .rich-text-content {
    min-height: 150px;
}

.store-issue-rich-text .rich-text-content:empty::before {
    content: 'Tuliskan kendala yang terjadi di toko';
}

.rich-text-content p,
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content blockquote,
.rich-text-content ul,
.rich-text-content ol {
    margin: 0 0 8px;
}

.request-product-description p,
.request-product-description h1,
.request-product-description h2,
.request-product-description h3,
.request-product-description blockquote,
.request-product-description ul,
.request-product-description ol {
    margin: 0 0 6px;
}

.request-product-description {
    white-space: pre-line;
}

.request-form-actions {
    display: flex;
    justify-content: flex-end;
}

.request-form-actions button {
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 16px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.request-form-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.form-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.form-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.form-submit-button .form-submit-spinner {
    display: none;
    align-items: center;
    gap: 8px;
}

.form-submit-button.is-loading {
    cursor: wait;
    opacity: .85;
}

.form-submit-button.is-loading [data-form-submit-label] {
    display: none;
}

.form-submit-button.is-loading .form-submit-spinner {
    display: inline-flex;
}

.form-submit-spinner i {
    animation: pin-submit-spin .8s linear infinite;
}

.request-form.is-locked textarea,
.request-form.is-locked input[type="file"],
.store-issue-resolve-form.is-locked textarea,
.store-issue-resolve-form.is-locked input[type="file"] {
    pointer-events: none;
    opacity: .6;
    cursor: not-allowed;
}

.product-request-history {
    margin-top: 24px;
}

.form-collapsible + .product-request-history {
    margin-top: 4px;
}

.product-request-table {
    min-width: 1160px;
}

.data-table th.request-status-cell,
.data-table td.request-status-cell {
    text-align: center;
}

.request-status-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.request-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.request-status-updated {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.request-status-staff {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.request-notes-cell {
    min-width: 180px;
    max-width: 260px;
    color: #cbd3d8;
    white-space: normal;
}

.request-status-waiting { border: 1px solid #68727a; color: #c1c8cd; background: #2b3136; }
.request-status-cart { border: 1px solid #d0a83f; color: #ffe08a; background: #3b321d; }
.request-status-return-exchange { border: 1px solid #d9892b; color: #ffc15e; background: #3d3020; }
.request-status-ordered { border: 1px solid #5aa4ff; color: #9ec9ff; background: #203a5b; }
.request-status-ready { border: 1px solid #41c783; color: #8de8be; background: #173f35; }
.request-status-contacted-ready { border: 1px solid #bd82e6; color: #dcb4ff; background: #39274f; }
.request-status-contacted-empty,
.request-status-unavailable { border: 1px solid #d9892b; color: #ffc15e; background: #3d3020; }
.request-status-complete { border: 1px solid var(--ok); color: #8de8be; background: #173f35; }
.request-status-cancelled { border: 1px solid var(--bad); color: #ffabb0; background: #4b262b; }

.stock-history-type-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-history-type-purchase { border: 1px solid #5aa4ff; color: #9ec9ff; background: #203a5b; }
.stock-history-type-sale { border: 1px solid var(--ok); color: #8de8be; background: #173f35; }
.stock-history-type-restock { border: 1px solid #bd82e6; color: #dcb4ff; background: #39274f; }
.stock-history-type-refund { border: 1px solid #d0a83f; color: #ffe08a; background: #3b321d; }
.stock-history-type-supplier-return { border: 1px solid #d9892b; color: #ffc15e; background: #3d3020; }
.stock-history-type-loss { border: 1px solid var(--bad); color: #ffabb0; background: #4b262b; }
.stock-history-type-other { border: 1px solid #68727a; color: #c1c8cd; background: #2b3136; }


.request-customer-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.request-customer-name i {
    color: var(--accent);
    font-size: 15px;
}

.return-form-section {
    min-width: 0;
}

.return-form-section h2,
.return-history h2 {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
}

.section-note {
    margin: -4px 0 12px;
    color: var(--muted);
    font-size: 13px;
}

.return-items {
    display: grid;
    gap: 12px;
}

.return-item {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #20252a;
}

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

.return-item-header strong {
    font-family: 'Space Grotesk', sans-serif;
}

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

.remove-return-item,
.add-return-item {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 12px;
    background: #252c32;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.remove-return-item {
    color: #ff9a9f;
}

.add-return-item {
    justify-self: start;
    border-color: var(--accent);
    color: var(--accent);
}

.remove-return-item:hover,
.add-return-item:hover {
    border-color: var(--accent);
    background: #303940;
}

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

.return-field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.return-field-wide {
    grid-column: 1 / -1;
}

.return-field input,
.return-field select,
.return-field textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.return-field textarea {
    min-height: 82px;
    resize: vertical;
}

.lookup-control {
    position: relative;
}

.lookup-results {
    position: absolute;
    z-index: 10;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
    background: #252c32;
}

.lookup-results.is-hidden {
    display: none;
}

.lookup-result {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.lookup-result:last-child {
    border-bottom: 0;
}

.lookup-result:hover,
.lookup-result:focus {
    outline: none;
    background: #303940;
}

.return-field input[readonly],
.return-field textarea[readonly] {
    color: var(--muted);
    background: #1a1f23;
}

.rent-settings-dialog.stored-account-dialog {
    width: min(100% - 32px, 1100px);
}

.stored-account-search {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.stored-account-search input {
    flex: 1;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.stored-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}

.stored-account-card {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: #252c32;
    color: var(--ink);
    font: inherit;
}

.stored-account-card:hover,
.stored-account-card:focus-within {
    outline: none;
    border-color: var(--accent);
    background: #303940;
}

.stored-account-card-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.stored-account-menu {
    position: relative;
    flex-shrink: 0;
}

.stored-account-menu-toggle {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.stored-account-menu-toggle:hover,
.stored-account-menu-toggle:focus {
    outline: none;
    color: var(--ink);
    border-color: var(--line);
}

.stored-account-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

.stored-account-menu-dropdown.is-hidden {
    display: none;
}

.stored-account-menu-dropdown.is-fixed {
    position: fixed;
    z-index: 9999;
}

.stored-account-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.stored-account-menu-item:hover,
.stored-account-menu-item:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.12);
}

.stored-account-menu-item i {
    font-size: 15px;
}

.stored-account-menu-item.is-edit i {
    color: #5aa4ff;
}

.stored-account-menu-item.is-delete i {
    color: #ff9da5;
}

.stored-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.16);
    color: #3b82f6;
    font-weight: 700;
    font-size: 14px;
}

.stored-account-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.stored-account-alias {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stored-account-bank,
.stored-account-number {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stored-account-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: var(--muted);
}

.bank-transfer-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.bank-transfer-field {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bank-transfer-field-label {
    flex: 0 0 170px;
    padding-top: 9px;
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
}

.bank-transfer-field-control {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bank-transfer-field-control input {
    min-height: 38px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.bank-transfer-select {
    position: relative;
}

.bank-transfer-select input {
    padding-right: 32px;
}

.bank-transfer-select.is-readonly input {
    color: var(--muted);
    cursor: default;
}

.bank-transfer-select-chevron {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.bank-transfer-account-row {
    display: flex;
    gap: 8px;
}

.bank-transfer-account-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.bank-transfer-secondary-button,
.bank-transfer-primary-button {
    flex-shrink: 0;
    min-height: 38px;
    border-radius: 6px;
    padding: 8px 14px;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.bank-transfer-secondary-button {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
}

.bank-transfer-secondary-button:hover,
.bank-transfer-secondary-button:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.12);
}

.bank-transfer-primary-button {
    border: 1px solid var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
}

.bank-transfer-account-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 10px 12px;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    font-weight: 700;
    font-size: 13px;
}

.bank-transfer-account-result.is-hidden {
    display: none;
}

.bank-transfer-account-result.is-checking {
    border-color: var(--line);
    color: var(--muted);
    background: transparent;
    font-weight: 400;
}

.bank-transfer-account-result.is-error {
    border-color: #dc2626;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
}

.bank-transfer-account-result.is-checking .bank-transfer-save-toggle,
.bank-transfer-account-result.is-error .bank-transfer-save-toggle {
    display: none;
}

.bank-transfer-save-toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bank-transfer-save-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip: rect(0 0 0 0);
}

.bank-transfer-save-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #1a1f23;
    transition: background-color .15s ease, border-color .15s ease;
}

.bank-transfer-save-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s ease, background-color .15s ease;
}

.bank-transfer-save-toggle input:checked + .bank-transfer-save-toggle-track {
    border-color: var(--accent);
    background: var(--accent);
}

.bank-transfer-save-toggle input:checked + .bank-transfer-save-toggle-track .bank-transfer-save-toggle-thumb {
    background: #fff;
    transform: translateX(18px);
}

.bank-transfer-save-toggle input:focus-visible + .bank-transfer-save-toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.display-setting-row {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.display-setting-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.display-setting-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip: rect(0 0 0 0);
}

.display-setting-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #1a1f23;
    transition: background-color .15s ease, border-color .15s ease;
}

.display-setting-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s ease, background-color .15s ease;
}

.display-setting-toggle input:checked + .display-setting-toggle-track {
    border-color: var(--accent);
    background: var(--accent);
}

.display-setting-toggle input:checked + .display-setting-toggle-track .display-setting-toggle-thumb {
    background: #fff;
    transform: translateX(20px);
}

.display-setting-toggle input:focus-visible + .display-setting-toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bank-transfer-balance-hint {
    color: var(--muted);
    font-size: 12px;
}

.bank-transfer-amount-field {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.bank-transfer-amount-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    padding: 8px 12px;
    color: var(--muted);
    background: #1a1f23;
    font-weight: 700;
}

.bank-transfer-amount-field input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 6px 6px 0;
}

.bank-transfer-field-control .form-submit-button {
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .bank-transfer-field {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .bank-transfer-field-label {
        flex-basis: auto;
        padding-top: 0;
    }

    .bank-transfer-field-control {
        max-width: 100%;
    }

    .bank-transfer-account-row {
        flex-wrap: wrap;
    }

    .bank-transfer-account-row input {
        flex: 1 1 100%;
    }

    .bank-transfer-secondary-button,
    .bank-transfer-primary-button {
        flex: 1 1 auto;
    }
}

.rent-settings-dialog.bank-transfer-confirm-dialog {
    width: min(100% - 32px, 720px);
}

.bank-transfer-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.bank-transfer-confirm-actions button {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bank-transfer-confirm-table-wrap {
    overflow-x: hidden;
}

.bank-transfer-confirm-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.bank-transfer-confirm-table td {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.bank-transfer-confirm-table td:first-child {
    width: 38%;
}

#bank-transfer-confirm-cancel.bank-transfer-neutral-button {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #252c32;
}

#bank-transfer-confirm-cancel.bank-transfer-neutral-button:hover,
#bank-transfer-confirm-cancel.bank-transfer-neutral-button:focus {
    border-color: var(--accent);
    outline: none;
}

.return-customer-type {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 14px;
}

.return-customer-type label {
    color: var(--ink);
    font-size: 13px;
}

.return-customer-type input {
    accent-color: var(--accent);
}

.return-source-options,
.return-customer-options,
.request-type-options,
.request-product-source-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.return-store-card.is-hidden {
    display: none;
}

.return-source-card,
.return-customer-card,
.request-type-card,
.request-product-source-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    color: var(--muted);
    background: #20252a;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.return-source-card input,
.return-customer-card input,
.request-type-card input,
.request-product-source-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.return-source-card i,
.return-customer-card i,
.request-type-card i,
.request-product-source-card i {
    font-size: 24px;
}

.return-source-card.is-active,
.return-customer-card.is-active,
.request-type-card.is-active,
.request-product-source-card.is-active {
    border-color: var(--accent);
    color: var(--ink);
    background: #25372f;
    box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(109, 204, 143, 0.18);
}

.return-customer-options.is-locked .return-customer-card {
    cursor: not-allowed;
    opacity: 0.65;
}

.return-customer-options.is-locked .return-customer-card.is-active {
    opacity: 1;
}

.return-source-card:focus-within,
.return-customer-card:focus-within,
.request-type-card:focus-within,
.request-product-source-card:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.document-source,
.manual-return-items {
    display: grid;
    gap: 12px;
}

.document-source.is-hidden,
.manual-return-items.is-hidden,
.return-form-grid.is-hidden,
.request-form-grid.is-hidden,
.request-form-section.is-hidden,
.request-field.is-hidden,
.request-product-source-options.is-hidden {
    display: none;
}

.request-catalog-price {
    align-self: end;
    min-height: 38px;
    color: var(--muted);
    font-size: 13px;
}

.document-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.document-lookup button {
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 14px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.document-lookup button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.document-message {
    min-height: 18px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.document-items {
    display: grid;
    gap: 8px;
}

.document-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 96px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #20252a;
}

.document-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.document-product-name {
    font-size: 13px;
}

.document-item input[type="number"] {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 8px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.document-item input[type="number"]:disabled {
    color: var(--muted);
    background: #1a1f23;
}

.document-item small {
    grid-column: 2 / -1;
    color: var(--muted);
    font-size: 11px;
}

.return-member-field.is-hidden {
    display: none;
}

.return-form-actions {
    display: flex;
    justify-content: flex-end;
}

.return-form-actions button {
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 16px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.return-form-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.return-history {
    margin-top: 4px;
}

.section-title {
    margin-bottom: 12px;
    min-width: 0;
}

.section-title h2,
.section-title p {
    margin: 0;
}

.section-title p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.daily-briefing-generator,
.daily-briefing-active,
.daily-briefing-history {
    background: var(--panel, #1c2126);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}

.daily-briefing-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.daily-briefing-category-card {
    background: #252c32;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

.daily-briefing-category-card h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.daily-briefing-category-headline {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
}

.daily-briefing-category-card ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--ink);
}

.daily-briefing-category-card li {
    margin-bottom: 4px;
}

.daily-briefing-manual-card {
    background: #252c32;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.daily-briefing-manual-card h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.daily-briefing-manual-card p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
}

.daily-briefing-manual-card textarea {
    width: 100%;
    resize: vertical;
    background: #1c2126;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    color: var(--ink);
    font-size: 13px;
    font-family: inherit;
}

.daily-briefing-manual-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.daily-briefing-manual-card-actions button {
    background: #252c32;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.daily-briefing-manual-card-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.daily-briefing-manual-card-actions small {
    color: var(--muted);
    font-size: 12px;
}

.daily-briefing-manual-card-actions small.is-success { color: #4ed18c; }
.daily-briefing-manual-card-actions small.is-error { color: #ff8c8c; }

.daily-briefing-generator-actions {
    display: flex;
    justify-content: flex-end;
}

.daily-briefing-generator-actions button,
.daily-briefing-card-header button {
    background: #4a8dff;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.daily-briefing-generator-actions button:disabled,
.daily-briefing-card-header button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#daily-briefing-start-button {
    background: #2fa84f;
}

#daily-briefing-start-button:hover,
#daily-briefing-start-button:focus {
    background: #278f43;
}

.daily-briefing-card-header button.daily-briefing-end-button {
    background: #e5484d;
}

.daily-briefing-card-header button.daily-briefing-end-button:hover,
.daily-briefing-card-header button.daily-briefing-end-button:focus {
    background: #c93d41;
}

.daily-briefing-generator-actions {
    align-items: center;
    gap: 12px;
}

.daily-briefing-timer {
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 4px;
}

.daily-briefing-completed-note {
    margin: 0;
    color: #5a8d79;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.daily-briefing-status {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.daily-briefing-status-ongoing {
    color: #4a8dff;
}

.daily-briefing-status-ended {
    color: #5a8d79;
}

.daily-briefing-empty {
    text-align: center;
    color: var(--muted);
    padding: 24px 0;
}

.daily-briefing-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.daily-briefing-active-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.daily-briefing-card {
    background: #252c32;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
}

.daily-briefing-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.daily-briefing-card-header h3 {
    margin: 0;
    font-size: 15px;
}

.daily-briefing-card-header p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.daily-briefing-joined {
    color: #5a8d79;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.daily-briefing-participants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

.daily-briefing-participant-badge {
    display: inline-block;
    background: #2f383f;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--ink);
    margin-right: 4px;
}

.return-table {
    min-width: 1060px;
}

.return-product-quantity {
    color: #ff6b6b;
    font-weight: 700;
}

.return-customer-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.return-customer-name i {
    color: var(--accent);
    font-size: 15px;
}

.return-delay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff8c8c;
    white-space: nowrap;
}

.return-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.return-supplier-select {
    width: min(180px, 100%);
    padding: 5px 9px;
    border: 1px solid #68727a;
    border-radius: 999px;
    color: #d5dde2;
    background: #2b3136;
    font-size: 12px;
    font-weight: 700;
}

.return-status-cell {
    text-align: center;
}

.return-status-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.return-status-updated {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.return-status-staff {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.return-status.status-waiting {
    border: 1px solid #68727a;
    color: #c1c8cd;
    background: #2b3136;
}

.return-status.status-checked {
    border: 1px solid #d9892b;
    color: #ffc15e;
    background: #3d3020;
}

.return-status.status-vendor {
    border: 1px solid #5aa4ff;
    color: #9ec9ff;
    background: #203a5b;
}

.return-status.status-arrived {
    border: 1px solid #e88ebc;
    color: #ffc0df;
    background: #4a263b;
}

.return-status.status-contacted {
    border: 1px solid #bd82e6;
    color: #dcb4ff;
    background: #39274f;
}

.return-status.status-complete {
    border: 1px solid var(--ok);
    color: #8de8be;
    background: #173f35;
}

.return-status.status-rejected,
.return-status.status-cancelled {
    border: 1px solid var(--bad);
    color: #ffabb0;
    background: #4b262b;
}

.data-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: #68727a #1c2126;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.table-wrap,
.user-management-table-wrap,
.staff-performance-top-products-table-wrap,
.sales-target-progress-scroll,
.sales-target-scheme-scroll,
.sales-target-scheme-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: #68727a #1c2126;
}

.data-table-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.user-management-table-wrap::-webkit-scrollbar,
.staff-performance-top-products-table-wrap::-webkit-scrollbar,
.sales-target-progress-scroll::-webkit-scrollbar,
.sales-target-scheme-scroll::-webkit-scrollbar,
.sales-target-scheme-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.data-table-wrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.user-management-table-wrap::-webkit-scrollbar-track,
.staff-performance-top-products-table-wrap::-webkit-scrollbar-track,
.sales-target-progress-scroll::-webkit-scrollbar-track,
.sales-target-scheme-scroll::-webkit-scrollbar-track,
.sales-target-scheme-table-wrap::-webkit-scrollbar-track {
    background: #1c2126;
}

.data-table-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.user-management-table-wrap::-webkit-scrollbar-thumb,
.staff-performance-top-products-table-wrap::-webkit-scrollbar-thumb,
.sales-target-progress-scroll::-webkit-scrollbar-thumb,
.sales-target-scheme-scroll::-webkit-scrollbar-thumb,
.sales-target-scheme-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #68727a;
}

[data-ajax-region].is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.customer-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.customer-sort-link:hover {
    color: var(--accent);
}

.customer-sort-link i {
    font-size: 10px;
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.sales-table {
    min-width: 1200px;
}

.sales-table th {
    background: #252c32;
}

.numeric-cell {
    text-align: right !important;
    white-space: nowrap;
}

.cost-cell { color: #ff8c8c; }
.sale-cell { color: #e8a7e8; }
.profit-cell { color: var(--ok); font-weight: 700; }

.bank-mutation-debit { color: #ff8c8c; font-weight: 600; }
.bank-mutation-credit { color: var(--ok); font-weight: 600; }
.bank-mutation-balance { color: var(--ink); font-weight: 600; }

.bank-mutations-search label {
    flex: 1;
}

.deposit-saving-form {
    margin: 0;
}

.deposit-saving-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deposit-saving-input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--ink);
    background: #20272c;
    font: inherit;
    text-align: right;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.deposit-saving-input::placeholder {
    color: #83909a;
}

.deposit-saving-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 121, 92, 0.16);
}

.deposit-saving-save-button {
    flex-shrink: 0;
    margin-right: 0;
}

.data-table th.deposit-center-cell,
.data-table td.deposit-center-cell {
    text-align: center !important;
}

.bank-mutations-search input[type="search"] {
    width: 100%;
    min-width: 260px;
}

.filter-hint {
    margin: -8px 0 16px;
    color: var(--muted);
    font-size: 12px;
}

.discount-note {
    display: block;
    margin-top: 4px;
    color: #ffc15e;
    font-size: 11px;
    font-weight: 600;
}

.data-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.table-pagination-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.table-pagination-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.table-pagination-toolbar select {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.pagination a,
.pagination button,
.pagination-disabled {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: #252c32;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.pagination a:hover,
.pagination button:hover:not(:disabled) {
    border-color: var(--accent);
}

.pagination-disabled {
    color: #68727a;
    cursor: default;
}

.type-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.type-tag.member { background: #203a5b; color: #9ec9ff; }
.type-tag.grosir { background: #173f35; color: #8de8be; }
.type-tag.non-member { background: #4a3020; color: #ffbb7c; white-space: nowrap; }
.type-tag.cash-flow-in { background: #173f35; color: #8de8be; }
.type-tag.cash-flow-out { background: #4a252b; color: #ff9da5; }
.type-tag.cashier-store-one { background: #203a5b; color: #9ec9ff; }
.type-tag.cashier-store-two { background: #5a351d; color: #ffbb7c; }
.type-tag.request-type-store { background: #203a5b; color: #9ec9ff; }
.type-tag.request-type-customer { background: #5a351d; color: #ffbb7c; }

.customer-phone-mask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.customer-phone-value {
    font-variant-numeric: tabular-nums;
}

.customer-phone-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.customer-phone-eye:hover,
.customer-phone-eye:focus-visible {
    color: var(--ink);
    border-color: var(--accent);
    outline: none;
}

.customer-phone-eye[aria-pressed="true"] {
    color: var(--accent);
    border-color: var(--accent);
}

.table-action-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.table-action-cell form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.table-action-cell > * + * {
    margin-left: 12px;
}

.table-action-cell .delete-confirm-form {
    margin-left: 12px;
}

.data-table td.table-action-cell,
.data-table th.table-action-cell {
    vertical-align: middle;
}

.data-table tbody td {
    vertical-align: middle;
}

.table-delete-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #9f4048;
    border-radius: 6px;
    color: #ff9da5;
    background: #4a252b;
    cursor: pointer;
}

.table-edit-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    margin-right: 6px;
    border: 1px solid #5aa4ff;
    border-radius: 6px;
    color: #9ec9ff;
    background: #203a5b;
    cursor: pointer;
}

.table-edit-button:hover,
.table-edit-button:focus {
    border-color: #9ec9ff;
    outline: none;
    color: #fff;
    background: #2e5685;
}

.table-delete-button:hover,
.table-delete-button:focus {
    border-color: #ff9da5;
    outline: none;
    color: #fff;
    background: #7a303b;
}

.store-issue-resolve-button {
    border-color: #3f9f6b;
    color: #8fe3b3;
    background: #1f3f2e;
}

.store-issue-resolve-button:hover,
.store-issue-resolve-button:focus {
    border-color: #8fe3b3;
    outline: none;
    color: #fff;
    background: #2c6b48;
}

.delete-confirm-dialog {
    position: fixed;
    inset: 0;
    width: min(100% - 32px, 380px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin: auto;
    border: 1px solid #9f4048;
    border-radius: 8px;
    padding: 24px;
    color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    text-align: center;
}

.delete-confirm-dialog::backdrop {
    background: rgba(8, 12, 15, 0.72);
}

.delete-confirm-dialog h2,
.delete-confirm-dialog p {
    margin: 0;
}

.delete-confirm-dialog h2 {
    margin-top: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
}

.delete-confirm-dialog p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.request-notes-dialog {
    width: min(100% - 32px, 460px);
    text-align: left;
}

.request-notes-dialog .delete-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
}

.request-notes-dialog h2 {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.request-notes-field {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.request-notes-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.request-notes-field textarea {
    width: 100%;
    min-height: 130px;
    max-height: 42dvh;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    background: #20272c;
    font: inherit;
}

.request-notes-field textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.request-notes-field input[type="text"] {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ink);
    background: #20272c;
    font: inherit;
}

.request-notes-field input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}

.delete-confirm-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #9f4048;
    border-radius: 50%;
    color: #ff9da5;
    background: #4a252b;
    font-size: 19px;
}

.delete-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.delete-cancel-button,
.delete-confirm-button {
    min-height: 38px;
    border-radius: 6px;
    padding: 8px 13px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.delete-cancel-button {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #252c32;
}

.delete-confirm-button {
    border: 1px solid #9f4048;
    color: #fff;
    background: #7a303b;
}

.delete-cancel-button:hover,
.delete-cancel-button:focus {
    border-color: var(--accent);
    outline: none;
}

.delete-confirm-button:hover,
.delete-confirm-button:focus {
    border-color: #ff9da5;
    outline: none;
    background: #9f4048;
}

.delete-cancel-button.is-loading,
.delete-confirm-button.is-loading {
    cursor: wait;
    opacity: .75;
    pointer-events: none;
}

.delete-confirm-button.is-loading i,
.delete-cancel-button.is-loading i {
    animation: attendance-spin .7s linear infinite;
}
.empty-state { color: var(--muted); text-align: center !important; }

.monthly-expense-summary {
    display: grid;
    grid-template-columns: minmax(0, 280px);
    margin-bottom: 14px;
}

.monthly-expense-summary article,
.rent-settings-dialog {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

.monthly-expense-summary article {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border-top: 5px solid #ffbf5b;
}

.monthly-expense-summary span,
.monthly-expense-summary small,
.rent-settings-dialog p {
    color: var(--muted);
}

.monthly-expense-summary strong {
    color: #ffcf7c;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
}

.monthly-expense-period {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.monthly-expense-period label,
.rent-setting-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.rent-setting-form .form-field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    width: 100%;
}

.monthly-expense-period input,
.rent-setting-form input,
.rent-setting-form select,
.monthly-expense-table input {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.rent-settings-dialog {
    width: min(100% - 32px, 500px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: 20px;
    color: var(--ink);
}

.rent-settings-dialog::backdrop {
    background: rgba(8, 12, 15, 0.72);
}

.rent-settings-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rent-settings-dialog h2,
.rent-settings-dialog p {
    margin: 0;
}

.rent-settings-dialog h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
}

.rent-settings-dialog p {
    margin-top: 5px;
    font-size: 13px;
}

.form-inline-error {
    margin: -8px 0 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 13px;
}

.rent-settings-open,
.dialog-close {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #252c32;
    font: inherit;
    cursor: pointer;
}

.rent-settings-open {
    min-height: 38px;
    border-radius: 6px;
    padding: 8px 12px;
}

.rent-settings-open i {
    margin-right: 6px;
    color: var(--accent);
}

.dialog-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 6px;
    padding: 0;
}

.rent-settings-open:hover,
.rent-settings-open:focus,
.dialog-close:hover,
.dialog-close:focus {
    border-color: var(--accent);
    outline: none;
}

.rent-setting-form {
    display: flex;
    align-items: end;
    gap: 8px;
}

.rent-setting-form input {
    width: 170px;
}

.staff-salary-stacked-form {
    flex-direction: column;
    align-items: stretch;
}

.staff-salary-stacked-form label {
    width: 100%;
}

.staff-salary-stacked-form input {
    width: 100%;
}

.supplier-form .form-submit-button {
    justify-content: center;
    margin-top: 10px;
}

.rent-setting-form button,
.monthly-expense-actions button {
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.store-issue-resolve-form {
    display: grid;
    gap: 16px;
}

.store-issue-resolve-form label,
.store-issue-resolve-form .store-issue-resolve-field {
    display: grid;
    gap: 8px;
}

.store-issue-resolve-form label > span,
.store-issue-resolve-form .store-issue-resolve-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.store-issue-resolve-form textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    background: #20272c;
    font: inherit;
}

.store-issue-resolve-form textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.store-issue-resolve-form > button[type="submit"] {
    justify-self: start;
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 16px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.store-issue-resolve-form > button[type="submit"]:hover,
.store-issue-resolve-form > button[type="submit"]:focus {
    outline: none;
    filter: brightness(1.05);
}

.monthly-expense-table {
    min-width: 760px;
}

.monthly-expense-table td:first-child {
    min-width: 220px;
}

.monthly-expense-table td:first-child strong {
    display: block;
}

.monthly-expense-table td:first-child i {
    margin-right: 6px;
    color: var(--accent);
}

.monthly-expense-table input {
    width: 100%;
}

.monthly-expense-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.sales-target-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.sales-target-overview {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.supervisor-daily-target-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supervisor-daily-target-overview .sales-target-overview-details {
    grid-column: 1 / -1;
}

.supervisor-daily-target-calendar-panel {
    margin-bottom: 14px;
}

.supervisor-daily-target-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 7px;
    margin-top: 14px;
    overflow-x: auto;
}

.supervisor-daily-target-weekday {
    padding: 0 4px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.supervisor-daily-target-calendar-empty {
    min-height: 104px;
    border: 1px dashed #30373d;
    border-radius: 6px;
}

.supervisor-daily-target-calendar-day {
    display: flex;
    min-width: 92px;
    min-height: 104px;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid var(--line);
    border-top: 3px solid #4d5961;
    border-radius: 6px;
    color: inherit;
    background: #20262b;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}

.supervisor-daily-target-calendar-day:hover {
    border-color: #75c9f3;
    transform: translateY(-1px);
}

.supervisor-daily-target-calendar-day time {
    color: #c1c8cd;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.supervisor-daily-target-calendar-day strong,
.supervisor-daily-target-calendar-day small {
    display: block;
    white-space: nowrap;
}

.supervisor-daily-target-calendar-day strong {
    margin-top: 12px;
    color: #aeb6ba;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
}

.supervisor-daily-target-calendar-day small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    text-overflow: ellipsis;
}

.supervisor-daily-target-calendar-day.has-bonus {
    border-top-color: #ffc15e;
    background: #29251c;
}

.supervisor-daily-target-calendar-day.has-bonus time,
.supervisor-daily-target-calendar-day.has-bonus strong { color: #ffc15e; }

.supervisor-daily-target-calendar-day.no-bonus { background: #1c2126; }

.supervisor-daily-target-calendar-day.is-future {
    border-color: #30373d;
    border-top-color: #30373d;
    background: #181c20;
    opacity: 0.7;
}

.supervisor-daily-target-calendar-day.is-future small {
    margin-top: auto;
    color: #68727a;
    white-space: normal;
}

.supervisor-daily-target-calendar-day.is-selected {
    box-shadow: inset 0 0 0 1px #75c9f3;
}

.supervisor-daily-target-calendar-day.is-selected::after {
    align-self: flex-start;
    margin-top: 5px;
    padding: 2px 5px;
    border-radius: 3px;
    color: #9edaff;
    background: #203a4e;
    content: 'DIPILIH';
    font-size: 8px;
    font-weight: 700;
}

.attendance-page-header .today-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.attendance-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.attendance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.attendance-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--muted);
    background: #252c32;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.attendance-tabs a:hover {
    border-color: #687782;
    color: var(--ink);
}

.attendance-tabs a.is-active {
    border-color: var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
}

.attendance-log-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: #1c2126;
}

.attendance-log-panel .section-title { margin-bottom: 14px; }

.attendance-log-table-wrap { margin-top: 12px; }

.attendance-log-table { min-width: 1120px; }

.attendance-log-table td strong,
.attendance-log-table td small {
    display: block;
}

.attendance-log-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.schedule-change-diff {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d8e5ea;
    white-space: nowrap;
}

.schedule-change-diff i { color: var(--muted); }

.schedule-note-diff {
    display: grid;
    min-width: 220px;
    gap: 3px;
}

.schedule-log-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
}

.schedule-log-type.manual {
    color: #ffd991;
    background: rgba(255, 193, 94, 0.14);
}

.schedule-log-type.auto {
    color: #a7e8c2;
    background: rgba(78, 209, 140, 0.14);
}

.attendance-filter select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 11px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.attendance-overview {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, 1.35fr);
    gap: 12px;
    margin-bottom: 14px;
}

.attendance-staff-card,
.attendance-off-quota,
.attendance-shift-note,
.attendance-analysis-card,
.attendance-calendar-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.attendance-staff-card,
.attendance-off-quota {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
}

.attendance-staff-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid #58baff;
    border-radius: 50%;
    color: #a8dbff;
    background: #173142;
    font-size: 18px;
}

.attendance-staff-card span:not(.attendance-staff-avatar),
.attendance-off-quota span,
.attendance-staff-card small,
.attendance-off-quota small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.attendance-staff-card strong,
.attendance-off-quota strong {
    display: block;
    margin: 3px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
}

.attendance-off-quota {
    justify-content: space-between;
    border-left: 4px solid #63c9a0;
}

.attendance-off-quota strong { color: #8ee6ba; }
.attendance-off-quota strong small { display: inline; color: inherit; font: inherit; }
.attendance-off-quota > i { color: #8ee6ba; font-size: 26px; }
.attendance-off-quota.is-full { border-left-color: #ffc15e; }
.attendance-off-quota.is-full strong,
.attendance-off-quota.is-full > i { color: #ffd38a; }

.attendance-shift-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 112px;
    padding: 16px;
    border-left: 4px solid #75c9f3;
}

.attendance-shift-note > i { color: #8bd4ff; font-size: 18px; }
.attendance-shift-note p { margin: 0; color: #c6d3da; font-size: 12px; line-height: 1.6; }

.attendance-analysis-card {
    grid-column: span 2;
    padding: 16px;
    border-left: 4px solid #75c9f3;
}

.attendance-analysis-card .section-title { margin-bottom: 10px; }
.attendance-analysis-card .section-title h2 { margin: 0; font-size: 16px; }
.attendance-analysis-card .section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.attendance-analysis-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.attendance-analysis-item {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #1c2126;
}

.attendance-analysis-item > i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 15px;
}

.attendance-analysis-item strong { display: block; font-size: 13px; }
.attendance-analysis-item p { margin: 4px 0 0; color: #c6d3da; font-size: 11px; line-height: 1.45; }
.attendance-analysis-item ul { margin: 8px 0 0; padding-left: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.attendance-analysis-item small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

.attendance-analysis-item.success > i { color: #a7e8c2; background: rgba(78, 209, 140, 0.12); }
.attendance-analysis-item.warning > i { color: #ffd0a3; background: rgba(255, 177, 106, 0.12); }
.attendance-analysis-item.info > i { color: #9ad9ff; background: rgba(88, 186, 255, 0.12); }

.attendance-calendar-panel { padding: 18px; }

.attendance-calendar-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.attendance-calendar-heading h2 { margin: 0; font-size: 18px; }
.attendance-calendar-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.attendance-calendar-tools {
    display: grid;
    justify-items: end;
    gap: 9px;
}

.attendance-calendar-tools form { margin: 0; }
.attendance-calendar-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    border: 1px solid #ffb16a;
    border-radius: 6px;
    padding: 8px 12px;
    color: #1c1f20;
    background: #ffb16a;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}
.attendance-calendar-tools button:disabled { cursor: not-allowed; opacity: .55; }

.attendance-legend {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.attendance-legend span {
    border: 1px solid;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
}

.attendance-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(108px, 1fr));
    gap: 7px;
    overflow-x: auto;
}

.attendance-calendar-weekday {
    padding: 0 4px 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.attendance-calendar-empty {
    min-height: 108px;
    border: 1px dashed #30373d;
    border-radius: 6px;
}

.attendance-calendar-day {
    display: flex;
    min-width: 108px;
    min-height: 108px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid var(--line);
    border-top: 3px solid #75c9f3;
    border-radius: 6px;
    color: var(--ink);
    background: #20262b;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.attendance-calendar-day:hover { border-color: #d5e6ee; transform: translateY(-1px); }
.attendance-calendar-day time { color: #d9e5ea; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.attendance-calendar-day strong { margin-top: 8px; font-size: 12px; }
.attendance-calendar-day small { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.attendance-team-calendar { grid-template-columns: repeat(7, minmax(150px, 1fr)); }

.attendance-team-calendar .attendance-calendar-empty { min-height: 172px; }

.attendance-calendar-day.attendance-team-day {
    min-width: 150px;
    min-height: 172px;
    justify-content: flex-start;
    gap: 8px;
    border-top-color: #4d5961;
    background: #20262b;
}

.attendance-calendar-day.attendance-locked-day,
.attendance-calendar-day.attendance-locked-day:hover {
    cursor: not-allowed;
    border-color: #52606a;
    border-top-color: #8ea0ad;
    background: #252b30;
    transform: none;
}

.attendance-locked-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    gap: 3px;
    color: #c2ccd3;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    vertical-align: middle;
}

.attendance-team-list {
    display: grid;
    width: 100%;
    gap: 7px;
}

.attendance-empty-assignment {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    gap: 6px;
    border: 1px dashed #53606a;
    border-radius: 6px;
    padding: 9px;
    color: #aeb8b2;
    background: rgba(255, 255, 255, 0.025);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.attendance-empty-assignment i { flex: 0 0 auto; color: #ffb16a; }

.attendance-shift-group {
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid #3d4850;
    border-radius: 6px;
    background: rgba(10, 14, 18, 0.2);
}

.attendance-shift-group-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    color: #d7e2e8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
}

.attendance-shift-group-title i { flex: 0 0 auto; font-size: 11px; }
.attendance-shift-group-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-shift-group-title small { margin-left: auto; color: #9faab3 !important; font-size: 9px; font-weight: 700; }

.attendance-shift-group-members {
    display: grid;
    gap: 4px;
}

.attendance-shift-group-morning { border-color: #6d5930; background: rgba(255, 193, 94, 0.08); }
.attendance-shift-group-morning .attendance-shift-group-title { color: #ffd991; }
.attendance-shift-group-evening { border-color: #4c4778; background: rgba(161, 140, 255, 0.08); }
.attendance-shift-group-evening .attendance-shift-group-title { color: #cbbfff; }
.attendance-shift-group-admin { border-color: #725d31; background: rgba(255, 193, 94, 0.1); }
.attendance-shift-group-admin .attendance-shift-group-title { color: #ffd991; }
.attendance-shift-group-operasional-pagi { border-color: #2f6e63; background: rgba(74, 216, 189, 0.08); }
.attendance-shift-group-operasional-pagi .attendance-shift-group-title { color: #7fe0cb; }
.attendance-shift-group-operasional-siang { border-color: #6e3e6a; background: rgba(215, 130, 209, 0.08); }
.attendance-shift-group-operasional-siang .attendance-shift-group-title { color: #eab3e6; }
.attendance-shift-group-off { border-color: #4d6f61; background: rgba(78, 209, 140, 0.07); }
.attendance-shift-group-off .attendance-shift-group-title { color: #a7e8c2; }
.attendance-shift-group-permission { border-color: #7a5739; background: rgba(255, 177, 106, 0.08); }
.attendance-shift-group-permission .attendance-shift-group-title { color: #ffd0a3; }
.attendance-shift-group-sick { border-color: #73444e; background: rgba(255, 125, 140, 0.08); }
.attendance-shift-group-sick .attendance-shift-group-title { color: #ffb2bc; }
.attendance-shift-group-leave { border-color: #476b6a; background: rgba(115, 209, 203, 0.08); }
.attendance-shift-group-leave .attendance-shift-group-title { color: #a9e0dd; }

.attendance-locked-day .attendance-shift-group { background: rgba(255, 255, 255, 0.03); }

.attendance-locked-day .attendance-shift-group-morning { border-color: #7b5e42; }
.attendance-locked-day .attendance-shift-group-evening { border-color: #5c4f72; }
.attendance-locked-day .attendance-shift-group-admin { border-color: #796443; }
.attendance-locked-day .attendance-shift-group-operasional-pagi { border-color: #3d7a6f; }
.attendance-locked-day .attendance-shift-group-operasional-siang { border-color: #7c4d78; }
.attendance-locked-day .attendance-shift-group-off { border-color: #536f5f; }
.attendance-locked-day .attendance-shift-group-permission { border-color: #765d48; }
.attendance-locked-day .attendance-shift-group-sick { border-color: #75505a; }
.attendance-locked-day .attendance-shift-group-leave { border-color: #516c6b; }

.attendance-staff-entry {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 5px;
    border: 1px solid;
    border-radius: 5px;
    padding: 4px 5px;
    font-size: 10px;
    line-height: 1.2;
}

.attendance-staff-entry b {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-staff-entry small {
    flex: 0 0 auto;
    color: inherit !important;
    font-size: 9px;
    font-weight: 700;
}

.shift-one { border-color: #398cc0 !important; color: #9ad9ff !important; background: #173142 !important; }
.shift-two { border-color: #8872d9 !important; color: #cbbfff !important; background: #2b2548 !important; }
.admin { border-color: #d8a64a !important; color: #ffd991 !important; background: #3b2f1b !important; }
.operasional-pagi { border-color: #2f8f7a !important; color: #7fe0cb !important; background: #123832 !important; }
.operasional-siang { border-color: #a34a9c !important; color: #eab3e6 !important; background: #3a1f38 !important; }
.off { border-color: #5a8d79 !important; color: #a7e8c2 !important; background: #1f3b2f !important; }
.permission { border-color: #d89155 !important; color: #ffd0a3 !important; background: #423023 !important; }
.sick { border-color: #c46676 !important; color: #ffb2bc !important; background: #43262d !important; }
.leave { border-color: #6b9d9b !important; color: #a9e0dd !important; background: #203b3b !important; }

.attendance-calendar-day.shift-one { border-top-color: #58baff !important; }
.attendance-calendar-day.shift-two { border-top-color: #a18cff !important; }
.attendance-calendar-day.admin { border-top-color: #ffc15e !important; }
.attendance-calendar-day.operasional-pagi { border-top-color: #4ad8bd !important; }
.attendance-calendar-day.operasional-siang { border-top-color: #d782d1 !important; }
.attendance-calendar-day.off { border-top-color: #4ed18c !important; }
.attendance-calendar-day.permission { border-top-color: #ffb16a !important; }
.attendance-calendar-day.sick { border-top-color: #ff7d8c !important; }
.attendance-calendar-day.leave { border-top-color: #73d1cb !important; }

.attendance-modal {
    position: fixed;
    z-index: 1020;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.attendance-modal.is-open { display: flex; }
.attendance-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 9, 12, 0.76); backdrop-filter: blur(4px); }

.attendance-modal-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #465867;
    border-radius: 8px;
    background: #1c242b;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.attendance-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.attendance-modal-header .eyebrow { margin-bottom: 4px; }
.attendance-modal-header h2 { margin: 0; font-size: 20px; }
.attendance-modal-header p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.attendance-modal-header button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid #45525c; border-radius: 5px; color: #b7c5cc; background: #242e35; cursor: pointer; }

.attendance-schedule-form { display: grid; gap: 14px; }
.attendance-modal-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.attendance-modal-message[hidden] { display: none; }
.attendance-modal-message i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.attendance-modal-message.error { border-color: #c46676; color: #ffb2bc; background: rgba(196, 102, 118, 0.12); }
.attendance-modal-message.success { border-color: #5a8d79; color: #a7e8c2; background: rgba(90, 141, 121, 0.12); }
.attendance-schedule-form label > span { display: block; margin-bottom: 6px; color: #b9cbd6; font-size: 12px; }
.attendance-schedule-form select,
.attendance-schedule-form input[type="time"],
.attendance-schedule-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: var(--ink); background: #252c32; font: inherit; }
.attendance-schedule-form select,
.attendance-schedule-form input[type="time"] { min-height: 42px; color-scheme: dark; }
.attendance-schedule-form input[type="time"] { cursor: pointer; }
.attendance-schedule-form textarea { resize: vertical; }
.attendance-schedule-form select:focus,
.attendance-schedule-form input[type="time"]:focus,
.attendance-schedule-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 121, 92, 0.16); }
.attendance-modal-help { display: flex; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.attendance-modal-help i { color: #8bd4ff; }
.attendance-modal-feedback { border: 1px solid #c46676; border-radius: 8px; padding: 11px 13px; color: #ffb2bc; background: rgba(196, 102, 118, 0.16); font-size: 13px; font-weight: 700; }
.attendance-modal-feedback[hidden] { display: none; }
.attendance-modal-actions { display: grid; gap: 10px; }
.attendance-modal-actions button { min-height: 40px; border: 1px solid var(--accent); border-radius: 6px; padding: 8px 13px; color: var(--accent-ink); background: var(--accent); cursor: pointer; font: inherit; font-weight: 700; }
.attendance-modal-actions button:disabled { cursor: progress; opacity: .72; }
.attendance-modal-actions .filter-reset { border-color: var(--line); color: var(--muted); background: #252c32; }

@media (max-width: 980px) {
    .attendance-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-shift-note { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .attendance-overview { grid-template-columns: 1fr; }
    .attendance-shift-note { grid-column: auto; }
    .attendance-calendar-heading { flex-direction: column; }
    .attendance-legend { justify-content: flex-start; }
    .attendance-modal { align-items: center; padding: 12px; }
    .attendance-modal-panel { width: 100%; max-height: calc(100dvh - 24px); border: 1px solid #465867; border-radius: 8px; }
}

.sales-target-current-tier,
.sales-target-overview-details,
.sales-target-progress-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-target-current-tier {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 122px;
    padding: 17px;
    overflow: hidden;
    border-left: 4px solid #7f8a92;
}

.sales-target-current-tier::after {
    position: absolute;
    right: -20px;
    bottom: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    content: '';
}

.sales-target-current-tier.coral { border-left-color: #ff9b72; }
.sales-target-current-tier.blue { border-left-color: #75c9f3; }
.sales-target-current-tier.gold { border-left-color: #ffc15e; }
.sales-target-current-tier.purple { border-left-color: #c99cff; }
.sales-target-current-tier.green { border-left-color: #8de8be; }

.sales-target-current-tier span,
.sales-target-current-tier small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.sales-target-current-tier strong {
    display: block;
    margin: 4px 0;
    color: #ffc15e;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
}

.sales-target-current-tier > i {
    position: relative;
    z-index: 1;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    color: #1d1f20;
    background: #ffc15e;
    font-size: 27px;
}

.sales-target-overview-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 17px;
}

.sales-target-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-target-overview-metrics > div {
    min-width: 0;
    padding: 0 18px;
    border-right: 1px solid var(--line);
}

.sales-target-overview-metrics > div:first-child { padding-left: 0; }
.sales-target-overview-metrics > div:last-child { padding-right: 0; border-right: 0; }
.sales-target-overview-metrics span { display: block; color: var(--muted); font-size: 11px; }

.sales-target-overview-metrics strong {
    display: block;
    margin-top: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.sales-target-overview-metrics strong.gold { color: #ffc15e; }

.sales-target-overview-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 11px;
}

.sales-target-progress-status.remaining { color: #ff9b9b; }
.sales-target-progress-status.complete { color: #8de8be; }

.sales-rating-bonus-summary {
    margin-bottom: 14px;
}

.sales-rating-bonus-summary article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 4px solid #ffc15e;
    border-radius: 8px;
    background: #1c2126;
}

.sales-rating-bonus-summary span,
.sales-rating-bonus-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.sales-rating-bonus-summary strong {
    display: block;
    margin: 4px 0;
    color: #ffc15e;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 27px;
}

.sales-rating-bonus-summary strong.negative { color: #ff9b9b; }

.sales-rating-bonus-summary > article > i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    color: #1d1f20;
    background: #ffc15e;
    font-size: 26px;
}

.sales-rating-bonus-panel {
    margin-bottom: 14px;
}

.sales-rating-bonus-panel .section-title { margin-bottom: 10px; }
.sales-rating-bonus-panel .section-title h2 { font-size: 18px; }
.sales-rating-bonus-panel .section-title p { font-size: 12px; }

.sales-rating-bonus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sales-rating-bonus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-rating-bonus-card.skip { border-left-color: #9ec9ff; }
.sales-rating-bonus-card.dissatisfied { border-left-color: #ff8c8c; }
.sales-rating-bonus-card.neutral { border-left-color: #ffc15e; }
.sales-rating-bonus-card.satisfied { border-left-color: #8de8be; }

.sales-rating-bonus-card > i { font-size: 22px; }
.sales-rating-bonus-card.skip > i { color: #9ec9ff; }
.sales-rating-bonus-card.dissatisfied > i { color: #ff8c8c; }
.sales-rating-bonus-card.neutral > i { color: #ffc15e; }
.sales-rating-bonus-card.satisfied > i { color: #8de8be; }

.sales-rating-bonus-card span,
.sales-rating-bonus-card small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.sales-rating-bonus-card strong {
    display: block;
    margin: 2px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
}

.sales-rating-bonus-card > b {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.sales-rating-bonus-card > b.positive { color: #8de8be; background: #173f35; }
.sales-rating-bonus-card > b.negative { color: #ff9b9b; background: #492b2b; }
.sales-rating-bonus-card > b.neutral { color: #c1c8cd; background: #2b3136; }

.sales-member-bonus-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.sales-member-bonus-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 4px solid #75c9f3;
    border-radius: 8px;
    background: #1c2126;
}

.sales-member-bonus-card.bonus { border-left-color: #ffc15e; }

.sales-member-bonus-card > i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #1d1f20;
    background: #75c9f3;
    font-size: 21px;
}

.sales-member-bonus-card.bonus > i { background: #ffc15e; }
.sales-member-bonus-card span,
.sales-member-bonus-card small { display: block; color: var(--muted); font-size: 12px; }

.sales-member-bonus-card strong {
    display: block;
    margin: 3px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
}

.sales-member-bonus-card.bonus strong { color: #ffc15e; }

.sales-member-bonus-card.members.rank-one { border-left-color: #ffc15e; background: #29251c; }
.sales-member-bonus-card.members.rank-one > i { background: #ffc15e; }
.sales-member-bonus-card.members.rank-one strong { color: #ffc15e; }
.sales-member-bonus-card.members.rank-two { border-left-color: #9fc4db; background: #202a31; }
.sales-member-bonus-card.members.rank-two > i { background: #9fc4db; }
.sales-member-bonus-card.members.rank-two strong { color: #c7e3f4; }
.sales-member-bonus-card.members.rank-three { border-left-color: #d9935e; background: #29221d; }
.sales-member-bonus-card.members.rank-three > i { background: #d9935e; }
.sales-member-bonus-card.members.rank-three strong { color: #f0b181; }
.sales-member-bonus-card.members.rank-other { border-left-color: #4d5961; background: #1a1f23; }
.sales-member-bonus-card.members.rank-other > i { color: #aeb6ba; background: #2b3136; }
.sales-member-bonus-card.members.rank-other strong { color: #aeb6ba; }

.sales-member-bonus-rule {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-member-bonus-rule > i { color: #75c9f3; font-size: 22px; }
.sales-member-bonus-rule strong,
.sales-member-bonus-rule span { display: block; }
.sales-member-bonus-rule strong { font-size: 13px; }
.sales-member-bonus-rule span { margin-top: 2px; color: var(--muted); font-size: 12px; }

.sales-ranking-bonus-scheme {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-ranking-bonus-tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sales-ranking-bonus-tier {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-top: 3px solid #68727a;
    border-radius: 8px;
    background: #20262b;
}

.sales-ranking-bonus-tier > i {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
}

.sales-ranking-bonus-tier span,
.sales-ranking-bonus-tier strong,
.sales-ranking-bonus-tier small { display: block; }
.sales-ranking-bonus-tier span { margin-top: 13px; color: var(--muted); font-size: 12px; }
.sales-ranking-bonus-tier strong { margin-top: 3px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; }
.sales-ranking-bonus-tier small { margin-top: 6px; color: var(--muted); font-size: 11px; }

.sales-ranking-bonus-tier.rank-one { border-top-color: #ffc15e; background: #29251c; }
.sales-ranking-bonus-tier.rank-one > i { color: #1d1f20; background: #ffc15e; }
.sales-ranking-bonus-tier.rank-one strong { color: #ffc15e; }
.sales-ranking-bonus-tier.rank-two { border-top-color: #9fc4db; background: #202a31; }
.sales-ranking-bonus-tier.rank-two > i { color: #1d1f20; background: #9fc4db; }
.sales-ranking-bonus-tier.rank-two strong { color: #c7e3f4; }
.sales-ranking-bonus-tier.rank-three { border-top-color: #d9935e; background: #29221d; }
.sales-ranking-bonus-tier.rank-three > i { color: #1d1f20; background: #d9935e; }
.sales-ranking-bonus-tier.rank-three strong { color: #f0b181; }
.sales-ranking-bonus-tier.rank-other { border-top-color: #4d5961; background: #1a1f23; }
.sales-ranking-bonus-tier.rank-other > i { color: #aeb6ba; background: #2b3136; }
.sales-ranking-bonus-tier.rank-other strong { color: #aeb6ba; font-size: 16px; }

.sales-ranking-bonus-tier.is-current {
    box-shadow: inset 0 0 0 1px #75c9f3;
}

.sales-ranking-bonus-tier.is-current::after {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 3px 6px;
    border-radius: 4px;
    color: #9edaff;
    background: #203a4e;
    content: 'POSISI ANDA';
    font-size: 9px;
    font-weight: 700;
}

.sales-target-progress-panel {
    padding: 16px;
    margin-bottom: 14px;
}

.sales-target-progress-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.sales-target-progress-heading h2,
.sales-target-progress-heading p { margin: 0; }
.sales-target-progress-heading h2 { font-size: 18px; }
.sales-target-progress-heading p { margin-top: 4px; color: var(--muted); font-size: 12px; }

.sales-target-progress-heading > strong {
    color: #ffc15e;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    white-space: nowrap;
}

.sales-target-progress-scroll { overflow-x: auto; }

.sales-target-progress-panel .sales-target-scheme-track {
    margin: 20px 12px 18px;
}

.sales-target-progress-panel .sales-target-tier-grid { margin-bottom: 0; }

.sales-target-header { margin-bottom: 10px; }
.sales-target-header .eyebrow { margin-bottom: 2px; }
.sales-target-header h1 { font-size: 24px; }
.sales-target-header .subtitle { margin-top: 3px; font-size: 13px; }

.sales-target-filter {
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
}

.sales-target-filter label { gap: 4px; }
.sales-target-filter input,
.sales-target-filter button,
.sales-target-filter .filter-reset { min-height: 34px; padding: 6px 9px; }

.sales-target-commission-card,
.sales-target-mission-card,
.sales-target-tier {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-target-commission-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-left: 4px solid #44c7c1;
}

.sales-target-commission-card.commission {
    border-left-color: #ffc15e;
}

.sales-target-commission-card span,
.sales-target-commission-card small {
    display: block;
    color: var(--muted);
}

.sales-target-commission-card span { font-size: 11px; }
.sales-target-commission-card small { margin-top: 3px; font-size: 11px; }

.sales-target-commission-card strong {
    display: block;
    margin-top: 3px;
    color: #f4f6f8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    overflow-wrap: anywhere;
}

.sales-target-commission-card.commission strong { color: #ffc15e; }

.sales-target-commission-card > i {
    flex: 0 0 auto;
    color: #44c7c1;
    font-size: 25px;
}

.sales-target-commission-card.commission > i { color: #ffc15e; }

.sales-target-mission-card {
    margin-bottom: 14px;
    padding: 12px;
}

.sales-target-mission-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sales-target-mission-heading .eyebrow,
.sales-target-mission-heading h2,
.sales-target-mission-heading p {
    margin: 0;
}

.sales-target-mission-heading h2 {
    margin-top: 2px;
    font-size: 16px;
}

.sales-target-mission-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.sales-target-mission-heading > strong {
    color: #ffc15e;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    white-space: nowrap;
}

.sales-target-progress {
    height: 9px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #252c32;
}

.sales-target-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffc15e;
    transition: width 0.35s ease;
}

.sales-target-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.sales-target-scheme { margin-bottom: 14px; }

.sales-target-scheme .section-title { margin-bottom: 10px; }
.sales-target-scheme .section-title h2 { font-size: 18px; }
.sales-target-scheme .section-title p { font-size: 12px; }

.sales-target-scheme-panel {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.sales-target-scheme-summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sales-target-scheme-summary span,
.sales-target-scheme-summary small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.sales-target-scheme-summary strong {
    display: block;
    margin-top: 2px;
    color: #ffc15e;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
}

.sales-target-scheme-scroll { overflow-x: auto; }

.sales-target-scheme-track,
.sales-target-tier-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    min-width: 750px;
}

.sales-target-scheme-track {
    position: relative;
    margin: 0 8px 8px;
}

.sales-target-scheme-track::before {
    position: absolute;
    z-index: 0;
    top: 11px;
    right: 10%;
    left: 10%;
    height: 3px;
    background: #30373d;
    content: '';
}

.sales-target-track-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
}

.sales-target-track-dot {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 3px solid #d6dde1;
    border-radius: 50%;
    color: #8d989f;
    background: #252c32;
    box-shadow: 0 0 0 4px #1c2126;
    font-size: 9px;
}

.sales-target-track-node.is-reached { color: #ffc15e; }
.sales-target-track-node.is-reached .sales-target-track-dot { border-color: #ffc15e; color: #1d1f20; background: #ffc15e; }
.sales-target-track-node.is-current .sales-target-track-dot { box-shadow: 0 0 0 4px #1c2126, 0 0 0 6px rgba(255, 193, 94, 0.35); }
.sales-target-track-node strong { font-size: 12px; }

.sales-target-tier-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.sales-target-tier {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 86px;
    padding: 10px;
    border: 0;
    border-top: 3px solid var(--line);
    border-radius: 0;
    border-right: 1px solid var(--line);
}

.sales-target-tier:last-child { border-right: 0; }

.sales-target-tier-rate {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 5px;
    color: #1d1f20;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.sales-target-tier h3,
.sales-target-tier p { margin: 0; }
.sales-target-tier h3 { font-size: 13px; line-height: 1.35; }
.sales-target-tier p { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.sales-target-tier-label { display: block; color: var(--muted); font-size: 10px; }
.sales-target-tier.coral { border-top-color: #ff9b72; }
.sales-target-tier.coral .sales-target-tier-rate { background: #ff9b72; }
.sales-target-tier.blue { border-top-color: #75c9f3; }
.sales-target-tier.blue .sales-target-tier-rate { background: #75c9f3; }
.sales-target-tier.gold { border-top-color: #ffc15e; }
.sales-target-tier.gold .sales-target-tier-rate { background: #ffc15e; }
.sales-target-tier.purple { border-top-color: #c99cff; }
.sales-target-tier.purple .sales-target-tier-rate { background: #c99cff; }
.sales-target-tier.green { border-top-color: #8de8be; }
.sales-target-tier.green .sales-target-tier-rate { background: #8de8be; }

.sales-target-tier.is-active {
    border-top-color: #ffc15e;
    box-shadow: inset 0 0 0 1px rgba(255, 193, 94, 0.2);
}

.sales-target-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 4px;
    color: #8de8be;
    background: #173f35;
    font-size: 12px;
    font-weight: 700;
    grid-column: 1 / -1;
    justify-self: start;
}

.sales-target-scheme-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.sales-target-scheme-table {
    width: 100%;
    min-width: 690px;
    border-collapse: collapse;
    font-size: 12px;
}

.sales-target-scheme-table th,
.sales-target-scheme-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.sales-target-scheme-table th {
    color: var(--muted);
    background: #252c32;
    font-size: 11px;
    font-weight: 600;
}

.sales-target-scheme-table tbody tr:last-child td { border-bottom: 0; }
.sales-target-scheme-table tbody tr.is-active td {
    color: #f4f6f8;
    background: rgba(255, 193, 94, 0.13);
    border-top: 1px solid #ffc15e;
    border-bottom-color: #ffc15e;
}

.sales-target-scheme-table tbody tr.is-active td:first-child { border-left: 3px solid #ffc15e; }
.sales-target-scheme-table tbody tr.is-active td:last-child { border-right: 1px solid #ffc15e; }

.sales-target-table-rate {
    display: inline-grid;
    width: 34px;
    height: 28px;
    place-items: center;
    border-radius: 4px;
    color: #1d1f20;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.sales-target-table-rate.coral { background: #ff9b72; }
.sales-target-table-rate.blue { background: #75c9f3; }
.sales-target-table-rate.gold { background: #ffc15e; }
.sales-target-table-rate.purple { background: #c99cff; }
.sales-target-table-rate.green { background: #8de8be; }
.sales-target-table-rate.supervisor-daily-target-bonus {
    width: auto;
    min-width: 88px;
    padding: 0 8px;
    color: #c7e3f4;
    background: #203a4e;
    white-space: nowrap;
}

.sales-target-table-rate.supervisor-daily-target-bonus.gold {
    color: #1d1f20;
    background: #ffc15e;
}

.sales-target-table-status { color: var(--muted); }

.priority-bonus-setting-form span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
}

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

.priority-bonus-summary article,
.priority-bonus-settings-panel,
.priority-bonus-sales-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1c2126;
}

.priority-bonus-summary article {
    padding: 15px 16px;
    border-left: 4px solid #75c9f3;
}

.priority-bonus-summary article:first-child { border-left-color: #ffc15e; }
.priority-bonus-summary article.finished { border-left-color: #8de8be; }
.priority-bonus-summary span,
.priority-bonus-summary small { display: block; color: var(--muted); font-size: 12px; }
.priority-bonus-summary strong {
    display: block;
    margin: 4px 0;
    color: #f4f6f8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
}
.priority-bonus-summary article:first-child strong { color: #ffc15e; }
.priority-bonus-summary article.finished strong { color: #8de8be; }

.priority-bonus-performance-header {
    align-items: center;
}

.priority-bonus-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--accent-ink);
    background: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

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

.priority-bonus-performance-summary article {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid #75c9f3;
    border-radius: 8px;
    background: #1c2126;
}

.priority-bonus-performance-summary .bonus-paid { border-left-color: #ffc15e; }
.priority-bonus-performance-summary .profit-earned { border-left-color: #8de8be; }
.priority-bonus-performance-summary .profit-earned.negative { border-left-color: #ff9b9b; }
.priority-bonus-performance-summary span,
.priority-bonus-performance-summary small { display: block; color: var(--muted); font-size: 12px; }
.priority-bonus-performance-summary strong {
    display: block;
    margin: 4px 0;
    color: #f4f6f8;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    overflow-wrap: anywhere;
}
.priority-bonus-performance-summary .bonus-paid strong { color: #ffc15e; }
.priority-bonus-performance-summary .profit-earned strong { color: #8de8be; }
.priority-bonus-performance-summary .profit-earned.negative strong { color: #ffabab; }

.priority-bonus-performance-section { margin-bottom: 14px; }

.priority-bonus-settings-panel,
.priority-bonus-sales-panel { margin-bottom: 14px; padding: 16px; }
.priority-bonus-section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.priority-bonus-section-heading h2 { margin: 0; font-size: 18px; }
.priority-bonus-section-heading p,
.priority-bonus-empty { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.priority-bonus-section-heading > strong { color: #75c9f3; font-size: 13px; white-space: nowrap; }

.priority-bonus-setting-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 180px) minmax(150px, 180px) auto;
    align-items: start;
    gap: 10px;
}
.priority-bonus-setting-form > label {
    display: grid;
    gap: 6px;
}

.priority-bonus-setting-form > label > input,
.priority-bonus-setting-form .lookup-control > input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
}

.priority-bonus-setting-form > label > small {
    color: var(--muted);
    font-size: 11px;
}

.priority-bonus-setting-form > button {
    margin-top: 23px;
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--accent-ink);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.priority-bonus-setting-form > button:disabled { cursor: not-allowed; opacity: .55; }

.priority-bonus-settings-table { min-width: 1020px; }
.profit-sharing-group-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profit-sharing-group-option { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #252c32; cursor: pointer; }
.profit-sharing-group-option input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.profit-sharing-group-option span { min-width: 0; }
.profit-sharing-group-option strong { display: block; overflow-wrap: anywhere; font-size: 13px; }
.profit-sharing-group-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.profit-sharing-settings-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.profit-sharing-settings-actions button { min-height: 38px; border: 1px solid var(--accent); border-radius: 6px; padding: 8px 14px; color: var(--accent-ink); background: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.profit-sharing-settings-actions button:hover { filter: brightness(1.06); }
.priority-bonus-settings-table td:first-child strong,
.priority-bonus-settings-table td:first-child small { display: block; }
.priority-bonus-settings-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.priority-bonus-profit { display: block; color: #8de8be; }
.priority-bonus-profit.negative { color: #ffabab; }
.priority-bonus-profit + small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.priority-bonus-actions { width: 54px; text-align: right; }
.priority-bonus-delete {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #7e4b4b;
    border-radius: 6px;
    padding: 0;
    color: #ffabab;
    background: #3a2828;
    cursor: pointer;
}
.priority-bonus-status { display: inline-block; padding: 3px 7px; border-radius: 4px; font-size: 11px; }
.priority-bonus-status.active { color: #8de8be; background: #173f35; }
.priority-bonus-status.inactive { color: #ffabab; background: #492b2b; }

.priority-bonus-product-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.priority-bonus-product {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-left: 3px solid #64717a;
    border-radius: 7px;
    background: #232a30;
}
.priority-bonus-product.earned { border-left-color: #ffc15e; }
.priority-bonus-product.finished { border-color: #486a5b; border-left-color: #8de8be; background: #1f2d2a; }
.priority-bonus-product-heading { display: flex; justify-content: space-between; gap: 12px; }
.priority-bonus-product h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.priority-bonus-product-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.priority-bonus-product-heading > strong { color: #ffc15e; font-family: 'Space Grotesk', sans-serif; font-size: 16px; white-space: nowrap; }
.priority-bonus-finished-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 7px; border-radius: 4px; color: #8de8be; background: #173f35; font-size: 11px; font-weight: 800; }
.priority-bonus-product dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 13px 0 10px; }
.priority-bonus-product dt { color: var(--muted); font-size: 11px; }
.priority-bonus-product dd { margin: 3px 0 0; font-size: 13px; font-weight: 700; }
.priority-bonus-product .priority-bonus-period { grid-column: 1 / -1; }
.priority-bonus-product .priority-bonus-period dd { white-space: nowrap; }
.priority-bonus-progress { height: 5px; overflow: hidden; border-radius: 3px; background: #384148; }
.priority-bonus-progress span { display: block; height: 100%; border-radius: inherit; background: #ffc15e; }
.priority-bonus-product > p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.flatpickr-input {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--ink);
    background: #252c32;
    font: inherit;
    cursor: pointer;
}

.flatpickr-calendar {
    width: 310px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #1c2126;
    box-shadow: var(--shadow);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: #1c2126; }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: #1c2126; }
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday { color: var(--muted); background: #1c2126; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: var(--ink); background: #1c2126; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--ink); background: #252c32; }
.flatpickr-prev-month,
.flatpickr-next-month { fill: var(--muted); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-day { color: var(--ink); border-color: transparent; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #6f7a80; }
.flatpickr-day:hover,
.flatpickr-day:focus { border-color: var(--line); background: #303940; }
.flatpickr-day.today { border-color: #75c9f3; }
.flatpickr-day.today:hover,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.flatpickr-monthSelect-months { padding: 10px; }
.flatpickr-monthSelect-month {
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
}
.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus { border-color: var(--line); color: var(--ink); background: #303940; }
.flatpickr-monthSelect-month.selected { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }

html[data-theme="light"] .flatpickr-monthSelect-month { color: var(--ink); }
html[data-theme="light"] .flatpickr-monthSelect-month:hover,
html[data-theme="light"] .flatpickr-monthSelect-month:focus { color: var(--ink); background: #f0f0f0; }

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-y: visible;
    }

    .app-shell.sidebar-hidden {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 0 1fr;
    }

    .sidebar-hidden .sidebar {
        padding-top: 0;
        padding-bottom: 0;
    }

    .cards-grid,
    .customer-summary,
    .customer-crm-summary,
    .sales-summary,
    .sales-dashboard-rating-grid,
    .sales-target-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-payment-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-filter {
        flex-wrap: wrap;
    }

    .sales-filter label {
        flex: 1 1 180px;
    }

    .sales-target-overview {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .sales-rating-bonus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-member-bonus-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .priority-bonus-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .profit-sharing-group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .priority-bonus-performance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .sales-target-overview-metrics > div {
        padding: 0 10px;
    }

    .sales-target-overview-metrics strong {
        font-size: 17px;
    }
}

.attendance-widget {
    display: grid;
    gap: 16px;
    margin: 18px 0 24px;
    padding: 20px;
    border: 1px solid #3d4b54;
    border-left: 4px solid #39b9a4;
    border-radius: 8px;
    background: #20272c;
}

.attendance-widget-heading,
.attendance-widget-content,
.attendance-widget-actions,
.attendance-widget-schedules {
    display: flex;
    align-items: center;
}

.attendance-widget-heading,
.attendance-widget-content {
    justify-content: space-between;
    gap: 18px;
}

.attendance-widget-heading h2 { margin: 2px 0 0; font-size: 20px; }
.attendance-widget-heading > a { color: #91d8cf; font-size: 13px; font-weight: 700; text-decoration: none; }
.attendance-widget-heading > a i { margin-right: 6px; }
.attendance-widget-schedules { gap: 10px; flex-wrap: wrap; }
.attendance-widget-schedule { display: grid; gap: 3px; min-width: 178px; padding: 10px 12px; border-left: 3px solid #71818c; background: #181e22; }
.attendance-widget-schedule > span { color: #a3afb6; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.attendance-widget-schedule strong { color: #edf4f4; font-size: 14px; }
.attendance-widget-schedule small { color: #a9b8bd; font-size: 12px; }
.attendance-widget-schedule.shift-one { border-left-color: #f2b84b; }
.attendance-widget-schedule.shift-two { border-left-color: #5aa6f7; }
.attendance-widget-schedule.admin { border-left-color: #b998ea; }
.attendance-widget-schedule.off,
.attendance-widget-schedule.permission,
.attendance-widget-schedule.sick,
.attendance-widget-schedule.leave { border-left-color: #8a98a0; }
.attendance-widget-actions { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.attendance-widget-actions form { margin: 0; }
.attendance-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    min-height: 44px;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.attendance-action-button i { font-size: 18px; }
.attendance-action-button:hover { transform: translateY(-1px); }
.attendance-action-button:focus-visible { outline: 3px solid #d9f6f0; outline-offset: 2px; }
.attendance-action-button.is-loading i { animation: attendance-spin 700ms linear infinite; }
.attendance-action-button.check-in { border-color: #45c7b2; color: #092823; background: #66d4c3; }
.attendance-action-button.check-in:hover { border-color: #95eee0; background: #8ae0d2; box-shadow: 0 7px 15px rgba(25, 184, 159, 0.22); }
.attendance-action-button.check-out { border-color: #efb75a; color: #33220a; background: #efc36f; }
.attendance-action-button.check-out:hover { border-color: #ffdc99; background: #f8d18a; box-shadow: 0 7px 15px rgba(223, 160, 48, 0.2); }
.dashboard-floating-attendance {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    border: 1px solid #ff987f;
    border-radius: 999px;
    padding: 12px 17px;
    color: #321913;
    background: #ff795c;
    box-shadow: 0 16px 34px rgba(5, 9, 12, 0.34), 0 8px 20px rgba(255, 121, 92, 0.22);
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.dashboard-floating-attendance i { font-size: 20px; }
.dashboard-floating-attendance:hover { transform: translateY(-1px); border-color: #ffc2b3; background: #ff947e; box-shadow: 0 18px 38px rgba(5, 9, 12, 0.38), 0 10px 24px rgba(255, 121, 92, 0.26); }
.dashboard-floating-attendance:focus-visible { outline: 3px solid #d9f6f0; outline-offset: 3px; }
.store-issue-fab {
    position: fixed;
    right: calc(24px + var(--erp-toast-viewport-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--erp-toast-viewport-bottom, 0px));
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    border: 1px solid #ff8f8f;
    border-radius: 999px;
    padding: 12px 17px;
    color: #fff;
    background: #d1362f;
    box-shadow: 0 16px 34px rgba(5, 9, 12, 0.34), 0 8px 20px rgba(209, 54, 47, 0.32);
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.store-issue-fab i { font-size: 20px; animation: store-issue-fab-blink 1.1s ease-in-out infinite; }
.store-issue-fab:hover { transform: translateY(-1px); background: #e14840; box-shadow: 0 18px 38px rgba(5, 9, 12, 0.38), 0 10px 24px rgba(209, 54, 47, 0.36); }
.store-issue-fab:focus-visible { outline: 3px solid #ffd9d9; outline-offset: 3px; }

@keyframes store-issue-fab-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}
.form-toggle-button {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    cursor: pointer;
}
.form-toggle-button i { font-size: 15px; transition: transform 220ms ease; }
.form-toggle-button.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.form-collapsible {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms ease;
}
.form-collapsible.is-expanded { grid-template-rows: 1fr; }
.form-collapsible-inner { min-height: 0; overflow: hidden; }
.attendance-widget-status { color: #a9ded6; font-size: 13px; font-weight: 700; }
.attendance-widget-status i { margin-right: 6px; }
.attendance-widget-status.complete { color: #9bcdb0; }
.attendance-widget-status.unavailable { color: #b6c0c5; }
.attendance-check-in-page { max-width: 820px; }
.attendance-history-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #4a555d;
    border-radius: 6px;
    color: #d7dee1;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.attendance-history-link:hover { border-color: #ff987f; color: #fff2ee; }
.check-in-quick-links { display: flex; flex-direction: column; gap: 10px; margin: -12px 0 24px; }
.check-in-quick-links .attendance-history-link { width: 100%; justify-content: center; }
.my-schedule-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.my-schedule-legend-item { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid #4a555d; border-radius: 999px; color: #d7dee1; font-size: 12px; font-weight: 700; }
.my-schedule-legend-item.is-shift-one { border-color: #58baff; color: #58baff; background: rgba(88, 186, 255, 0.12); }
.my-schedule-legend-item.is-shift-two { border-color: #a18cff; color: #a18cff; background: rgba(161, 140, 255, 0.12); }
.my-schedule-legend-item.is-admin { border-color: #ffc15e; color: #ffc15e; background: rgba(255, 193, 94, 0.12); }
.my-schedule-legend-item.is-off { border-color: #4ed18c; color: #4ed18c; background: rgba(78, 209, 140, 0.12); }
.my-schedule-legend-item.is-permission { border-color: #ffb16a; color: #ffb16a; background: rgba(255, 177, 106, 0.12); }
.my-schedule-legend-item.is-sick { border-color: #ff7d8c; color: #ff7d8c; background: rgba(255, 125, 140, 0.12); }
.my-schedule-legend-item.is-leave { border-color: #73d1cb; color: #73d1cb; background: rgba(115, 209, 203, 0.12); }
.my-schedule-legend-item.is-off-duty-indicator { display: inline-flex; align-items: center; gap: 6px; }
.my-schedule-legend-item.is-off-duty-indicator .my-schedule-off-duty-dot { position: static; border: none; }
.my-schedule-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; width: 100%; align-items: start; }
.my-schedule-month { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); padding: 22px 20px; }
.my-schedule-month-title { margin: 0 0 18px; font-size: 20px; font-weight: 800; }
.my-schedule-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 8px; }
.my-schedule-weekdays span { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.my-schedule-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 16px; }
.my-schedule-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 52px; padding: 3px 0; }
.my-schedule-day-number { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--ink); }
.my-schedule-day-number.is-shift-one { border-color: #58baff; color: #58baff; background: rgba(88, 186, 255, 0.12); }
.my-schedule-day-number.is-shift-two { border-color: #a18cff; color: #a18cff; background: rgba(161, 140, 255, 0.12); }
.my-schedule-day-number.is-admin { border-color: #ffc15e; color: #ffc15e; background: rgba(255, 193, 94, 0.12); }
.my-schedule-day-number.is-off { border-color: #4ed18c; color: #4ed18c; background: rgba(78, 209, 140, 0.12); }
.my-schedule-day-number.is-permission { border-color: #ffb16a; color: #ffb16a; background: rgba(255, 177, 106, 0.12); }
.my-schedule-day-number.is-sick { border-color: #ff7d8c; color: #ff7d8c; background: rgba(255, 125, 140, 0.12); }
.my-schedule-day-number.is-leave { border-color: #73d1cb; color: #73d1cb; background: rgba(115, 209, 203, 0.12); }
.my-schedule-day-badge { position: relative; display: inline-flex; }
.my-schedule-off-duty-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; border: 1.5px solid var(--bg-panel); }
.my-schedule-today-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.my-schedule-off-duty-card { margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); padding: 22px 20px; }
.my-schedule-off-duty-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.my-schedule-off-duty-empty { margin: 0; color: var(--muted); font-size: 13px; }
.my-schedule-off-duty-table-wrap { overflow-x: auto; }
.my-schedule-off-duty-table { width: 100%; border-collapse: collapse; }
.my-schedule-off-duty-table th,
.my-schedule-off-duty-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; white-space: nowrap; }
.my-schedule-off-duty-table th { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.my-schedule-off-duty-table tbody tr:last-child td { border-bottom: none; }
.my-schedule-off-duty-table tr.is-birthday-row { background: rgba(255, 177, 64, 0.12); }
.my-schedule-birthday-icon { margin-right: 6px; color: #ffb140; }
.my-schedule-legend-item.is-birthday { border-color: #ffb140; color: #ffb140; background: rgba(255, 177, 64, 0.12); }
@media (max-width: 560px) {
    .my-schedule-page { gap: 16px; }
    .my-schedule-month { padding: 16px 10px; }
    .my-schedule-month-title { font-size: 17px; }
    .my-schedule-off-duty-card { padding: 16px 10px; }
    .my-schedule-off-duty-table th,
    .my-schedule-off-duty-table td { padding: 8px; font-size: 12px; }
}
.check-in-motivation-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}
.check-in-motivation-card i { flex: none; margin-top: 2px; color: var(--accent); font-size: 20px; }
.check-in-motivation-card p { margin: 0; color: var(--ink); font-size: 14px; font-style: italic; line-height: 1.5; }
.check-in-hero {
    width: 100%;
    margin: 16px 0 10px;
    overflow: hidden;
    border: 1px solid #4b5860;
    border-radius: 8px;
    background: #20252a;
    box-shadow: var(--shadow);
}
.check-in-hero-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 20px 43px;
    color: #eff3f5;
}
.check-in-hero-heading i { color: #ff8a70; font-size: 20px; }
.check-in-hero-heading h2 { margin: 0; color: inherit; font-size: 19px; }
.check-in-time-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: min(92%, 650px);
    margin: -27px auto 20px;
    padding: 21px 24px 15px;
    border: 1px solid #48555d !important;
    border-bottom: 4px solid #8ea2ad !important;
    border-radius: 8px;
    color: #eff4f5 !important;
    background: #293137 !important;
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}
.check-in-time {
    display: grid;
    grid-template-columns: 24px auto;
    align-items: center;
    justify-content: center;
    column-gap: 9px;
}
.check-in-time i { grid-row: 1 / 3; color: #8bb8d2; font-size: 22px; }
.check-in-time strong { color: #f5f7f6 !important; font-size: 32px; line-height: 1; }
.check-in-time span { color: #b7c3c8 !important; font-size: 12px; font-weight: 700; }
.check-in-time-divider { color: #8fa1aa; font-size: 23px; text-align: center; }
.check-in-shift-label {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    margin-top: 13px;
    border-radius: 4px;
    color: #c7d2d5 !important;
    background: #1b2227 !important;
    font-size: 12px;
    font-weight: 800;
}
.check-in-break-label {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #d7e1e4 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-size: 12px;
    font-weight: 800;
}
.check-in-time-card.shift-one { border-color: #398cc0 !important; border-bottom-color: #58baff !important; background: #173142 !important; }
.check-in-time-card.shift-two { border-color: #8872d9 !important; border-bottom-color: #a18cff !important; background: #2b2548 !important; }
.check-in-time-card.admin { border-bottom-color: #d3a657 !important; }
.check-in-time-card.shift-one .check-in-time i { color: #75c7f2; }
.check-in-time-card.shift-two .check-in-time i { color: #b5a4ff; }
.check-in-time-card.shift-one .check-in-shift-label { color: #a7ddfb !important; background: #102936 !important; }
.check-in-time-card.shift-two .check-in-shift-label { color: #d4caff !important; background: #211c3b !important; }
.check-in-time-card.off,
.check-in-time-card.permission,
.check-in-time-card.sick,
.check-in-time-card.leave,
.check-in-time-card.unassigned { background: #293137 !important; color: #eff4f5 !important; }
.check-in-no-schedule { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 7px; text-align: center; }
.check-in-no-schedule i { color: #91a6ae; font-size: 25px; }
.check-in-no-schedule strong { color: #f1f5f5 !important; font-size: 18px; }
.check-in-no-schedule span { color: #b3c0c4 !important; font-size: 13px; }
.check-in-presence-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 17px 28px;
    border-top: 1px solid #39454b;
    color: #e5ecee;
    background: #1b2024;
}
.check-in-presence-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.check-in-presence-status.success { color: #b7ddf0; }
.check-in-late-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 9px; border: 1px solid #d8a64a; border-radius: 999px; color: #ffd991; background: rgba(216, 166, 74, 0.14); font-size: 12px; font-weight: 900; white-space: nowrap; }
.check-in-presence-bar form { margin: 0; }
.check-in-presence-bar .attendance-action-button { min-width: 168px; min-height: 40px; }
.check-in-presence-bar .attendance-action-button.check-in { border-color: #ff957d; color: #321913; background: #ff795c; }
.check-in-presence-bar .attendance-action-button.check-in:hover { border-color: #ffc2b3; background: #ff947e; box-shadow: 0 7px 15px rgba(255, 121, 92, 0.18); }
.check-in-presence-bar .attendance-action-button.check-out { border-color: #d6a65d; color: #312208; background: #e6ba67; }
.check-in-presence-bar .attendance-action-button.check-out:hover { border-color: #f4d699; background: #f0c778; box-shadow: 0 7px 15px rgba(230, 186, 103, 0.15); }
.check-in-presence-bar .attendance-action-button.early-check-out { border-color: #ff9b6b; color: #32190d; background: #ffad76; }
.check-in-presence-bar .attendance-action-button.early-check-out:hover { border-color: #ffd0b1; background: #ffbd8e; box-shadow: 0 7px 15px rgba(255, 173, 118, 0.16); }
.check-in-confirm-modal { position: fixed; z-index: 80; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; }
.check-in-confirm-modal.is-open { display: flex; }
.check-in-confirm-backdrop { position: absolute; inset: 0; background: rgba(7, 11, 14, 0.78); backdrop-filter: blur(4px); }
.check-in-confirm-panel { position: relative; z-index: 1; width: min(100%, 420px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 24px; border: 1px solid #4a555d; border-radius: 8px; background: #20252a; box-shadow: var(--shadow); text-align: center; }
.check-in-confirm-icon { display: grid; width: 42px; height: 42px; margin: 0 auto 13px; place-items: center; border: 1px solid #ff987f; border-radius: 50%; color: #ff987f; background: #33231f; font-size: 20px; }
.check-in-confirm-panel h2 { margin: 0; font-size: 20px; }
.check-in-confirm-panel p { margin: 8px 0 20px; color: #b7c3c8; font-size: 13px; line-height: 1.55; }
.check-in-confirm-close { position: absolute; top: 10px; right: 10px; }
.check-in-camera-box { display: grid; gap: 10px; margin: 0 0 18px; }
.check-in-camera-box[hidden] { display: none; }
.check-in-camera-box video { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #48555d; border-radius: 8px; background: #12171a; object-fit: cover; transform: scaleX(-1); }
.check-in-camera-video-wrap { position: relative; overflow: hidden; border-radius: 8px; }
.check-in-camera-face-guide { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; gap: 8px; padding-bottom: 12px; pointer-events: none; }
.check-in-camera-face-oval { position: absolute; top: 18%; left: 50%; width: 38%; aspect-ratio: 3 / 4; transform: translateX(-50%); border: 3px dashed rgba(255, 255, 255, 0.75); border-radius: 50% / 42%; box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.28); }
.check-in-camera-face-hint { position: relative; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #f2f5f6; font-size: 11px; font-weight: 700; }
.check-in-camera-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 10px; border: 1px solid #4a555d; border-radius: 6px; color: #c4cdd1; background: #252c32; font-size: 12px; font-weight: 800; }
.check-in-camera-status.success { border-color: #5a8d79; color: #a7e8c2; background: rgba(90, 141, 121, 0.16); }
.check-in-camera-status.warning { border-color: #d8a64a; color: #ffd991; background: rgba(216, 166, 74, 0.14); }
.check-in-camera-status.error { border-color: #c46676; color: #ffb2bc; background: rgba(196, 102, 118, 0.14); }
.check-in-confirm-actions { display: grid !important; grid-template-columns: 1fr; gap: 9px; }
.check-in-confirm-actions button { display: inline-flex; align-items: center; justify-content: center; width: 100% !important; min-height: 40px; border: 1px solid var(--accent); border-radius: 6px; padding: 8px 13px; color: var(--accent-ink); background: var(--accent); cursor: pointer; font: inherit; font-weight: 800; }
.check-in-confirm-actions button.is-loading i { margin-right: 7px; animation: attendance-spin 700ms linear infinite; }
.check-in-confirm-actions button:disabled { cursor: not-allowed; filter: grayscale(0.45); opacity: .58; }
.check-in-confirm-actions .filter-reset { border-color: #4a555d; color: #c4cdd1; background: #252c32; }
@keyframes attendance-spin { to { transform: rotate(360deg); } }
.cleanliness-camera-box { display: grid; gap: 10px; margin: 0 0 18px; }
.cleanliness-camera-box video { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #48555d; border-radius: 8px; background: #12171a; object-fit: cover; }
.cleanliness-camera-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 10px; border: 1px solid #4a555d; border-radius: 6px; color: #c4cdd1; background: #252c32; font-size: 12px; font-weight: 800; }
.cleanliness-camera-status.success { border-color: #5a8d79; color: #a7e8c2; background: rgba(90, 141, 121, 0.16); }
.cleanliness-camera-status.warning { border-color: #d8a64a; color: #ffd991; background: rgba(216, 166, 74, 0.14); }
.cleanliness-camera-status.error { border-color: #c46676; color: #ffb2bc; background: rgba(196, 102, 118, 0.14); }
.daily-briefing-camera-box { position: relative; display: grid; gap: 10px; margin: 0 0 18px; }
.daily-briefing-camera-box video { width: 100%; aspect-ratio: 4 / 3; border: 1px solid #48555d; border-radius: 8px; background: #12171a; object-fit: cover; }
.daily-briefing-camera-box video.is-front { transform: scaleX(-1); }
.daily-briefing-camera-switch-button { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; background: rgba(15, 20, 23, 0.6); font-size: 16px; cursor: pointer; }
.daily-briefing-camera-switch-button:hover,
.daily-briefing-camera-switch-button:focus { border-color: var(--accent); outline: none; background: rgba(15, 20, 23, 0.85); }
.daily-briefing-camera-capture-actions { margin-bottom: 14px; }
.daily-briefing-camera-submit-actions { margin-top: 14px; }
.daily-briefing-camera-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 10px; border: 1px solid #4a555d; border-radius: 6px; color: #c4cdd1; background: #252c32; font-size: 12px; font-weight: 800; }
.daily-briefing-camera-status.success { border-color: #5a8d79; color: #a7e8c2; background: rgba(90, 141, 121, 0.16); }
.daily-briefing-camera-status.warning { border-color: #d8a64a; color: #ffd991; background: rgba(216, 166, 74, 0.14); }
.daily-briefing-camera-status.error { border-color: #c46676; color: #ffb2bc; background: rgba(196, 102, 118, 0.14); }
.cleanliness-checklist-inline { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cleanliness-checklist-caption { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.cleanliness-checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; }
.cleanliness-checklist-item { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 8px 10px; border: 1px solid #3d454b; border-radius: 8px; background: #20252a; }
.cleanliness-checklist-item i { flex-shrink: 0; font-size: 16px; color: #d8a64a; }
.cleanliness-checklist-item.is-done i { color: #5a8d79; }
.cleanliness-checklist-item div { display: grid; gap: 3px; min-width: 0; }
.cleanliness-checklist-item strong { font-size: 12px; overflow-wrap: break-word; }
.cleanliness-checklist-item small { color: var(--muted); font-size: 10px; }
.cleanliness-checklist-item .request-status { font-size: 10px; padding: 2px 7px; }
@media (max-width: 900px) {
    .cleanliness-checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cleanliness-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cleanliness-checklist-item { padding: 7px 8px; }
}
@media (max-width: 360px) {
    .cleanliness-checklist { grid-template-columns: minmax(0, 1fr); }
}
.attendance-upcoming-section { width: 100%; min-width: 0; margin: 16px 0 28px; }
.attendance-upcoming-section .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.attendance-upcoming-section .section-title h2 { margin: 3px 0 0; font-size: 19px; }
.attendance-upcoming-section .section-title > i { color: #ff8a70; font-size: 21px; }
.check-in-cleanliness-section { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-panel); }
.check-in-cleanliness-section .section-title { margin-bottom: 8px; }
.check-in-cleanliness-section .section-title h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.check-in-cleanliness-section .section-title h2 i { font-size: 15px; color: #ff8a70; }
.check-in-cleanliness-section.is-complete .section-title h2 i { color: #5a8d79; }
.check-in-cleanliness-progress { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(216, 166, 74, 0.16); color: #d8a64a; }
.check-in-cleanliness-section.is-complete .check-in-cleanliness-progress { background: rgba(90, 141, 121, 0.16); color: #5a8d79; }
.check-in-cleanliness-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.check-in-cleanliness-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #3d454b; border-radius: 8px; background: #20252a; font-size: 12px; font-weight: 700; }
.check-in-cleanliness-row i { font-size: 14px; color: #d8a64a; flex-shrink: 0; }
.check-in-cleanliness-row.is-done { color: var(--muted); }
.check-in-cleanliness-row.is-done i { color: #5a8d79; }
.check-in-cleanliness-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.check-in-cleanliness-note a { color: var(--accent); font-weight: 700; }
.attendance-upcoming-list { display: grid; gap: 8px; }
.attendance-upcoming-item {
    display: grid;
    grid-template-columns: 114px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 67px;
    padding: 10px 14px;
    border: 1px solid #3d474d !important;
    border-left: 4px solid #667983 !important;
    border-radius: 6px;
    color: #e9eff0 !important;
    background: #20252a !important;
}
.attendance-upcoming-item time { display: grid; gap: 3px; }
.attendance-upcoming-item time strong { color: #e5efef !important; font-size: 13px; }
.attendance-upcoming-end { display: inline-flex; justify-content: flex-end; align-items: center; min-width: 54px; }
.attendance-tomorrow-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 9px; border: 1px solid #6eaed8; border-radius: 999px; color: #d8f1ff !important; background: #173142; box-shadow: inset 0 0 0 1px rgba(154, 217, 255, 0.08); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.attendance-upcoming-item time span,
.attendance-upcoming-item small { color: #9eafb3 !important; font-size: 12px; }
.attendance-upcoming-item > div { display: grid; gap: 4px; }
.attendance-upcoming-item > div strong { color: #edf5f4 !important; font-size: 14px; }
.attendance-upcoming-end > i { color: #7d9296; font-size: 14px; text-align: right; }
.attendance-upcoming-item.shift-one { border-color: #398cc0 !important; border-left-color: #58baff !important; background: #173142 !important; }
.attendance-upcoming-item.shift-two { border-color: #8872d9 !important; border-left-color: #a18cff !important; background: #2b2548 !important; }
.attendance-upcoming-item.admin { border-color: #d8a64a !important; border-left-color: #ffc15e !important; background: #3b2f1b !important; }
.attendance-upcoming-item.off { border-color: #5a8d79 !important; border-left-color: #4ed18c !important; background: #1f3b2f !important; }
.attendance-upcoming-item.permission { border-color: #d89155 !important; border-left-color: #ffb16a !important; background: #423023 !important; }
.attendance-upcoming-item.sick { border-color: #c46676 !important; border-left-color: #ff7d8c !important; background: #43262d !important; }
.attendance-upcoming-item.leave { border-color: #6b9d9b !important; border-left-color: #73d1cb !important; background: #203b3b !important; }
.attendance-upcoming-item.shift-one > div strong,
.attendance-upcoming-item.shift-one time strong { color: #9ad9ff !important; }
.attendance-upcoming-item.shift-two > div strong,
.attendance-upcoming-item.shift-two time strong { color: #cbbfff !important; }
.attendance-upcoming-item.admin > div strong,
.attendance-upcoming-item.admin time strong { color: #ffd991 !important; }
.attendance-upcoming-item.off > div strong,
.attendance-upcoming-item.off time strong { color: #a7e8c2 !important; }
.attendance-upcoming-item.permission > div strong,
.attendance-upcoming-item.permission time strong { color: #ffd0a3 !important; }
.attendance-upcoming-item.sick > div strong,
.attendance-upcoming-item.sick time strong { color: #ffb2bc !important; }
.attendance-upcoming-item.leave > div strong,
.attendance-upcoming-item.leave time strong { color: #a9e0dd !important; }
.attendance-records-panel { width: 100%; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #1c2126; box-shadow: var(--shadow); }
.attendance-records-panel .section-title { padding: 18px 18px 0; }
.attendance-records-panel .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.attendance-records-table { min-width: 1040px; }
.attendance-records-table td small { display: block; margin-top: 3px; color: #9eacb4; font-size: 12px; }

.attendance-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 116px;
}

.attendance-photo-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    border: 1px solid #45525c;
    border-radius: 6px;
    padding: 5px 9px;
    color: #d9e4ea;
    background: #26313a;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.attendance-photo-actions button:hover,
.attendance-photo-actions button:focus {
    border-color: var(--accent);
    outline: none;
    color: var(--accent-ink);
    background: var(--accent);
}

.attendance-photo-missing {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: #89979f;
    font-size: 12px;
}

.attendance-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.attendance-photo-modal.is-open { display: flex; }
.attendance-photo-backdrop { position: absolute; inset: 0; background: rgba(5, 9, 12, 0.78); backdrop-filter: blur(4px); }

.attendance-photo-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    border: 1px solid #465867;
    border-radius: 10px;
    background: #151b20;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
}

.attendance-photo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.attendance-photo-header .eyebrow { margin-bottom: 4px; }
.attendance-photo-header h2 { margin: 0; font-size: 20px; }
.attendance-photo-header p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.attendance-photo-header button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #45525c; border-radius: 6px; color: #b7c5cc; background: #242e35; cursor: pointer; }

.attendance-photo-frame {
    display: grid;
    place-items: center;
    max-height: calc(100dvh - 150px);
    overflow: auto;
    padding: 14px;
    background: #0f1418;
    position: relative;
}

.attendance-photo-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 190px);
    border-radius: 8px;
    object-fit: contain;
}

.attendance-photo-frame.is-loading { min-height: 320px; }
.attendance-photo-frame.is-loading img { display: none; }

.attendance-photo-loading {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 10px;
    background: linear-gradient(100deg, #1a2126 8%, #2a343c 28%, #1a2126 48%);
    background-size: 200% 100%;
    animation: attendance-photo-skeleton 1.4s ease-in-out infinite;
}

.attendance-photo-frame.is-loading .attendance-photo-loading { display: block; }

@keyframes attendance-photo-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.store-issue-table { min-width: 980px; }
.store-issue-text { max-width: 420px; white-space: normal; line-height: 1.45; }

@media (max-width: 640px) {
    .store-issue-table-wrap { overflow-x: visible; }
    .store-issue-table { min-width: 0; }
    .store-issue-table thead { display: none; }
    .store-issue-table, .store-issue-table tbody { display: block; width: 100%; }
    .store-issue-table tbody tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 4px 14px;
        background: var(--bg-panel);
    }
    .store-issue-table tbody tr td {
        display: block;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }
    .store-issue-table tbody tr td:last-child { border-bottom: none; }
    .store-issue-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .store-issue-table tbody td.empty-state { text-align: center; padding: 20px 0; }
    .store-issue-table tbody td,
    .store-issue-table tbody td * { max-width: 100%; box-sizing: border-box; }
    .store-issue-table .request-status-cell { text-align: left; }
    .store-issue-table .request-status-content { align-items: flex-start; }
    .store-issue-table .request-status-form,
    .store-issue-table .request-status-form select { width: 100%; }
    .store-issue-table .request-status-updated,
    .store-issue-table .request-status-staff { white-space: normal; overflow-wrap: break-word; }
    .store-issue-text { max-width: none; }
}

.store-issue-photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.store-issue-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.store-issue-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--muted);
    background: #252c32;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.store-issue-tabs a:hover {
    border-color: #687782;
    color: var(--ink);
}

.store-issue-tabs a.is-active {
    border-color: var(--accent);
    color: var(--accent-ink);
    background: var(--accent);
}

.store-issue-tabs a span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
}

.store-issue-tabs a.is-active span {
    color: var(--accent-ink);
    background: rgba(29, 31, 32, 0.16);
}

.store-issue-photo-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-issue-photo-group + .store-issue-photo-group {
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.store-issue-photo-group-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-weight: 600;
}

.store-issue-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.store-issue-file-board {
    border: 1px solid #3f4d56;
    border-radius: 8px;
    padding: 12px;
    background: #222a30;
}

.store-issue-file-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #a3aaad;
    font-size: 13px;
    font-weight: 700;
}

.store-issue-file-topline strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 2px 9px;
    color: var(--accent-ink);
    background: var(--accent);
    font-size: 12px;
}

.store-issue-file-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 104px;
}

.store-issue-file-thumb,
.store-issue-file-add {
    flex: 0 1 104px;
    width: min(104px, 100%);
    aspect-ratio: 1;
    min-height: 92px;
    border-radius: 8px;
}

.store-issue-file-thumb {
    position: relative;
    overflow: hidden;
    border: 1px solid #465762;
    background: #151b20;
}

.store-issue-file-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-issue-file-thumb button {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(14, 18, 21, 0.78);
    cursor: pointer;
}

.store-issue-file-thumb button:hover,
.store-issue-file-thumb button:focus {
    border-color: #ffb2bc;
    outline: none;
    color: #1d1f20;
    background: #ffb2bc;
}

.store-issue-file-add {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px dashed #586873;
    color: #dce6ea;
    background: #263139;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.store-issue-file-add i { font-size: 22px; }
.store-issue-file-add:hover,
.store-issue-file-add:focus {
    border-color: var(--accent);
    outline: none;
    color: var(--accent-ink);
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 121, 92, 0.13);
}

.store-issue-file-add:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.store-issue-file-board > small {
    display: block;
    margin-top: 8px;
    color: #9eacb4;
    font-size: 12px;
}
.attendance-edit-time-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    border: 1px solid #6f7f8a;
    border-radius: 6px;
    padding: 6px 10px;
    color: #d9e5ea;
    background: #252c32;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.attendance-edit-time-button:hover { border-color: var(--accent); color: var(--ink); }
.attendance-record-log-table { min-width: 1180px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-badge.success { color: #9cddaf; background: #173827; }
.status-badge.warning { color: #f3c46b; background: #4b3516; }
.status-badge.early { color: #ffbd8e; background: #4a2b18; }
.status-badge.missed { color: #ffb2bc; background: #47262e; }
.attendance-status-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attendance-evaluation-filter { align-items: end; }
.attendance-evaluation-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.summary-card.attendance-work { border-left: 4px solid #5aa4ff; }
.summary-card.attendance-late { border-left: 4px solid #f3c46b; }
.summary-card.attendance-complete { border-left: 4px solid #4ed18c; }
.summary-card.attendance-issue { border-left: 4px solid #ff8c8c; }
.summary-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.attendance-evaluation-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.attendance-evaluation-insights article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #1c2126;
}
.attendance-evaluation-insights span,
.attendance-evaluation-insights small { display: block; color: var(--muted); font-size: 12px; }
.attendance-evaluation-insights strong { display: block; margin: 5px 0 3px; color: var(--ink); font-size: 20px; }
.attendance-evaluation-ranking { margin-top: 8px; }
.attendance-evaluation-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.attendance-evaluation-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: #1c2126;
    box-shadow: var(--shadow);
}
.attendance-evaluation-card.excellent { border-top: 3px solid #4ed18c; }
.attendance-evaluation-card.good { border-top: 3px solid #5aa4ff; }
.attendance-evaluation-card.warning { border-top: 3px solid #f3c46b; }
.attendance-evaluation-card.danger { border-top: 3px solid #ff7d8c; }
.attendance-evaluation-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.attendance-evaluation-card-head h3 { margin: 0; color: var(--ink); font-size: 17px; }
.attendance-evaluation-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.attendance-evaluation-card-head > strong {
    min-width: 54px;
    border-radius: 6px;
    padding: 7px 8px;
    text-align: center;
    color: #101820;
    background: #d9e5ea;
    font-size: 18px;
}
.attendance-evaluation-card-head > strong small { margin-left: 2px; color: #4d5962; font-size: 12px; }
.attendance-evaluation-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.attendance-evaluation-metrics span {
    border: 1px solid #343d45;
    border-radius: 7px;
    padding: 10px;
    color: var(--muted);
    background: #252c32;
    font-size: 12px;
}
.attendance-evaluation-metrics b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px; }
.attendance-evaluation-flags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.attendance-evaluation-table-panel { width: 100%; max-width: 100%; overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: #1c2126; box-shadow: var(--shadow); }
.attendance-evaluation-table-panel .section-title { padding: 18px 18px 0; }
.attendance-evaluation-table-panel .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.attendance-evaluation-detail-table { min-width: 1120px; }
.attendance-evaluation-detail-table td small { display: block; margin-top: 3px; color: #9eacb4; font-size: 12px; }

@media (max-width: 1100px) {
    .check-in-layout { grid-template-columns: 1fr; gap: 14px; }
    .attendance-upcoming-section { margin-top: 0; }
    .attendance-evaluation-overview,
    .attendance-evaluation-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-evaluation-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .check-in-layout { grid-template-columns: 1fr; gap: 14px; }
    .attendance-widget-heading,
    .attendance-widget-content { align-items: stretch; flex-direction: column; }
    .attendance-widget-schedules { display: grid; grid-template-columns: 1fr; width: 100%; }
    .attendance-widget-schedule { min-width: 0; }
    .attendance-widget-actions { justify-content: flex-start; width: 100%; }
    .attendance-widget-actions form,
    .attendance-action-button { width: 100%; }
    .attendance-evaluation-overview,
    .attendance-evaluation-insights,
    .attendance-evaluation-metrics { grid-template-columns: 1fr; }
    .attendance-evaluation-card-head { grid-template-columns: auto minmax(0, 1fr); }
    .attendance-evaluation-card-head > strong { grid-column: 1 / -1; width: 100%; }
    .attendance-history-link { width: 100%; justify-content: center; }
    .check-in-hero-heading { padding-bottom: 40px; }
    .check-in-time-card { width: calc(100% - 28px); grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); padding: 19px 12px 13px; margin-bottom: 16px; }
    .check-in-time { grid-template-columns: 19px auto; column-gap: 5px; }
    .check-in-time i { font-size: 18px; }
    .check-in-time strong { font-size: 27px; }
    .check-in-presence-bar { align-items: stretch; flex-direction: column; padding: 18px; }
    .check-in-presence-bar .attendance-action-button { width: 100%; }
    .attendance-upcoming-item { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px; }
    .attendance-upcoming-end { min-width: 48px; }
    .login-page {
        padding: 16px;
    .attendance-analysis-card { grid-column: auto; }
    }

    .login-panel {
        padding: 22px;
    }

    .priority-bonus-summary,
    .priority-bonus-product-list,
    .priority-bonus-performance-summary,
    .profit-sharing-group-list { grid-template-columns: 1fr; }

    .sales-dashboard-growth,
    .sales-dashboard-recommendation-list { grid-template-columns: 1fr; }

    .priority-bonus-setting-form { grid-template-columns: 1fr; }

    .priority-bonus-setting-form > button { width: 100%; margin-top: 0; }

    .priority-bonus-performance-header { align-items: start; }
    .priority-bonus-settings-link { width: 100%; margin-top: 14px; }
    .attendance-header-actions { align-items: stretch; margin-top: 14px; }


    .app-shell,
    .app-shell.sidebar-hidden {
        display: block;
    }

    .sidebar {
        position: fixed;
        z-index: 30;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: min(84vw, 300px);
        padding: 20px 20px calc(96px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
        border-right: 1px solid var(--line);
        border-bottom: 0;
        box-shadow: var(--shadow);
        transform: translateX(0);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    @supports (height: 100svh) {
        .sidebar { height: 100svh; }
    }

    .sidebar-hidden .sidebar {
        padding: 20px 20px calc(96px + env(safe-area-inset-bottom));
        opacity: 1;
        pointer-events: none;
        transform: translateX(-100%);
    }

    .main-panel {
        min-width: 0;
        padding: 16px;
    }

    .staff-performance-analysis-grid,
    .staff-performance-versus,
    .staff-performance-insights,
    .supervisor-health-indicators,
    .supervisor-staff-health-grid,
    .supervisor-staff-health-indicators,
    .sales-dashboard-rating-grid,
    .sales-target-summary,
    .customer-detail-metrics,
    .customer-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-crm-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-detail-wide { grid-column: auto; }

    .sales-target-mission-heading {
        grid-template-columns: none;
        display: block;
    }

    .sales-target-mission-heading > strong {
        display: block;
        margin-top: 10px;
    }

    .sales-target-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sales-rating-bonus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-member-bonus-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-ranking-bonus-tiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-target-current-tier {
        min-height: 102px;
        padding: 14px;
    }

    .sales-target-overview-details {
        padding: 14px;
    }

    .sales-target-overview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 0;
    }

    .sales-target-overview-metrics > div {
        padding: 0 10px;
    }

    .sales-target-overview-metrics > div:nth-child(odd) { padding-left: 0; }
    .sales-target-overview-metrics > div:nth-child(2) { padding-right: 0; border-right: 0; }
    .sales-target-overview-metrics > div:last-child {
        grid-column: 1 / -1;
        padding: 10px 0 0;
        border-top: 1px solid var(--line);
        border-right: 0;
    }

    .sales-target-overview-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .sales-target-progress-panel { padding: 14px; }

    .sales-target-progress-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .sales-target-progress-heading > strong { font-size: 21px; }

    .sales-target-scheme-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .sales-target-tier {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .sales-target-tier-rate,
    .sales-target-active-badge { margin-top: 0; }

    .customer-follow-up-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-performance-upsell {
        grid-column: auto;
    }

    .sidebar-toggle {
        position: fixed;
        z-index: 40;
        top: 12px;
        left: 252px;
        margin: 0;
        box-shadow: var(--shadow);
        transition: left 0.25s ease;
    }

    .sidebar-hidden .sidebar-toggle {
        left: 16px;
    }

    .page-header {
        display: block;
        margin-top: 52px;
    }

    .monthly-expense-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-payment-content {
        padding: 14px;
    }

    .dashboard-payment-chart {
        height: 230px;
    }

    .monthly-expense-period {
        align-items: stretch;
        flex-direction: column;
    }

    .rent-settings-open {
        width: 100%;
    }

    .form-toggle-button {
        width: 100%;
        margin-top: 12px;
    }

    .rent-setting-form {
        align-items: stretch;
        flex-direction: column;
    }

    .rent-setting-form input {
        width: 100%;
    }

    .rent-setting-form button,
    .monthly-expense-actions button {
        width: 100%;
    }

    .today-pill {
        display: inline-block;
        margin-top: 10px;
    }

    .cards-grid,
    .dashboard-charts,
    .versus-summary,
    .info-grid,
    .customer-summary,
    .sales-summary,
    .product-performance-summary,
    .product-performance-grid,
    .profit-loss-summary,
    .profit-loss-total-summary,
    .profit-loss-layout {
        grid-template-columns: 1fr;
    }

    .kpi-card,
    .info-card,
    .coming-card {
        padding: 16px;
    }

    .customer-filter,
    .sales-filter,
    .return-history-filter,
    .request-history-filter,
    .dashboard-filter,
    .dashboard-custom-dates {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .sales-filter label,
    .customer-filter label,
    .return-history-filter label,
    .request-history-filter label,
    .dashboard-filter label {
        flex: 0 0 auto;
        width: 100%;
    }

    .dashboard-filter .staff-performance-product-filter {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .dashboard-filter .staff-performance-product-filter .lookup-control {
        width: 100%;
    }

    .dashboard-filter .staff-performance-sort-filter {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
    }

    .dashboard-filter .staff-performance-category-filter {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
    }

    .return-form {
        padding: 16px;
    }

    .request-form {
        padding: 16px;
    }

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

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

    .return-item-grid {
        grid-template-columns: 1fr;
    }

    .add-return-item {
        width: 100%;
    }

    .return-field-wide {
        grid-column: auto;
    }

    .return-customer-type {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .return-source-options,
    .return-customer-options {
        grid-template-columns: 1fr;
    }

    .document-lookup {
        grid-template-columns: 1fr;
    }

    .document-lookup button {
        width: 100%;
    }

    .document-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .document-item input[type="number"] {
        grid-column: 2;
    }

    .document-item small {
        grid-column: 2;
    }

    .return-form-actions,
    .return-form-actions button,
    .request-form-actions,
    .request-form-actions button {
        width: 100%;
    }

    .sales-filter input,
    .sales-filter select,
    .sales-filter button,
    .filter-reset,
    .customer-filter input,
    .customer-filter select,
    .customer-filter button,
    .return-history-filter input,
    .return-history-filter select,
    .return-history-filter button,
    .request-history-filter input,
    .request-history-filter select,
    .request-history-filter button,
    .dashboard-filter input,
    .dashboard-filter select,
    .dashboard-filter button {
        width: 100%;
    }

    .sales-filter input,
    .sales-filter select,
    .sales-filter button,
    .filter-reset,
    .customer-filter input,
    .customer-filter select,
    .customer-filter button,
    .return-history-filter input,
    .return-history-filter select,
    .return-history-filter button,
    .request-history-filter input,
    .request-history-filter select,
    .request-history-filter button {
        min-height: 38px;
        height: 38px;
    }

    .data-table-wrap {
        border-radius: 6px;
    }

    .product-request-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .product-request-table thead {
        display: none;
    }

    .product-request-table,
    .product-request-table tbody,
    .product-request-table tr,
    .product-request-table td {
        display: block;
        width: 100%;
    }

    .product-request-table tr {
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #20252a;
    }

    .product-request-table td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 8px 0;
        border-bottom: 1px solid rgba(57, 65, 73, 0.72);
    }

    .product-request-table td:last-child {
        border-bottom: 0;
    }

    .product-request-table td::before {
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .product-request-table td:nth-child(1)::before { content: 'Tanggal'; }
    .product-request-table td:nth-child(2)::before { content: 'Delay'; }
    .product-request-table td:nth-child(3)::before { content: 'Status'; }
    .product-request-table td:nth-child(4)::before { content: 'Jenis'; }
    .product-request-table td:nth-child(5)::before { content: 'Barang'; }
    .product-request-table td:nth-child(6)::before { content: 'Harga'; }
    .product-request-table td:nth-child(7)::before { content: 'Pelanggan'; }
    .product-request-table td:nth-child(8)::before { content: 'Nomor HP'; }
    .product-request-table td:nth-child(9)::before { content: 'Catatan'; }
    .product-request-table td:nth-child(10)::before { content: 'Aksi'; }

    .product-request-table .empty-state {
        display: block;
        padding: 16px;
        text-align: center;
    }

    .product-request-table .empty-state::before {
        content: none;
    }

    .product-request-table .request-status-cell,
    .product-request-table .table-action-cell {
        text-align: left;
    }

    .product-request-table .request-status-content {
        align-items: flex-start;
    }

    .product-request-table .request-notes-cell {
        min-width: 0;
        max-width: none;
    }

    .product-request-table {
        display: table;
        width: 100%;
        min-width: 1160px;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .product-request-table thead {
        display: table-header-group;
    }

    .product-request-table tbody {
        display: table-row-group;
        width: auto;
    }

    .product-request-table tr {
        display: table-row;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .product-request-table td {
        display: table-cell;
        width: auto;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
    }

    .product-request-table td::before {
        content: none !important;
    }

    .product-request-table .empty-state {
        display: table-cell;
    }

    .product-request-table .request-status-cell,
    .product-request-table .table-action-cell {
        text-align: center;
    }

    .product-request-table .request-status-content {
        align-items: center;
    }

    .product-request-table .request-notes-cell {
        min-width: 180px;
        max-width: 260px;
    }

    .delete-confirm-dialog {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 16px;
    }

    .request-notes-field textarea {
        min-height: 110px;
        max-height: 34dvh;
    }

    .delete-confirm-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .delete-cancel-button,
    .delete-confirm-button {
        width: 100%;
    }

    .sales-filter input[type="date"] {
        line-height: 20px;
    }

    .filter-reset {
        display: grid;
        place-items: center;
    }

    .pagination {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .pagination a,
    .pagination-disabled {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .user-management-table-tools {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        justify-content: start;
        gap: 10px;
    }

    .user-management-tabs,
    .user-management-search,
    .user-management-search label,
    .user-management-new {
        width: 100%;
    }

    .user-management-search {
        flex: none;
        height: 40px;
    }

    .user-management-search label {
        height: 40px;
        min-height: 40px;
    }
}

html[data-theme="light"] .sidebar {
    border-right-color: var(--line);
    background: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .user-session {
    border-color: #cddae4;
    background: linear-gradient(135deg, #ffffff 0%, #eef5fa 100%);
    box-shadow: inset 3px 0 0 #2f91cf;
}

html[data-theme="light"] .user-session-avatar {
    border-color: #8fc7ec;
    color: #176fa6;
    background: #e4f4ff;
}

html[data-theme="light"] .user-session-copy strong,
html[data-theme="light"] .theme-switch-copy span,
html[data-theme="light"] .request-status-staff,
html[data-theme="light"] .return-status-staff {
    color: var(--ink);
}

html[data-theme="light"] .user-session-role,
html[data-theme="light"] .return-customer-name i {
    color: #176fa6;
}

html[data-theme="light"] .user-session a {
    color: #cf543d;
}

html[data-theme="light"] .user-session-edit {
    border-color: #cddae4;
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .user-session-edit:hover {
    border-color: #68acd1;
    color: #0f5f92;
    background: #dff2fc;
}

html[data-theme="light"] .user-session .user-session-edit { color: var(--ink); }
html[data-theme="light"] .user-session .user-session-edit:hover { color: #0f5f92; }
html[data-theme="light"] .user-session .user-session-edit.active {
    border-color: #68acd1;
    background: #dff2fc;
    color: #0f5f92;
}

html[data-theme="light"] .profile-edit-photo-preview {
    border-color: #8fc7ec;
    color: #176fa6;
    background: #e4f4ff;
}

html[data-theme="light"] .profile-edit-pin-section {
    border-top-color: var(--line);
}

html[data-theme="light"] .profile-edit-pin-heading {
    color: var(--muted);
}

html[data-theme="light"] .profile-edit-pin-trigger {
    border-color: #cddae4;
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .profile-edit-pin-trigger:hover {
    border-color: #68acd1;
    color: #0f5f92;
    background: #dff2fc;
}

html[data-theme="light"] .profile-edit-actions .profile-edit-pin-trigger {
    border-color: #cddae4;
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .profile-edit-actions .profile-edit-pin-trigger:hover {
    border-color: #68acd1;
    color: #0f5f92;
    background: #dff2fc;
}

html[data-theme="light"] .theme-switch-card,
html[data-theme="light"] .sidebar-toggle,
html[data-theme="light"] .today-pill,
html[data-theme="light"] .login-panel,
html[data-theme="light"] .pin-modal,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .dashboard-chart,
html[data-theme="light"] .dashboard-filter,
html[data-theme="light"] .dashboard-payment-content,
html[data-theme="light"] .dashboard-payment-empty,
html[data-theme="light"] .profit-loss-card,
html[data-theme="light"] .profit-loss-statement,
html[data-theme="light"] .profit-loss-monthly,
html[data-theme="light"] .versus-metric,
html[data-theme="light"] .product-performance-panel,
html[data-theme="light"] .customer-filter,
html[data-theme="light"] .customer-crm-summary article,
html[data-theme="light"] .customer-detail-metrics article,
html[data-theme="light"] .customer-detail-panel,
html[data-theme="light"] .sales-filter,
html[data-theme="light"] .return-history-filter,
html[data-theme="light"] .request-history-filter,
html[data-theme="light"] .return-form,
html[data-theme="light"] .request-form,
html[data-theme="light"] .product-request-table tr,
html[data-theme="light"] .data-table-wrap,
html[data-theme="light"] .user-management-form-card,
html[data-theme="light"] .user-management-list-card,
html[data-theme="light"] .attendance-records-panel,
html[data-theme="light"] .attendance-evaluation-table-panel,
html[data-theme="light"] .delete-confirm-dialog,
html[data-theme="light"] .attendance-widget,
html[data-theme="light"] .check-in-hero,
html[data-theme="light"] .check-in-time-card,
html[data-theme="light"] .attendance-log-panel,
html[data-theme="light"] .attendance-staff-card,
html[data-theme="light"] .attendance-off-quota,
html[data-theme="light"] .attendance-shift-note,
html[data-theme="light"] .attendance-analysis-card,
html[data-theme="light"] .attendance-analysis-item,
html[data-theme="light"] .attendance-calendar-panel,
html[data-theme="light"] .attendance-calendar-day,
html[data-theme="light"] .attendance-photo-panel,
html[data-theme="light"] .attendance-modal-panel,
html[data-theme="light"] .pin-modal,
html[data-theme="light"] .cleanliness-checklist-item,
html[data-theme="light"] .check-in-cleanliness-row,
html[data-theme="light"] .daily-briefing-generator,
html[data-theme="light"] .daily-briefing-active,
html[data-theme="light"] .daily-briefing-history,
html[data-theme="light"] .daily-briefing-category-card,
html[data-theme="light"] .daily-briefing-manual-card,
html[data-theme="light"] .daily-briefing-card {
    border-color: var(--line);
    color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}


html[data-theme="light"] .theme-switch-copy > i,
html[data-theme="light"] .theme-switch-track,
html[data-theme="light"] .menu-item:hover,
html[data-theme="light"] .menu-item.active,
html[data-theme="light"] .payment-method-item,
html[data-theme="light"] .customer-detail-list li,
html[data-theme="light"] .customer-note-list article,
html[data-theme="light"] .rich-text-toolbar,
html[data-theme="light"] .store-issue-file-board,
html[data-theme="light"] .attendance-photo-frame,
html[data-theme="light"] .attendance-widget-schedule,
html[data-theme="light"] .check-in-camera-status,
html[data-theme="light"] .cleanliness-camera-status,
html[data-theme="light"] .daily-briefing-camera-status,
html[data-theme="light"] .check-in-confirm-actions .filter-reset,
html[data-theme="light"] .attendance-tabs a,
html[data-theme="light"] .attendance-modal-actions .filter-reset,
html[data-theme="light"] .supervisor-daily-target-calendar-day,
html[data-theme="light"] .supervisor-daily-target-calendar-day.no-bonus,
html[data-theme="light"] .daily-briefing-participant-badge {
    background: #eef4f8;
}

html[data-theme="light"] .menu-item,
html[data-theme="light"] .menu-group h4,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .section-title p,
html[data-theme="light"] .data-table th,
html[data-theme="light"] .dashboard-chart-heading p,
html[data-theme="light"] .profit-loss-card span,
html[data-theme="light"] .profit-loss-card small,
html[data-theme="light"] .versus-metric p,
html[data-theme="light"] .versus-metric small,
html[data-theme="light"] .customer-crm-summary span,
html[data-theme="light"] .customer-detail-metrics span,
html[data-theme="light"] .customer-detail-list span,
html[data-theme="light"] .customer-detail-list small,
html[data-theme="light"] .customer-note-list small,
html[data-theme="light"] .request-field,
html[data-theme="light"] .dashboard-filter label,
html[data-theme="light"] .customer-filter label,
html[data-theme="light"] .sales-filter label,
html[data-theme="light"] .return-history-filter label,
html[data-theme="light"] .request-history-filter label,
html[data-theme="light"] .store-issue-file-board > small,
html[data-theme="light"] .request-status-updated,
html[data-theme="light"] .return-status-updated,
html[data-theme="light"] .attendance-widget-status.unavailable,
html[data-theme="light"] .attendance-widget-schedule > span,
html[data-theme="light"] .attendance-widget-schedule small,
html[data-theme="light"] .attendance-shift-note p,
html[data-theme="light"] .attendance-analysis-item p,
html[data-theme="light"] .attendance-analysis-item ul,
html[data-theme="light"] .attendance-calendar-day small,
html[data-theme="light"] .attendance-records-table td small,
html[data-theme="light"] .empty-state {
    color: var(--muted);
}

html[data-theme="light"] .attendance-calendar-day.attendance-locked-day,
html[data-theme="light"] .attendance-calendar-day.attendance-locked-day:hover {
    border-color: #c9d3da;
    border-top-color: #aebac2;
    background: #eef2f5;
}

html[data-theme="light"] .customer-crm-summary strong,
html[data-theme="light"] .customer-detail-metrics strong,
html[data-theme="light"] .customer-detail-list strong,
html[data-theme="light"] .attendance-widget-schedule strong,
html[data-theme="light"] .check-in-hero-heading,
html[data-theme="light"] .check-in-hero-heading h2,
html[data-theme="light"] .check-in-time strong,
html[data-theme="light"] .attendance-calendar-day time,
html[data-theme="light"] .attendance-calendar-day strong {
    color: var(--ink) !important;
}

html[data-theme="light"] .menu-item {
    color: var(--ink);
}

html[data-theme="light"] .menu-item > i {
    color: #7b8b98;
}

html[data-theme="light"] .menu-item.active {
    border-color: var(--accent);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .dashboard-filter input,
html[data-theme="light"] .dashboard-filter select,
html[data-theme="light"] .dashboard-filter button,
html[data-theme="light"] .dashboard-filter .lookup-results,
html[data-theme="light"] .sales-filter input,
html[data-theme="light"] .sales-filter select,
html[data-theme="light"] .sales-filter button,
html[data-theme="light"] .customer-filter input,
html[data-theme="light"] .customer-filter select,
html[data-theme="light"] .customer-filter button,
html[data-theme="light"] .customer-follow-up-form textarea,
html[data-theme="light"] .customer-follow-up-form select,
html[data-theme="light"] .customer-follow-up-form input,
html[data-theme="light"] .customer-follow-up-form button,
html[data-theme="light"] .return-history-filter input,
html[data-theme="light"] .return-history-filter select,
html[data-theme="light"] .return-history-filter button,
html[data-theme="light"] .request-history-filter input,
html[data-theme="light"] .request-history-filter select,
html[data-theme="light"] .request-history-filter button,
html[data-theme="light"] .attendance-filter select,
html[data-theme="light"] .request-field input,
html[data-theme="light"] .request-field select,
html[data-theme="light"] .rich-text-editor,
html[data-theme="light"] .rich-text-content,
html[data-theme="light"] .store-issue-file-add,
html[data-theme="light"] .rent-settings-open,
html[data-theme="light"] .dialog-close,
html[data-theme="light"] .attendance-modal-header button,
html[data-theme="light"] .attendance-photo-header button,
html[data-theme="light"] .user-management-modal-close,
html[data-theme="light"] .filter-reset,
html[data-theme="light"] .pagination a,
html[data-theme="light"] .pagination button,
html[data-theme="light"] .pagination-disabled,
html[data-theme="light"] .return-supplier-select,
html[data-theme="light"] .bank-transfer-field-control input,
html[data-theme="light"] .bank-transfer-amount-prefix,
html[data-theme="light"] .bank-transfer-save-toggle-track,
html[data-theme="light"] .stored-account-search input,
html[data-theme="light"] .daily-briefing-manual-card-actions button {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .rich-text-content:empty::before {
    color: #8a98a5;
}

html[data-theme="light"] .my-schedule-legend-item.is-off-duty-indicator {
    color: #1c2126;
}

html[data-theme="light"] .data-table-wrap,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .user-management-table-wrap,
html[data-theme="light"] .staff-performance-top-products-table-wrap,
html[data-theme="light"] .sales-target-progress-scroll,
html[data-theme="light"] .sales-target-scheme-scroll,
html[data-theme="light"] .sales-target-scheme-table-wrap {
    scrollbar-color: #b9c5ce #eef3f6;
}

html[data-theme="light"] .data-table-wrap::-webkit-scrollbar-track,
html[data-theme="light"] .table-wrap::-webkit-scrollbar-track,
html[data-theme="light"] .user-management-table-wrap::-webkit-scrollbar-track,
html[data-theme="light"] .staff-performance-top-products-table-wrap::-webkit-scrollbar-track,
html[data-theme="light"] .sales-target-progress-scroll::-webkit-scrollbar-track,
html[data-theme="light"] .sales-target-scheme-scroll::-webkit-scrollbar-track,
html[data-theme="light"] .sales-target-scheme-table-wrap::-webkit-scrollbar-track {
    background: #eef3f6;
}

html[data-theme="light"] .data-table-wrap::-webkit-scrollbar-thumb,
html[data-theme="light"] .table-wrap::-webkit-scrollbar-thumb,
html[data-theme="light"] .user-management-table-wrap::-webkit-scrollbar-thumb,
html[data-theme="light"] .staff-performance-top-products-table-wrap::-webkit-scrollbar-thumb,
html[data-theme="light"] .sales-target-progress-scroll::-webkit-scrollbar-thumb,
html[data-theme="light"] .sales-target-scheme-scroll::-webkit-scrollbar-thumb,
html[data-theme="light"] .sales-target-scheme-table-wrap::-webkit-scrollbar-thumb {
    background: #b9c5ce;
}

html[data-theme="light"] .data-table td,
html[data-theme="light"] .data-table th,
html[data-theme="light"] .product-request-table td {
    border-bottom-color: var(--line);
}

html[data-theme="light"] .user-management-table-card .section-title,
html[data-theme="light"] .user-management-modal-panel,
html[data-theme="light"] .user-management-confirm-panel {
    border-color: var(--line);
    color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .user-management-search label,
html[data-theme="light"] .user-management-tabs button,
html[data-theme="light"] .user-management-table-person > span,
html[data-theme="light"] .user-management-modal-close,
html[data-theme="light"] .user-management-confirm-cancel,
html[data-theme="light"] .user-management-actions .filter-reset,
html[data-theme="light"] .user-management-confirm-actions .filter-reset {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .user-management-tabs button:hover,
html[data-theme="light"] .user-management-tabs button.is-active,
html[data-theme="light"] .user-management-tabs button.is-active span,
html[data-theme="light"] .user-management-table-person > span,
html[data-theme="light"] .user-management-search:focus-within label {
    border-color: #c8d5de;
    color: var(--ink);
    background: #eef4f8;
}

html[data-theme="light"] .store-issue-tabs a {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .store-issue-tabs a:hover,
html[data-theme="light"] .store-issue-tabs a.is-active,
html[data-theme="light"] .store-issue-tabs a.is-active span {
    border-color: #c8d5de;
    color: var(--ink);
    background: #eef4f8;
}

html[data-theme="light"] .user-management-table-wrap {
    border-color: var(--line);
    background: #ffffff;
}

html[data-theme="light"] .user-management-table th {
    border-bottom-color: var(--line);
    color: #526170;
    background: #eef4f8;
}

html[data-theme="light"] .user-management-table td {
    border-bottom-color: var(--line);
    color: var(--ink);
    background: #ffffff;
}

html[data-theme="light"] .user-management-table tbody tr:hover td {
    background: #f6f9fb;
}

html[data-theme="light"] .user-management-table tbody tr.is-disabled td {
    background: #f5f8fa;
}

html[data-theme="light"] .user-management-table tbody tr.is-disabled:hover td {
    background: #edf3f7;
}

html[data-theme="light"] .user-management-table-person strong,
html[data-theme="light"] .user-management-heading h3,
html[data-theme="light"] .user-management-confirm-title {
    color: var(--ink);
}

html[data-theme="light"] .user-management-edit {
    border-color: #9fc9e0;
    color: #176fa6;
    background: #edf8ff;
}

html[data-theme="light"] .user-management-edit:hover {
    border-color: #68acd1;
    color: #0f5f92;
    background: #dff2fc;
}

html[data-theme="light"] .user-management-edit-profile {
    border-color: #c3b3ef;
    color: #5b3fb8;
    background: #f2edfd;
}

html[data-theme="light"] .user-management-edit-profile:hover {
    border-color: #a184e6;
    color: #46299c;
    background: #e6dcff;
}

html[data-theme="light"] .user-management-login-as {
    border-color: #e0b26a;
    color: #9a6a1a;
    background: #fdf1de;
}

html[data-theme="light"] .user-management-login-as:hover {
    border-color: #cf9a48;
    color: #7c5310;
    background: #fbe6c4;
}

html[data-theme="light"] .user-management-toggle.is-disable {
    border-color: #efad9f;
    color: #a4402f;
    background: #fff1ee;
}

html[data-theme="light"] .user-management-toggle.is-disable:hover {
    border-color: #df7c67;
    background: #ffe5df;
}

html[data-theme="light"] .user-management-toggle.is-enable {
    border-color: #98d5b4;
    color: #1c7b4d;
    background: #eefaf3;
}

html[data-theme="light"] .user-management-toggle.is-enable:hover {
    border-color: #69bd8f;
    background: #def5e9;
}

html[data-theme="light"] .info-card,
html[data-theme="light"] .coming-card,
html[data-theme="light"] .document-item,
html[data-theme="light"] .staff-sales-card,
html[data-theme="light"] .staff-rating-card,
html[data-theme="light"] .staff-activity-card,
html[data-theme="light"] .attendance-evaluation-card,
html[data-theme="light"] .attendance-evaluation-insights,
html[data-theme="light"] .attendance-evaluation-insights article,
html[data-theme="light"] .attendance-evaluation-metrics,
html[data-theme="light"] .attendance-evaluation-metrics span,
html[data-theme="light"] .lookup-results,
html[data-theme="light"] .stored-account-card,
html[data-theme="light"] .flatpickr-calendar {
    border-color: var(--line);
    color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .return-field input,
html[data-theme="light"] .return-field select,
html[data-theme="light"] .return-field textarea,
html[data-theme="light"] .lookup-control input,
html[data-theme="light"] .flatpickr-input,
html[data-theme="light"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="light"] .flatpickr-current-month input.cur-year,
html[data-theme="light"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .return-field input[readonly],
html[data-theme="light"] .return-field textarea[readonly] {
    color: var(--muted);
    background: #edf1f4;
}

html[data-theme="light"] .return-item {
    border-color: var(--line);
    background: var(--bg-panel);
}

html[data-theme="light"] .return-source-card,
html[data-theme="light"] .return-customer-card,
html[data-theme="light"] .request-type-card,
html[data-theme="light"] .request-product-source-card {
    border-color: var(--line);
    color: var(--muted);
    background: var(--bg-panel);
}

html[data-theme="light"] .return-source-card.is-active,
html[data-theme="light"] .return-customer-card.is-active,
html[data-theme="light"] .request-type-card.is-active,
html[data-theme="light"] .request-product-source-card.is-active {
    border-color: var(--accent);
    color: var(--ink);
    background: #eaf6ee;
    box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(109, 204, 143, 0.18);
}

html[data-theme="light"] .lookup-result:hover,
html[data-theme="light"] .lookup-result:focus,
html[data-theme="light"] .stored-account-card:hover,
html[data-theme="light"] .stored-account-card:focus-within,
html[data-theme="light"] .flatpickr-day:hover,
html[data-theme="light"] .flatpickr-day:focus,
html[data-theme="light"] .flatpickr-months .flatpickr-month,
html[data-theme="light"] .flatpickr-weekdays,
html[data-theme="light"] span.flatpickr-weekday {
    color: var(--ink);
    background: #eef4f8;
}

html[data-theme="light"] .flatpickr-calendar.arrowTop::before,
html[data-theme="light"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: #ffffff;
}

html[data-theme="light"] .flatpickr-calendar.arrowBottom::before,
html[data-theme="light"] .flatpickr-calendar.arrowBottom::after {
    border-top-color: #ffffff;
}

html[data-theme="light"] .add-return-item,
html[data-theme="light"] .remove-return-item,
html[data-theme="light"] .attendance-edit-time-button,
html[data-theme="light"] .delete-cancel-button,
html[data-theme="light"] #bank-transfer-confirm-cancel {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .add-return-item:hover,
html[data-theme="light"] .remove-return-item:hover,
html[data-theme="light"] .attendance-edit-time-button:hover,
html[data-theme="light"] .delete-cancel-button:hover,
html[data-theme="light"] #bank-transfer-confirm-cancel:hover {
    border-color: #c8d5de;
    background: #eef4f8;
}

html[data-theme="light"] .user-management-role {
    color: #176fa6;
    background: #edf8ff;
}

html[data-theme="light"] .user-management-role.level-9 {
    border-color: #e0b168;
    color: #92650b;
    background: #fff3dd;
}

html[data-theme="light"] .user-management-role.level-6 {
    border-color: #7cc4f2;
    color: #176fa6;
    background: #eaf6ff;
}

html[data-theme="light"] .user-management-role.level-7 {
    border-color: #b5a6f7;
    color: #5b3fb8;
    background: #f1edff;
}

html[data-theme="light"] .user-management-role.level-2 {
    border-color: #7ed9a8;
    color: #1f7a4d;
    background: #e8faf0;
}

html[data-theme="light"] .user-management-role.level-3 {
    border-color: #7fd2bf;
    color: #187a63;
    background: #eafaf6;
}

html[data-theme="light"] .login-form,
html[data-theme="light"] .user-management-actions,
html[data-theme="light"] .user-management-confirm-actions,
html[data-theme="light"] .is-disabled,
html[data-theme="light"] .no-bonus,
html[data-theme="light"] .cur-year,
html[data-theme="light"] .flatpickr-monthDropdown-months {
    color: var(--ink);
    background: transparent;
}

html[data-theme="light"] .request-notes-cell,
html[data-theme="light"] .erp-toast-content p {
    color: #526170;
}

html[data-theme="light"] .store-issue-file-thumb,
html[data-theme="light"] .attendance-photo-frame img {
    border-color: #c8d5de;
    background: #f2f6f8;
}

html[data-theme="light"] .rent-settings-open:hover,
html[data-theme="light"] .rent-settings-open:focus,
html[data-theme="light"] .dialog-close:hover,
html[data-theme="light"] .dialog-close:focus,
html[data-theme="light"] .attendance-modal-header button:hover,
html[data-theme="light"] .attendance-modal-header button:focus,
html[data-theme="light"] .attendance-photo-header button:hover,
html[data-theme="light"] .attendance-photo-header button:focus,
html[data-theme="light"] .user-management-modal-close:hover,
html[data-theme="light"] .user-management-modal-close:focus {
    border-color: var(--accent);
    color: var(--ink);
    background: #eef4f8;
}

html[data-theme="light"] .monthly-expense-summary article,
html[data-theme="light"] .rent-settings-dialog,
html[data-theme="light"] .priority-bonus-performance-summary article,
html[data-theme="light"] .priority-bonus-summary article,
html[data-theme="light"] .priority-bonus-settings-panel,
html[data-theme="light"] .priority-bonus-sales-panel,
html[data-theme="light"] .profile-edit-page-panel,
html[data-theme="light"] .priority-bonus-product,
html[data-theme="light"] .staff-performance-analysis-card,
html[data-theme="light"] .sales-dashboard-rank-card,
html[data-theme="light"] .sales-dashboard-recommendation-list article,
html[data-theme="light"] .sales-dashboard-rating-card,
html[data-theme="light"] .supervisor-health-indicator,
html[data-theme="light"] .supervisor-staff-health-card,
html[data-theme="light"] .sales-rating-bonus-summary article,
html[data-theme="light"] .sales-rating-bonus-card,
html[data-theme="light"] .sales-member-bonus-card,
html[data-theme="light"] .sales-member-bonus-rule,
html[data-theme="light"] .sales-ranking-bonus-scheme,
html[data-theme="light"] .sales-ranking-bonus-tier,
html[data-theme="light"] .sales-target-current-tier,
html[data-theme="light"] .sales-target-overview-details,
html[data-theme="light"] .sales-target-progress-panel,
html[data-theme="light"] .sales-target-commission-card,
html[data-theme="light"] .sales-target-mission-card,
html[data-theme="light"] .sales-target-tier,
html[data-theme="light"] .sales-target-scheme-panel,
html[data-theme="light"] .sales-target-scheme-table-wrap,
html[data-theme="light"] .profit-sharing-group-option {
    border-color: var(--line);
    color: var(--ink);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .priority-bonus-product.finished,
html[data-theme="light"] .sales-dashboard-rank-card.health-good,
html[data-theme="light"] .sales-dashboard-rank-card.health-prima,
html[data-theme="light"] .supervisor-staff-health-card.health-good,
html[data-theme="light"] .supervisor-staff-health-card.health-prima {
    background: #f0fbf6;
}

html[data-theme="light"] .sales-dashboard-rank-card.rank-one,
html[data-theme="light"] .sales-dashboard-rank-card.health-watch,
html[data-theme="light"] .sales-member-bonus-card.members.rank-one,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-one {
    background: #fff8e9;
}

html[data-theme="light"] .sales-dashboard-rank-card.rank-two,
html[data-theme="light"] .sales-member-bonus-card.members.rank-two,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-two {
    background: #eef7fc;
}

html[data-theme="light"] .sales-dashboard-rank-card.rank-three,
html[data-theme="light"] .sales-member-bonus-card.members.rank-three,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-three {
    background: #fff3eb;
}

html[data-theme="light"] .sales-dashboard-rank-card.health-critical,
html[data-theme="light"] .supervisor-staff-health-card.health-critical,
html[data-theme="light"] .sales-rating-bonus-card.dissatisfied {
    background: #fff1f2;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-other,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-other {
    background: #f5f8fa;
}

html[data-theme="light"] .sales-rating-bonus-card.skip {
    background: #eef7fc;
}

html[data-theme="light"] .sales-rating-bonus-card.neutral {
    background: #fff8e9;
}

html[data-theme="light"] .sales-rating-bonus-card.satisfied {
    background: #f0fbf6;
}

html[data-theme="light"] .supervisor-health-legend-bar {
    background: var(--bg-panel);
}

html[data-theme="light"] .supervisor-health-legend-chip {
    background: #f5f8fa;
}

html[data-theme="light"] .supervisor-health-legend-chip.health-prima { color: #2674a8; }
html[data-theme="light"] .supervisor-health-legend-chip.health-good { color: #21764f; }
html[data-theme="light"] .supervisor-health-legend-chip.health-watch { color: #9b6a00; }
html[data-theme="light"] .supervisor-health-legend-chip.health-critical { color: #aa3440; }
html[data-theme="light"] .supervisor-health-legend-chip.health-not-started { color: #5d6b76; opacity: 1; }

html[data-theme="light"] .staff-performance-versus-metric,
html[data-theme="light"] .staff-performance-insight,
html[data-theme="light"] .supervisor-staff-health-indicators > div {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .priority-bonus-progress,
html[data-theme="light"] .sales-target-progress {
    background: #dde7ee;
}

html[data-theme="light"] .sales-target-scheme-track::before {
    background: #d6e0e7;
}

html[data-theme="light"] .sales-target-track-dot {
    border-color: #c7d4de;
    color: #647583;
    background: #ffffff;
    box-shadow: 0 0 0 4px #f6f9fb;
}

html[data-theme="light"] .sales-target-track-node.is-current .sales-target-track-dot {
    box-shadow: 0 0 0 4px #f6f9fb, 0 0 0 6px rgba(231, 166, 62, 0.28);
}

html[data-theme="light"] .priority-bonus-summary article:first-child,
html[data-theme="light"] .priority-bonus-performance-summary .bonus-paid,
html[data-theme="light"] .priority-bonus-product.earned,
html[data-theme="light"] .staff-performance-versus-metric.priority-bonus-paid,
html[data-theme="light"] .staff-performance-versus-metric.sales,
html[data-theme="light"] .sales-rating-bonus-summary article,
html[data-theme="light"] .sales-rating-bonus-card.neutral,
html[data-theme="light"] .sales-member-bonus-card.bonus,
html[data-theme="light"] .sales-member-bonus-card.members.rank-one,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-one,
html[data-theme="light"] .sales-target-commission-card.commission,
html[data-theme="light"] .sales-target-current-tier.gold {
    border-left-color: #e7a63e;
}

html[data-theme="light"] .priority-bonus-summary article.finished,
html[data-theme="light"] .priority-bonus-performance-summary .profit-earned,
html[data-theme="light"] .priority-bonus-product.finished,
html[data-theme="light"] .staff-performance-versus-metric.profit,
html[data-theme="light"] .sales-target-current-tier.green {
    border-left-color: #3aa36f;
}

html[data-theme="light"] .priority-bonus-performance-summary .profit-earned.negative,
html[data-theme="light"] .staff-performance-versus-metric.returns,
html[data-theme="light"] .sales-rating-bonus-card.dissatisfied {
    border-left-color: #d85f68;
}

html[data-theme="light"] .priority-bonus-performance-summary .sold-items,
html[data-theme="light"] .staff-performance-versus-metric.sold-items,
html[data-theme="light"] .sales-rating-bonus-card.skip,
html[data-theme="light"] .sales-member-bonus-card.members,
html[data-theme="light"] .sales-member-bonus-card.members.rank-two,
html[data-theme="light"] .sales-target-current-tier.blue {
    border-left-color: #3d94c9;
}

html[data-theme="light"] .sales-rating-bonus-card.satisfied {
    border-left-color: #3aa36f;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-three {
    border-left-color: #d9734f;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-other {
    border-left-color: #8a9aa6;
}

html[data-theme="light"] .sales-ranking-bonus-tier.rank-one { border-top-color: #e7a63e; }
html[data-theme="light"] .sales-ranking-bonus-tier.rank-two { border-top-color: #3d94c9; }
html[data-theme="light"] .sales-ranking-bonus-tier.rank-three { border-top-color: #d9734f; }
html[data-theme="light"] .sales-ranking-bonus-tier.rank-other { border-top-color: #8a9aa6; }

html[data-theme="light"] .staff-performance-versus-metric.transactions {
    border-left-color: #5a9ed6;
}

html[data-theme="light"] .staff-performance-versus-metric.members,
html[data-theme="light"] .sales-target-current-tier.purple {
    border-left-color: #8f68ba;
}

html[data-theme="light"] .sales-target-current-tier.coral {
    border-left-color: #d9734f;
}

html[data-theme="light"] .sales-target-tier.coral { border-top-color: #d9734f; }
html[data-theme="light"] .sales-target-tier.blue { border-top-color: #3d94c9; }
html[data-theme="light"] .sales-target-tier.gold { border-top-color: #e7a63e; }
html[data-theme="light"] .sales-target-tier.purple { border-top-color: #8f68ba; }
html[data-theme="light"] .sales-target-tier.green { border-top-color: #3aa36f; }

html[data-theme="light"] .monthly-expense-summary strong,
html[data-theme="light"] .priority-bonus-summary strong,
html[data-theme="light"] .priority-bonus-performance-summary strong,
html[data-theme="light"] .priority-bonus-product dd,
html[data-theme="light"] .staff-performance-versus-metric strong,
html[data-theme="light"] .staff-performance-insight strong,
html[data-theme="light"] .sales-rating-bonus-card strong,
html[data-theme="light"] .sales-member-bonus-card strong,
html[data-theme="light"] .sales-ranking-bonus-tier strong,
html[data-theme="light"] .sales-target-current-tier strong,
html[data-theme="light"] .sales-target-commission-card strong,
html[data-theme="light"] .sales-dashboard-rank-card strong,
html[data-theme="light"] .supervisor-health-indicator strong,
html[data-theme="light"] .supervisor-staff-health-indicators strong {
    color: #1f2c36;
}

html[data-theme="light"] .priority-bonus-summary article:first-child strong,
html[data-theme="light"] .priority-bonus-performance-summary .bonus-paid strong,
html[data-theme="light"] .priority-bonus-product-heading > strong,
html[data-theme="light"] .sales-rating-bonus-summary strong,
html[data-theme="light"] .sales-member-bonus-card.bonus strong,
html[data-theme="light"] .sales-member-bonus-card.members.rank-one strong,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-one strong,
html[data-theme="light"] .sales-target-commission-card.commission strong,
html[data-theme="light"] .sales-target-overview-metrics strong.gold,
html[data-theme="light"] .sales-dashboard-rank-card.rank-one > i,
html[data-theme="light"] .sales-dashboard-rank-card.rank-one strong,
html[data-theme="light"] .sales-dashboard-rank-card.health-watch > i,
html[data-theme="light"] .sales-dashboard-rank-card.health-watch strong,
html[data-theme="light"] .staff-performance-top-products-table td:first-child {
    color: #9b6a00;
}

html[data-theme="light"] .priority-bonus-summary article.finished strong,
html[data-theme="light"] .priority-bonus-performance-summary .profit-earned strong,
html[data-theme="light"] .sales-dashboard-rank-card.health-good > i,
html[data-theme="light"] .sales-dashboard-rank-card.health-good strong,
html[data-theme="light"] .sales-rating-bonus-card.satisfied > i,
html[data-theme="light"] .staff-performance-top-products-table td:last-child {
    color: #21764f;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-two strong,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-two strong,
html[data-theme="light"] .sales-rating-bonus-card.skip > i {
    color: #2674a8;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-three strong,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-three strong {
    color: #b35f35;
}

html[data-theme="light"] .sales-member-bonus-card.members.rank-other strong,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-other strong {
    color: #5d6b76;
}

html[data-theme="light"] .priority-bonus-performance-summary .profit-earned.negative strong,
html[data-theme="light"] .priority-bonus-profit.negative,
html[data-theme="light"] .staff-performance-versus-metric strong.priority-bonus-negative,
html[data-theme="light"] .sales-rating-bonus-summary strong.negative,
html[data-theme="light"] .sales-rating-bonus-card.dissatisfied > i {
    color: #aa3440;
}

html[data-theme="light"] .priority-bonus-finished-badge,
html[data-theme="light"] .priority-bonus-status.active,
html[data-theme="light"] .sales-rating-bonus-card > b.positive,
html[data-theme="light"] .versus-change.up,
html[data-theme="light"] .request-status-ready,
html[data-theme="light"] .request-status-complete,
html[data-theme="light"] .type-tag.grosir,
html[data-theme="light"] .type-tag.cash-flow-in,
html[data-theme="light"] .attendance-widget-status.complete,
html[data-theme="light"] .sales-target-active-badge {
    color: #146c46;
    background: #dff6ea;
}

html[data-theme="light"] .priority-bonus-status.inactive,
html[data-theme="light"] .sales-rating-bonus-card > b.negative,
html[data-theme="light"] .versus-change.down,
html[data-theme="light"] .transaction-type.return {
    color: #a3323c;
    background: #ffe5e8;
}

html[data-theme="light"] .sales-rating-bonus-card > b.neutral,
html[data-theme="light"] .versus-change.neutral,
html[data-theme="light"] .request-status-waiting,
html[data-theme="light"] .sales-ranking-bonus-tier.is-current::after {
    color: #28688f;
    background: #e3f2fb;
}

html[data-theme="light"] .transaction-type.sale,
html[data-theme="light"] .supervisor-daily-target-calendar-day.is-selected::after {
    color: #236f9f;
    background: #e3f2fb;
}

html[data-theme="light"] .staff-rank,
html[data-theme="light"] .sales-member-bonus-card.members.rank-other > i,
html[data-theme="light"] .sales-ranking-bonus-tier.rank-other > i,
html[data-theme="light"] .sales-dashboard-rank-card.rank-other > i,
html[data-theme="light"] .sales-dashboard-rank-card.health-not-started > i {
    color: #5d6b76;
    background: #e5edf2;
}

html[data-theme="light"] .staff-rank.rank-1,
html[data-theme="light"] .staff-rank.rank-2,
html[data-theme="light"] .staff-rank.rank-3 {
    color: #1d1f20;
}

html[data-theme="light"] .staff-performance-rank-card {
    border-color: var(--line);
    background: #eef2f5;
    color: #445059;
}

html[data-theme="light"] .staff-performance-rank-card.rank-1 { background: #fff8e9; color: #9b6a00; border-left-color: #ffc15e; }
html[data-theme="light"] .staff-performance-rank-card.rank-2 { background: #eef7fc; color: #2674a8; border-left-color: #9fc4db; }
html[data-theme="light"] .staff-performance-rank-card.rank-3 { background: #fff3eb; color: #b35f35; border-left-color: #d9935e; }
html[data-theme="light"] .staff-performance-rank-card.rank-4 { background: #f5f8fa; color: #5d6b76; border-left-color: #4d5961; }

html[data-theme="light"] .check-in-hero,
html[data-theme="light"] .check-in-confirm-panel {
    border-color: var(--line) !important;
    color: var(--ink) !important;
    background: var(--bg-panel) !important;
    box-shadow: var(--shadow);
}

html[data-theme="light"] .check-in-time-card,
html[data-theme="light"] .check-in-time-card.off,
html[data-theme="light"] .check-in-time-card.permission,
html[data-theme="light"] .check-in-time-card.sick,
html[data-theme="light"] .check-in-time-card.leave,
html[data-theme="light"] .check-in-time-card.unassigned {
    border-color: #c7d5df !important;
    border-bottom-color: #8fa7b5 !important;
    color: var(--ink) !important;
    background: #f6f9fb !important;
    box-shadow: 0 9px 20px rgba(28, 45, 60, 0.12);
}

html[data-theme="light"] .check-in-time-card.shift-one {
    border-color: #9bcce8 !important;
    border-bottom-color: #3d94c9 !important;
    background: #eef8fd !important;
}

html[data-theme="light"] .check-in-time-card.shift-two {
    border-color: #c9c0ef !important;
    border-bottom-color: #8f68ba !important;
    background: #f5f2ff !important;
}

html[data-theme="light"] .check-in-time-card.admin {
    border-bottom-color: #e7a63e !important;
    background: #fff8e9 !important;
}

html[data-theme="light"] .check-in-time i,
html[data-theme="light"] .check-in-no-schedule i {
    color: #527286 !important;
}

html[data-theme="light"] .check-in-time-card.shift-one .check-in-time i,
html[data-theme="light"] .check-in-time-card.shift-one .check-in-no-schedule i {
    color: #2674a8 !important;
}

html[data-theme="light"] .check-in-time-card.shift-two .check-in-time i,
html[data-theme="light"] .check-in-time-card.shift-two .check-in-no-schedule i {
    color: #7656a6 !important;
}

html[data-theme="light"] .check-in-time strong,
html[data-theme="light"] .check-in-no-schedule strong {
    color: var(--ink) !important;
}

html[data-theme="light"] .check-in-time span,
html[data-theme="light"] .check-in-no-schedule span,
html[data-theme="light"] .check-in-confirm-panel p {
    color: var(--muted) !important;
}

html[data-theme="light"] .check-in-time-divider {
    color: #8da0ad;
}

html[data-theme="light"] .check-in-shift-label,
html[data-theme="light"] .check-in-time-card.shift-one .check-in-shift-label,
html[data-theme="light"] .check-in-time-card.shift-two .check-in-shift-label {
    color: #2c5268 !important;
    background: #e7f2f8 !important;
}

html[data-theme="light"] .check-in-break-label {
    border-color: #cbd9e2;
    color: #465967 !important;
    background: #ffffff !important;
}

html[data-theme="light"] .check-in-presence-bar {
    border-top-color: var(--line);
    color: var(--ink);
    background: #f6f9fb;
}

html[data-theme="light"] .check-in-presence-status {
    color: #405565;
}

html[data-theme="light"] .check-in-presence-status.success {
    color: #146c46;
}

html[data-theme="light"] .check-in-late-badge {
    border-color: #e7a63e;
    color: #9b6a00;
    background: #fff3d7;
}

html[data-theme="light"] .attendance-history-link {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
}

html[data-theme="light"] .attendance-history-link:hover {
    border-color: var(--accent);
    color: var(--ink);
    background: #fff4f1;
}

html[data-theme="light"] .attendance-upcoming-item,
html[data-theme="light"] .attendance-upcoming-item.shift-one,
html[data-theme="light"] .attendance-upcoming-item.shift-two,
html[data-theme="light"] .attendance-upcoming-item.admin,
html[data-theme="light"] .attendance-upcoming-item.off,
html[data-theme="light"] .attendance-upcoming-item.permission,
html[data-theme="light"] .attendance-upcoming-item.sick,
html[data-theme="light"] .attendance-upcoming-item.leave,
html[data-theme="light"] .attendance-upcoming-item.unassigned {
    border-color: var(--line) !important;
    border-left-color: #8fa7b5 !important;
    color: var(--ink) !important;
    background: var(--bg-panel) !important;
}

html[data-theme="light"] .attendance-upcoming-item.shift-one { border-left-color: #3d94c9 !important; background: #eef8fd !important; }
html[data-theme="light"] .attendance-upcoming-item.shift-two { border-left-color: #8f68ba !important; background: #f5f2ff !important; }
html[data-theme="light"] .attendance-upcoming-item.admin { border-left-color: #e7a63e !important; background: #fff8e9 !important; }
html[data-theme="light"] .attendance-upcoming-item.off { border-left-color: #3aa36f !important; background: #f0fbf6 !important; }
html[data-theme="light"] .attendance-upcoming-item.permission { border-left-color: #d9734f !important; background: #fff3eb !important; }
html[data-theme="light"] .attendance-upcoming-item.sick { border-left-color: #d85f68 !important; background: #fff1f2 !important; }
html[data-theme="light"] .attendance-upcoming-item.leave { border-left-color: #3d9f9b !important; background: #eefafa !important; }

html[data-theme="light"] .attendance-upcoming-item time strong,
html[data-theme="light"] .attendance-upcoming-item > div strong,
html[data-theme="light"] .attendance-upcoming-item.shift-one > div strong,
html[data-theme="light"] .attendance-upcoming-item.shift-one time strong,
html[data-theme="light"] .attendance-upcoming-item.shift-two > div strong,
html[data-theme="light"] .attendance-upcoming-item.shift-two time strong,
html[data-theme="light"] .attendance-upcoming-item.admin > div strong,
html[data-theme="light"] .attendance-upcoming-item.admin time strong,
html[data-theme="light"] .attendance-upcoming-item.off > div strong,
html[data-theme="light"] .attendance-upcoming-item.off time strong,
html[data-theme="light"] .attendance-upcoming-item.permission > div strong,
html[data-theme="light"] .attendance-upcoming-item.permission time strong,
html[data-theme="light"] .attendance-upcoming-item.sick > div strong,
html[data-theme="light"] .attendance-upcoming-item.sick time strong,
html[data-theme="light"] .attendance-upcoming-item.leave > div strong,
html[data-theme="light"] .attendance-upcoming-item.leave time strong {
    color: var(--ink) !important;
}

html[data-theme="light"] .attendance-upcoming-item time span,
html[data-theme="light"] .attendance-upcoming-item small {
    color: var(--muted) !important;
}

html[data-theme="light"] .attendance-upcoming-end > i {
    color: #718494;
}

html[data-theme="light"] .attendance-legend span {
    border-color: var(--line);
    color: var(--muted);
    background: #f7fafc;
}

html[data-theme="light"] .attendance-empty-assignment {
    border-color: #c8d5de;
    color: #6b7b87;
    background: #f7fafc;
}

html[data-theme="light"] .attendance-empty-assignment i {
    color: #d9873f;
}

html[data-theme="light"] .attendance-shift-group {
    border-color: var(--line);
    background: #f7fafc;
}

html[data-theme="light"] .attendance-shift-group-title {
    color: var(--ink);
}

html[data-theme="light"] .attendance-shift-group-title small {
    color: #7b8b98 !important;
}

html[data-theme="light"] .attendance-shift-group-morning {
    border-color: #9bcce8;
    background: #eef8fd;
}

html[data-theme="light"] .attendance-shift-group-morning .attendance-shift-group-title {
    color: #2674a8;
}

html[data-theme="light"] .attendance-staff-entry.shift-one,
html[data-theme="light"] .attendance-legend span.shift-one {
    border-color: #9bcce8 !important;
    color: #2674a8 !important;
    background: #eef8fd !important;
}

html[data-theme="light"] .attendance-shift-group-evening {
    border-color: #c9c0ef;
    background: #f5f2ff;
}

html[data-theme="light"] .attendance-shift-group-evening .attendance-shift-group-title {
    color: #6c4fb0;
}

html[data-theme="light"] .attendance-staff-entry.shift-two,
html[data-theme="light"] .attendance-legend span.shift-two {
    border-color: #c9c0ef !important;
    color: #6c4fb0 !important;
    background: #f5f2ff !important;
}

html[data-theme="light"] .attendance-shift-group-admin {
    border-color: #e7c883;
    background: #fff8e9;
}

html[data-theme="light"] .attendance-shift-group-admin .attendance-shift-group-title {
    color: #93690f;
}

html[data-theme="light"] .attendance-staff-entry.admin,
html[data-theme="light"] .attendance-legend span.admin {
    border-color: #e7c883 !important;
    color: #93690f !important;
    background: #fff8e9 !important;
}

html[data-theme="light"] .attendance-shift-group-operasional-pagi {
    border-color: #7fd2bf;
    background: #eafaf6;
}

html[data-theme="light"] .attendance-shift-group-operasional-pagi .attendance-shift-group-title {
    color: #187a63;
}

html[data-theme="light"] .attendance-staff-entry.operasional-pagi,
html[data-theme="light"] .attendance-legend span.operasional-pagi {
    border-color: #7fd2bf !important;
    color: #187a63 !important;
    background: #eafaf6 !important;
}

html[data-theme="light"] .attendance-shift-group-operasional-siang {
    border-color: #e0b0dc;
    background: #fbeffa;
}

html[data-theme="light"] .attendance-shift-group-operasional-siang .attendance-shift-group-title {
    color: #8a3286;
}

html[data-theme="light"] .attendance-staff-entry.operasional-siang,
html[data-theme="light"] .attendance-legend span.operasional-siang {
    border-color: #e0b0dc !important;
    color: #8a3286 !important;
    background: #fbeffa !important;
}

html[data-theme="light"] .attendance-shift-group-off {
    border-color: #9bd8b8;
    background: #f0fbf6;
}

html[data-theme="light"] .attendance-shift-group-off .attendance-shift-group-title {
    color: #1c7a4d;
}

html[data-theme="light"] .attendance-staff-entry.off,
html[data-theme="light"] .attendance-legend span.off {
    border-color: #9bd8b8 !important;
    color: #1c7a4d !important;
    background: #f0fbf6 !important;
}

html[data-theme="light"] .attendance-shift-group-permission {
    border-color: #e8b48e;
    background: #fff3eb;
}

html[data-theme="light"] .attendance-shift-group-permission .attendance-shift-group-title {
    color: #a34a26;
}

html[data-theme="light"] .attendance-staff-entry.permission,
html[data-theme="light"] .attendance-legend span.permission {
    border-color: #e8b48e !important;
    color: #a34a26 !important;
    background: #fff3eb !important;
}

html[data-theme="light"] .attendance-shift-group-sick {
    border-color: #ecb0b8;
    background: #fff1f2;
}

html[data-theme="light"] .attendance-shift-group-sick .attendance-shift-group-title {
    color: #a13543;
}

html[data-theme="light"] .attendance-staff-entry.sick,
html[data-theme="light"] .attendance-legend span.sick {
    border-color: #ecb0b8 !important;
    color: #a13543 !important;
    background: #fff1f2 !important;
}

html[data-theme="light"] .attendance-shift-group-leave {
    border-color: #9bd6d2;
    background: #eefafa;
}

html[data-theme="light"] .attendance-shift-group-leave .attendance-shift-group-title {
    color: #1f6f6c;
}

html[data-theme="light"] .attendance-staff-entry.leave,
html[data-theme="light"] .attendance-legend span.leave {
    border-color: #9bd6d2 !important;
    color: #1f6f6c !important;
    background: #eefafa !important;
}

html[data-theme="light"] .attendance-tomorrow-badge {
    border-color: #8fc4e4;
    color: #236f9f !important;
    background: #e3f2fb;
    box-shadow: none;
}

html[data-theme="light"] .check-in-confirm-icon {
    border-color: #ffb09f;
    color: var(--accent);
    background: #fff1ed;
}

html[data-theme="light"] .check-in-camera-box video {
    border-color: var(--line);
    background: #edf3f6;
}

html[data-theme="light"] .check-in-camera-status.success {
    border-color: #9ad8bb;
    color: #146c46;
    background: #dff6ea;
}

html[data-theme="light"] .check-in-camera-status.warning {
    border-color: #e7c36e;
    color: #9b6a00;
    background: #fff3d7;
}

html[data-theme="light"] .check-in-camera-status.error {
    border-color: #eba0a8;
    color: #a3323c;
    background: #ffe5e8;
}

html[data-theme="light"] .sales-target-progress-status.remaining {
    color: #a3323c;
}

html[data-theme="light"] .sales-target-progress-status.complete {
    color: #146c46;
}

html[data-theme="light"] .priority-bonus-setting-form > label > input,
html[data-theme="light"] .priority-bonus-setting-form .lookup-control > input[type="search"],
html[data-theme="light"] .monthly-expense-period input,
html[data-theme="light"] .rent-setting-form input,
html[data-theme="light"] .rent-setting-form select,
html[data-theme="light"] .monthly-expense-table input,
html[data-theme="light"] .attendance-schedule-form select,
html[data-theme="light"] .attendance-schedule-form input[type="time"],
html[data-theme="light"] .attendance-schedule-form textarea,
html[data-theme="light"] .deposit-saving-input {
    border-color: var(--line);
    color: var(--ink);
    background: #f7fafc;
    color-scheme: light;
}

html[data-theme="light"] .attendance-schedule-form label > span,
html[data-theme="light"] .monthly-expense-summary span,
html[data-theme="light"] .monthly-expense-summary small,
html[data-theme="light"] .rent-settings-dialog p,
html[data-theme="light"] .priority-bonus-summary span,
html[data-theme="light"] .priority-bonus-summary small,
html[data-theme="light"] .priority-bonus-performance-summary span,
html[data-theme="light"] .priority-bonus-performance-summary small,
html[data-theme="light"] .priority-bonus-product dt,
html[data-theme="light"] .priority-bonus-product p,
html[data-theme="light"] .priority-bonus-product-heading small,
html[data-theme="light"] .staff-performance-analysis-heading p,
html[data-theme="light"] .staff-performance-versus-metric span,
html[data-theme="light"] .staff-performance-versus-metric small,
html[data-theme="light"] .staff-performance-insight span,
html[data-theme="light"] .sales-rating-bonus-summary span,
html[data-theme="light"] .sales-rating-bonus-summary small,
html[data-theme="light"] .sales-rating-bonus-card span,
html[data-theme="light"] .sales-rating-bonus-card small,
html[data-theme="light"] .sales-member-bonus-card span,
html[data-theme="light"] .sales-member-bonus-card small,
html[data-theme="light"] .sales-member-bonus-rule span,
html[data-theme="light"] .sales-ranking-bonus-tier span,
html[data-theme="light"] .sales-ranking-bonus-tier small,
html[data-theme="light"] .sales-dashboard-recommendation-list p,
html[data-theme="light"] .sales-dashboard-rating-card span,
html[data-theme="light"] .sales-dashboard-rating-card small,
html[data-theme="light"] .supervisor-health-indicator-heading,
html[data-theme="light"] .supervisor-health-indicator small,
html[data-theme="light"] .supervisor-staff-health-heading p,
html[data-theme="light"] .supervisor-staff-health-indicators span,
html[data-theme="light"] .supervisor-staff-health-indicators small,
html[data-theme="light"] .sales-target-current-tier span,
html[data-theme="light"] .sales-target-current-tier small,
html[data-theme="light"] .sales-target-table-status {
    color: var(--muted);
}

html[data-theme="light"] .sales-target-scheme-table th {
    color: var(--muted);
    background: #eef4f8;
}

html[data-theme="light"] .sales-target-scheme-table tbody tr.is-active td {
    color: var(--ink);
    background: rgba(231, 166, 62, 0.14);
}

html[data-theme="light"] select option,
html[data-theme="light"] .sales-filter select option,
html[data-theme="light"] .dashboard-filter select option,
html[data-theme="light"] .customer-filter select option,
html[data-theme="light"] .return-history-filter select option,
html[data-theme="light"] .request-history-filter select option {
    color: var(--ink);
    background: #ffffff;
}

html[data-theme="light"] .data-table th,
html[data-theme="light"] .sales-table th,
html[data-theme="light"] .table-pagination-toolbar select {
    border-color: var(--line);
    color: #526170;
    background: #eef4f8;
}

html[data-theme="light"] .data-table td {
    color: var(--ink);
    background: #ffffff;
}

html[data-theme="light"] .data-table td.bank-mutation-debit {
    color: #aa3440;
}

html[data-theme="light"] .data-table td.bank-mutation-credit {
    color: #146c46;
}

html[data-theme="light"] .data-table td.bank-mutation-balance {
    color: var(--ink);
}

html[data-theme="light"] .data-table tbody tr:hover td {
    background: #f6f9fb;
}

html[data-theme="light"] .data-table tbody tr.sales-return-row td {
    border-color: #f2c2c7;
    background: #fff1f2;
}

html[data-theme="light"] .data-table tbody tr.sales-return-row:hover td {
    background: #ffe7ea;
}

html[data-theme="light"] .data-table tbody tr.product-data-out-of-stock td {
    border-color: #f2c2c7;
    background: #fff1f2;
}

html[data-theme="light"] .data-table tbody tr.product-data-out-of-stock:hover td {
    background: #ffe7ea;
}

html[data-theme="light"] .cost-cell { color: #aa3440; }
html[data-theme="light"] .sale-cell { color: #7a4e99; }
html[data-theme="light"] .profit-cell { color: #146c46; }
html[data-theme="light"] .discount-note { color: #9b6a00; }

html[data-theme="light"] .erp-toast {
    border-color: #c9d5de;
    color: var(--ink);
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(28, 45, 60, 0.22);
}

html[data-theme="light"] .erp-toast-error { border-color: #ee8d94; background: #fff2f3; }
html[data-theme="light"] .erp-toast-warning { border-color: #e3bc66; background: #fff8e8; }
html[data-theme="light"] .erp-toast-success { border-color: #72c99a; background: #effaf4; }
html[data-theme="light"] .erp-toast-info { border-color: #88c8ee; background: #eef8ff; }

html[data-theme="light"] .request-status-waiting,
html[data-theme="light"] .return-status.status-waiting { border-color: #9aa7b2; color: #51606b; background: #eef2f5; }
html[data-theme="light"] .request-status-cart { border-color: #bd8e21; color: #7d5a00; background: #fff4cf; }
html[data-theme="light"] .request-status-return-exchange,
html[data-theme="light"] .request-status-unavailable,
html[data-theme="light"] .return-status.status-checked { border-color: #e0913f; color: #9d5413; background: #fff0df; }
html[data-theme="light"] .request-status-ordered,
html[data-theme="light"] .return-status.status-vendor { border-color: #65a7dc; color: #1e6fa8; background: #eaf6ff; }
html[data-theme="light"] .request-status-ready,
html[data-theme="light"] .request-status-complete,
html[data-theme="light"] .return-status.status-complete { border-color: #5cb986; color: #21764f; background: #eaf8f0; }
html[data-theme="light"] .request-status-cancelled,
html[data-theme="light"] .return-status.status-rejected,
html[data-theme="light"] .return-status.status-cancelled { border-color: #df7680; color: #aa3440; background: #fff0f2; }

html[data-theme="light"] .stock-history-type-purchase { border-color: #65a7dc; color: #1e6fa8; background: #eaf6ff; }
html[data-theme="light"] .stock-history-type-sale { border-color: #5cb986; color: #21764f; background: #eaf8f0; }
html[data-theme="light"] .stock-history-type-restock { border-color: #b087d6; color: #6c3f96; background: #f5edff; }
html[data-theme="light"] .stock-history-type-refund { border-color: #bd8e21; color: #7d5a00; background: #fff4cf; }
html[data-theme="light"] .stock-history-type-supplier-return { border-color: #e0913f; color: #9d5413; background: #fff0df; }
html[data-theme="light"] .stock-history-type-loss { border-color: #df7680; color: #aa3440; background: #fff0f2; }
html[data-theme="light"] .stock-history-type-other { border-color: #9aa7b2; color: #51606b; background: #eef2f5; }

html[data-theme="light"] .theme-switch-toggle.is-dark .theme-switch-track {
    background: #dceaf4;
}

/* Gaji Staff (Staff Salary) */
.staff-salary-list {
    display: grid;
    gap: 14px;
}

.staff-salary-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    overflow: hidden;
}

.staff-salary-card-header {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}

.staff-salary-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-salary-identity strong {
    display: block;
    font-size: 14px;
}

.staff-salary-identity span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.staff-salary-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}

.staff-salary-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.staff-salary-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.staff-salary-metric span {
    color: var(--muted);
    font-size: 11px;
}

.staff-salary-metric strong {
    font-size: 14px;
}

.staff-salary-thp {
    color: var(--accent);
}

.staff-salary-chevron {
    transition: transform 0.2s ease;
    color: var(--muted);
}

.staff-salary-card.is-open .staff-salary-chevron {
    transform: rotate(180deg);
}

.staff-salary-card-body {
    display: none;
    border-top: 1px solid var(--line);
    padding: 16px 18px 20px;
}

.staff-salary-card.is-open .staff-salary-card-body {
    display: block;
}

.staff-salary-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.staff-salary-tab-button {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.staff-salary-tab-button.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.staff-salary-tab-panel {
    display: none;
}

.staff-salary-tab-panel.is-active {
    display: block;
}

.staff-salary-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

.staff-salary-summary-column h3 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--ok);
}

.staff-salary-summary-column-deduction h3 {
    color: var(--bad);
}

.staff-salary-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.staff-salary-summary-row span {
    color: var(--muted);
}

.staff-salary-summary-total {
    border-bottom: none;
    font-weight: 700;
}

.staff-salary-summary-total span {
    color: var(--ink);
}

.staff-salary-thp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-main);
}

.staff-salary-thp-bar span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.staff-salary-thp-bar strong {
    font-size: 18px;
}

.staff-salary-thp-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.staff-salary-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.staff-salary-secondary-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.staff-salary-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 14px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.staff-salary-primary-button [data-form-submit-label],
.staff-salary-primary-button .form-submit-spinner {
    color: var(--accent-ink);
}

.staff-salary-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--bad);
    cursor: pointer;
}

.staff-salary-delete-button:hover {
    border-color: var(--bad);
    background: rgba(255, 113, 121, 0.12);
}

@media (max-width: 960px) {
    .staff-salary-card-header {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .staff-salary-summary-grid {
        grid-template-columns: 1fr;
    }
}

html[data-theme="light"] .staff-salary-avatar {
    background: var(--accent-soft);
    color: var(--accent);
}

html[data-theme="light"] .staff-salary-thp-bar {
    background: #f7fafc;
}


/* Pinjaman Karyawan (Employee Loan) */
.employee-loan-settings-panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.employee-loan-status-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 18px;
    display: grid;
    gap: 16px;
}

.employee-loan-status-header h2 {
    margin: 8px 0 4px;
    font-family: "Space Grotesk", sans-serif;
}

.employee-loan-status-header p {
    color: var(--muted);
    margin: 0;
}

.employee-loan-progress {
    display: grid;
    gap: 8px;
}

.employee-loan-progress-track {
    height: 10px;
    border-radius: 999px;
    background: #2b3136;
    border: 1px solid var(--line);
    overflow: hidden;
}

.employee-loan-progress-fill {
    height: 100%;
    background: var(--ok);
    border-radius: 999px;
}

.employee-loan-progress span {
    color: var(--muted);
    font-size: 13px;
}

.employee-loan-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.employee-loan-metrics > div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

.employee-loan-metrics span {
    color: var(--muted);
    font-size: 12px;
}

.employee-loan-metrics strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
}

html[data-theme="light"] .employee-loan-progress-track {
    background: #eef2f5;
}


.employee-loan-simulation {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(90, 164, 255, 0.06);
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.employee-loan-simulation h3 {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.employee-loan-simulation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.employee-loan-simulation-summary span {
    color: var(--muted);
    font-size: 12px;
    display: block;
}

.employee-loan-simulation-summary strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 15px;
}

.employee-loan-simulation-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    color: var(--ink);
    font-size: 13px;
    max-height: 160px;
    overflow: auto;
}

/* Peringatan (Staff Warning) */
.menu-item.sidebar-warning-link {
    margin: -8px 0 20px;
    border-color: #ffb199;
    color: #4a1c10;
    background: #ff8a65;
    box-shadow: 0 10px 20px rgba(255, 138, 101, 0.22);
}

.menu-item.sidebar-warning-link > i { color: #4a1c10; }
.menu-item.sidebar-warning-link:hover { border-color: #ffd0c0; color: #331209; background: #ff9d7a; }
.menu-item.sidebar-warning-link.active { border-color: #ffd0c0; color: #331209; background: #ff9d7a; }
.menu-item.sidebar-warning-link.active > i { color: #331209; }

.staff-warning-overview {
    margin-bottom: 20px;
}

.staff-warning-overview-table tr.is-active-row {
    background: rgba(255, 138, 101, 0.1);
}

.staff-warning-mini-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.staff-warning-mini-bar-track {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #303940;
    overflow: hidden;
}

.staff-warning-mini-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 200ms ease;
}

.staff-warning-mini-bar span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.table-view-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #5aa4ff;
    border-radius: 999px;
    color: #9ec9ff;
    background: #203a5b;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.table-view-button:hover {
    border-color: #9ec9ff;
    color: #fff;
    background: #2e5685;
}

.staff-warning-score-card {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-panel);
    box-shadow: var(--shadow);
}

.staff-warning-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.staff-warning-score-header h2 {
    margin: 4px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
}

.staff-warning-roadmap {
    display: grid;
    gap: 10px;
}

.staff-warning-roadmap-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.staff-warning-roadmap-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.staff-warning-roadmap-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.staff-warning-roadmap-current-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.staff-warning-roadmap-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #303940;
    margin: 6px 4px 0;
}

.staff-warning-roadmap-segment {
    position: absolute;
    top: 0;
    height: 100%;
    transition: opacity 200ms ease;
}

.staff-warning-roadmap-segment:first-child { border-radius: 999px 0 0 999px; }
.staff-warning-roadmap-segment:last-child { border-radius: 0 999px 999px 0; }

.staff-warning-roadmap-pointer {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--bg-panel);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
    transition: left 200ms ease;
}

.staff-warning-roadmap-scale {
    position: relative;
    height: 14px;
    margin: 0 4px;
}

.staff-warning-roadmap-scale span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.staff-warning-roadmap-scale span:first-child { transform: translateX(0); }
.staff-warning-roadmap-scale span:last-child { transform: translateX(-100%); }

.staff-warning-roadmap-tiers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.staff-warning-roadmap-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-panel);
    text-align: center;
    opacity: 0.6;
    transition: opacity 150ms ease, transform 150ms ease;
}

.staff-warning-roadmap-tier strong {
    font-size: 12px;
}

.staff-warning-roadmap-tier span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.staff-warning-roadmap-tier-icon {
    font-size: 20px;
    line-height: 1;
}

.staff-warning-roadmap-tier.is-current {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-width: 2px;
}

.staff-warning-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.staff-warning-mini-bar-fill.level-good,
.staff-warning-level-badge.level-good,
.staff-warning-roadmap-tier.level-good,
.staff-warning-roadmap-current-dot.level-good,
.staff-warning-roadmap-pointer.level-good {
    border-color: #4ed18c;
    color: #8fe3b3;
    background: #173f35;
}
.staff-warning-mini-bar-fill.level-good,
.staff-warning-roadmap-segment.level-good,
.staff-warning-roadmap-current-dot.level-good,
.staff-warning-roadmap-pointer.level-good { background: #4ed18c; border: none; }
.staff-warning-roadmap-tier.is-current.level-good { border-color: #4ed18c; }

.staff-warning-mini-bar-fill.level-watch,
.staff-warning-level-badge.level-watch,
.staff-warning-roadmap-tier.level-watch,
.staff-warning-roadmap-current-dot.level-watch,
.staff-warning-roadmap-pointer.level-watch {
    border-color: #ffc15e;
    color: #ffdca0;
    background: #4a3a17;
}
.staff-warning-mini-bar-fill.level-watch,
.staff-warning-roadmap-segment.level-watch,
.staff-warning-roadmap-current-dot.level-watch,
.staff-warning-roadmap-pointer.level-watch { background: #ffc15e; border: none; }
.staff-warning-roadmap-tier.is-current.level-watch { border-color: #ffc15e; }

.staff-warning-mini-bar-fill.level-sp1,
.staff-warning-level-badge.level-sp1,
.staff-warning-roadmap-tier.level-sp1,
.staff-warning-roadmap-current-dot.level-sp1,
.staff-warning-roadmap-pointer.level-sp1 {
    border-color: #ff9d4d;
    color: #ffc79a;
    background: #4a2e14;
}
.staff-warning-mini-bar-fill.level-sp1,
.staff-warning-roadmap-segment.level-sp1,
.staff-warning-roadmap-current-dot.level-sp1,
.staff-warning-roadmap-pointer.level-sp1 { background: #ff9d4d; border: none; }
.staff-warning-roadmap-tier.is-current.level-sp1 { border-color: #ff9d4d; }

.staff-warning-mini-bar-fill.level-sp2,
.staff-warning-level-badge.level-sp2,
.staff-warning-roadmap-tier.level-sp2,
.staff-warning-roadmap-current-dot.level-sp2,
.staff-warning-roadmap-pointer.level-sp2 {
    border-color: #ff6f5c;
    color: #ff9d90;
    background: #4a2320;
}
.staff-warning-mini-bar-fill.level-sp2,
.staff-warning-roadmap-segment.level-sp2,
.staff-warning-roadmap-current-dot.level-sp2,
.staff-warning-roadmap-pointer.level-sp2 { background: #ff6f5c; border: none; }
.staff-warning-roadmap-tier.is-current.level-sp2 { border-color: #ff6f5c; }

.staff-warning-mini-bar-fill.level-sp3,
.staff-warning-level-badge.level-sp3,
.staff-warning-roadmap-tier.level-sp3,
.staff-warning-roadmap-current-dot.level-sp3,
.staff-warning-roadmap-pointer.level-sp3 {
    border-color: #6b7178;
    color: #d8dde1;
    background: #23272b;
}
.staff-warning-mini-bar-fill.level-sp3,
.staff-warning-roadmap-segment.level-sp3,
.staff-warning-roadmap-current-dot.level-sp3,
.staff-warning-roadmap-pointer.level-sp3 { background: #6b7178; border: none; }
.staff-warning-roadmap-tier.is-current.level-sp3 { border-color: #6b7178; }

.staff-warning-mini-bar-fill.level-phk,
.staff-warning-level-badge.level-phk,
.staff-warning-roadmap-tier.level-phk,
.staff-warning-roadmap-current-dot.level-phk,
.staff-warning-roadmap-pointer.level-phk {
    border-color: #e5484d;
    color: #ffb3b6;
    background: #4a1a1c;
}
.staff-warning-mini-bar-fill.level-phk,
.staff-warning-roadmap-segment.level-phk,
.staff-warning-roadmap-current-dot.level-phk,
.staff-warning-roadmap-pointer.level-phk { background: #e5484d; border: none; }
.staff-warning-roadmap-tier.is-current.level-phk { border-color: #e5484d; }

.staff-warning-score-cell {
    color: #ff9d90;
    font-weight: 800;
}

html[data-theme="light"] .staff-warning-roadmap-track,
html[data-theme="light"] .staff-warning-mini-bar-track {
    background: #e4e9ed;
}

html[data-theme="light"] .staff-warning-roadmap-tier {
    border-color: var(--line);
    color: var(--muted);
}

html[data-theme="light"] .staff-warning-overview-table tr.is-active-row {
    background: rgba(255, 138, 101, 0.14);
}

html[data-theme="light"] .staff-warning-score-cell {
    color: #cf543d;
}

html[data-theme="light"] .staff-warning-level-badge.level-good,
html[data-theme="light"] .staff-warning-roadmap-tier.level-good { border-color: #5cb986; color: #21764f; background: #eaf8f0; }
html[data-theme="light"] .staff-warning-level-badge.level-watch,
html[data-theme="light"] .staff-warning-roadmap-tier.level-watch { border-color: #bd8e21; color: #7d5a00; background: #fff4cf; }
html[data-theme="light"] .staff-warning-level-badge.level-sp1,
html[data-theme="light"] .staff-warning-roadmap-tier.level-sp1 { border-color: #e0913f; color: #9d5413; background: #fff0df; }
html[data-theme="light"] .staff-warning-level-badge.level-sp2,
html[data-theme="light"] .staff-warning-roadmap-tier.level-sp2 { border-color: #df7680; color: #aa3440; background: #fff0f2; }
html[data-theme="light"] .staff-warning-level-badge.level-sp3,
html[data-theme="light"] .staff-warning-roadmap-tier.level-sp3 { border-color: #6b7178; color: #383c40; background: #eef0f2; }
html[data-theme="light"] .staff-warning-level-badge.level-phk,
html[data-theme="light"] .staff-warning-roadmap-tier.level-phk { border-color: #d8464b; color: #9a1d21; background: #ffe3e4; }

@media (max-width: 720px) {
    .staff-warning-roadmap-tiers {
        grid-template-columns: repeat(3, 1fr);
    }

    .staff-warning-roadmap-scale span:nth-child(even) {
        display: none;
    }
}