html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* The app shell fills the window exactly; any browser margin would add a second scrollbar. */
    margin: 0;
    padding: 0;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---- Scrollbars: slim, rounded, matching the F9S palette ---- */

/* Chrome, Edge, Brave */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c3ccd1;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #098993;
        background-clip: padding-box;
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #2c4356;
    background-clip: padding-box;
}

    .dark-mode ::-webkit-scrollbar-thumb:hover {
        background: #14a3ad;
        background-clip: padding-box;
    }

/* Firefox (doesn't support the rules above) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c3ccd1 transparent;
    }

    .dark-mode,
    .dark-mode * {
        scrollbar-color: #2c4356 transparent;
    }
}

/* ---- Theme (html gets .dark-mode from the server / theme toggle) ---- */
body {
    background: #f4f6f7;
}

html.dark-mode,
html.dark-mode body {
    background: #0a1420;
}

.theme-icon-sun,
.theme-icon-moon {
    display: flex;
}

.theme-icon-sun,
.dark-mode .theme-icon-moon {
    display: none;
}

.dark-mode .theme-icon-sun {
    display: flex;
}

/* ---- Page loader ---- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

    .page-loader.visible {
        opacity: 1;
    }

.page-loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 40%;
    background: #098993;
    border-radius: 0 3px 3px 0;
    animation: page-loader-slide 1.1s ease-in-out infinite;
}

.page-loader-card,
.reconnect-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #0c1a27;
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}

.page-loader-card {
    position: absolute;
    right: 24px;
    bottom: 24px;
}

.page-loader-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #14a3ad;
    animation: page-loader-spin 0.8s linear infinite;
}

@keyframes page-loader-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@keyframes page-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader-bar,
    .page-loader-spinner {
        animation-duration: 3s;
    }
}

/* ---- Reconnecting overlay (Blazor adds components-reconnect-* classes) ---- */
.reconnect-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1001;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 32px;
    background: rgba(12, 26, 39, 0.25);
}

    .reconnect-overlay.components-reconnect-show,
    .reconnect-overlay.components-reconnect-failed,
    .reconnect-overlay.components-reconnect-rejected {
        display: flex;
    }

.reconnect-show-state,
.reconnect-failed-state {
    display: none;
    align-items: center;
    gap: 10px;
}

.components-reconnect-show .reconnect-show-state,
.components-reconnect-failed .reconnect-failed-state,
.components-reconnect-rejected .reconnect-failed-state {
    display: flex;
}

.reconnect-btn {
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    background: #098993;
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* ---- Project checking dialogs (Components/Checking) ---- */
.check-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    background: rgba(12, 26, 39, 0.55);
}

.check-modal {
    width: 100%;
    max-width: 680px;
    border-radius: 12px;
    background: #ffffff;
    color: #0c1a27;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.45);
    font-family: 'Montserrat', sans-serif;
}

.check-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 12px 12px 0 0;
    background: #098993;
    color: #ffffff;
}

    .check-modal-header.review {
        background: #6e56cf;
    }

    .check-modal-header h2 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 17px;
        font-weight: 700;
    }

.check-modal-close {
    display: flex;
    padding: 6px;
    border: none;
    background: none;
    color: #ffffff;
    cursor: pointer;
}

.check-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 6px;
}

.check-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
}

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

@media (max-width: 600px) {
    .check-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.check-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.check-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #3d4f5c;
}

    .check-label .req {
        color: #b3413a;
    }

.check-optional {
    font-weight: 500;
    color: #7a8892;
}

.check-input,
.check-readonly {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #d3dade;
    background: #f6f8f9;
    color: #0c1a27;
    font-family: inherit;
    font-size: 14px;
}

.check-readonly {
    background: #eef2f3;
}

textarea.check-input {
    resize: vertical;
}

.check-input:focus {
    outline: none;
    border-color: #098993;
    box-shadow: 0 0 0 3px rgba(9, 137, 147, 0.2);
}

.check-hint {
    font-size: 12.5px;
    color: #606060;
}

.check-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #c9bdf2;
    background: #f3f0fd;
    color: #4b3a99;
    font-size: 12.5px;
    line-height: 1.5;
}

    .check-callout svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

.check-error {
    padding: 10px 12px;
    border-radius: 6px;
    background: #fbe4e1;
    color: #8f2f28;
    font-size: 13px;
}

.check-submission {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e5e9eb;
    background: #f6f8f9;
    font-size: 12.5px;
    color: #606060;
}

.check-submission-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

    .check-submission-top strong {
        color: #0c1a27;
    }

.check-submission-note {
    color: #3d4f5c;
}

.check-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #098993;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .check-pdf-link:hover {
        text-decoration: underline;
    }

.check-result-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.check-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #d3dade;
    background: #ffffff;
    color: #0c1a27;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .check-result > span:last-child {
        display: flex;
        flex-direction: column;
    }

.check-result-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-result.approve .check-result-icon {
    background: #e3f4ea;
    color: #1d6b3f;
}

.check-result.return .check-result-icon {
    background: #fbe4e1;
    color: #b3413a;
}

.check-result.approve.selected {
    border: 2px solid #1d6b3f;
    background: #f1faf4;
}

.check-result.return.selected {
    border: 2px solid #b3413a;
    background: #fdf3f2;
}

.check-result-title {
    font-size: 14px;
    font-weight: 700;
}

.check-result-sub {
    font-size: 11.5px;
    color: #606060;
}

.check-btn-cancel,
.check-btn-primary,
.check-btn-danger {
    padding: 11px 20px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.check-btn-cancel {
    border: 1px solid #dde3e5;
    background: transparent;
    color: #0c1a27;
    font-weight: 600;
}

.check-btn-primary {
    border: none;
    background: #098993;
    color: #ffffff;
}

    .check-btn-primary:hover:not(:disabled) {
        background: #076e76;
    }

.check-btn-danger {
    border: none;
    background: #c4473d;
    color: #ffffff;
}

    .check-btn-danger:hover:not(:disabled) {
        background: #a93a31;
    }

.check-btn-cancel:disabled,
.check-btn-primary:disabled,
.check-btn-danger:disabled {
    opacity: 0.65;
    cursor: default;
}

.dark-mode .check-modal-overlay {
    background: rgba(4, 10, 16, 0.74);
}

.dark-mode .check-modal {
    background: #131f2e;
    border: 1px solid #223244;
    color: #e8edf0;
}

.dark-mode .check-label {
    color: #9fb3c1;
}

.dark-mode .check-optional,
.dark-mode .check-hint,
.dark-mode .check-submission,
.dark-mode .check-result-sub {
    color: #8b98a3;
}

.dark-mode .check-input {
    background: #0f1c29;
    border-color: #2c4356;
    color: #e8edf0;
}

.dark-mode .check-readonly {
    background: #16232f;
    border-color: #2c4356;
    color: #c6d3dc;
}

.dark-mode .check-input:focus {
    border-color: #14a3ad;
}

.dark-mode .check-callout {
    border-color: #4a3d80;
    background: #1e1a33;
    color: #d6caff;
}

.dark-mode .check-error {
    background: #4d2222;
    color: #ffbdb5;
}

.dark-mode .check-submission {
    background: #0f1c29;
    border-color: #223244;
}

    .dark-mode .check-submission-top strong {
        color: #e8edf0;
    }

.dark-mode .check-submission-note {
    color: #c6d3dc;
}

.dark-mode .check-pdf-link {
    color: #5fd3da;
}

.dark-mode .check-result {
    background: #0f1c29;
    border-color: #2c4356;
    color: #e8edf0;
}

.dark-mode .check-result.approve .check-result-icon {
    background: #143a25;
    color: #7fdca0;
}

.dark-mode .check-result.return .check-result-icon {
    background: #4d2222;
    color: #ff9d92;
}

.dark-mode .check-result.approve.selected {
    border-color: #7fdca0;
    background: #12261f;
}

.dark-mode .check-result.return.selected {
    border-color: #ff9d92;
    background: #2a1618;
}

.dark-mode .check-btn-cancel {
    border-color: #2c4356;
    color: #e8edf0;
}

/* ---- Two-level checking (Engineer > Checker > Manager) ---- */
.check-modal-header.checker {
    background: #2a5ea8;
}

.check-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e5e9eb;
    background: #f6f8f9;
}

.check-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa7b0;
    white-space: nowrap;
}

    .check-step::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #c9d3d8;
    }

    .check-step.done {
        color: #0c1a27;
    }

        .check-step.done::before {
            background: #2f9e62;
        }

    .check-step.active {
        color: #2a5ea8;
    }

        .check-step.active::before {
            background: #4a86d6;
        }

    .check-step.active.manager {
        color: #5a45b8;
    }

        .check-step.active.manager::before {
            background: #6e56cf;
        }

.check-step-line {
    flex-grow: 1;
    height: 2px;
    background: #dde3e5;
}

    .check-step-line.done {
        background: #2f9e62;
    }

.check-submission-note.returned {
    padding: 8px 10px;
    border-radius: 6px;
    background: #fdf6e4;
    color: #6b4c0c;
}

.check-result.send .check-result-icon {
    background: #e2ecfb;
    color: #2a5ea8;
}

.check-result.send.selected {
    border: 2px solid #2a5ea8;
    background: #f2f7fe;
}

.check-result.return-up .check-result-icon {
    background: #fbf0d6;
    color: #7a5510;
}

.check-result.return-up.selected {
    border: 2px solid #a0700f;
    background: #fdf8ec;
}

.check-btn-send,
.check-btn-warn {
    padding: 11px 20px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.check-btn-send {
    background: #2a5ea8;
}

.check-btn-warn {
    background: #a0700f;
}

    .check-btn-send:disabled,
    .check-btn-warn:disabled {
        opacity: 0.65;
        cursor: default;
    }

.dark-mode .check-steps {
    background: #0f1c29;
    border-color: #223244;
}

.dark-mode .check-step {
    color: #6c7a86;
}

    .dark-mode .check-step::before {
        background: #2c4356;
    }

    .dark-mode .check-step.done {
        color: #e8edf0;
    }

        .dark-mode .check-step.done::before {
            background: #6fd39b;
        }

    .dark-mode .check-step.active {
        color: #8db8f2;
    }

        .dark-mode .check-step.active::before {
            background: #8db8f2;
        }

    .dark-mode .check-step.active.manager {
        color: #c4b0ff;
    }

        .dark-mode .check-step.active.manager::before {
            background: #c4b0ff;
        }

.dark-mode .check-step-line {
    background: #2c4356;
}

    .dark-mode .check-step-line.done {
        background: #6fd39b;
    }

.dark-mode .check-submission-note.returned {
    background: #2a2412;
    color: #f0c96a;
}

.dark-mode .check-result.send .check-result-icon {
    background: #1c3560;
    color: #8db8f2;
}

.dark-mode .check-result.send.selected {
    border-color: #8db8f2;
    background: #13233a;
}

.dark-mode .check-result.return-up .check-result-icon {
    background: #4a3a14;
    color: #f0c96a;
}

.dark-mode .check-result.return-up.selected {
    border-color: #f0c96a;
    background: #2a2412;
}

/* ---- Overtime and leave requests (Requests and Approvals pages) ---- */

.nav-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #f0c96a;
    color: #241a00;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 8px;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .rq-btn:disabled { opacity: 0.7; cursor: default; }
.rq-btn-overtime { background: #6b4fd8; }
    .rq-btn-overtime:hover:not(:disabled) { background: #5a41c4; }
.rq-btn-leave { background: #098993; }
    .rq-btn-leave:hover:not(:disabled) { background: #076e76; }
.rq-btn-reject { background: #b8443a; }
    .rq-btn-reject:hover:not(:disabled) { background: #9b3a32; }
.rq-btn-block { width: 100%; }

.rq-btn-cancel {
    background: none;
    border: 1px solid #dde3e5;
    color: #0c1a27;
    border-radius: 8px;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.rq-message {
    margin-bottom: 16px;
    padding: 11px 16px;
    border-radius: 8px;
    background: #e3f4ea;
    color: #1d6b3f;
    font-size: 14px;
    font-weight: 600;
}

    .rq-message.error { background: #fbeceb; color: #b3413a; }

.rq-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.rq-tile {
    background: #ffffff;
    border: 1px solid #e5e9eb;
    border-radius: 12px;
    padding: 14px 18px;
    min-width: 0;
}

.rq-tile-label {
    font-size: 12px;
    font-weight: 700;
    color: #606060;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rq-tile-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
    color: #0c1a27;
    font-variant-numeric: tabular-nums;
}

.rq-tile-unit { font-size: 14px; font-weight: 600; }
.rq-tile-value.vacation { color: #087a83; }
.rq-tile-value.sick { color: #1d7a45; }
.rq-tile-value.pending { color: #a0701a; }
.rq-tile-value.overtime { color: #5a45b8; }

.rq-tile-sub {
    font-size: 12px;
    color: #606060;
    margin-top: 2px;
    line-height: 1.45;
}

.rq-bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
    background: #14a3ad;
}

    .rq-bar.sick { background: #3bb36b; }
.rq-bar-used { background: #c9d2d7; }
.rq-bar-pending { background: #f0c96a; }

.rq-card {
    background: #ffffff;
    border: 1px solid #e5e9eb;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.rq-card-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rq-card-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #0c1a27;
}

.rq-card-toolbar .rq-card-title { margin: 0; }

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

.rq-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #dde3e5;
    background: transparent;
    color: #3d4f5c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .rq-tab.active { background: #098993; border-color: #098993; color: #ffffff; }

.rq-tab-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f0c96a;
    color: #241a00;
    font-size: 11.5px;
    font-weight: 700;
}

.rq-table-scroll { overflow-x: auto; }

.rq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .rq-table th {
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #606060;
        padding: 8px 12px;
        border-bottom: 1px solid #e5e9eb;
        white-space: nowrap;
    }

    .rq-table td {
        padding: 11px 12px;
        border-bottom: 1px solid #f0f2f3;
        color: #0c1a27;
        vertical-align: middle;
    }

.rq-th-sub {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin-left: 4px;
}

.rq-strong { font-weight: 700; }
.rq-nowrap { white-space: nowrap; }
.rq-muted { color: #606060; font-size: 12.5px; }
.rq-small { font-size: 12px; }
.rq-grow { flex-grow: 1; min-width: 0; }
.rq-reason { color: #4a5a66; font-size: 12.5px; max-width: 360px; }
.rq-big { font-size: 15px; }
.rq-big.vacation { color: #087a83; }
.rq-big.sick { color: #1d7a45; }

.rq-meta { font-size: 12px; margin-top: 3px; color: #606060; }
    .rq-meta.warn { color: #a0701a; }
    .rq-meta.balance { color: #087a83; }

.rq-note { font-size: 12.5px; margin-top: 4px; color: #4a5a66; }
    .rq-note.rejected { color: #b3413a; }

.rq-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

    .rq-pill.overtime { background: #ece8fb; color: #5a45b8; }
    .rq-pill.leave { background: #dff2f3; color: #066b73; }
    .rq-pill.pending { background: #fbf0d6; color: #7a5510; }
    .rq-pill.approved { background: #e3f4ea; color: #1d6b3f; }
    .rq-pill.rejected { background: #fbe4e1; color: #a5372f; }
    .rq-pill.cancelled { background: #eceff1; color: #4a5a66; }

.rq-actions { text-align: right; white-space: nowrap; }

.rq-action-group { display: inline-flex; gap: 8px; }

.rq-link-btn {
    background: none;
    border: none;
    padding: 4px;
    color: #098993;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.rq-approve-btn,
.rq-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.rq-approve-btn { border: none; background: #1f8a4c; color: #ffffff; }
    .rq-approve-btn:hover:not(:disabled) { background: #19733f; }
.rq-reject-btn { border: 1px solid #e7b7b1; background: transparent; color: #b3413a; }
    .rq-reject-btn:hover:not(:disabled) { background: #fbeceb; }

.rq-person { display: inline-flex; align-items: center; gap: 10px; }

.rq-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #098993;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rq-empty { padding: 24px 12px; text-align: center; color: #606060; font-size: 14px; }

.rq-off-list { display: flex; flex-wrap: wrap; gap: 10px; }

.rq-off {
    padding: 8px 12px;
    border-radius: 8px;
    background: #f3f6f7;
    font-size: 13px;
    color: #0c1a27;
}

.rq-off-pending { color: #a0701a; }

.rq-balances-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

    .rq-balances-layout .rq-card { margin-bottom: 0; }

.rq-policy { display: flex; flex-direction: column; gap: 14px; }
    .rq-policy .rq-card-title { margin: 0; }

@media (max-width: 1000px) {
    .rq-balances-layout { grid-template-columns: 1fr; }
}

/* Dialogs */
.rq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 26, 39, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    z-index: 100;
}

.rq-modal {
    width: 100%;
    max-width: 620px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5);
    color: #0c1a27;
}

.rq-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #098993;
    border-radius: 12px 12px 0 0;
    color: #ffffff;
}

    .rq-modal-header.overtime { background: #5a41c4; }
    .rq-modal-header.reject { background: #9b3a32; }

    .rq-modal-header h2 { margin: 0; font-size: 18px; font-weight: 700; }

.rq-close {
    background: none;
    border: none;
    color: #ffffff;
    display: flex;
    padding: 4px;
    cursor: pointer;
}

.rq-modal-body {
    padding: 20px 24px 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rq-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
}

.rq-row { display: flex; flex-wrap: wrap; gap: 12px; }

.rq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .rq-field.grow { flex: 1 1 160px; }

    .rq-field label,
    .rq-label {
        font-size: 12.5px;
        font-weight: 600;
        color: #3d4f5c;
    }

.rq-optional { font-weight: 400; opacity: 0.75; }
.rq-req { color: #b3413a; }

.rq-input {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #d3dade;
    background: #f6f8f9;
    font-family: inherit;
    font-size: 14px;
    color: #0c1a27;
    box-sizing: border-box;
    width: 100%;
}

    .rq-input:focus {
        outline: none;
        border-color: #098993;
        box-shadow: 0 0 0 3px rgba(9,137,147,0.2);
    }

    .rq-input:disabled { opacity: 0.75; }

textarea.rq-input { resize: vertical; }

.rq-seg { display: flex; gap: 10px; }

.rq-seg-btn {
    flex: 1;
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #d3dade;
    background: #f6f8f9;
    color: #0c1a27;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .rq-seg-btn strong { font-size: 14px; }
    .rq-seg-btn span { font-size: 12px; color: #606060; }
    .rq-seg-btn.active { border-color: #098993; background: #e1f2f3; }

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

.rq-chip {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #d3dade;
    background: #f6f8f9;
    color: #3d4f5c;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

    .rq-chip.active { border-color: #098993; background: #098993; color: #ffffff; }

.rq-total { font-size: 13px; color: #606060; }
    .rq-total strong { font-size: 16px; color: #0c1a27; }
    .rq-total strong.overtime { color: #5a45b8; }

.rq-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f6f8f9;
    border: 1px solid #e5e9eb;
    font-size: 13px;
    color: #606060;
}

    .rq-summary strong { font-size: 15px; color: #0c1a27; }
    .rq-summary strong.vacation { color: #087a83; }
    .rq-summary strong.sick { color: #1d7a45; }

.rq-callout {
    padding: 10px 14px;
    border-radius: 8px;
    background: #e1f2f3;
    border: 1px solid #b5dfe2;
    font-size: 13px;
    color: #066b73;
    line-height: 1.5;
}

.rq-warn {
    padding: 10px 14px;
    border-radius: 8px;
    background: #fbf0d6;
    color: #7a5510;
    font-size: 13px;
}

.rq-hint { font-size: 12px; color: #5b6b76; line-height: 1.5; }

.rq-error {
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 6px;
    background: #fbeceb;
    color: #b3413a;
}

.rq-summary-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f6f8f9;
    border: 1px solid #e5e9eb;
}

.rq-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rq-stat {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f6f7;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .rq-stat span { font-size: 11px; font-weight: 700; color: #606060; text-transform: uppercase; }
    .rq-stat strong { font-size: 18px; }
    .rq-stat strong.overtime { color: #5a45b8; }

.rq-divider { height: 1px; background: #e5e9eb; }

.rq-history { display: flex; flex-direction: column; gap: 6px; }

.rq-history-row {
    display: grid;
    grid-template-columns: 110px 110px minmax(0, 1fr);
    gap: 10px;
    font-size: 13px;
}

/* Dark mode */
.dark-mode .rq-btn-cancel { border-color: #2c4356; color: #e8edf0; }
.dark-mode .rq-message { background: #16452e; color: #9fe5bb; }
.dark-mode .rq-message.error { background: #4d2222; color: #ffbdb5; }

.dark-mode .rq-tile,
.dark-mode .rq-card {
    background: #131f2e;
    border-color: #223244;
}

.dark-mode .rq-tile-label,
.dark-mode .rq-tile-sub,
.dark-mode .rq-muted,
.dark-mode .rq-empty,
.dark-mode .rq-meta,
.dark-mode .rq-table th,
.dark-mode .rq-total,
.dark-mode .rq-summary,
.dark-mode .rq-hint,
.dark-mode .rq-seg-btn span,
.dark-mode .rq-stat span {
    color: #8b98a3;
}

.dark-mode .rq-tile-value,
.dark-mode .rq-card-title,
.dark-mode .rq-table td,
.dark-mode .rq-total strong,
.dark-mode .rq-summary strong,
.dark-mode .rq-off {
    color: #e8edf0;
}

.dark-mode .rq-tile-value.vacation,
.dark-mode .rq-big.vacation,
.dark-mode .rq-summary strong.vacation,
.dark-mode .rq-meta.balance { color: #5fd3da; }
.dark-mode .rq-tile-value.sick,
.dark-mode .rq-big.sick,
.dark-mode .rq-summary strong.sick { color: #7fdca0; }
.dark-mode .rq-tile-value.pending,
.dark-mode .rq-meta.warn,
.dark-mode .rq-off-pending { color: #f0c96a; }
.dark-mode .rq-tile-value.overtime,
.dark-mode .rq-total strong.overtime,
.dark-mode .rq-stat strong.overtime { color: #c4b0ff; }

.dark-mode .rq-bar-used { background: #3a4b5a; }

.dark-mode .rq-tab { border-color: #2c4356; color: #c6d3dc; }
.dark-mode .rq-tab.active { background: #098993; border-color: #098993; color: #ffffff; }

.dark-mode .rq-table th { border-bottom-color: #223244; }
.dark-mode .rq-table td { border-bottom-color: #1c2c3d; }
.dark-mode .rq-reason,
.dark-mode .rq-note { color: #9fb3c1; }
.dark-mode .rq-note.rejected { color: #ff9d92; }

.dark-mode .rq-pill.overtime { background: #33285a; color: #c4b0ff; }
.dark-mode .rq-pill.leave { background: #0c4a50; color: #5fd0d8; }
.dark-mode .rq-pill.pending { background: #4a3a14; color: #f0c96a; }
.dark-mode .rq-pill.approved { background: #16452e; color: #6fd39b; }
.dark-mode .rq-pill.rejected { background: #4d2222; color: #ff9d92; }
.dark-mode .rq-pill.cancelled { background: #2a3a47; color: #c6d3dc; }

.dark-mode .rq-link-btn { color: #5fd3da; }
.dark-mode .rq-reject-btn { border-color: #5a2a2a; color: #ff9d92; }
.dark-mode .rq-reject-btn:hover:not(:disabled) { background: #2a1818; }
.dark-mode .rq-avatar { background: #1b3b4a; color: #9fe3e8; }
.dark-mode .rq-off { background: #16232f; }

.dark-mode .rq-overlay { background: rgba(4, 10, 16, 0.74); }
.dark-mode .rq-modal { background: #131f2e; border: 1px solid #223244; color: #e8edf0; }
.dark-mode .rq-field label,
.dark-mode .rq-label { color: #9fb3c1; }
.dark-mode .rq-req { color: #ff9d92; }

.dark-mode .rq-input,
.dark-mode .rq-seg-btn,
.dark-mode .rq-chip,
.dark-mode .rq-summary,
.dark-mode .rq-summary-card {
    background: #0f1c29;
    border-color: #2c4356;
    color: #e8edf0;
}

    .dark-mode .rq-input::placeholder { color: #6c7a86; }
.dark-mode select.rq-input option { background: #0f1c29; color: #e8edf0; }
.dark-mode .rq-input:focus { border-color: #14a3ad; }
.dark-mode .rq-input[type="date"],
.dark-mode .rq-input[type="time"] { color-scheme: dark; }

.dark-mode .rq-seg-btn.active { border-color: #14a3ad; background: rgba(9,137,147,0.22); }
.dark-mode .rq-chip { color: #c6d3dc; }
.dark-mode .rq-chip.active { border-color: #14a3ad; background: rgba(9,137,147,0.35); color: #ffffff; }

.dark-mode .rq-callout { background: rgba(9,137,147,0.14); border-color: rgba(20,163,173,0.4); color: #9fd6da; }
.dark-mode .rq-warn { background: #4a3a14; color: #f0c96a; }
.dark-mode .rq-error { background: #4d2222; color: #ffbdb5; }
.dark-mode .rq-stat { background: #16232f; }
.dark-mode .rq-divider { background: #223244; }

.rq-unfiled {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px 10px 16px;
    border-radius: 10px;
    background: #ece8fb;
    color: #3d2f86;
    font-size: 14px;
}

.rq-btn-sm { padding: 8px 14px; font-size: 13px; }

.dark-mode .rq-unfiled { background: #241d42; color: #d9ceff; }

/* ---- Task deadlines: chips ---- */
.due-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: #eceff1;
    color: #4a5a66;
}

    .due-chip.due-overdue { background: #fbe4e1; color: #a5372f; }
    .due-chip.due-today { background: #fde7d3; color: #9a4a0b; }
    .due-chip.due-tomorrow { background: #fbf0d6; color: #7a5510; }
    .due-chip.due-soon { background: #e1f2f3; color: #066b73; }
    .due-chip.due-done { background: #e3f4ea; color: #1d6b3f; }

.dark-mode .due-chip { background: #1b2b3c; color: #c6d3dc; }
.dark-mode .due-chip.due-overdue { background: #4d2222; color: #ff9d92; }
.dark-mode .due-chip.due-today { background: #5a3214; color: #ffb36b; }
.dark-mode .due-chip.due-tomorrow { background: #4a3a14; color: #f0c96a; }
.dark-mode .due-chip.due-soon { background: #0c4a50; color: #5fd0d8; }
.dark-mode .due-chip.due-done { background: #16452e; color: #6fd39b; }

/* The status card on the dashboard is dark in both themes. */
.current-deadline { font-weight: 700; }
.due-text-overdue { color: #ff9d92; }
.due-text-today { color: #ffb36b; }
.due-text-tomorrow { color: #f0c96a; }

/* My tasks on the dashboard's project cards */
.my-tasks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.my-tasks-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a8892;
}

.my-task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.my-task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-tasks-more { font-size: 12px; color: #7a8892; }
.dark-mode .my-tasks-label,
.dark-mode .my-tasks-more { color: #8b98a3; }

/* Removable chips in dialogs */
.rq-chip-removable { display: inline-flex; align-items: center; gap: 6px; cursor: default; }

.rq-chip-x {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
}

/* ---- Notification bell ---- */
.notif-wrapper { position: relative; }

.notif-bell {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dde3e5;
    background: #ffffff;
    color: #0c1a27;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .notif-bell:hover,
    .notif-bell.open { background: #f4f6f7; border-color: #098993; }

.notif-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #e5534b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

.notif-backdrop { position: fixed; inset: 0; z-index: 90; }

.notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e5e9eb;
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(12,26,39,0.35);
    z-index: 95;
    text-align: left;
}

.notif-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #0c1a27;
}

.notif-mark-all {
    background: none;
    border: none;
    padding: 0;
    color: #098993;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.notif-empty { padding: 4px 16px 18px; font-size: 13px; color: #606060; }

.notif-list { display: flex; flex-direction: column; }

.notif-item {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-top: 1px solid #eef1f2;
    background: transparent;
    color: #0c1a27;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .notif-item:hover { background: #f6f8f9; }
    .notif-item.unread { background: #eef8f8; }

.notif-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex-shrink: 0; background: transparent; }
.notif-item.unread .notif-dot { background: #098993; }

.notif-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex-grow: 1; }
.notif-top { display: flex; justify-content: space-between; gap: 8px; }
.notif-kind { font-size: 12px; font-weight: 700; }
    .notif-kind.soon { color: #9a6a0b; }
    .notif-kind.overdue { color: #b3413a; }
.notif-when { font-size: 11.5px; color: #7a8892; white-space: nowrap; }
.notif-title { font-size: 14px; font-weight: 700; }
.notif-body { font-size: 12.5px; color: #4a5a66; }

.dark-mode .notif-bell { background: #131f2e; border-color: #223244; color: #e8edf0; }
.dark-mode .notif-bell:hover,
.dark-mode .notif-bell.open { background: #182530; border-color: #14a3ad; }
.dark-mode .notif-count { border-color: #0a1420; }
.dark-mode .notif-panel { background: #16283a; border-color: #223244; box-shadow: 0 24px 48px -12px rgba(0,0,0,0.6); }
.dark-mode .notif-panel-head,
.dark-mode .notif-item { color: #e8edf0; }
.dark-mode .notif-mark-all { color: #5fd3da; }
.dark-mode .notif-empty,
.dark-mode .notif-when { color: #8b98a3; }
.dark-mode .notif-item { border-top-color: #1c2c3d; }
.dark-mode .notif-item:hover { background: #1b2f43; }
.dark-mode .notif-item.unread { background: rgba(9,137,147,0.12); }
.dark-mode .notif-item.unread .notif-dot { background: #14a3ad; }
.dark-mode .notif-kind.soon { color: #f0c96a; }
.dark-mode .notif-kind.overdue { color: #ff9d92; }
.dark-mode .notif-body { color: #9fb3c1; }

.notif-kind.approved { color: #1d6b3f; }
.notif-kind.rejected { color: #b3413a; }
.dark-mode .notif-kind.approved { color: #6fd39b; }
.dark-mode .notif-kind.rejected { color: #ff9d92; }

/* ---- IT Support tickets ---- */
.tk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-filter { width: auto; min-width: 170px; padding: 8px 10px; font-size: 13px; }

.tk-table td { vertical-align: middle; }
.tk-row { cursor: pointer; }
.tk-row:hover td { background: #f6f8f9; }
.tk-row-waiting td { background: #f3f0fd; }
.tk-subject { color: #0c1a27; font-weight: 700; text-decoration: none; }
.tk-subject:hover { text-decoration: underline; }

.tk-waiting-banner { text-decoration: none; }

.tk-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: #eceff1;
    color: #4a5a66;
}

    .tk-pill.tk-st-open { background: #fbf0d6; color: #7a5510; }
    .tk-pill.tk-st-in-progress { background: #dff2f3; color: #066b73; }
    .tk-pill.tk-st-waiting { background: #ece8fb; color: #5a45b8; }
    .tk-pill.tk-st-resolved { background: #e3f4ea; color: #1d6b3f; }
    .tk-pill.tk-pri-urgent { background: #fbe4e1; color: #a5372f; }
    .tk-pill.tk-pri-high { background: #fde7d3; color: #9a4a0b; }
    .tk-pill.tk-pri-low { color: #7a8892; }

.tk-priorities { display: flex; gap: 8px; }

.tk-priority {
    flex: 1;
    padding: 9px 0;
    border-radius: 8px;
    border: 1px solid #d3dade;
    background: #f6f8f9;
    color: #3d4f5c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .tk-priority.active { border-color: #098993; background: #e1f2f3; color: #066b73; }
    .tk-priority.tk-pri-high.active { border-color: #d9822b; background: #fde7d3; color: #9a4a0b; }
    .tk-priority.tk-pri-urgent.active { border-color: #c4473d; background: #fbe4e1; color: #a5372f; }

.tk-attach { display: flex; flex-direction: column; gap: 6px; }

.tk-attach-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px dashed #b9c4ca;
    color: #3d4f5c;
    font-size: 13px;
    cursor: pointer;
}

    .tk-attach-drop input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .tk-attach-drop.disabled { opacity: 0.6; cursor: default; }

.tk-attach-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f6f8f9;
    border: 1px solid #e5e9eb;
    font-size: 13px;
}

.tk-attach-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-attach-hint { color: #7a8892; font-size: 12px; }

.tk-back { display: inline-block; margin-bottom: 14px; color: #098993; font-weight: 600; text-decoration: none; }

.tk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}

    .tk-layout .rq-card { margin-bottom: 0; }

@media (max-width: 1000px) {
    .tk-layout { grid-template-columns: 1fr; }
}

.tk-thread { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.tk-msg { display: flex; gap: 12px; }

.tk-bubble {
    flex-grow: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f6f8f9;
    border: 1px solid #e5e9eb;
}

    .tk-bubble.it { background: #e9f6f7; border-color: #bfe3e6; }
    .tk-bubble.internal { background: #fdf6e3; border-color: #ecd9a6; }

.tk-bubble-head { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.tk-internal-tag { font-size: 11px; font-weight: 700; color: #9a6a0b; text-transform: uppercase; letter-spacing: 0.03em; }
.tk-bubble-body { margin-top: 6px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.tk-image-link { display: block; margin-top: 10px; }
.tk-image { max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid #e5e9eb; }

.tk-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #dde3e5;
    color: #087a83;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.tk-event { align-self: center; font-size: 12px; color: #7a8892; }

.tk-reply { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid #eef1f2; }
.tk-reply-box.internal { background: #fdf6e3; border-color: #ecd9a6; }
.tk-reply-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.tk-reply-buttons { display: flex; gap: 10px; margin-left: auto; }

.tk-side { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.tk-resolve-btn { background: #1f8a4c; width: 100%; }
    .tk-resolve-btn:hover:not(:disabled) { background: #19733f; }

.notif-kind.ticket { color: #087a83; }

.dark-mode .tk-row:hover td { background: #182530; }
.dark-mode .tk-row-waiting td { background: rgba(160,135,255,0.08); }
.dark-mode .tk-subject { color: #e8edf0; }
.dark-mode .tk-pill { background: #1b2b3c; color: #c6d3dc; }
.dark-mode .tk-pill.tk-st-open { background: #4a3a14; color: #f0c96a; }
.dark-mode .tk-pill.tk-st-in-progress { background: #0c4a50; color: #5fd0d8; }
.dark-mode .tk-pill.tk-st-waiting { background: #33285a; color: #c4b0ff; }
.dark-mode .tk-pill.tk-st-resolved { background: #16452e; color: #6fd39b; }
.dark-mode .tk-pill.tk-pri-urgent { background: #4d2222; color: #ff9d92; }
.dark-mode .tk-pill.tk-pri-high { background: #5a3214; color: #ffb36b; }
.dark-mode .tk-pill.tk-pri-low { color: #8b98a3; }
.dark-mode .tk-priority { background: #0f1c29; border-color: #2c4356; color: #c6d3dc; }
.dark-mode .tk-priority.active { border-color: #14a3ad; background: rgba(9,137,147,0.25); color: #ffffff; }
.dark-mode .tk-priority.tk-pri-high.active { border-color: #ffb36b; background: rgba(255,179,107,0.15); color: #ffb36b; }
.dark-mode .tk-priority.tk-pri-urgent.active { border-color: #ff9d92; background: rgba(255,157,146,0.15); color: #ff9d92; }
.dark-mode .tk-attach-drop { border-color: #3a5468; color: #9fb3c1; }
.dark-mode .tk-attach-file { background: #0f1c29; border-color: #2c4356; color: #e8edf0; }
.dark-mode .tk-attach-hint,
.dark-mode .tk-event { color: #8b98a3; }
.dark-mode .tk-back { color: #5fd3da; }
.dark-mode .tk-bubble { background: #16232f; border-color: #223244; color: #dbe2e6; }
.dark-mode .tk-bubble.it { background: #0f2f36; border-color: #1b5a63; }
.dark-mode .tk-bubble.internal { background: #3a2f12; border-color: #6b5520; }
.dark-mode .tk-internal-tag { color: #f0c96a; }
.dark-mode .tk-image { border-color: #223244; }
.dark-mode .tk-file-chip { background: #0a1520; border-color: #2c4356; color: #5fd3da; }
.dark-mode .tk-reply { border-top-color: #1c2c3d; }
.dark-mode .tk-reply-box.internal { background: #2a2210; border-color: #6b5520; }
.dark-mode .notif-kind.ticket { color: #5fd3da; }

.tk-attach-drop[hidden] { display: none; }

/* ---- Home: tabs for managers and admins ---- */
.home-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }

.home-tab {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid #dde3e5;
    background: transparent;
    color: #3d4f5c;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

    .home-tab.active { background: #098993; border-color: #098993; color: #ffffff; }

.dark-mode .home-tab { border-color: #2c4356; color: #c6d3dc; }
.dark-mode .home-tab.active { background: #098993; border-color: #098993; color: #ffffff; }

/* ---- Projects overview (managers and admins) ---- */
.ov { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }

.ov-card {
    background: #ffffff;
    border: 1px solid #e5e9eb;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 0;
    color: #0c1a27;
}

    .ov-card h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }

.ov-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
    .ov-card-head h2 { margin: 0; }

.ov-empty { padding: 18px 4px; color: #606060; font-size: 13.5px; }
.ov-muted { color: #606060; font-size: 12.5px; }
.ov-small { font-size: 12px; }
.ov-sub { display: block; font-size: 12px; color: #606060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ov-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ov-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.ov-kpi-label { font-size: 12px; font-weight: 700; color: #606060; text-transform: uppercase; letter-spacing: 0.05em; }
.ov-kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-kpi-sub { font-size: 12.5px; color: #606060; }

.ov-green { color: #1d7a45; }
.ov-purple { color: #5a45b8; }
.ov-teal { color: #087a83; }
.ov-red { color: #b3413a !important; }

.ov-row { display: grid; gap: 18px; align-items: start; }
.ov-row-main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.ov-row-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
.ov-card-fill { display: flex; flex-direction: column; }
.ov-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #e3e8eb; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #606060; }
    .ov-card-fill > .ov-card-foot { margin-top: auto; }
    .ov-card-foot strong { color: #1a1a1a; font-variant-numeric: tabular-nums; margin-left: 4px; }
.ov-card-fill > .ov-card-head { margin-bottom: 14px; }
.ov-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: auto; padding-top: 4px; }
.ov-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ov-day-val { height: 15px; font-size: 11.5px; font-weight: 600; color: #606060; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-day-track { width: 100%; max-width: 46px; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px; background: #f1f4f5; overflow: hidden; }
    .ov-day-track > span { display: block; width: 100%; flex: none; }
.ov-day-label { font-size: 11.5px; line-height: 1.35; color: #7a8892; text-align: center; }
.ov-day.today .ov-day-label { color: #1a1a1a; font-weight: 700; }
.dark-mode .ov-card-foot { border-top-color: #223244; color: #9fb0bf; }
    .dark-mode .ov-card-foot strong { color: #e8edf0; }
.dark-mode .ov-day-track { background: #16263a; }
.dark-mode .ov-day-val, .dark-mode .ov-day-label { color: #8b98a3; }
.dark-mode .ov-day.today .ov-day-label { color: #e8edf0; }

.ov-head-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.ov-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: #eef2f4; gap: 2px; }
.ov-seg-btn { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: #606060; cursor: pointer; }
    .ov-seg-btn:hover { color: #1a1a1a; }
    .ov-seg-btn.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.ov-hp-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 7px 6px; margin: 0 -6px; border-radius: 8px; color: inherit; text-decoration: none; }
    .ov-hp-row:hover { background: #f3f6f7; }
.ov-bar-square { border-radius: 4px; }
.ov-hp-hours { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-hp-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e3e8eb; font-size: 13px; color: #606060; }
    .ov-hp-total strong { color: #1a1a1a; font-variant-numeric: tabular-nums; }
.dark-mode .ov-seg { background: #1b2b3c; }
.dark-mode .ov-seg-btn { color: #9fb0bf; }
    .dark-mode .ov-seg-btn:hover, .dark-mode .ov-seg-btn.active { color: #e8edf0; }
    .dark-mode .ov-seg-btn.active { background: #2a3d52; box-shadow: none; }
.dark-mode .ov-hp-row:hover { background: #1b2b3c; }
.dark-mode .ov-hp-total { border-top-color: #223244; color: #9fb0bf; }
    .dark-mode .ov-hp-total strong { color: #e8edf0; }

@media (max-width: 1200px) {
    .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ov-row-main, .ov-row-split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ov-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #606060; }
    .ov-legend span { display: inline-flex; align-items: center; gap: 6px; }

.ov-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

.ov-bg-green { background: #3bb36b; }
.ov-bg-purple { background: #8a72e6; }
.ov-bg-violet { background: #5a45b8; }
.ov-bg-teal { background: #14a3ad; }
.ov-bg-red { background: #e5675c; }
.ov-bg-grey { background: #cfd8dc; }

.ov-proj {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 96px 96px 84px 116px;
    gap: 14px;
    align-items: center;
    padding: 11px 6px;
    border-bottom: 1px solid #eef1f2;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

    a.ov-proj:hover { background: #f6f8f9; }

.ov-proj-head {
    padding-top: 8px;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7a8892;
}

.ov-proj-name { display: flex; flex-direction: column; min-width: 0; }
    .ov-proj-name strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-code { font-size: 12px; font-weight: 700; color: #7a8892; }
.ov-proj-bar { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ov-pm { color: #3d4f5c; }

@media (max-width: 900px) {
    .ov-proj { grid-template-columns: minmax(0, 1fr) 110px; }
        .ov-proj > :nth-child(n+3):not(:last-child) { display: none; }
        .ov-proj-head { display: none; }
}

.ov-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #cfd8dc; }
.ov-bar-thick { height: 12px; background: #e6ebed; }

.ov-health { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ov-health-on-track { background: #e3f4ea; color: #1d6b3f; }
.ov-health-at-risk { background: #fde7d3; color: #9a4a0b; }
.ov-health-behind { background: #fbe4e1; color: #a5372f; }
.ov-health-ready-to-close { background: #dff2f3; color: #066b73; }

.ov-donut-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.ov-donut { width: 160px; height: 160px; flex-shrink: 0; }
.ov-donut-total { font-size: 26px; font-weight: 700; fill: #0c1a27; font-family: inherit; }
.ov-donut-label { font-size: 11px; fill: #606060; font-family: inherit; }
.ov-donut-legend { flex: 1 1 160px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
    .ov-donut-legend div { display: flex; justify-content: space-between; gap: 12px; }
    .ov-donut-legend span { display: inline-flex; align-items: center; gap: 8px; }

.ov-stroke-green { stroke: #3bb36b; }
.ov-stroke-purple { stroke: #8a72e6; }
.ov-stroke-violet { stroke: #5a45b8; }
.ov-stroke-teal { stroke: #14a3ad; }
.ov-stroke-red { stroke: #e5675c; }
.ov-stroke-grey { stroke: #cfd8dc; }

.ov-person { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; gap: 12px; align-items: center; margin-bottom: 10px; }
.ov-person-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .ov-person-name > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ov-person-hours { text-align: right; font-size: 13px; }

.ov-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #098993;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.ov-deadline {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f2;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

    .ov-deadline .due-chip { justify-content: center; }
    .ov-deadline:hover .ov-deadline-name { text-decoration: underline; }
.ov-deadline-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dark-mode .ov-card { background: #131f2e; border-color: #223244; color: #e8edf0; }
.dark-mode .ov-empty,
.dark-mode .ov-muted,
.dark-mode .ov-sub,
.dark-mode .ov-kpi-label,
.dark-mode .ov-kpi-sub,
.dark-mode .ov-legend { color: #8b98a3; }
.dark-mode .ov-green { color: #6fd39b; }
.dark-mode .ov-purple { color: #c4b0ff; }
.dark-mode .ov-teal { color: #5fd3da; }
.dark-mode .ov-red { color: #ff9d92 !important; }
.dark-mode .ov-bg-grey,
.dark-mode .ov-bar { background: #3a4b5a; }
.dark-mode .ov-stroke-grey { stroke: #3a4b5a; }
.dark-mode .ov-bar-thick { background: #1b2b3c; }
.dark-mode .ov-proj { border-bottom-color: #1c2c3d; }
.dark-mode a.ov-proj:hover { background: #182530; }
.dark-mode .ov-pm { color: #c6d3dc; }
.dark-mode .ov-health-on-track { background: #16452e; color: #6fd39b; }
.dark-mode .ov-health-at-risk { background: #5a3214; color: #ffb36b; }
.dark-mode .ov-health-behind { background: #4d2222; color: #ff9d92; }
.dark-mode .ov-health-ready-to-close { background: #0c4a50; color: #5fd0d8; }
.dark-mode .ov-donut-total { fill: #e8edf0; }
.dark-mode .ov-donut-label { fill: #8b98a3; }
.dark-mode .ov-avatar { background: #1b3b4a; color: #9fe3e8; }
.dark-mode .ov-deadline { border-bottom-color: #1c2c3d; }

/* ---- Account menu (initials in the header) ---- */
.avatar-menu { position: relative; }
.avatar-menu > summary { list-style: none; cursor: pointer; }
.avatar-menu > summary::-webkit-details-marker { display: none; }

.avatar-menu .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #098993;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    user-select: none;
}

.avatar-menu[open] .avatar { box-shadow: 0 0 0 3px rgba(9,137,147,0.35); }

.avatar-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 250px;
    background: #ffffff;
    border: 1px solid #e5e9eb;
    border-radius: 12px;
    box-shadow: 0 20px 40px -12px rgba(12,26,39,0.35);
    z-index: 96;
    overflow: hidden;
    text-align: left;
}

.avatar-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid #eef1f2; }
    .avatar-menu-head strong { font-size: 14px; color: #0c1a27; }
    .avatar-menu-head span { font-size: 12px; color: #606060; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #0c1a27;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .avatar-menu-item:hover { background: #f1f6f7; color: #087a83; }

.dark-mode .avatar-menu-panel { background: #16283a; border-color: #223244; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6); }
.dark-mode .avatar-menu-head { border-bottom-color: #1c2c3d; }
.dark-mode .avatar-menu-head strong { color: #e8edf0; }
.dark-mode .avatar-menu-head span { color: #8b98a3; }
.dark-mode .avatar-menu-item { color: #e8edf0; }
.dark-mode .avatar-menu-item:hover { background: #1b2f43; color: #5fd3da; }

/* ---- Password pages (inside the white account card) ---- */
.pw-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pw-field { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pw-label { font-size: 13px; font-weight: 600; color: #3d4f5c; }
.pw-input-wrap { position: relative; }
.pw-input { padding-right: 44px; height: 44px; }

.pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: #7a8892;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pw-toggle.on { color: #098993; }

.pw-field-error { font-size: 13px; }

.pw-rules { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #7a8892; }
    .pw-rules li { display: flex; align-items: center; gap: 8px; }
    .pw-rules li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c9d2d7; flex-shrink: 0; }
    .pw-rules li.met { color: #1d7a45; }
    .pw-rules li.met::before { background: #3bb36b; }

.pw-note { font-size: 13px !important; margin: 10px 0 0; }
.pw-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.pw-wide { width: 100%; padding: 11px; }
.pw-error { padding: 10px 14px; border-radius: 8px; background: #fbeceb; color: #b3413a; font-size: 14px; margin: 6px 0; }
.pw-success { padding: 12px 14px; border-radius: 8px; background: #e3f4ea; color: #1d6b3f; font-size: 14px; margin: 6px 0 10px; }
.pw-logout { margin-top: 16px; text-align: center; font-size: 13px; color: #606060; }
.pw-link-btn { border: none; background: none; padding: 0; color: #098993; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ---- Edit / Add employee: temporary password ---- */
.reset-row { display: flex; gap: 8px; align-items: center; }
    .reset-row .form-input { flex: 1; min-width: 0; }
.reset-hint { display: block; margin-top: 4px; font-size: 12px; color: #7a8892; }

.generate-btn {
    flex: none;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #098993;
    background: transparent;
    color: #098993;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.dark-mode .reset-hint { color: #8b98a3; }

/* Deactivating and deleting accounts (Edit Employee, employees list) */
.acct-section { margin: 4px 0 14px; padding-top: 14px; border-top: 1px solid #e5e9eb; display: flex; flex-direction: column; gap: 8px; }
.acct-title { font-size: 13px; font-weight: 700; color: #0c1a27; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acct-btn-outline-danger { background: none; border: 1px solid rgba(179, 65, 58, 0.45); color: #b3413a; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .acct-btn-outline-danger:hover { background: rgba(179, 65, 58, 0.08); }
.acct-btn-danger { background: #b3413a; border: 0; color: #fff; border-radius: 8px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .acct-btn-danger:hover { background: #9a352f; }
    .acct-btn-danger:disabled { opacity: 0.6; cursor: default; }
.acct-btn-link { background: none; border: 0; padding: 0; color: #7a8892; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
    .acct-btn-link:hover { color: #b3413a; }
.acct-confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(179, 65, 58, 0.06); border: 1px solid rgba(179, 65, 58, 0.25); font-size: 13px; color: #3a4650; }
    .acct-confirm strong { color: #8f2f29; font-size: 14px; }
.acct-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 20px; background: #eef1f3; color: #606060; font-size: 11.5px; font-weight: 600; }
.acct-inactive-row td { color: #7a8892 !important; }
.acct-empty { text-align: center; color: #7a8892 !important; padding: 22px !important; }
.acct-message { margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(9, 137, 147, 0.08); color: #076c74; font-size: 13.5px; font-weight: 600; }
.dark-mode .acct-section { border-top-color: #223244; }
.dark-mode .acct-title { color: #e8edf0; }
.dark-mode .acct-confirm { background: rgba(229, 115, 107, 0.08); border-color: rgba(229, 115, 107, 0.3); color: #c7d0d6; }
    .dark-mode .acct-confirm strong { color: #f09a93; }
.dark-mode .acct-btn-outline-danger { color: #f09a93; border-color: rgba(240, 154, 147, 0.45); }
.dark-mode .acct-badge { background: #1b2b3c; color: #9fb0bf; }
.dark-mode .acct-inactive-row td, .dark-mode .acct-empty { color: #8b98a3 !important; }
.dark-mode .acct-message { background: rgba(9, 137, 147, 0.15); color: #7fd3d9; }

/* ---- Teams page (admin) ---- */
.team-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.team-column { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.team-column-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .team-column-head > span:last-child { display: flex; flex-direction: column; }
.team-unassigned .team-column-head strong { color: #a0701a; }
.team-member { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #f6f8f9; }
.team-member-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .team-member-name .rq-avatar { flex: none; }
    .team-member-name strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-move { width: 100%; padding: 6px 8px; font-size: 12.5px; }
.team-empty { padding: 6px 2px; }
.team-hint { margin-top: 14px; }

.dark-mode .team-member { background: #16232f; }
.dark-mode .team-unassigned .team-column-head strong { color: #f0c96a; }

/* ---- My team board (managers) ---- */
.tm { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.tm-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e9eb;
    font-size: 13px;
    color: #3d4f5c;
}

.tm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tm-chip .tm-dot.tm-work { background: #14a3ad; }
.tm-chip .tm-dot.tm-break { background: #e0a82e; }
.tm-chip .tm-dot.tm-leave { background: #8b98a3; }
.tm-chip .tm-dot.tm-off { background: #c9d2d7; }

.tm-group { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #0c1a27; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.tm-card {
    --tm-color: #8b98a3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e5e9eb;
    border-top: 3px solid var(--tm-color);
    background: #ffffff;
    color: #0c1a27;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .tm-card:hover { box-shadow: 0 10px 24px -14px rgba(12,26,39,0.45); }

.tm-state-work, .tm-state-other { --tm-color: #14a3ad; }
.tm-state-check, .tm-state-ot { --tm-color: #7b61e0; }
.tm-state-break { --tm-color: #e0a82e; }
.tm-state-meet { --tm-color: #4a8fe0; }
.tm-state-leave { --tm-color: #8b98a3; }
.tm-state-off { --tm-color: #b9c4ca; }
.tm-state-leave.tm-card, .tm-state-off.tm-card { opacity: 0.7; }

.tm-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tm-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .tm-person strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-avatar { width: 34px; height: 34px; font-size: 12px; }
.tm-avatar-lg { width: 44px; height: 44px; font-size: 14px; }

.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-color) 14%, transparent);
    color: var(--tm-color);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.tm-what { display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.tm-context { font-size: 12.5px; color: #606060; }
.tm-headline { font-size: 15px; font-weight: 700; }
.tm-since { font-size: 12.5px; color: #606060; }

.tm-today { display: flex; flex-direction: column; gap: 4px; }
.tm-today-row { display: flex; justify-content: space-between; font-size: 12px; color: #606060; }
    .tm-today-row strong { color: #0c1a27; }
.tm-today-bar { height: 6px; border-radius: 999px; background: #e6ebed; overflow: hidden; }
    .tm-today-bar span { display: block; height: 100%; background: var(--tm-color); }

.tm-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #606060; min-height: 20px; }
    .tm-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-backdrop { position: fixed; inset: 0; background: rgba(12,26,39,0.45); z-index: 100; }

.tm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    overflow-y: auto;
    background: #ffffff;
    border-left: 1px solid #e5e9eb;
    z-index: 101;
    padding: 22px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #0c1a27;
    box-shadow: -20px 0 40px -10px rgba(0,0,0,0.3);
}

.tm-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .tm-drawer-head .tm-person > span:last-child { display: flex; flex-direction: column; }
.tm-drawer-name { font-size: 18px; }
.tm-drawer-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tm-color); }
.tm-close { color: #3d4f5c; }
.tm-now { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: #f3f6f7; }
.tm-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7a8892; margin-bottom: 10px; }
.tm-timeline { display: flex; flex-direction: column; gap: 9px; }
.tm-tl-row { display: grid; grid-template-columns: 110px 10px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.tm-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: #14a3ad; }
    .tm-tl-dot.checking { background: #7b61e0; }
.tm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .tm-stats div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; background: #f3f6f7; }
    .tm-stats span { font-size: 11px; font-weight: 700; color: #7a8892; text-transform: uppercase; }
    .tm-stats strong { font-size: 17px; }
.tm-task { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f2; color: inherit; text-decoration: none; font-size: 13px; }
    .tm-task:hover span:first-child { text-decoration: underline; }

.dark-mode .tm-chip { background: #131f2e; border-color: #223244; color: #c6d3dc; }
.dark-mode .tm-chip .tm-dot.tm-off { background: #5a6b78; }
.dark-mode .tm-group { color: #e8edf0; }
.dark-mode .tm-card { background: #131f2e; border-color: #223244; border-top-color: var(--tm-color); color: #e8edf0; }
.dark-mode .tm-card:hover { box-shadow: 0 10px 24px -14px rgba(0,0,0,0.8); }
.dark-mode .tm-state-work, .dark-mode .tm-state-other { --tm-color: #2bbac4; }
.dark-mode .tm-state-check, .dark-mode .tm-state-ot { --tm-color: #a087ff; }
.dark-mode .tm-state-break { --tm-color: #f0c96a; }
.dark-mode .tm-state-meet { --tm-color: #6aa6f0; }
.dark-mode .tm-state-off { --tm-color: #5a6b78; }
.dark-mode .tm-context,
.dark-mode .tm-since,
.dark-mode .tm-today-row,
.dark-mode .tm-foot { color: #8b98a3; }
.dark-mode .tm-today-row strong { color: #e8edf0; }
.dark-mode .tm-today-bar { background: #1b2b3c; }
.dark-mode .tm-backdrop { background: rgba(4,10,16,0.7); }
.dark-mode .tm-drawer { background: #131f2e; border-left-color: #223244; color: #e8edf0; }
.dark-mode .tm-close { color: #c6d3dc; }
.dark-mode .tm-now,
.dark-mode .tm-stats div { background: #16232f; }
.dark-mode .tm-section-title,
.dark-mode .tm-stats span { color: #8b98a3; }
.dark-mode .tm-task { border-bottom-color: #1c2c3d; }

/* ---------- Add Employee ---------- */
.ae-layout { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 320px); gap: 20px; align-items: start; }
.ae-card { padding: 24px 26px; margin-bottom: 0; display: flex; flex-direction: column; gap: 22px; }
.ae-section { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid #e5e9eb; }
.ae-section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #0c1a27; }
.ae-step { width: 24px; height: 24px; border-radius: 50%; background: rgba(9, 137, 147, 0.12); color: #098993; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ae-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ae-pass-row { display: flex; gap: 8px; }
    .ae-pass-row .rq-input { flex: 1; }
.ae-mono { font-family: Consolas, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.02em; }
.ae-error { font-size: 12px; color: #b3413a; }
.ae-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ae-role { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #d3dade; border-radius: 10px; background: #f6f8f9; cursor: pointer; }
    .ae-role input { position: absolute; opacity: 0; pointer-events: none; }
    .ae-role:hover { border-color: #098993; }
    .ae-role.selected { border-color: #098993; background: rgba(9, 137, 147, 0.08); box-shadow: 0 0 0 1px #098993 inset; }
    .ae-role:focus-within { box-shadow: 0 0 0 3px rgba(9, 137, 147, 0.25); }
.ae-role-name { font-size: 14px; font-weight: 700; color: #0c1a27; }
.ae-role-text { font-size: 12px; line-height: 1.45; color: #5b6b76; }
.ae-alert { padding: 11px 14px; border-radius: 8px; background: rgba(179, 65, 58, 0.08); border: 1px solid rgba(179, 65, 58, 0.25); color: #9a352f; font-size: 13.5px; font-weight: 600; }
.ae-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ae-link-btn { display: inline-flex; align-items: center; text-decoration: none; }
.ae-side { padding: 20px 22px; margin-bottom: 0; }
    .ae-side h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #0c1a27; }
.ae-steps { margin: 0; padding: 0; list-style: none; counter-reset: ae; display: flex; flex-direction: column; gap: 14px; }
    .ae-steps li { counter-increment: ae; position: relative; padding-left: 34px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
    .ae-steps li::before { content: counter(ae); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #eef2f4; color: #3d4f5c; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .ae-steps li span { color: #5b6b76; line-height: 1.45; }
.ae-side-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e5e9eb; }
.ae-done-head { display: flex; gap: 14px; align-items: flex-start; }
    .ae-done-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #0c1a27; }
    .ae-done-head p { margin: 0; }
.ae-done-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #e3f4ea; color: #1d7a45; display: flex; align-items: center; justify-content: center; }
.ae-cred { border: 1px solid #e5e9eb; border-radius: 10px; overflow: hidden; }
.ae-cred-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
    .ae-cred-row + .ae-cred-row { border-top: 1px solid #e5e9eb; }
    .ae-cred-row code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 14.5px; font-weight: 600; color: #0c1a27; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-cred-label { font-size: 12.5px; font-weight: 600; color: #5b6b76; }
.ae-copy { border: 1px solid #d3dade; background: none; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: #0c1a27; cursor: pointer; min-width: 70px; }
    .ae-copy:hover { border-color: #098993; color: #098993; }
.ae-summary { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; font-weight: 600; color: #0c1a27; }
    .ae-summary > span { display: flex; flex-direction: column; gap: 2px; }
.ae-summary-label { font-size: 12px; font-weight: 600; color: #7a8892; }
@media (max-width: 1100px) {
    .ae-layout { grid-template-columns: minmax(0, 680px); }
}
@media (max-width: 640px) {
    .ae-grid, .ae-roles { grid-template-columns: 1fr; }
    .ae-cred-row { grid-template-columns: 1fr auto; }
    .ae-cred-label { grid-column: 1 / -1; }
}
.dark-mode .ae-section, .dark-mode .ae-side-note, .dark-mode .ae-cred, .dark-mode .ae-cred-row + .ae-cred-row { border-color: #223244; }
.dark-mode .ae-section-title, .dark-mode .ae-role-name, .dark-mode .ae-side h3, .dark-mode .ae-done-head h2,
.dark-mode .ae-cred-row code, .dark-mode .ae-summary, .dark-mode .ae-copy { color: #e8edf0; }
.dark-mode .ae-step { background: rgba(20, 163, 173, 0.18); color: #5fd0d8; }
.dark-mode .ae-role { background: #0f1c29; border-color: #2c4356; }
    .dark-mode .ae-role.selected { background: rgba(20, 163, 173, 0.12); border-color: #14a3ad; box-shadow: 0 0 0 1px #14a3ad inset; }
.dark-mode .ae-role-text, .dark-mode .ae-steps li span, .dark-mode .ae-cred-label, .dark-mode .ae-summary-label { color: #8b98a3; }
.dark-mode .ae-steps li::before { background: #1b2b3c; color: #c7d0d6; }
.dark-mode .ae-copy { border-color: #2c4356; }
.dark-mode .ae-done-icon { background: rgba(59, 179, 107, 0.15); color: #6fd39a; }
.dark-mode .ae-alert { background: rgba(229, 115, 107, 0.1); border-color: rgba(229, 115, 107, 0.3); color: #f09a93; }
.dark-mode .ae-error { color: #f09a93; }