:root {
    --ta-bg: #f5f7fb;
    --ta-card: #ffffff;
    --ta-text: #111827;
    --ta-muted: #6b7280;
    --ta-border: #e5e7eb;
    --ta-primary: #2563eb;
    --ta-primary-dark: #1d4ed8;
    --ta-danger: #dc2626;
    --ta-dark: #0f172a;
    --ta-sidebar: #101827;
    --ta-orange: #ff6b2b;
    --ta-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--ta-text);
    background: var(--ta-bg);
}

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

button,
input,
textarea {
    font-family: inherit;
}

/* Login */




.ta-login-body {
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f7f9fe 0%, #eef4fd 52%, #f5f7fb 100%);
}

.exhale-login-shell {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(20px, 3vw, 42px);
    overflow: hidden;
}

.exhale-login-light,
.exhale-login-grid-pattern {
    position: absolute;
    pointer-events: none;
}

.exhale-login-light {
    width: clamp(280px, 25vw, 440px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.55;
    animation: exhale-login-drift 18s ease-in-out infinite alternate;
}

.exhale-login-light-one {
    top: -10%;
    left: -6%;
    background: radial-gradient(circle, rgba(72, 125, 240, 0.22) 0%, rgba(72, 125, 240, 0) 68%);
}

.exhale-login-light-two {
    right: -10%;
    bottom: -14%;
    background: radial-gradient(circle, rgba(255, 132, 61, 0.16) 0%, rgba(255, 132, 61, 0) 68%);
    animation-delay: -8s;
}

.exhale-login-grid-pattern {
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(52, 102, 211, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 102, 211, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.72), transparent 88%);
}

.exhale-login-frame {
    position: relative;
    z-index: 1;
    width: min(880px, 94%);
    min-height: min(540px, calc(100dvh - 64px));
    display: grid;
    grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1.14fr);
    overflow: hidden;
    border: 1px solid rgba(207, 219, 239, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 24px 64px rgba(46, 68, 118, 0.13), 0 5px 18px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(14px);
}

.exhale-login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(22px, 2.4vw, 32px);
    background: rgba(255, 255, 255, 0.92);
}

.exhale-login-brand {
    display: inline-flex;
    width: min(100%, 160px);
    margin-bottom: clamp(14px, 1.6vw, 20px);
    outline: none;
}

.exhale-login-brand:focus-visible {
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.exhale-login-wordmark {
    display: block;
    width: 100%;
    height: auto;
}

.exhale-login-intro {
    max-width: 430px;
}

.exhale-login-eyebrow,
.exhale-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.exhale-login-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff7a18;
    box-shadow: 0 0 0 5px rgba(255, 122, 24, 0.13);
}

.exhale-login-intro h1 {
    margin: 14px 0 10px;
    color: #102a5a;
    font-size: clamp(1.55rem, 1.9vw, 2rem);
    font-weight: 820;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.exhale-login-intro p {
    margin: 0;
    color: #667798;
    font-size: 0.88rem;
    line-height: 1.65;
}

.exhale-login-alert,
.exhale-login-validation {
    margin-top: 20px;
    border-radius: 15px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.exhale-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b42318;
}

.exhale-login-alert svg {
    width: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-validation {
    color: #b42318;
}

.exhale-login-validation:empty {
    display: none;
}

.exhale-login-validation ul {
    margin: 0;
    padding: 11px 14px 11px 31px;
    border: 1px solid #fecaca;
    border-radius: 15px;
    background: #fff7f7;
}

.exhale-login-form {
    display: grid;
    gap: 18px;
    max-width: 440px;
    margin-top: 28px;
}

.exhale-login-field {
    display: grid;
    gap: 8px;
}

.exhale-login-field > label {
    color: #16284c;
    font-size: 0.82rem;
    font-weight: 800;
}

.exhale-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.exhale-input-icon {
    position: absolute;
    left: 15px;
    z-index: 1;
    width: 20px;
    height: 20px;
    color: #7c8aa5;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d7e0ef;
    border-radius: 13px;
    outline: none;
    background: rgba(255, 255, 255, 0.88);
    color: #0c1f48;
    padding: 0 46px 0 44px;
    font-size: 0.9rem;
    font-weight: 560;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.exhale-login-input::placeholder {
    color: #a0acc2;
    font-weight: 450;
}

.exhale-login-input:hover {
    border-color: #bac9e2;
}

.exhale-login-input:focus {
    border-color: #2463e8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(36, 99, 232, 0.12);
}

.exhale-password-input {
    padding-right: 56px;
}

.exhale-password-toggle {
    position: absolute;
    right: 8px;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #5e7090;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.exhale-password-toggle:hover {
    background: #edf3ff;
    color: #1d59d9;
}

.exhale-password-toggle:focus-visible {
    outline: 3px solid rgba(36, 99, 232, 0.2);
    outline-offset: 1px;
}

.exhale-password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-eye-closed {
    display: none;
}

.exhale-password-toggle.is-visible .exhale-eye-open {
    display: none;
}

.exhale-password-toggle.is-visible .exhale-eye-closed {
    display: block;
}

.exhale-field-validation {
    min-height: 1.05em;
    color: #c1261e;
    font-size: 0.79rem;
    font-weight: 650;
}

.exhale-remember-choice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 11px;
    align-items: start;
    cursor: pointer;
    user-select: none;
}

.exhale-remember-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.exhale-remember-checkbox {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    margin-top: 1px;
    border: 1.5px solid #b9c7de;
    border-radius: 6px;
    background: #ffffff;
    color: #ffffff;
    transition: 0.16s ease;
}

.exhale-remember-checkbox svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.7);
    transition: 0.16s ease;
}

.exhale-remember-choice input:checked + .exhale-remember-checkbox {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24);
}

.exhale-remember-choice input:checked + .exhale-remember-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

.exhale-remember-choice input:focus-visible + .exhale-remember-checkbox {
    outline: 3px solid rgba(36, 99, 232, 0.2);
    outline-offset: 2px;
}

.exhale-remember-copy {
    display: grid;
    gap: 3px;
}

.exhale-remember-copy strong {
    color: #23385f;
    font-size: 0.84rem;
    line-height: 1.3;
}

.exhale-remember-copy small {
    color: #7d8ca7;
    font-size: 0.75rem;
    line-height: 1.42;
}

.exhale-login-submit {
    position: relative;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(105deg, #1558de 0%, #246bef 52%, #0c47be 100%);
    box-shadow: 0 14px 26px rgba(18, 86, 222, 0.22);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.exhale-login-submit::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.22) 48%, transparent 74%);
    content: "";
    transform: translateX(-135%);
    transition: transform 0.55s ease;
}

.exhale-login-submit:hover:not(:disabled) {
    box-shadow: 0 18px 30px rgba(18, 86, 222, 0.28);
    transform: translateY(-1px);
}

.exhale-login-submit:hover:not(:disabled)::before {
    transform: translateX(135%);
}

.exhale-login-submit:focus-visible {
    outline: 4px solid rgba(36, 99, 232, 0.22);
    outline-offset: 3px;
}

.exhale-login-submit:disabled {
    cursor: wait;
    opacity: 0.78;
}

.exhale-login-submit > span,
.exhale-login-submit > svg {
    position: relative;
    z-index: 1;
}

.exhale-login-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-submit-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: exhale-spin 0.7s linear infinite;
}

.exhale-login-submit.is-submitting svg {
    display: none;
}

.exhale-login-submit.is-submitting .exhale-login-submit-spinner {
    display: inline-block;
}

.exhale-login-trust-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 440px;
    margin-top: 22px;
    color: #7d8ca7;
    font-size: 0.75rem;
    line-height: 1.48;
}

.exhale-login-trust-line svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 1px;
    color: #2663db;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(26px, 3vw, 40px);
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 79% 14%, rgba(76, 135, 255, 0.31), transparent 30%),
        radial-gradient(circle at 16% 89%, rgba(255, 130, 43, 0.1), transparent 26%),
        linear-gradient(145deg, #071634 0%, #0c2b68 54%, #102c64 100%);
}

.exhale-login-showcase::after {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 52px 52px;
    content: "";
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 78%);
    pointer-events: none;
}

.exhale-showcase-copy,
.exhale-showcase-visual,
.exhale-showcase-points {
    position: relative;
    z-index: 1;
}

.exhale-showcase-copy {
    max-width: 560px;
}

.exhale-showcase-copy .exhale-showcase-kicker {
    color: #88b8ff;
}

.exhale-showcase-copy h2 {
    margin: 14px 0 12px;
    color: #ffffff;
    font-size: clamp(1.45rem, 1.9vw, 2.1rem);
    font-weight: 820;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.exhale-showcase-copy p {
    max-width: 510px;
    margin: 0;
    color: #ccd9ef;
    font-size: 0.99rem;
    line-height: 1.68;
}

.exhale-showcase-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 370px;
    margin: 22px 0 16px;
    overflow: hidden;
}

.exhale-showcase-grid {
    position: absolute;
    inset: 11% 5%;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(146, 185, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(146, 185, 255, 0.18) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
    animation: exhale-grid-drift 18s linear infinite;
}

.exhale-showcase-halo {
    position: absolute;
    width: min(86%, 610px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 141, 255, 0.35) 0%, rgba(82, 141, 255, 0.09) 44%, rgba(82, 141, 255, 0) 71%);
    filter: blur(5px);
    animation: exhale-halo-breathe 7s ease-in-out infinite;
}

.exhale-showcase-orbit {
    position: absolute;
    display: grid;
    place-items: start center;
    border: 1px solid rgba(165, 198, 255, 0.26);
    border-radius: 50%;
    animation: exhale-orbit-rotate 22s linear infinite;
}

.exhale-showcase-orbit-large {
    width: min(98%, 650px);
    aspect-ratio: 1;
}

.exhale-showcase-orbit-small {
    width: min(68%, 455px);
    aspect-ratio: 1;
    border-color: rgba(255, 255, 255, 0.16);
    animation-duration: 15s;
    animation-direction: reverse;
}

.exhale-orbit-dot {
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08);
}

.exhale-orbit-dot-blue {
    background: #5fa0ff;
}

.exhale-orbit-dot-orange {
    background: #ff8a2b;
}

.exhale-showcase-route {
    position: absolute;
    z-index: 1;
    width: min(96%, 650px);
    height: auto;
    overflow: visible;
}

.exhale-showcase-route path {
    stroke: rgba(164, 198, 255, 0.58);
    stroke-width: 1.5;
    stroke-dasharray: 0.02 0.04;
    animation: exhale-route-flow 7s linear infinite;
}

.exhale-showcase-route circle {
    fill: #6aa5ff;
    filter: drop-shadow(0 0 5px rgba(106, 165, 255, 0.9));
}

.exhale-showcase-route circle:nth-of-type(2) {
    fill: #ff922f;
}

.exhale-showcase-dashboard-visual {
    position: relative;
    z-index: 2;
    width: min(92%, 630px);
    max-height: 350px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.24));
    animation: exhale-dashboard-float 8s ease-in-out infinite;
}

.exhale-showcase-status-line {
    position: absolute;
    bottom: 5%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #cbdaf3;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.045em;
}

.exhale-showcase-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #58d79c;
    box-shadow: 0 0 0 5px rgba(88, 215, 156, 0.13);
    animation: exhale-live-pulse 2.2s ease-in-out infinite;
}

.exhale-showcase-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(193, 214, 255, 0.17);
    color: #d0dcf3;
    font-size: 0.78rem;
    font-weight: 650;
}

.exhale-showcase-points span {
    display: grid;
    gap: 6px;
}

.exhale-showcase-points b {
    color: #ff923c;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

@keyframes exhale-login-drift {
    from { transform: translate3d(-2%, -2%, 0) scale(0.96); }
    to { transform: translate3d(4%, 5%, 0) scale(1.04); }
}

@keyframes exhale-grid-drift {
    from { transform: translate3d(-14px, -10px, 0); }
    to { transform: translate3d(14px, 10px, 0); }
}

@keyframes exhale-halo-breathe {
    0%, 100% { transform: scale(0.96); opacity: 0.68; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes exhale-orbit-rotate {
    to { transform: rotate(360deg); }
}

@keyframes exhale-route-flow {
    to { stroke-dashoffset: -0.18; }
}

@keyframes exhale-dashboard-float {
    0%, 100% { transform: translateY(0) rotate(-0.25deg); }
    50% { transform: translateY(-10px) rotate(0.25deg); }
}

@keyframes exhale-live-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(88, 215, 156, 0.13); }
    50% { box-shadow: 0 0 0 9px rgba(88, 215, 156, 0.02); }
}

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

@media (max-width: 1040px) {
    .exhale-login-frame {
        grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
    }

    .exhale-login-card,
    .exhale-login-showcase {
        padding: 38px;
    }

    .exhale-showcase-visual {
        min-height: 320px;
    }

    .exhale-showcase-dashboard-visual {
        max-height: 300px;
    }
}

@media (max-width: 920px) {
    .exhale-login-shell {
        padding: 18px;
    }

    .exhale-login-frame {
        grid-template-columns: 1fr;
        width: min(650px, 100%);
        min-height: 0;
    }

    .exhale-login-showcase {
        padding: 34px;
    }

    .exhale-showcase-copy h2 {
        font-size: 2.25rem;
    }

    .exhale-showcase-visual {
        min-height: 300px;
    }

    .exhale-showcase-dashboard-visual {
        width: min(86%, 560px);
        max-height: 290px;
    }
}

@media (max-width: 640px) {
    .exhale-login-shell {
        padding: 0;
    }

    .exhale-login-frame {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .exhale-login-card {
        min-height: 100dvh;
        padding: 30px 22px 28px;
        background: rgba(255, 255, 255, 0.89);
    }

    .exhale-login-brand {
        width: min(100%, 220px);
        margin-bottom: 30px;
    }

    .exhale-login-intro h1 {
        font-size: 2.05rem;
    }

    .exhale-login-showcase {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exhale-login-light,
    .exhale-showcase-grid,
    .exhale-showcase-halo,
    .exhale-showcase-orbit,
    .exhale-showcase-route path,
    .exhale-showcase-dashboard-visual,
    .exhale-showcase-live-dot,
    .exhale-login-submit::before,
    .exhale-login-submit-spinner {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}
.ta-brand-icon {
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.ta-brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes exhale-login-drift {
    from { transform: translate3d(-2%, -2%, 0) scale(0.96); }
    to { transform: translate3d(4%, 5%, 0) scale(1.04); }
}

@keyframes exhale-mark-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@media (max-width: 1040px) {
    .exhale-login-frame {
        grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
        gap: 26px;
    }

    .exhale-showcase-visual {
        min-height: 320px;
    }
}

@media (max-width: 920px) {
    .exhale-login-shell {
        padding: 18px;
    }

    .exhale-login-frame {
        grid-template-columns: 1fr;
        width: min(640px, 100%);
    }

    .exhale-login-showcase {
        min-height: 0;
        padding: 26px 24px 30px;
    }

    .exhale-showcase-copy h2 {
        font-size: 2.1rem;
    }

    .exhale-showcase-visual {
        min-height: 260px;
    }

    .exhale-showcase-mark {
        width: min(42%, 220px);
    }
}

@media (max-width: 640px) {
    .exhale-login-shell {
        padding: 0;
    }

    .exhale-login-frame {
        width: 100%;
        min-height: 100dvh;
    }

    .exhale-login-card,
    .exhale-login-showcase {
        border-radius: 0;
        box-shadow: none;
    }

    .exhale-login-card {
        min-height: 100dvh;
        padding: 30px 22px 28px;
        background: rgba(255, 255, 255, 0.84);
    }

    .exhale-login-brand {
        width: min(100%, 220px);
        margin-bottom: 30px;
    }

    .exhale-login-intro h1 {
        font-size: 2.05rem;
    }

    .exhale-login-showcase {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exhale-login-light,
    .exhale-showcase-mark,
    .exhale-login-submit::before,
    .exhale-login-submit-spinner {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}
.ta-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ta-orange), #ff9f43);
    color: white;
    font-weight: 900;
    letter-spacing: -1px;
}

.ta-login-brand h1 {
    margin: 0;
    font-size: 20px;
}

.ta-login-brand p {
    margin: 3px 0 0;
    color: var(--ta-muted);
    font-size: 13px;
}

.ta-login-heading h2 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.ta-login-heading p {
    margin: 8px 0 22px;
    color: var(--ta-muted);
    line-height: 1.5;
}

.ta-login-form {
    display: grid;
    gap: 16px;
}

.ta-form-group {
    display: grid;
    gap: 7px;
}

    .ta-form-group label {
        font-size: 13px;
        font-weight: 700;
    }

    .ta-form-group input {
        width: 100%;
        border: 1px solid var(--ta-border);
        border-radius: 14px;
        padding: 13px 14px;
        outline: none;
        font-size: 14px;
        transition: 0.2s;
        background: #fff;
    }

        .ta-form-group input:focus {
            border-color: var(--ta-primary);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
        }

    .ta-form-group span,
    .ta-validation-summary {
        color: var(--ta-danger);
        font-size: 13px;
    }

        .ta-validation-summary ul {
            margin: 0;
            padding-left: 18px;
        }

.ta-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ta-muted);
    font-size: 13px;
}

.ta-primary-btn {
    border: 0;
    border-radius: 14px;
    background: var(--ta-primary);
    color: white;
    font-weight: 800;
    padding: 14px 18px;
    cursor: pointer;
    transition: 0.2s;
}

    .ta-primary-btn:hover {
        background: var(--ta-primary-dark);
        transform: translateY(-1px);
    }

.ta-alert {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

.ta-alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.ta-demo-box {
    margin-top: 22px;
    padding: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    display: grid;
    gap: 5px;
    color: var(--ta-muted);
    font-size: 13px;
}

    .ta-demo-box strong {
        color: var(--ta-text);
    }

.ta-login-side {
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ta-login-side-card {
    width: min(620px, 100%);
    border-radius: 34px;
    background: linear-gradient(135deg, #101827, #1e293b);
    color: white;
    padding: 46px;
    box-shadow: var(--ta-shadow);
}

.ta-pill,
.ta-status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 107, 43, 0.14);
    color: var(--ta-orange);
    font-weight: 800;
    font-size: 12px;
}

.ta-login-side-card h2 {
    font-size: 42px;
    line-height: 1.05;
    margin: 22px 0 12px;
    letter-spacing: -0.05em;
}

.ta-login-side-card p {
    color: #cbd5e1;
    line-height: 1.65;
    max-width: 520px;
}

.ta-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

    .ta-feature-grid div {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        padding: 16px;
        border-radius: 18px;
        display: grid;
        gap: 5px;
    }

    .ta-feature-grid span {
        color: #cbd5e1;
        font-size: 13px;
    }

/* Admin shell */

.ta-admin-body {
    min-height: 100vh;
}

.ta-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
}

.ta-sidebar {
    background: var(--ta-sidebar);
    color: white;
    padding: 24px;
}

.ta-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ta-brand-title {
    font-weight: 900;
    font-size: 17px;
}

.ta-brand-subtitle {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 2px;
}

.ta-nav {
    margin-top: 26px;
    display: grid;
    gap: 8px;
}

.ta-nav-link {
    min-height: 46px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    color: #cbd5e1;
    transition: 0.2s;
}

    .ta-nav-link.active,
    .ta-nav-link:hover {
        background: rgba(255, 255, 255, 0.09);
        color: #ffffff;
    }

    .ta-nav-link.disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

    .ta-nav-link small {
        color: var(--ta-orange);
        font-weight: 800;
    }

.ta-main {
    min-width: 0;
}

.ta-topbar {
    height: 92px;
    background: #ffffff;
    border-bottom: 1px solid var(--ta-border);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ta-page-kicker {
    color: var(--ta-orange);
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ta-topbar h1 {
    margin: 4px 0 0;
    font-size: 26px;
    letter-spacing: -0.04em;
}

.ta-userbox {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ta-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: var(--ta-primary);
    font-weight: 900;
}

.ta-user-meta {
    display: grid;
    line-height: 1.2;
}

    .ta-user-meta span {
        color: var(--ta-muted);
        font-size: 12px;
    }

    .ta-user-meta small {
        color: var(--ta-orange);
        font-weight: 800;
        font-size: 11px;
    }

.ta-logout-btn {
    border: 1px solid var(--ta-border);
    background: #ffffff;
    color: var(--ta-text);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
}

    .ta-logout-btn:hover {
        background: #f8fafc;
    }

.ta-content {
    padding: 28px;
}

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

.ta-stat-card,
.ta-panel,
.ta-next-card {
    background: #ffffff;
    border: 1px solid var(--ta-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ta-stat-card {
    padding: 20px;
    display: grid;
    gap: 6px;
}

    .ta-stat-card span {
        color: var(--ta-muted);
        font-size: 13px;
    }

    .ta-stat-card strong {
        font-size: 22px;
        letter-spacing: -0.04em;
    }

    .ta-stat-card small {
        color: var(--ta-muted);
    }

.ta-panel {
    padding: 24px;
}

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

    .ta-panel-header h2 {
        margin: 0;
        font-size: 24px;
        letter-spacing: -0.04em;
    }

    .ta-panel-header p {
        margin: 6px 0 0;
        color: var(--ta-muted);
    }

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

.ta-next-card {
    padding: 20px;
}

    .ta-next-card h3 {
        margin: 0;
    }

    .ta-next-card p {
        color: var(--ta-muted);
        line-height: 1.5;
    }

    .ta-next-card span {
        color: var(--ta-orange);
        font-size: 12px;
        font-weight: 900;
    }

@media (max-width: 1100px) {
    .ta-login-page {
        grid-template-columns: 1fr;
    }

    .ta-login-side {
        display: none;
    }

    .ta-dashboard-grid,
    .ta-next-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ta-shell {
        grid-template-columns: 1fr;
    }

    .ta-sidebar {
        display: none;
    }

    .ta-topbar {
        height: auto;
        padding: 18px;
        align-items: flex-start;
        gap: 18px;
        flex-direction: column;
    }

    .ta-userbox {
        width: 100%;
        justify-content: space-between;
    }

    .ta-dashboard-grid,
    .ta-next-grid {
        grid-template-columns: 1fr;
    }

    .ta-login-page {
        padding: 18px;
    }

    .ta-login-card {
        padding: 24px;
    }
}
/* Employees pages */

.ta-page-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

    .ta-page-actions h2 {
        margin: 0;
        font-size: 28px;
        letter-spacing: -0.04em;
    }

    .ta-page-actions p {
        margin: 6px 0 0;
        color: var(--ta-muted);
    }

.ta-primary-link,
.ta-secondary-btn,
.ta-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    font-weight: 800;
    transition: 0.2s;
}

.ta-primary-link {
    background: var(--ta-primary);
    color: #ffffff;
    padding: 13px 16px;
}

    .ta-primary-link:hover {
        background: var(--ta-primary-dark);
    }

    .ta-primary-link small {
        opacity: 0.8;
        font-size: 11px;
    }

    .ta-primary-link.disabled,
    .ta-secondary-btn.disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ta-secondary-btn {
    border: 1px solid var(--ta-border);
    background: #ffffff;
    color: var(--ta-text);
    padding: 12px 15px;
}

    .ta-secondary-btn:hover {
        background: #f8fafc;
    }

.ta-small-btn {
    background: #eff6ff;
    color: var(--ta-primary);
    padding: 8px 12px;
    font-size: 13px;
}

    .ta-small-btn:hover {
        background: #dbeafe;
    }

.ta-list-panel {
    margin-bottom: 18px;
}

.ta-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 220px 170px auto auto;
    gap: 14px;
    align-items: end;
}

    .ta-filter-form select,
    .ta-form-group select {
        width: 100%;
        border: 1px solid var(--ta-border);
        border-radius: 14px;
        padding: 13px 14px;
        outline: none;
        font-size: 14px;
        background: #ffffff;
    }

.ta-filter-checkbox {
    min-height: 45px;
}

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

    .ta-table-header h3 {
        margin: 0;
        font-size: 20px;
    }

    .ta-table-header p {
        margin: 4px 0 0;
        color: var(--ta-muted);
    }

.ta-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ta-table {
    width: 100%;
    border-collapse: collapse;
}

    .ta-table th {
        text-align: left;
        color: var(--ta-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--ta-border);
        padding: 12px 10px;
    }

    .ta-table td {
        border-bottom: 1px solid var(--ta-border);
        padding: 14px 10px;
        vertical-align: middle;
    }

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

.ta-employee-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ta-employee-cell div:last-child {
        display: grid;
        gap: 3px;
    }

    .ta-employee-cell span,
    .ta-employee-cell small,
    .ta-muted-line {
        color: var(--ta-muted);
        font-size: 13px;
    }

.ta-mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff7ed;
    color: var(--ta-orange);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.ta-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.ta-badge-green {
    background: #ecfdf5;
    color: #047857;
}

.ta-badge-red {
    background: #fef2f2;
    color: #b91c1c;
}

.ta-table-actions {
    text-align: right;
}

.ta-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--ta-muted);
}

    .ta-empty-state h3 {
        margin: 0 0 6px;
        color: var(--ta-text);
    }

.ta-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ta-back-link {
    color: var(--ta-primary);
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    margin-bottom: 6px;
}

.ta-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ta-employee-summary-grid {
    margin-bottom: 22px;
}

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

.ta-detail-list {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px 18px;
    margin: 0;
}

    .ta-detail-list dt {
        color: var(--ta-muted);
        font-weight: 700;
    }

    .ta-detail-list dd {
        margin: 0;
        font-weight: 700;
        word-break: break-word;
    }

.ta-mono {
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    color: #334155;
}

@media (max-width: 1100px) {
    .ta-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .ta-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ta-page-actions {
        flex-direction: column;
    }

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

    .ta-detail-list {
        grid-template-columns: 1fr;
    }
}
/* Employee create/edit/actions */

.ta-alert-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.ta-alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.ta-employee-form {
    display: grid;
    gap: 24px;
}

.ta-form-section {
    border-bottom: 1px solid var(--ta-border);
    padding-bottom: 24px;
}

    .ta-form-section:last-of-type {
        border-bottom: 0;
    }

.ta-form-section-heading {
    margin-bottom: 16px;
}

    .ta-form-section-heading h3 {
        margin: 0;
        font-size: 20px;
        letter-spacing: -0.03em;
    }

    .ta-form-section-heading p {
        margin: 5px 0 0;
        color: var(--ta-muted);
    }

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

.ta-sticky-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--ta-border);
    padding: 16px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ta-inline-form {
    display: inline-flex;
}

.ta-danger-btn,
.ta-danger-outline-btn {
    border-radius: 14px;
    padding: 12px 15px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

.ta-danger-btn {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: white;
}

    .ta-danger-btn:hover {
        background: #b91c1c;
    }

.ta-danger-outline-btn {
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
}

    .ta-danger-outline-btn:hover {
        background: #fef2f2;
    }

.ta-narrow-panel {
    max-width: 560px;
}

@media (max-width: 820px) {
    .ta-form-grid {
        grid-template-columns: 1fr;
    }

    .ta-sticky-actions {
        position: static;
        flex-direction: column;
    }

        .ta-sticky-actions .ta-primary-btn,
        .ta-sticky-actions .ta-secondary-btn {
            width: 100%;
        }
}
/* Clock logs and timesheets */

.ta-filter-form-clocklogs {
    grid-template-columns: minmax(240px, 1fr) 150px 150px 150px 170px 170px 160px 160px auto auto;
}

.ta-filter-form-timesheets {
    grid-template-columns: minmax(260px, 1fr) 180px 150px 150px 170px auto auto;
}

.ta-badge-orange {
    background: #fff7ed;
    color: #c2410c;
}

.ta-small-btn-outline {
    background: #ffffff;
    border: 1px solid #bfdbfe;
}

.ta-timesheet-day {
    border: 1px solid var(--ta-border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 18px;
}

.ta-timesheet-day-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--ta-border);
    padding: 16px;
}

    .ta-timesheet-day-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .ta-timesheet-day-header p {
        margin: 5px 0 0;
        color: var(--ta-muted);
    }

@media (max-width: 1400px) {
    .ta-filter-form-clocklogs,
    .ta-filter-form-timesheets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ta-filter-form-clocklogs,
    .ta-filter-form-timesheets {
        grid-template-columns: 1fr;
    }
}
/* Settings and work locations */

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

.ta-setting-card {
    border: 1px solid var(--ta-border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    background: #ffffff;
    transition: 0.2s;
}

    .ta-setting-card:hover {
        border-color: #bfdbfe;
        background: #f8fafc;
    }

    .ta-setting-card input {
        margin-top: 4px;
        width: 18px;
        height: 18px;
    }

    .ta-setting-card span {
        display: grid;
        gap: 4px;
    }

    .ta-setting-card strong {
        font-size: 15px;
    }

    .ta-setting-card small {
        color: var(--ta-muted);
        line-height: 1.45;
    }

.ta-settings-summary {
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    padding: 16px;
}

    .ta-settings-summary h3 {
        margin: 0;
    }

    .ta-settings-summary p {
        margin: 6px 0;
        font-weight: 800;
    }

    .ta-settings-summary span {
        color: var(--ta-muted);
        font-size: 13px;
    }

.ta-field-validation {
    color: var(--ta-danger);
    font-size: 13px;
    display: inline-flex;
    margin-top: 8px;
}

.ta-filter-form-worklocations {
    grid-template-columns: minmax(280px, 1fr) 180px auto auto;
}

.ta-map-help {
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 13px;
}

.ta-map-link {
    color: var(--ta-primary);
    font-weight: 900;
}

@media (max-width: 900px) {
    .ta-settings-grid,
    .ta-filter-form-worklocations {
        grid-template-columns: 1fr;
    }
}

/* Attendance review queue */

.ta-review-queue-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    background: #fffaf0;
    border-color: #fed7aa;
}

    .ta-review-queue-summary h3 {
        margin: 6px 0 0;
        font-size: 21px;
    }

    .ta-review-queue-summary p {
        margin: 7px 0 0;
        max-width: 760px;
        color: #7c2d12;
        line-height: 1.55;
    }

.ta-review-decision-panel {
    margin-bottom: 22px;
    border-color: #fed7aa;
}

.ta-review-form {
    display: grid;
    gap: 16px;
}

.ta-form-group textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    border: 1px solid var(--ta-border);
    border-radius: 14px;
    padding: 13px 14px;
    outline: none;
    font-size: 14px;
    line-height: 1.45;
    background: #ffffff;
}

    .ta-form-group textarea:focus {
        border-color: var(--ta-primary);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

.ta-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ta-review-reason-cell {
    min-width: 240px;
    color: #7c2d12;
    line-height: 1.45;
}

@media (max-width: 820px) {
    .ta-review-queue-summary {
        flex-direction: column;
    }

    .ta-review-actions {
        flex-direction: column;
    }

        .ta-review-actions .ta-primary-btn,
        .ta-review-actions .ta-danger-btn {
            width: 100%;
        }
}



/* Attendance adjustments */

.ta-adjustment-panel {
    max-width: 980px;
}

.ta-adjustment-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #eff6ff;
}

    .ta-adjustment-summary h3 {
        margin: 6px 0 0;
        font-size: 20px;
    }

    .ta-adjustment-summary p {
        margin: 8px 0 0;
        max-width: 720px;
        color: #1e3a5f;
        line-height: 1.55;
    }

.ta-adjustment-form {
    display: grid;
    gap: 20px;
}

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

.ta-adjustment-full-width {
    grid-column: 1 / -1;
}

.ta-form-group .ta-adjustment-help {
    color: var(--ta-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ta-adjustment-warning {
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 16px;
    background: #fffbeb;
    color: #92400e;
    line-height: 1.5;
    font-size: 13px;
}

@media (max-width: 820px) {
    .ta-adjustment-summary,
    .ta-adjustment-form-grid {
        grid-template-columns: 1fr;
    }

    .ta-adjustment-summary {
        flex-direction: column;
    }

    .ta-adjustment-full-width {
        grid-column: auto;
    }
}

/* Fixed, collapsible admin navigation */

.ta-admin-body {
    height: 100dvh;
    overflow: hidden;
}

.ta-shell {
    min-height: 100dvh;
    height: 100dvh;
    grid-template-columns: 280px minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns 0.22s ease;
}

.ta-shell.ta-sidebar-collapsed {
    grid-template-columns: 82px minmax(0, 1fr);
}

.ta-sidebar {
    position: relative;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(203, 213, 225, 0.42) transparent;
    padding: 20px 16px;
    transition: width 0.22s ease, padding 0.22s ease, transform 0.22s ease;
}

.ta-sidebar::-webkit-scrollbar {
    width: 8px;
}

.ta-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(203, 213, 225, 0.34);
}

.ta-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ta-brand {
    min-width: 0;
    flex: 1 1 auto;
    padding-bottom: 20px;
}

.ta-brand-copy {
    min-width: 0;
}

.ta-sidebar-collapse-btn,
.ta-topbar-menu-btn {
    border: 0;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: 0.18s ease;
}

.ta-sidebar-collapse-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-bottom: 20px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
    font-size: 23px;
    line-height: 1;
}

.ta-sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.ta-nav-link {
    justify-content: flex-start;
    gap: 12px;
    position: relative;
}

.ta-nav-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.ta-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-nav-badge {
    margin-left: auto;
}

.ta-main {
    height: 100dvh;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.ta-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 auto;
}

.ta-topbar-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.ta-topbar-menu-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--ta-border);
    border-radius: 13px;
    background: #ffffff;
    color: #1e293b;
    font-size: 20px;
}

.ta-topbar-menu-btn:hover {
    background: #f8fafc;
    border-color: #bfdbfe;
    color: var(--ta-primary);
}

.ta-content {
    flex: 0 0 auto;
}

.ta-content-full-bleed {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    padding: 0;
}

.ta-sidebar-overlay {
    display: none;
}

@media (min-width: 901px) {
    .ta-shell.ta-sidebar-collapsed .ta-sidebar {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ta-shell.ta-sidebar-collapsed .ta-brand {
        justify-content: center;
        padding-bottom: 20px;
    }

    .ta-shell.ta-sidebar-collapsed .ta-brand-copy,
    .ta-shell.ta-sidebar-collapsed .ta-nav-label,
    .ta-shell.ta-sidebar-collapsed .ta-nav-badge {
        display: none;
    }

    .ta-shell.ta-sidebar-collapsed .ta-sidebar-header {
        display: grid;
        justify-items: center;
        gap: 12px;
    }

    .ta-shell.ta-sidebar-collapsed .ta-sidebar-collapse-btn {
        margin-bottom: 0;
        transform: rotate(180deg);
    }

    .ta-shell.ta-sidebar-collapsed .ta-nav-link {
        justify-content: center;
        padding: 12px;
    }

    .ta-shell.ta-sidebar-collapsed .ta-nav-link:hover::after {
        position: absolute;
        z-index: 200;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 10px;
        border-radius: 10px;
        background: #0f172a;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
        color: #ffffff;
        content: attr(data-nav-label);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        pointer-events: none;
    }
}

/* Live attendance command map */

.ta-live-attendance-dashboard,
.ta-live-map-shell,
.ta-live-map {
    width: 100%;
    height: 100%;
}

.ta-live-map-shell {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background: #dce9f7;
}

.ta-live-map {
    z-index: 1;
    background: #dce9f7;
}

.ta-live-map .leaflet-control-zoom {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.ta-live-map .leaflet-control-zoom a {
    width: 38px;
    height: 38px;
    border-bottom-color: #e2e8f0;
    color: #1e293b;
    font-size: 22px;
    line-height: 38px;
}

.ta-live-map .leaflet-control-attribution {
    border-radius: 10px 0 0 0;
    background: rgba(255, 255, 255, 0.88);
    color: #64748b;
    font-size: 10px;
}

.ta-live-map-loading {
    position: absolute;
    z-index: 700;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translate(-50%, -50%);
    padding: 13px 16px;
    border: 1px solid #dbeafe;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    color: #1e3a5f;
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.ta-live-map-loading.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.ta-live-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #bfdbfe;
    border-top-color: var(--ta-primary);
    border-radius: 50%;
    animation: ta-live-spin 0.75s linear infinite;
}

@keyframes ta-live-spin {
    to {
        transform: rotate(360deg);
    }
}

.ta-live-map-toolbar,
.ta-live-kpi-strip,
.ta-live-attendance-panel,
.ta-live-panel-launcher,
.ta-live-map-legend {
    position: absolute;
    z-index: 650;
}

.ta-live-map-toolbar {
    top: 22px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15);
    backdrop-filter: blur(12px);
}

.ta-live-kicker {
    display: block;
    color: var(--ta-orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ta-live-map-toolbar h2,
.ta-live-attendance-panel h2 {
    margin: 5px 0 0;
    color: #0f172a;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.ta-live-map-toolbar p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.ta-live-map-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 9px;
}

.ta-live-map-action-btn {
    min-height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    padding: 9px 12px;
}

.ta-live-map-action-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-live-map-action-primary {
    border-color: var(--ta-primary);
    background: var(--ta-primary);
    color: #ffffff;
}

.ta-live-map-action-primary:hover {
    border-color: var(--ta-primary-dark);
    background: var(--ta-primary-dark);
    color: #ffffff;
}

.ta-live-kpi-strip {
    top: 138px;
    left: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px;
    max-width: min(760px, calc(100% - 44px));
}

.ta-live-kpi-card {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.11);
    color: #334155;
    padding: 13px 14px;
    text-align: left;
}

button.ta-live-kpi-card {
    cursor: pointer;
}

button.ta-live-kpi-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.ta-live-kpi-card span,
.ta-live-kpi-card small {
    display: block;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.ta-live-kpi-card strong {
    display: block;
    margin: 4px 0 3px;
    color: #0f172a;
    font-size: 22px;
    letter-spacing: -0.04em;
}

.ta-live-kpi-card-attention strong {
    color: #b45309;
}

.ta-live-attendance-panel {
    top: 210px;
    right: 22px;
    bottom: 22px;
    display: flex;
    width: min(390px, calc(100% - 44px));
    min-height: 260px;
    flex-direction: column;
    transform: translateX(calc(100% + 32px));
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
    backdrop-filter: blur(12px);
}

.ta-live-attendance-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.ta-live-attendance-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 19px 19px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.ta-live-attendance-panel-header h2 {
    max-width: 290px;
    font-size: 18px;
}

.ta-live-panel-close {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    font-size: 23px;
    line-height: 1;
}

.ta-live-panel-close:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: var(--ta-primary);
}

.ta-live-attendance-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 13px 17px 10px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.ta-live-attendance-list {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    gap: 10px;
    overflow-y: auto;
    padding: 0 15px 15px;
}

.ta-live-employee-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    transition: 0.18s ease;
}

.ta-live-employee-row:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    transform: translateY(-1px);
}

.ta-live-employee-row.has-attention {
    border-color: #fdba74;
    background: #fffaf2;
}

.ta-live-employee-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}

.ta-live-employee-body {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.ta-live-employee-name-row,
.ta-live-employee-chips {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ta-live-employee-name-row strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-live-employee-location,
.ta-live-employee-metadata {
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-live-employee-metadata {
    color: #64748b;
}

.ta-live-duration {
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 900;
    padding: 6px 8px;
    white-space: nowrap;
}

.ta-live-source-chip,
.ta-live-gps-chip,
.ta-live-manual-chip,
.ta-live-attention-chip {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 6px;
}

.ta-live-source-chip {
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-live-gps-chip {
    background: #f1f5f9;
    color: #475569;
}

.ta-live-manual-chip {
    background: #fff7ed;
    color: #c2410c;
}

.ta-live-attention-chip {
    background: #fff7ed;
    color: #b45309;
}

.ta-live-attention-reason {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: #9a3412;
    font-size: 11px;
    line-height: 1.4;
}

.ta-live-attendance-empty {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 220px;
    gap: 7px;
    padding: 24px;
    color: #64748b;
    text-align: center;
}

.ta-live-attendance-empty strong {
    color: #0f172a;
}

.ta-live-panel-launcher {
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    color: #1e3a5f;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 15px;
}

.ta-live-panel-launcher:hover {
    background: #eff6ff;
}

.ta-live-panel-launcher.is-hidden {
    display: none;
}

.ta-live-map-legend {
    left: 22px;
    bottom: 22px;
    display: grid;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.ta-live-map-legend div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ta-map-legend-ring {
    width: 14px;
    height: 14px;
    border: 2px solid #2563eb;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
}

.ta-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.ta-status-dot-green {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.ta-status-dot-red {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13);
}

.ta-leaflet-location-icon {
    background: transparent;
    border: 0;
}

.ta-live-location-marker {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 8px;
    background: #2563eb;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.28);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    transform: rotate(-45deg);
}

.ta-live-location-marker::after {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    content: "";
}

.ta-live-location-marker span {
    position: relative;
    z-index: 1;
    transform: rotate(45deg);
}

.ta-live-location-marker.has-live-staff {
    background: #16a34a;
}

.ta-live-location-marker.is-inactive {
    background: #64748b;
}

.ta-live-location-tooltip,
.ta-live-location-popup-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ta-live-location-tooltip .leaflet-tooltip-content,
.ta-live-location-popup-shell .leaflet-popup-content-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
    color: #0f172a;
}

.ta-live-location-tooltip .leaflet-tooltip-content {
    margin: 0;
    padding: 0;
}

.ta-live-location-tooltip::before {
    border-top-color: #ffffff;
}

.ta-live-location-popup-shell .leaflet-popup-content {
    margin: 0;
}

.ta-live-location-popup-shell .leaflet-popup-tip {
    background: #ffffff;
}

.ta-live-location-popup-shell .leaflet-popup-close-button {
    top: 7px;
    right: 8px;
    color: #64748b;
    font-size: 20px;
}

.ta-live-location-popup {
    min-width: 254px;
    padding: 14px;
}

.ta-live-location-popup-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-right: 18px;
}

.ta-live-location-popup-title-row strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
}

.ta-live-location-popup-title-row span:not(.ta-live-radius-pill) {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}

.ta-live-radius-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 900;
    padding: 5px 7px;
    white-space: nowrap;
}

.ta-live-location-popup p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.ta-live-location-stats {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #e2e8f0;
}

.ta-live-location-stats div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 12px;
}

.ta-live-location-stats div:first-child {
    grid-template-columns: 1fr auto;
}

.ta-live-location-stats strong {
    color: #0f172a;
    font-size: 13px;
}

.ta-live-noscript {
    margin: 18px;
    padding: 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
    color: #991b1b;
}

@media (max-width: 1200px) {
    .ta-live-kpi-strip {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
        max-width: 430px;
    }

    .ta-live-attendance-panel {
        top: 296px;
    }
}

@media (max-width: 900px) {
    .ta-admin-body {
        overflow: hidden;
    }

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

    .ta-sidebar {
        position: fixed;
        z-index: 220;
        top: 0;
        left: 0;
        display: block;
        width: 280px;
        max-width: calc(100vw - 40px);
        transform: translateX(-110%);
        box-shadow: 18px 0 42px rgba(15, 23, 42, 0.32);
    }

    .ta-shell.ta-sidebar-mobile-open .ta-sidebar {
        transform: translateX(0);
    }

    .ta-sidebar-overlay {
        position: fixed;
        z-index: 210;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(15, 23, 42, 0.52);
        cursor: pointer;
    }

    .ta-shell.ta-sidebar-mobile-open .ta-sidebar-overlay {
        display: block;
    }

    .ta-topbar {
        min-height: 78px;
        height: auto;
        padding: 14px 18px;
        align-items: center;
        flex-direction: row;
    }

    .ta-topbar-heading {
        gap: 10px;
    }

    .ta-topbar h1 {
        overflow: hidden;
        font-size: 21px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ta-userbox {
        margin-left: auto;
        width: auto;
    }

    .ta-user-meta {
        display: none;
    }

    .ta-logout-btn {
        padding: 9px 11px;
        font-size: 12px;
    }

    .ta-content-full-bleed {
        min-height: 0;
    }

    .ta-live-map-shell {
        min-height: 680px;
    }

    .ta-live-map-toolbar {
        top: 12px;
        right: 12px;
        left: 12px;
        display: grid;
        gap: 12px;
        padding: 15px;
    }

    .ta-live-map-toolbar h2 {
        font-size: 18px;
    }

    .ta-live-map-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ta-live-map-action-btn {
        width: 100%;
    }

    .ta-live-kpi-strip {
        top: 212px;
        right: 12px;
        left: 12px;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-live-attendance-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 66%;
        min-height: 300px;
        border-radius: 22px 22px 0 0;
        transform: translateY(110%);
    }

    .ta-live-attendance-panel.is-open {
        transform: translateY(0);
    }

    .ta-live-panel-launcher {
        right: 12px;
        bottom: 12px;
    }

    .ta-live-map-legend {
        bottom: 12px;
        left: 12px;
        max-width: calc(100% - 160px);
    }
}

@media (max-width: 560px) {
    .ta-topbar .ta-avatar {
        display: none;
    }

    .ta-topbar-menu-btn {
        width: 38px;
        height: 38px;
    }

    .ta-live-map-shell {
        min-height: 650px;
    }

    .ta-live-map-toolbar p {
        font-size: 12px;
    }

    .ta-live-kpi-card {
        padding: 11px;
    }

    .ta-live-kpi-card strong {
        font-size: 20px;
    }

    .ta-live-map-legend {
        display: none;
    }

    .ta-live-mileage-operations {
        right: 10px;
        bottom: 70px;
        left: 10px;
    }
}


/* Attendance alerts */

.ta-nav-alert-badge {
    min-width: 22px;
    justify-content: center;
    background: #fee2e2;
    color: #b91c1c !important;
}

.ta-live-map-alert-link {
    gap: 8px;
}

.ta-live-map-alert-count {
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    line-height: 1;
}

.ta-alert-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ta-alert-summary-card {
    min-height: 142px;
    padding: 20px;
    border: 1px solid var(--ta-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    display: grid;
    align-content: start;
    gap: 7px;
}

.ta-alert-summary-card span,
.ta-alert-summary-card small {
    color: var(--ta-muted);
    font-size: 13px;
}

.ta-alert-summary-card strong {
    color: #0f172a;
    font-size: 30px;
    letter-spacing: -0.05em;
}

.ta-alert-summary-card-primary {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.ta-alert-summary-card-warning {
    border-color: #fde68a;
    background: linear-gradient(135deg, #ffffff, #fffbeb);
}

.ta-alert-summary-card-danger {
    border-color: #fecaca;
    background: linear-gradient(135deg, #ffffff, #fef2f2);
}

.ta-attendance-alerts-panel {
    margin-bottom: 22px;
}

.ta-alert-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin: -2px 0 18px;
}

.ta-alert-filter-toggle {
    flex: 1 1 270px;
    min-height: 0;
    padding: 13px 15px;
}

.ta-alert-filter-form > .ta-secondary-btn {
    align-self: center;
}

.ta-alert-scheduling-note {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.55;
}

.ta-attendance-alert-list {
    display: grid;
    gap: 16px;
}

.ta-attendance-alert-card {
    padding: 20px;
    border: 1px solid var(--ta-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.ta-attendance-alert-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ta-attendance-alert-title-block {
    display: grid;
    gap: 5px;
}

.ta-attendance-alert-title-block h3 {
    margin: 1px 0 0;
    color: #0f172a;
    font-size: 20px;
    letter-spacing: -0.03em;
}

.ta-attendance-alert-title-block p {
    margin: 0;
    color: var(--ta-muted);
    font-size: 13px;
}

.ta-alert-severity,
.ta-alert-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ta-alert-severity-high {
    background: #fee2e2;
    color: #b91c1c;
}

.ta-alert-severity-critical {
    background: #7f1d1d;
    color: #ffffff;
}

.ta-alert-severity-warning {
    background: #ffedd5;
    color: #c2410c;
}

.ta-alert-state-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-alert-state-acknowledged {
    background: #fef3c7;
    color: #92400e;
}

.ta-alert-state-resolved {
    background: #dcfce7;
    color: #15803d;
}

.ta-attendance-alert-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.ta-attendance-alert-detail-grid > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ta-attendance-alert-detail-grid span,
.ta-attendance-alert-detail-grid small {
    color: var(--ta-muted);
    font-size: 12px;
}

.ta-attendance-alert-detail-grid strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-attendance-alert-reason {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 15px;
    background: #fffbeb;
}

.ta-attendance-alert-reason span {
    color: #92400e;
    font-size: 12px;
    font-weight: 900;
}

.ta-attendance-alert-reason p {
    margin: 6px 0 0;
    color: #78350f;
    line-height: 1.5;
}

.ta-alert-history-note {
    display: grid;
    gap: 5px;
    margin-top: 15px;
    padding: 14px 16px;
    border-radius: 15px;
    font-size: 13px;
}

.ta-alert-history-note strong {
    font-size: 13px;
}

.ta-alert-history-note small {
    color: var(--ta-muted);
}

.ta-alert-history-note-acknowledged {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #78350f;
}

.ta-alert-history-note-resolved {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.ta-alert-action-form {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ta-border);
}

.ta-alert-action-form label {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.ta-alert-action-form textarea {
    min-height: 86px;
    width: 100%;
    resize: vertical;
    border: 1px solid var(--ta-border);
    border-radius: 14px;
    padding: 12px 13px;
    outline: none;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
}

.ta-alert-action-form textarea:focus {
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ta-alert-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.ta-pagination-status {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--ta-muted);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1120px) {
    .ta-alert-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-attendance-alert-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ta-alert-summary-grid,
    .ta-attendance-alert-detail-grid {
        grid-template-columns: 1fr;
    }

    .ta-attendance-alert-card-header {
        flex-direction: column;
    }

    .ta-alert-filter-form,
    .ta-alert-action-buttons {
        flex-direction: column;
    }

    .ta-alert-filter-form > .ta-secondary-btn,
    .ta-alert-action-buttons > button {
        width: 100%;
    }
}


/* Timesheet approval, locking and payroll export */
.ta-badge-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-timesheet-period-panel {
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border: 1px solid #bfdbfe;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    padding: 22px;
    margin-bottom: 22px;
}

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

.ta-timesheet-period-header h2 {
    margin: 4px 0 0;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.ta-timesheet-period-header p {
    margin: 7px 0 0;
    color: var(--ta-muted);
    line-height: 1.5;
    max-width: 850px;
}

.ta-timesheet-period-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ta-timesheet-period-meta div {
    background: #ffffff;
    border: 1px solid var(--ta-border);
    border-radius: 15px;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.ta-timesheet-period-meta span {
    color: var(--ta-muted);
    font-size: 12px;
    font-weight: 700;
}

.ta-timesheet-period-meta strong {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ta-timesheet-note {
    display: grid;
    gap: 5px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 12px;
    margin-top: 10px;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.45;
}

.ta-timesheet-note-warning {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.ta-timesheet-workflow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
    align-items: start;
}

.ta-timesheet-action-form {
    display: grid;
    gap: 9px;
    background: #ffffff;
    border: 1px solid var(--ta-border);
    border-radius: 16px;
    padding: 14px;
}

.ta-timesheet-action-form label {
    font-size: 13px;
    font-weight: 800;
}

.ta-timesheet-action-form textarea {
    min-height: 86px;
    width: 100%;
    resize: vertical;
    border: 1px solid var(--ta-border);
    border-radius: 12px;
    padding: 11px 12px;
    font: inherit;
    color: var(--ta-text);
}

.ta-timesheet-action-form textarea:focus {
    outline: none;
    border-color: var(--ta-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ta-timesheet-lock-form {
    border-color: #86efac;
}

.ta-timesheet-unlock-form {
    border-color: #fecaca;
}

.ta-lock-btn {
    background: #047857;
}

.ta-lock-btn:hover {
    background: #065f46;
}

@media (max-width: 1000px) {
    .ta-timesheet-period-meta,
    .ta-timesheet-workflow-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .ta-timesheet-period-panel {
        padding: 16px;
    }

    .ta-timesheet-period-header {
        flex-direction: column;
    }

    .ta-timesheet-period-meta,
    .ta-timesheet-workflow-actions {
        grid-template-columns: 1fr;
    }
}

/* Timesheet payroll PDF and UK date entry */

.ta-field-help {
    display: block;
    margin-top: 5px;
    color: var(--ta-muted);
    font-size: 11px;
    line-height: 1.35;
}

.ta-timesheet-period-scope {
    display: grid;
    gap: 5px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.45;
}

.ta-timesheet-period-scope strong {
    font-weight: 900;
}

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

@media (max-width: 650px) {
    .ta-timesheet-export-actions,
    .ta-timesheet-export-actions .ta-inline-form,
    .ta-timesheet-export-actions .ta-primary-btn,
    .ta-timesheet-export-actions .ta-secondary-btn {
        width: 100%;
    }
}
.ta-uk-date-time-cell {
    white-space: nowrap;
}
.ta-uk-date-time-nowrap {
    white-space: nowrap;
}
.ta-uk-date-time-nowrap {
    display: block;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.ta-timesheet-date-time-cell {
    white-space: nowrap;
}


/* ================================================================
   Exhale HR – secure admin sign-in and brand chrome
   ================================================================ */

.ta-login-body {
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: #eef4ff;
}

.exhale-login-shell {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(12px, 2.5vw, 42px);
    background:
        radial-gradient(circle at 7% 11%, rgba(24, 91, 236, 0.16), transparent 25rem),
        radial-gradient(circle at 93% 87%, rgba(255, 111, 29, 0.14), transparent 28rem),
        linear-gradient(135deg, #f9fbff 0%, #f4f8ff 47%, #eef5ff 100%);
}

.exhale-login-light,
.exhale-login-grid-pattern {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.exhale-login-light {
    width: clamp(260px, 26vw, 460px);
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(4px);
    opacity: 0.62;
    animation: exhale-login-drift 12s ease-in-out infinite alternate;
}

.exhale-login-light-one {
    top: -14%;
    left: -8%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.26), rgba(37, 99, 235, 0));
}

.exhale-login-light-two {
    right: -8%;
    bottom: -18%;
    background: radial-gradient(circle, rgba(255, 107, 43, 0.25), rgba(255, 107, 43, 0));
    animation-delay: -5s;
}

.exhale-login-grid-pattern {
    inset: 0;
    opacity: 0.31;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 54%);
}

.exhale-login-frame {
    width: min(880px, 94%);
    min-height: min(560px, calc(100dvh - clamp(24px, 5vw, 84px)));
    display: grid;
    grid-template-columns: minmax(330px, 0.86fr) minmax(360px, 1.14fr);
    overflow: hidden;
    border: 1px solid rgba(202, 215, 238, 0.78);
    border-radius: clamp(18px, 1.6vw, 24px);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 34px 100px rgba(37, 69, 127, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.exhale-login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(24px, 2.6vw, 38px);
    background: rgba(255, 255, 255, 0.94);
}

.exhale-login-brand {
    display: inline-flex;
    align-self: flex-start;
    width: min(100%, 168px);
    margin-bottom: clamp(16px, 1.8vw, 26px);
    outline: none;
}

.exhale-login-brand:focus-visible {
    border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.exhale-login-wordmark {
    display: block;
    width: 100%;
    height: auto;
}

.exhale-login-intro {
    max-width: 510px;
}

.exhale-login-eyebrow,
.exhale-showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2663db;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.115em;
    text-transform: uppercase;
}

.exhale-login-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff7a18;
    box-shadow: 0 0 0 5px rgba(255, 122, 24, 0.12);
}

.exhale-login-intro h1 {
    max-width: 500px;
    margin: 15px 0 12px;
    color: #0c1f48;
    font-size: clamp(1.6rem, 1.9vw, 2.05rem);
    font-weight: 860;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.exhale-login-intro p {
    max-width: 500px;
    margin: 0;
    color: #667798;
    font-size: clamp(0.85rem, 0.9vw, 0.92rem);
    line-height: 1.65;
}

.exhale-login-alert,
.exhale-login-validation {
    margin-top: 23px;
    border-radius: 15px;
    font-size: 0.86rem;
    line-height: 1.48;
}

.exhale-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b42318;
}

.exhale-login-alert svg {
    width: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-validation {
    color: #b42318;
}

.exhale-login-validation:empty {
    display: none;
}

.exhale-login-validation ul {
    margin: 0;
    padding: 11px 14px 11px 31px;
    border: 1px solid #fecaca;
    border-radius: 15px;
    background: #fff7f7;
}

.exhale-login-form {
    display: grid;
    gap: 19px;
    max-width: 510px;
    margin-top: 30px;
}

.exhale-login-field {
    display: grid;
    gap: 8px;
}

.exhale-login-field > label {
    color: #16284c;
    font-size: 0.82rem;
    font-weight: 800;
}

.exhale-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.exhale-input-icon {
    position: absolute;
    left: 15px;
    z-index: 1;
    width: 20px;
    height: 20px;
    color: #7c8aa5;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #d7e0ef;
    border-radius: 13px;
    outline: none;
    background: #fbfdff;
    color: #0c1f48;
    padding: 0 50px 0 49px;
    font-size: 0.95rem;
    font-weight: 560;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.exhale-login-input::placeholder {
    color: #a0acc2;
    font-weight: 450;
}

.exhale-login-input:hover {
    border-color: #bac9e2;
}

.exhale-login-input:focus {
    border-color: #2463e8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(36, 99, 232, 0.12);
}

.exhale-password-input {
    padding-right: 56px;
}

.exhale-password-toggle {
    position: absolute;
    right: 8px;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #5e7090;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.exhale-password-toggle:hover {
    background: #edf3ff;
    color: #1d59d9;
}

.exhale-password-toggle:focus-visible {
    outline: 3px solid rgba(36, 99, 232, 0.2);
    outline-offset: 1px;
}

.exhale-password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-eye-closed {
    display: none;
}

.exhale-password-toggle.is-visible .exhale-eye-open {
    display: none;
}

.exhale-password-toggle.is-visible .exhale-eye-closed {
    display: block;
}

.exhale-field-validation {
    min-height: 1.05em;
    color: #c1261e;
    font-size: 0.79rem;
    font-weight: 650;
}

.exhale-remember-choice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 11px;
    align-items: start;
    cursor: pointer;
    user-select: none;
}

.exhale-remember-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.exhale-remember-checkbox {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    margin-top: 1px;
    border: 1.5px solid #b9c7de;
    border-radius: 6px;
    background: #ffffff;
    color: #ffffff;
    transition: 0.16s ease;
}

.exhale-remember-checkbox svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.7);
    transition: 0.16s ease;
}

.exhale-remember-choice input:checked + .exhale-remember-checkbox {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.24);
}

.exhale-remember-choice input:checked + .exhale-remember-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

.exhale-remember-choice input:focus-visible + .exhale-remember-checkbox {
    outline: 3px solid rgba(36, 99, 232, 0.2);
    outline-offset: 2px;
}

.exhale-remember-copy {
    display: grid;
    gap: 3px;
}

.exhale-remember-copy strong {
    color: #23385f;
    font-size: 0.84rem;
    line-height: 1.3;
}

.exhale-remember-copy small {
    color: #7d8ca7;
    font-size: 0.75rem;
    line-height: 1.42;
}

.exhale-login-submit {
    position: relative;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(105deg, #1558de 0%, #246bef 52%, #0c47be 100%);
    box-shadow: 0 13px 24px rgba(18, 86, 222, 0.24);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 820;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.exhale-login-submit::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.25) 48%, transparent 74%);
    content: "";
    transform: translateX(-135%);
    transition: transform 0.55s ease;
}

.exhale-login-submit:hover:not(:disabled) {
    box-shadow: 0 18px 32px rgba(18, 86, 222, 0.3);
    filter: saturate(1.06);
    transform: translateY(-1px);
}

.exhale-login-submit:hover:not(:disabled)::before {
    transform: translateX(135%);
}

.exhale-login-submit:focus-visible {
    outline: 4px solid rgba(36, 99, 232, 0.22);
    outline-offset: 3px;
}

.exhale-login-submit:disabled {
    cursor: wait;
    opacity: 0.78;
}

.exhale-login-submit > span,
.exhale-login-submit > svg {
    position: relative;
    z-index: 1;
}

.exhale-login-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-submit-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: exhale-spin 0.7s linear infinite;
}

.exhale-login-submit.is-submitting svg {
    display: none;
}

.exhale-login-submit.is-submitting .exhale-login-submit-spinner {
    display: inline-block;
}

.exhale-login-trust-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 520px;
    margin-top: 24px;
    color: #7d8ca7;
    font-size: 0.75rem;
    line-height: 1.48;
}

.exhale-login-trust-line svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 1px;
    color: #2663db;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-login-showcase {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(26px, 3vw, 42px);
    color: #ffffff;
    background:
        radial-gradient(circle at 78% 12%, rgba(52, 127, 255, 0.38), transparent 30%),
        radial-gradient(circle at 19% 82%, rgba(255, 116, 27, 0.16), transparent 29%),
        linear-gradient(145deg, #061432 0%, #0d2a67 48%, #0a1e47 100%);
}

.exhale-login-showcase::after {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 65%);
    pointer-events: none;
}

.exhale-showcase-topline,
.exhale-showcase-copy,
.exhale-showcase-art,
.exhale-showcase-feature-row {
    position: relative;
    z-index: 1;
}

.exhale-showcase-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #b9cbef;
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.exhale-showcase-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.exhale-showcase-status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #53d696;
    box-shadow: 0 0 0 5px rgba(83, 214, 150, 0.15);
}

.exhale-showcase-release {
    padding: 7px 10px;
    border: 1px solid rgba(186, 211, 255, 0.2);
    border-radius: 999px;
    color: #d9e7ff;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.64rem;
}

.exhale-showcase-copy {
    max-width: 650px;
    margin-top: clamp(36px, 5vw, 70px);
}

.exhale-showcase-copy .exhale-showcase-kicker {
    color: #75a8ff;
}

.exhale-showcase-copy h2 {
    max-width: 700px;
    margin: 14px 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    font-weight: 830;
    letter-spacing: -0.067em;
    line-height: 0.98;
}

.exhale-showcase-copy p {
    max-width: 610px;
    margin: 0;
    color: #c9d8f2;
    font-size: clamp(0.89rem, 1.05vw, 1rem);
    line-height: 1.65;
}

.exhale-showcase-art {
    display: grid;
    min-height: 335px;
    flex: 1;
    place-items: center;
    margin: clamp(15px, 2.8vw, 34px) -3% 0;
}

.exhale-showcase-dashboard {
    position: relative;
    z-index: 3;
    width: min(109%, 900px);
    max-height: min(47vh, 490px);
    object-fit: contain;
    filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.3));
    animation: exhale-dashboard-float 7.5s ease-in-out infinite;
}

.exhale-showcase-glow {
    position: absolute;
    z-index: 0;
    width: min(72%, 570px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(87, 139, 255, 0.45), rgba(21, 75, 176, 0.02) 68%);
    filter: blur(4px);
}

.exhale-showcase-orbit {
    position: absolute;
    z-index: 1;
    border: 1px dashed rgba(133, 175, 255, 0.5);
    border-radius: 50%;
    animation: exhale-orbit 23s linear infinite;
}

.exhale-showcase-orbit::after {
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff821f;
    box-shadow: 0 0 0 5px rgba(255, 130, 31, 0.12);
    content: "";
}

.exhale-showcase-orbit-large {
    width: min(82%, 635px);
    aspect-ratio: 1;
}

.exhale-showcase-orbit-small {
    width: min(56%, 438px);
    aspect-ratio: 1;
    border-color: rgba(91, 151, 255, 0.37);
    animation-direction: reverse;
    animation-duration: 18s;
}

.exhale-showcase-mini-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    padding: 10px 13px;
    border: 1px solid rgba(223, 236, 255, 0.26);
    border-radius: 15px;
    background: rgba(6, 25, 62, 0.68);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(13px);
    animation: exhale-mini-float 6.5s ease-in-out infinite;
}

.exhale-showcase-mini-card img {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    object-fit: cover;
}

.exhale-showcase-mini-card span:last-child {
    display: grid;
    gap: 2px;
}

.exhale-showcase-mini-card strong {
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1.2;
}

.exhale-showcase-mini-card small {
    color: #bad0f5;
    font-size: 0.64rem;
}

.exhale-showcase-mini-card-top {
    top: 11%;
    right: 2%;
}

.exhale-showcase-mini-card-bottom {
    bottom: 8%;
    left: 2%;
    animation-delay: -3s;
}

.exhale-showcase-check {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #ff7a18, #ff9d38);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
}

.exhale-showcase-feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(187, 212, 255, 0.18);
    color: #c6d7f4;
    font-size: 0.71rem;
    font-weight: 650;
    line-height: 1.4;
}

.exhale-showcase-feature-row span {
    display: grid;
    gap: 5px;
}

.exhale-showcase-feature-row b {
    color: #ff8a2b;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.ta-brand-icon {
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.ta-brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes exhale-login-drift {
    from { transform: translate3d(-2%, -2%, 0) scale(0.94); }
    to { transform: translate3d(6%, 7%, 0) scale(1.08); }
}

@keyframes exhale-dashboard-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
    50% { transform: translate3d(0, -12px, 0) rotate(0.55deg); }
}

@keyframes exhale-orbit {
    to { transform: rotate(360deg); }
}

@keyframes exhale-mini-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

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

@media (max-width: 1120px) {
    .exhale-login-frame {
        grid-template-columns: minmax(390px, 0.94fr) minmax(480px, 1.06fr);
    }

    .exhale-login-showcase,
    .exhale-login-card {
        padding: 42px;
    }

    .exhale-showcase-mini-card {
        transform: scale(0.9);
    }
}

@media (max-width: 940px) {
    .exhale-login-shell {
        padding: 18px;
    }

    .exhale-login-frame {
        display: block;
        width: min(660px, 100%);
        min-height: 0;
    }

    .exhale-login-showcase {
        display: none;
    }

    .exhale-login-card {
        min-height: min(620px, calc(100dvh - 36px));
        padding: clamp(26px, 5vw, 44px);
    }
}

@media (max-width: 560px) {
    .exhale-login-shell {
        display: block;
        padding: 0;
    }

    .exhale-login-frame {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .exhale-login-card {
        min-height: 100dvh;
        padding: 32px 23px 28px;
    }

    .exhale-login-brand {
        width: min(100%, 240px);
        margin-bottom: 36px;
    }

    .exhale-login-intro h1 {
        font-size: 2.2rem;
    }

    .exhale-login-form {
        margin-top: 26px;
    }

    .exhale-login-trust-line {
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exhale-login-light,
    .exhale-showcase-dashboard,
    .exhale-showcase-orbit,
    .exhale-showcase-mini-card,
    .exhale-login-submit::before,
    .exhale-login-submit-spinner {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* Phase 10C — Admin navigation and account security UI */

.ta-admin-body {
    background: #f5f7fb;
}

.ta-shell {
    grid-template-columns: 276px minmax(0, 1fr);
}

.ta-sidebar {
    padding: 18px 14px 22px;
    background: #111b2e;
}

.ta-sidebar-header {
    gap: 12px;
    min-height: 58px;
    padding: 0 3px 18px;
    border-bottom: 1px solid rgba(177, 199, 233, 0.14);
}

.ta-brand {
    gap: 11px;
    padding: 0;
    border: 0;
}

.ta-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.ta-brand-title {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.ta-brand-subtitle {
    color: #9bb0d2;
    font-size: 11px;
}

.ta-sidebar-collapse-btn {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    margin: 0 0 0 5px;
    border: 1px solid rgba(187, 208, 244, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #d9e7ff;
}

.ta-sidebar-collapse-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-sidebar-collapse-btn:hover {
    border-color: rgba(187, 208, 244, 0.28);
    background: rgba(255, 255, 255, 0.14);
}

.ta-nav {
    gap: 5px;
    margin-top: 18px;
}

.ta-nav-link {
    min-height: 45px;
    gap: 13px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #d7e1f1;
}

.ta-nav-link:hover {
    border-color: rgba(182, 204, 239, 0.11);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.ta-nav-link.active {
    border-color: rgba(192, 213, 247, 0.1);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    box-shadow: inset 3px 0 0 #5f96ff;
}

.ta-nav-icon {
    width: 20px;
    height: 20px;
    color: #b9c9e2;
}

.ta-nav-link.active .ta-nav-icon,
.ta-nav-link:hover .ta-nav-icon {
    color: #ffffff;
}

.ta-nav-label {
    font-size: 0.91rem;
    font-weight: 650;
}

.ta-nav-badge {
    display: inline-grid;
    min-width: 23px;
    height: 23px;
    place-items: center;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 850;
    line-height: 1;
}

.ta-nav-review-badge {
    background: #fff2df;
    color: #c05610 !important;
}

.ta-nav-alert-badge {
    background: #ffe5e7;
    color: #be2331 !important;
}

.ta-topbar {
    min-height: 76px;
    height: 76px;
    padding: 0 28px;
    border-bottom-color: #e7ebf3;
    box-shadow: 0 1px 0 rgba(18, 42, 90, 0.02);
}

.ta-topbar-heading {
    gap: 13px;
}

.ta-topbar-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #182d54;
    box-shadow: 0 2px 8px rgba(25, 51, 96, 0.03);
}

.ta-topbar-menu-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-topbar-location {
    display: grid;
    gap: 2px;
    line-height: 1.1;
}

.ta-topbar-location span {
    color: #ff6b2b;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ta-topbar-location strong {
    color: #102548;
    font-size: 1.04rem;
    font-weight: 780;
    letter-spacing: -0.025em;
}

.ta-userbox {
    gap: 12px;
}

.ta-user-profile-link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 5px 7px 5px 5px;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.ta-user-profile-link:hover,
.ta-user-profile-link:focus-visible {
    border-color: #dbe6fa;
    background: #f7faff;
    outline: 0;
}

.ta-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #edf3ff;
    color: #245ed9;
    font-size: 0.84rem;
}

.ta-avatar-photo {
    display: block;
    object-fit: cover;
    border: 1px solid #dbe6fa;
}

.ta-user-meta {
    min-width: 0;
    gap: 2px;
}

.ta-user-meta strong {
    max-width: 210px;
    overflow: hidden;
    color: #102548;
    font-size: 0.85rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-user-meta small {
    color: #ff6b2b;
    font-size: 0.69rem;
    font-weight: 800;
}

.ta-user-profile-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #7a8eae;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-logout-btn {
    padding: 10px 14px;
    border-color: #dfe6f1;
    border-radius: 12px;
    color: #102548;
    font-size: 0.81rem;
}

.ta-content {
    padding: 28px;
}

.ta-badge-blue {
    background: #edf4ff;
    color: #245ed9;
}

@media (min-width: 901px) {
    html.ta-sidebar-pref-collapsed .ta-shell {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    html.ta-sidebar-pref-collapsed .ta-sidebar {
        padding-right: 12px;
        padding-left: 12px;
    }

    html.ta-sidebar-pref-collapsed .ta-brand {
        justify-content: center;
    }

    html.ta-sidebar-pref-collapsed .ta-brand-copy,
    html.ta-sidebar-pref-collapsed .ta-nav-label,
    html.ta-sidebar-pref-collapsed .ta-nav-badge {
        display: none;
    }

    html.ta-sidebar-pref-collapsed .ta-sidebar-header {
        display: grid;
        justify-items: center;
        gap: 12px;
    }

    html.ta-sidebar-pref-collapsed .ta-sidebar-collapse-btn {
        margin: 0;
        transform: rotate(180deg);
    }

    html.ta-sidebar-pref-collapsed .ta-nav-link {
        justify-content: center;
        padding: 11px;
    }

    html.ta-sidebar-pref-collapsed .ta-nav-link:hover::after {
        position: absolute;
        z-index: 200;
        top: 50%;
        left: calc(100% + 12px);
        transform: translateY(-50%);
        padding: 8px 10px;
        border-radius: 10px;
        background: #10203d;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
        color: #ffffff;
        content: attr(data-nav-label);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        pointer-events: none;
    }
}

/* Account and administrator management */

.ta-account-page-heading {
    margin-bottom: 18px;
}

.ta-account-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    gap: 20px;
    margin-bottom: 20px;
}

.ta-account-photo-panel {
    display: grid;
    align-content: start;
    gap: 15px;
}

.ta-account-photo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 178px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f1f6ff, #fbfcff);
}

.ta-account-profile-photo {
    width: 126px;
    height: 126px;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 14px 32px rgba(44, 83, 157, 0.16);
}

.ta-account-profile-photo-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2c6aea, #193f9a);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 850;
}

.ta-account-photo-panel h3 {
    margin: 0;
    color: #102548;
    font-size: 1.25rem;
}

.ta-account-photo-panel p {
    margin: 4px 0 0;
    color: #687b9b;
    font-size: 0.87rem;
    overflow-wrap: anywhere;
}

.ta-account-photo-form {
    display: grid;
    gap: 9px;
    padding-top: 8px;
}

.ta-account-photo-form input[type="file"] {
    max-width: 100%;
    color: #405676;
    font-size: 0.82rem;
}

.ta-account-photo-form small,
.ta-account-password-help {
    margin: 0;
    color: #7082a0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.ta-photo-upload-label {
    color: #142a52;
    font-size: 0.83rem;
    font-weight: 800;
}

.ta-account-details-panel,
.ta-account-password-panel {
    padding: 25px;
}

.ta-account-form {
    display: grid;
    gap: 16px;
}

.ta-account-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e7edf6;
}

.ta-account-meta div {
    display: grid;
    gap: 4px;
}

.ta-account-meta dt {
    color: #8190aa;
    font-size: 0.73rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ta-account-meta dd {
    margin: 0;
    color: #21395f;
    font-size: 0.86rem;
    font-weight: 700;
}

.ta-form-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Password reset pages intentionally have no external content or analytics. */
.exhale-auth-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 8% 10%, rgba(44, 105, 235, 0.17), transparent 28rem),
        radial-gradient(circle at 92% 89%, rgba(255, 121, 34, 0.12), transparent 24rem),
        #f5f8fe;
}

.exhale-auth-card {
    width: min(520px, 100%);
    padding: clamp(30px, 6vw, 54px);
    border: 1px solid rgba(212, 224, 241, 0.94);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 58px rgba(43, 65, 113, 0.13);
}

.exhale-auth-brand {
    display: inline-flex;
    width: min(100%, 234px);
    margin-bottom: 30px;
}

.exhale-auth-card h1 {
    margin: 15px 0 10px;
    color: #102a5a;
    font-size: clamp(2rem, 4vw, 2.7rem);
    letter-spacing: -0.055em;
    line-height: 1;
}

.exhale-auth-copy {
    margin: 0;
    color: #667798;
    font-size: 0.96rem;
    line-height: 1.65;
}

.exhale-auth-form {
    margin-top: 28px;
}

.exhale-auth-message {
    margin-top: 22px;
    padding: 13px 14px;
    border: 1px solid #b9d6c3;
    border-radius: 14px;
    background: #f0fbf4;
    color: #17663f;
    font-size: 0.88rem;
    line-height: 1.5;
}

.exhale-auth-back-link {
    display: inline-flex;
    margin-top: 22px;
    color: #245ed9;
    font-size: 0.86rem;
    font-weight: 780;
}

.exhale-initial-password-help {
    margin-top: -4px;
    font-size: 0.82rem;
}

.exhale-auth-back-form {
    display: inline-flex;
    margin-top: 22px;
}

.exhale-auth-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #245ed9;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 780;
    cursor: pointer;
}

.exhale-auth-link-button:hover,
.exhale-auth-link-button:focus-visible {
    text-decoration: underline;
}

.exhale-password-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.exhale-password-label-row a {
    color: #245ed9;
    font-size: 0.78rem;
    font-weight: 760;
}

@media (max-width: 900px) {
    .ta-topbar {
        min-height: 70px;
        height: 70px;
        padding: 0 16px;
    }

    .ta-topbar-location strong {
        font-size: 0.96rem;
    }

    .ta-user-profile-chevron {
        display: none;
    }

    .ta-user-meta strong {
        max-width: 140px;
    }

    .ta-account-grid {
        grid-template-columns: 1fr;
    }

    .ta-form-grid-three,
    .ta-account-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ta-topbar-location span {
        display: none;
    }

    .ta-topbar-location strong {
        font-size: 0.92rem;
    }

    .ta-user-meta,
    .ta-logout-btn {
        display: none;
    }

    .ta-userbox {
        gap: 0;
    }

    .ta-account-details-panel,
    .ta-account-password-panel {
        padding: 20px;
    }
}


/* Phase 10C refinement — compact location header and protected fragment reset flow */
.ta-sidebar-header {
    padding-right: 8px;
    padding-left: 8px;
}

.ta-sidebar-collapse-btn {
    margin-left: auto;
    margin-right: 2px;
}

.ta-topbar-location-label {
    color: #7a8eae !important;
}

.exhale-auth-token-warning {
    margin: 20px 0 0;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fff7f7;
    color: #b42318;
    font-size: 0.86rem;
    line-height: 1.5;
}

.ta-account-password-help a {
    color: #245ed9;
    font-weight: 780;
    text-decoration: none;
}

.ta-account-password-help a:hover,
.ta-account-password-help a:focus-visible {
    text-decoration: underline;
}


/* Phase 10D — map workspace, single sidebar control and email verification */

.ta-content.ta-content-full-bleed {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.ta-content.ta-content-full-bleed .ta-live-attendance-dashboard,
.ta-content.ta-content-full-bleed .ta-live-map-shell {
    min-height: 0;
    height: 100%;
}

.ta-content.ta-content-full-bleed .ta-live-map-shell {
    border: 0;
    border-radius: 0;
}

@media (min-width: 901px) {
    .ta-topbar-menu-btn {
        display: none !important;
    }

    .ta-sidebar-collapse-btn {
        margin-left: auto;
    }
}

.ta-account-email-panel {
    margin-bottom: 20px;
    padding: 25px;
}

.ta-account-email-form {
    max-width: 840px;
}

.ta-email-verification-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    max-width: 920px;
    padding: 18px;
    border: 1px solid #cfe0fb;
    border-radius: 18px;
    background: linear-gradient(135deg, #f6f9ff 0%, #fbfdff 100%);
}

.ta-email-verification-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: #e7f0ff;
    color: #2563eb;
}

.ta-email-verification-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-email-verification-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ta-email-status-label {
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ta-email-verification-copy strong {
    overflow-wrap: anywhere;
    color: #102548;
    font-size: 1rem;
}

.ta-email-verification-copy p {
    margin: 0;
    color: #667a9d;
    font-size: 0.84rem;
    line-height: 1.45;
}

.ta-email-verification-action {
    flex: 0 0 auto;
}

.ta-email-verification-action .ta-primary-btn {
    white-space: nowrap;
}

.exhale-email-verification-card,
.exhale-email-success-card {
    max-width: 560px;
}

.exhale-email-success-card {
    display: grid;
    justify-items: start;
    gap: 0;
}

.exhale-email-success-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1eaa66, #37ca86);
    box-shadow: 0 16px 30px rgba(30, 170, 102, 0.22);
    color: #ffffff;
}

.exhale-email-success-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exhale-auth-submit-link {
    margin-top: 28px;
    text-decoration: none;
}

@media (max-width: 900px) {
    .ta-sidebar {
        overflow: visible;
        transform: translateX(calc(-100% - 14px));
    }

    .ta-sidebar-collapse-btn {
        position: absolute;
        top: 18px;
        right: -52px;
        z-index: 240;
        width: 42px;
        height: 42px;
        margin: 0;
        border: 1px solid rgba(187, 208, 244, 0.16);
        border-radius: 13px;
        background: #17243a;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24);
    }

    .ta-shell.ta-sidebar-mobile-open .ta-sidebar {
        transform: translateX(0);
    }

    .ta-shell.ta-sidebar-mobile-open .ta-sidebar-collapse-btn {
        right: 16px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }

    .ta-email-verification-state {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ta-email-verification-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .ta-account-email-panel {
        padding: 20px;
    }

    .ta-email-verification-state {
        align-items: start;
    }

    .ta-email-verification-action,
    .ta-email-verification-action .ta-primary-btn {
        width: 100%;
    }
}


/* Phase 10E — Super Admin administrator controls */
.ta-mini-avatar-photo {
    object-fit: cover;
    background: #eaf1ff;
}

.ta-administrator-protected-badge {
    color: #5d6e89;
    background: #f1f4f8;
}

.ta-administrator-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding: 26px;
    border: 1px solid #e1e9f5;
    border-radius: 22px;
    background: linear-gradient(110deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 10px 28px rgba(22, 48, 92, 0.05);
}

.ta-administrator-summary-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 18px;
}

.ta-administrator-profile-photo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 12px 26px rgba(38, 78, 143, 0.16);
}

.ta-administrator-profile-photo-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f70ec, #17419a);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 850;
}

.ta-administrator-summary-identity h3 {
    margin: 5px 0 4px;
    color: #102548;
    font-size: 1.35rem;
}

.ta-administrator-summary-identity p {
    margin: 0;
    color: #6b7e9f;
    overflow-wrap: anywhere;
}

.ta-administrator-summary-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 18px;
    min-width: min(100%, 480px);
    margin: 0;
}

.ta-administrator-summary-meta div {
    display: grid;
    gap: 5px;
}

.ta-administrator-summary-meta dt {
    color: #7b8ca8;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ta-administrator-summary-meta dd {
    margin: 0;
    color: #17345f;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.4;
}

.ta-administrator-management-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
    gap: 20px;
    margin-bottom: 20px;
}

.ta-administrator-panel {
    min-width: 0;
}

.ta-administrator-pending-email {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #cfe0fb;
    border-radius: 16px;
    background: #f6f9ff;
}

.ta-administrator-pending-email strong {
    color: #245ed9;
    font-size: 0.8rem;
}

.ta-administrator-pending-email span {
    color: #18365f;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.ta-administrator-pending-email small {
    color: #64799e;
    line-height: 1.45;
}

.ta-administrator-action-list {
    display: grid;
    gap: 0;
}

.ta-administrator-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #e8eef7;
}

.ta-administrator-action:first-child {
    padding-top: 0;
}

.ta-administrator-action:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ta-administrator-action strong {
    display: block;
    color: #142b52;
    font-size: 0.94rem;
}

.ta-administrator-action span {
    display: block;
    max-width: 530px;
    margin-top: 4px;
    color: #6d809f;
    font-size: 0.82rem;
    line-height: 1.48;
}

.ta-administrator-action form {
    display: inline-flex;
}

.ta-administrator-action button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.ta-administrator-action-success strong {
    color: #13774f;
}

.ta-administrator-action-danger strong {
    color: #a82e2e;
}

.ta-administrator-activity-panel {
    margin-bottom: 10px;
}

.ta-administrator-activity-list {
    display: grid;
}

.ta-administrator-activity-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #edf1f7;
}

.ta-administrator-activity-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ta-administrator-activity-marker {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: #68a0ff;
    box-shadow: 0 0 0 5px rgba(104, 160, 255, 0.12);
}

.ta-administrator-activity-item.is-important .ta-administrator-activity-marker {
    background: #ff8a2b;
    box-shadow: 0 0 0 5px rgba(255, 138, 43, 0.13);
}

.ta-administrator-activity-copy {
    min-width: 0;
}

.ta-administrator-activity-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ta-administrator-activity-title-row strong {
    color: #17345f;
    font-size: 0.9rem;
}

.ta-administrator-activity-copy p {
    margin: 5px 0 0;
    color: #70819d;
    font-size: 0.81rem;
    line-height: 1.45;
}

.ta-administrator-activity-item time {
    padding-top: 2px;
    color: #7d8da8;
    font-size: 0.76rem;
    white-space: nowrap;
}

.ta-badge-warning {
    background: #fff3df;
    color: #b25d00;
}

@media (max-width: 1060px) {
    .ta-administrator-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .ta-administrator-summary-meta {
        width: 100%;
    }

    .ta-administrator-management-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ta-administrator-summary {
        padding: 21px;
    }

    .ta-administrator-summary-meta {
        grid-template-columns: 1fr;
    }

    .ta-administrator-action {
        grid-template-columns: 1fr;
    }

    .ta-administrator-action form,
    .ta-administrator-action form button {
        width: 100%;
    }

    .ta-administrator-activity-item {
        grid-template-columns: 12px minmax(0, 1fr);
    }

    .ta-administrator-activity-item time {
        grid-column: 2;
        padding-top: 0;
    }
}


/* One-time password-reset and email-verification links */
.exhale-one-time-link-pending {
    display: none;
}

.exhale-email-unavailable-icon {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    margin: 0 auto 20px;
    border: 1px solid #fecaca;
    border-radius: 22px;
    background: #fff7f7;
    color: #dc2626;
}

.exhale-email-unavailable-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Work location postcode lookup and geofence editor */

.ta-work-location-form-panel {
    max-width: 1480px;
}

.ta-postcode-search-group {
    position: relative;
}

.ta-postcode-search-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.ta-postcode-search-control input {
    min-width: 0;
}

.ta-postcode-search-button {
    min-height: 46px;
    white-space: nowrap;
}

.ta-postcode-search-button.is-loading {
    cursor: wait;
    opacity: 0.78;
}

.ta-postcode-search-button .ta-inline-spinner {
    display: none;
}

.ta-postcode-search-button.is-loading .ta-inline-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border: 2px solid rgba(37, 99, 235, 0.24);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ta-work-location-spin 0.7s linear infinite;
    vertical-align: -2px;
}

.ta-form-helper {
    display: block;
    margin-top: 7px;
    color: #71829f;
    font-size: 12px;
    line-height: 1.45;
}

.ta-address-results {
    margin: 18px 0 22px;
    padding: 17px;
    border: 1px solid #c9dcff;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #f2f7ff);
}

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

.ta-address-results-heading > div {
    display: grid;
    gap: 3px;
}

.ta-address-results-heading strong {
    color: #172d59;
    font-size: 14px;
}

.ta-address-results-heading span {
    color: #647b9e;
    font-size: 12px;
    line-height: 1.4;
}

.ta-address-results-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d5e1f4;
    border-radius: 9px;
    background: #ffffff;
    color: #476489;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
}

.ta-address-results select {
    width: 100%;
    min-height: 47px;
    border: 1px solid #cbdaf1;
    border-radius: 13px;
    background: #ffffff;
    color: #16284c;
    padding: 0 13px;
    font: inherit;
}

.ta-address-results select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ta-address-suggestions {
    margin: 10px 0 0;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
}

.ta-address-lookup-status {
    min-height: 0;
    margin: -5px 0 18px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.ta-address-lookup-status:empty {
    display: none;
}

.ta-address-lookup-status.is-loading {
    color: #2563eb;
}

.ta-address-lookup-status.is-success {
    color: #047857;
}

.ta-address-lookup-status.is-error {
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 13px;
    background: #fff7f7;
    color: #b42318;
}

.ta-geofence-section {
    overflow: visible;
}

.ta-work-location-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.72fr);
    gap: 20px;
    align-items: stretch;
}

.ta-work-location-map-card {
    position: relative;
    min-height: 478px;
    overflow: hidden;
    border: 1px solid #d7e3f2;
    border-radius: 20px;
    background: #e6eef7;
}

.ta-work-location-map-toolbar {
    position: absolute;
    z-index: 600;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(219, 230, 245, 0.96);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(32, 55, 94, 0.14);
    backdrop-filter: blur(12px);
}

.ta-work-location-map-toolbar > div {
    display: grid;
    gap: 3px;
}

.ta-work-location-map-toolbar strong {
    color: #142b55;
    font-size: 13px;
}

.ta-work-location-map-toolbar span:not(.ta-map-radius-pill) {
    color: #617798;
    font-size: 11.5px;
    line-height: 1.35;
}

.ta-map-radius-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1e59d1;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.ta-work-location-map {
    width: 100%;
    height: 478px;
    background: #dce9f7;
}

.ta-work-location-map-note {
    position: absolute;
    z-index: 600;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    max-width: min(430px, calc(100% - 28px));
    align-items: flex-start;
    gap: 8px;
    padding: 10px 11px;
    border: 1px solid rgba(219, 230, 245, 0.96);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(32, 55, 94, 0.12);
    color: #566d90;
    font-size: 11px;
    line-height: 1.4;
    backdrop-filter: blur(10px);
}

.ta-work-location-map-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
    fill: none;
    stroke: #2563eb;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ta-work-location-map .leaflet-control-zoom {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.ta-work-location-map .leaflet-control-zoom a {
    width: 37px;
    height: 37px;
    border-bottom-color: #e2e8f0;
    color: #1e293b;
    font-size: 21px;
    line-height: 37px;
}

.ta-work-location-map .leaflet-control-attribution {
    border-radius: 10px 0 0 0;
    background: rgba(255, 255, 255, 0.88);
    color: #64748b;
    font-size: 10px;
}

.ta-work-location-pin-icon {
    border: 0;
    background: transparent;
}

.ta-work-location-pin {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 8px;
    background: #2563eb;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.3);
    transform: rotate(-45deg);
}

.ta-work-location-pin::after {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    content: "";
}

.ta-work-location-pin span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
}

.ta-geofence-controls {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border: 1px solid #dbe5f2;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff, #f5f8fd);
}

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

.ta-radius-control {
    display: grid;
    gap: 13px;
    padding: 16px;
    border: 1px solid #d9e5f5;
    border-radius: 16px;
    background: #ffffff;
}

.ta-radius-control-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ta-radius-control-heading > div {
    display: grid;
    gap: 4px;
}

.ta-radius-control-heading label {
    color: #172d59;
    font-size: 13px;
    font-weight: 850;
}

.ta-radius-control-heading span {
    color: #71829d;
    font-size: 11.5px;
    line-height: 1.35;
}

.ta-radius-control output {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e59d1;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.ta-radius-control input[type="range"] {
    width: 100%;
    accent-color: #2563eb;
    cursor: pointer;
}

.ta-radius-scale {
    display: flex;
    justify-content: space-between;
    color: #8291a9;
    font-size: 10px;
    font-weight: 700;
}

.ta-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;
}

@keyframes ta-work-location-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1050px) {
    .ta-work-location-map-layout {
        grid-template-columns: 1fr;
    }

    .ta-geofence-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .ta-geofence-controls > .ta-radius-control,
    .ta-geofence-controls > .ta-form-group {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .ta-postcode-search-control {
        grid-template-columns: 1fr;
    }

    .ta-postcode-search-button {
        width: 100%;
    }

    .ta-work-location-map-card,
    .ta-work-location-map {
        min-height: 405px;
        height: 405px;
    }

    .ta-work-location-map-toolbar {
        flex-direction: column;
    }

    .ta-geofence-controls {
        grid-template-columns: 1fr;
    }

    .ta-work-location-map-note {
        display: none;
    }
}


/* Work location details: map-first layout */
.ta-work-location-details {
    display: grid;
    gap: 22px;
    max-width: 1540px;
    margin: 0 auto;
}

.ta-location-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.ta-location-detail-heading {
    min-width: 0;
}

.ta-location-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.ta-location-detail-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #ff6b2b;
    font-size: 0.71rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ta-location-detail-title-row h1 {
    margin: 0;
    color: #0d1d3a;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.ta-location-detail-title-row p {
    max-width: 760px;
    margin: 8px 0 0;
    color: #667798;
    line-height: 1.55;
}

.ta-location-status-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 4px;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 0.76rem;
    font-weight: 850;
}

.ta-location-status-chip.is-active {
    background: #eafbf3;
    color: #057a55;
}

.ta-location-status-chip.is-inactive {
    background: #fff3f2;
    color: #c24135;
}

.ta-location-detail-actions {
    flex: 0 0 auto;
}

.ta-location-detail-actions .ta-secondary-btn svg,
.ta-location-map-open-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-location-map-stage {
    position: relative;
    min-height: clamp(440px, 55vh, 640px);
    overflow: hidden;
    border: 1px solid #d4e1f0;
    border-radius: 28px;
    background: #dce9f7;
    box-shadow: 0 18px 45px rgba(21, 47, 89, 0.12);
}

.ta-location-details-map {
    width: 100%;
    height: clamp(440px, 55vh, 640px);
    background: #dce9f7;
}

.ta-location-map-stage-topline {
    position: absolute;
    z-index: 600;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(218, 230, 246, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(21, 47, 89, 0.14);
    backdrop-filter: blur(12px);
}

.ta-location-map-stage-topline > div {
    display: grid;
    gap: 2px;
}

.ta-location-map-stage-topline > div span {
    color: #6e819e;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.ta-location-map-stage-topline > div strong {
    color: #142951;
    font-size: 0.84rem;
}

.ta-location-map-radius-badge {
    border-radius: 999px;
    background: #eaf2ff;
    color: #1c5cd8;
    padding: 7px 9px;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.ta-location-map-centre-card {
    position: absolute;
    z-index: 600;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    max-width: min(390px, calc(100% - 36px));
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(218, 230, 246, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(21, 47, 89, 0.14);
    backdrop-filter: blur(12px);
}

.ta-location-map-centre-card > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ta-location-map-centre-card strong {
    overflow: hidden;
    color: #142951;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-location-map-centre-card small {
    color: #657897;
    font-size: 0.71rem;
    line-height: 1.35;
}

.ta-location-map-centre-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 12px;
    background: #eaf2ff;
    color: #2563eb;
}

.ta-location-map-centre-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-location-map-open-link {
    position: absolute;
    z-index: 600;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(218, 230, 246, 0.96);
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(21, 47, 89, 0.14);
    color: #183867;
    font-size: 0.76rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.ta-location-map-open-link:hover {
    background: #ffffff;
    color: #1d59d9;
}

.ta-location-details-map .leaflet-control-zoom {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.ta-location-details-map .leaflet-control-zoom a {
    width: 38px;
    height: 38px;
    border-bottom-color: #e2e8f0;
    color: #1e293b;
    font-size: 21px;
    line-height: 38px;
}

.ta-location-details-map .leaflet-control-attribution {
    border-radius: 10px 0 0 0;
    background: rgba(255, 255, 255, 0.88);
    color: #64748b;
    font-size: 10px;
}

.ta-location-map-tooltip {
    border: 0;
    border-radius: 10px;
    padding: 7px 9px;
    background: #102952;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.22);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 750;
}

.ta-location-map-tooltip::before {
    border-top-color: #102952;
}

.ta-location-fact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #e1e8f2;
    border-bottom: 1px solid #e1e8f2;
    background: rgba(255, 255, 255, 0.48);
}

.ta-location-fact-strip > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 18px 20px;
}

.ta-location-fact-strip > div + div {
    border-left: 1px solid #e1e8f2;
}

.ta-location-fact-strip span {
    color: #71819a;
    font-size: 0.72rem;
    font-weight: 750;
}

.ta-location-fact-strip strong {
    overflow: hidden;
    color: #142951;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-location-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    padding: 8px 2px 0;
}

.ta-location-info-section {
    min-width: 0;
    padding: 8px 0;
}

.ta-location-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.ta-location-section-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 14px;
    background: #fff2e9;
    color: #f97316;
}

.ta-location-section-icon.is-blue {
    background: #eaf2ff;
    color: #2563eb;
}

.ta-location-section-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-location-section-heading h2 {
    margin: 1px 0 0;
    color: #142951;
    font-size: 1.34rem;
    letter-spacing: -0.035em;
}

.ta-location-section-heading p {
    margin: 5px 0 0;
    color: #687993;
    font-size: 0.89rem;
    line-height: 1.5;
}

.ta-location-definition-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    margin: 0;
}

.ta-location-definition-list > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 13px 0;
    border-top: 1px solid #e6ecf4;
}

.ta-location-definition-list dt {
    color: #71819a;
    font-size: 0.72rem;
    font-weight: 750;
}

.ta-location-definition-list dd {
    overflow: hidden;
    margin: 0;
    color: #16284c;
    font-size: 0.92rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-location-system-details {
    border-top: 1px solid #dfe7f1;
    border-bottom: 1px solid #dfe7f1;
}

.ta-location-system-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 2px;
    cursor: pointer;
    list-style: none;
}

.ta-location-system-details summary::-webkit-details-marker {
    display: none;
}

.ta-location-system-details summary > span {
    display: grid;
    gap: 3px;
}

.ta-location-system-details strong {
    color: #1a2c4d;
    font-size: 0.9rem;
}

.ta-location-system-details small {
    color: #73829a;
    font-size: 0.76rem;
}

.ta-location-system-details summary > svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #536a8d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.ta-location-system-details[open] summary > svg {
    transform: rotate(180deg);
}

.ta-location-system-details-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 22px;
    padding: 0 2px 20px;
}

.ta-location-system-details-content > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ta-location-system-details-content span {
    color: #71819a;
    font-size: 0.71rem;
    font-weight: 750;
}

.ta-location-system-details-content strong,
.ta-location-system-details-content code {
    overflow: hidden;
    color: #1e2f4f;
    font-size: 0.78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-location-system-details-content code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.69rem;
}

@media (max-width: 980px) {
    .ta-location-detail-header {
        flex-direction: column;
    }

    .ta-location-detail-actions {
        width: 100%;
    }

    .ta-location-map-stage,
    .ta-location-details-map {
        min-height: 460px;
        height: 460px;
    }

    .ta-location-details-grid {
        gap: 26px;
    }

    .ta-location-system-details-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ta-location-detail-title-row {
        flex-direction: column;
        gap: 10px;
    }

    .ta-location-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ta-location-detail-actions > * {
        min-width: 0;
    }

    .ta-location-detail-actions .ta-secondary-btn,
    .ta-location-detail-actions .ta-danger-btn,
    .ta-location-detail-actions .ta-primary-btn {
        width: 100%;
    }

    .ta-location-map-stage,
    .ta-location-details-map {
        min-height: 405px;
        height: 405px;
        border-radius: 22px;
    }

    .ta-location-map-stage-topline {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
    }

    .ta-location-map-stage-topline > div {
        min-width: 0;
    }

    .ta-location-map-stage-topline > div strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ta-location-map-radius-badge {
        display: none;
    }

    .ta-location-map-open-link {
        top: auto;
        right: 12px;
        bottom: 12px;
        padding: 9px 10px;
        font-size: 0.71rem;
    }

    .ta-location-map-centre-card {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 150px);
    }

    .ta-location-map-centre-card small {
        display: none;
    }

    .ta-location-fact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-location-fact-strip > div:nth-child(odd) {
        border-left: 0;
    }

    .ta-location-fact-strip > div:nth-child(n + 3) {
        border-top: 1px solid #e1e8f2;
    }

    .ta-location-details-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ta-location-definition-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ta-location-definition-list dd {
        white-space: normal;
    }

    .ta-location-system-details-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .ta-location-detail-actions {
        grid-template-columns: 1fr;
    }

    .ta-location-map-centre-card {
        display: none;
    }

    .ta-location-map-open-link {
        left: 12px;
        right: auto;
    }
}

/* Employee onboarding and profile experience */
.employee-form-page,
.employee-profile-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px clamp(18px, 3vw, 44px) 44px;
}

.employee-form-page__heading,
.employee-profile-page__topbar {
    margin-bottom: 26px;
}

.employee-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #2362d9;
    font-size: .88rem;
    font-weight: 760;
}

.employee-form-page__heading h1,
.employee-profile-page__title-row h1 {
    margin: 0;
    color: #0e2148;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -.045em;
    line-height: 1.04;
}

.employee-form-page__heading p,
.employee-profile-page__topbar p {
    margin: 9px 0 0;
    color: #667798;
    font-size: 1rem;
}

.employee-editor {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(28, 54, 98, .06);
}

.employee-editor__section {
    padding: clamp(24px, 3.2vw, 42px);
    border-top: 1px solid #e7edf5;
}

.employee-editor__section:first-of-type {
    border-top: 0;
}

.employee-editor__identity {
    background: linear-gradient(135deg, rgba(241, 247, 255, .82), rgba(255, 255, 255, 1) 60%);
}

.employee-editor__section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
}

.employee-editor__step {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    background: #e9f1ff;
    color: #2362d9;
    font-size: .73rem;
    font-weight: 850;
}

.employee-editor__section-heading h2,
.employee-profile-section h2,
.employee-change-review h2 {
    margin: 0;
    color: #11264e;
    font-size: 1.32rem;
    letter-spacing: -.025em;
}

.employee-editor__section-heading p,
.employee-profile-section header p,
.employee-change-review p {
    margin: 6px 0 0;
    color: #70809a;
    line-height: 1.55;
}

.employee-photo-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 650px;
    margin: -3px 0 26px;
    padding: 14px 16px;
    border: 1px dashed #b7cae8;
    border-radius: 18px;
    background: rgba(246, 250, 255, .76);
}

.employee-photo-field__avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, #225fe0, #153b8b);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.employee-photo-field label {
    display: block;
    margin-bottom: 6px;
    color: #1b315b;
    font-weight: 780;
}

.employee-photo-field label span {
    margin-left: 5px;
    color: #7688a6;
    font-size: .74rem;
    font-weight: 650;
}

.employee-photo-field input {
    display: block;
    width: 100%;
    color: #25375a;
    font-size: .87rem;
}

.employee-photo-field small {
    display: block;
    margin-top: 5px;
    color: #71829d;
    font-size: .76rem;
}

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

.employee-form-grid--emergency {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #edf1f7;
}

.employee-form-control {
    min-width: 0;
}

.employee-form-control--wide {
    grid-column: span 1;
}

.employee-form-control label {
    display: block;
    margin: 0 0 7px;
    color: #172a4d;
    font-size: .82rem;
    font-weight: 780;
}

.employee-form-control input,
.employee-form-control select,
.employee-change-review__actions input {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d9e2ef;
    border-radius: 14px;
    outline: none;
    background: #fbfdff;
    color: #102448;
    padding: 0 14px;
    font-size: .92rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.employee-form-control input:focus,
.employee-form-control select:focus,
.employee-change-review__actions input:focus {
    border-color: #2463e8;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(36, 99, 232, .11);
}

.employee-location-picker {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid #dce7f7;
    border-radius: 20px;
    background: #f8fbff;
}

.employee-location-picker__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.employee-location-picker__heading h3 {
    margin: 0;
    color: #17305c;
    font-size: 1rem;
}

.employee-location-picker__heading p {
    margin: 5px 0 0;
    color: #73839b;
    font-size: .84rem;
    line-height: 1.5;
}

.employee-location-picker__heading > span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #e9f1ff;
    color: #2765d9;
    font-size: .72rem;
    font-weight: 800;
}

.employee-location-picker__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.employee-location-choice {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 72px;
    padding: 13px;
    border: 1px solid #d9e4f3;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.employee-location-choice:hover {
    border-color: #a8c2ef;
    box-shadow: 0 8px 18px rgba(35, 82, 158, .08);
    transform: translateY(-1px);
}

.employee-location-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.employee-location-choice__check {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1.5px solid #aebfd8;
    border-radius: 6px;
    color: transparent;
    font-size: .73rem;
    font-weight: 900;
    transition: .16s ease;
}

.employee-location-choice input:checked + .employee-location-choice__check {
    border-color: #2463e8;
    background: #2463e8;
    color: #fff;
    box-shadow: 0 4px 9px rgba(36, 99, 232, .22);
}

.employee-location-choice input:focus-visible + .employee-location-choice__check {
    outline: 3px solid rgba(36, 99, 232, .22);
    outline-offset: 2px;
}

.employee-location-choice strong,
.employee-location-choice small {
    display: block;
}

.employee-location-choice strong {
    color: #15305d;
    font-size: .9rem;
}

.employee-location-choice small {
    margin-top: 4px;
    color: #72839d;
    font-size: .76rem;
    line-height: 1.4;
}

.employee-location-picker__empty,
.employee-empty-state {
    margin: 0;
    color: #6c7d98;
}

.employee-editor__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px clamp(24px, 3.2vw, 42px);
    border-top: 1px solid #e7edf5;
    background: rgba(250, 252, 255, .9);
}

.employee-profile-page__topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

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

.employee-status-pill {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 820;
}

.employee-status-pill.is-active { background: #e6f9ef; color: #087d45; }
.employee-status-pill.is-inactive { background: #fff0f1; color: #bf2534; }

.employee-profile-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.employee-profile-page__actions form { margin: 0; }

.ta-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 0 15px;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.ta-button:hover { transform: translateY(-1px); }
.ta-button-primary { background: #2463e8; color: #fff; box-shadow: 0 8px 18px rgba(36, 99, 232, .2); }
.ta-button-secondary { border-color: #d9e3ef; background: #fff; color: #19305a; }
.ta-button-danger { background: #dc2635; color: #fff; }

.ta-notice {
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 15px;
    font-size: .9rem;
}
.ta-notice-success { border: 1px solid #a8ebc6; background: #effcf5; color: #087a43; }
.ta-notice-error { border: 1px solid #f2b8bf; background: #fff5f5; color: #ba1e2e; }

.employee-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(200px, .46fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
    min-height: 220px;
    padding: clamp(24px, 4vw, 46px);
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 83% 18%, rgba(73, 139, 255, .34), transparent 35%),
        linear-gradient(135deg, #091b42, #0e397f);
    overflow: hidden;
}

.employee-profile-hero__photo {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.22);
    border-radius: 30px;
    background: linear-gradient(145deg, #2f70ec, #1a4494);
    box-shadow: 0 14px 32px rgba(0,0,0,.2);
}

.employee-profile-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.employee-profile-hero__photo span { font-size: 2.25rem; font-weight: 850; }

.employee-profile-hero__label {
    color: #89b7ff;
    font-size: .72rem;
    font-weight: 840;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.employee-profile-hero h2 {
    margin: 8px 0 4px;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    letter-spacing: -.04em;
}

.employee-profile-hero p { margin: 0; color: #cfdef7; }

.employee-profile-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 20px;
    color: #d9e6fa;
    font-size: .8rem;
}
.employee-profile-hero__facts strong { display: block; color: #9dbff7; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }

.employee-profile-hero__invite {
    display: grid;
    align-content: center;
    gap: 6px;
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.18);
}
.employee-profile-hero__invite span { color: #93baff; font-size: .71rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.employee-profile-hero__invite strong { font-size: 1rem; }
.employee-profile-hero__invite small { color: #d3e1f6; line-height: 1.45; }

.employee-change-review {
    margin-top: 20px;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid #a9c8ff;
    border-radius: 22px;
    background: linear-gradient(135deg, #f2f7ff, #fff);
}
.employee-change-review__heading { display: flex; justify-content: space-between; gap: 18px; }
.employee-change-review__photo-flag { align-self: flex-start; padding: 7px 10px; border-radius: 999px; background: #dceaff; color: #1a5bcf; font-size: .76rem; font-weight: 800; }
.employee-change-review__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.employee-change-review__summary span { padding: 12px 0; border-top: 1px solid #dce8f8; color: #415a82; font-size: .84rem; line-height: 1.45; }
.employee-change-review__summary strong { display: block; margin-bottom: 4px; color: #193969; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.employee-change-review__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-change-review__actions form { display: flex; gap: 8px; }
.employee-change-review__actions input { min-height: 42px; }
.employee-change-review__actions .ta-button { flex: 0 0 auto; white-space: nowrap; }

.employee-profile-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.employee-profile-section { padding: clamp(22px, 3vw, 32px); border: 1px solid #dfe7f1; border-radius: 22px; background: #fff; }
.employee-profile-section header { margin-bottom: 24px; }
.employee-profile-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 30px; margin: 0; }
.employee-profile-data-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-profile-data-grid div { min-width: 0; }
.employee-profile-data-grid dt { color: #73829b; font-size: .78rem; font-weight: 760; }
.employee-profile-data-grid dd { margin: 5px 0 0; color: #172641; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.employee-work-location-list { display: grid; gap: 9px; }
.employee-work-location-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid #edf1f6; }
.employee-work-location-item:first-child { border-top: 0; padding-top: 0; }
.employee-work-location-item__pin { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #edf4ff; color: #2463e8; font-weight: 800; }
.employee-work-location-item strong,.employee-work-location-item span { display: block; }
.employee-work-location-item strong { color: #1c3158; font-size: .9rem; }
.employee-work-location-item > div span { margin-top: 3px; color: #74839a; font-size: .78rem; }
.employee-work-location-item__primary,.employee-work-location-item__inactive { padding: 5px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.employee-work-location-item__primary { background: #e8f2ff; color: #2563d4; }
.employee-work-location-item__inactive { background: #fff1f1; color: #c5323f; }
.employee-system-details { grid-column: span 2; padding: 20px 24px; border: 1px solid #dfe7f1; border-radius: 18px; background: #fff; }
.employee-system-details summary { cursor: pointer; color: #19315b; font-weight: 800; }
.employee-system-details > div { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 16px; color: #6d7e98; font-size: .78rem; overflow-wrap: anywhere; }
.employee-system-details strong { display: block; margin-bottom: 4px; color: #223b67; }

@media (max-width: 1050px) {
    .employee-profile-page__topbar { align-items: flex-start; flex-direction: column; }
    .employee-profile-page__actions { justify-content: flex-start; }
    .employee-profile-hero { grid-template-columns: auto minmax(0,1fr); }
    .employee-profile-hero__invite { grid-column: span 2; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
    .employee-change-review__summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
    .employee-form-grid, .employee-profile-content { grid-template-columns: 1fr; }
    .employee-location-picker__options { grid-template-columns: 1fr; }
    .employee-profile-data-grid, .employee-profile-data-grid--three { grid-template-columns: 1fr; gap: 14px; }
    .employee-system-details { grid-column: span 1; }
    .employee-system-details > div { grid-template-columns: 1fr; }
    .employee-change-review__actions { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .employee-form-page, .employee-profile-page { padding: 22px 14px 30px; }
    .employee-editor__section { padding: 24px 18px; }
    .employee-editor__actions { padding: 16px 18px; flex-direction: column-reverse; }
    .employee-editor__actions .ta-button { width: 100%; }
    .employee-profile-hero { grid-template-columns: 1fr; }
    .employee-profile-hero__invite { grid-column: span 1; }
    .employee-profile-page__actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; }
    .employee-profile-page__actions .ta-button, .employee-profile-page__actions form, .employee-profile-page__actions form .ta-button { width: 100%; }
    .employee-change-review__heading, .employee-location-picker__heading { flex-direction: column; }
    .employee-change-review__summary { grid-template-columns: 1fr; }
    .employee-change-review__actions form { flex-direction: column; }
}

.employee-change-review__photo-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 1px solid #d8e6ff;
    border-radius: 14px;
    background: #f7faff;
    color: #31527d;
    font-size: .78rem;
    font-weight: 750;
}

.employee-change-review__photo-preview img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #d6e2f7;
}

/* Employee workspace redesign */
.employee-profile-page--workspace {
    gap: 22px;
}

.employee-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 24px;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f2b67 0%, #1f4fa8 100%);
    box-shadow: 0 18px 42px rgba(15, 42, 97, .18);
    color: #fff;
}

.employee-workspace-hero__identity {
    display: flex;
    align-items: center;
    gap: 24px;
}

.employee-workspace-hero__avatar {
    width: 116px;
    height: 116px;
    border-radius: 30px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #4076e8, #2a53bb);
    border: 4px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.employee-workspace-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-workspace-hero__avatar span {
    font-size: 2.25rem;
    font-weight: 900;
}

.employee-workspace-hero__copy h2 {
    margin: 10px 0 8px;
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    letter-spacing: -.03em;
}

.employee-workspace-hero__copy p,
.employee-workspace-hero__sidecard p {
    margin: 0;
    color: rgba(235, 242, 255, .86);
    line-height: 1.6;
}

.employee-workspace-hero__eyebrow {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(189, 215, 255, .95);
}

.employee-workspace-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-top: 24px;
}

.employee-workspace-hero__stats div,
.employee-workspace-hero__sidecard {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}

.employee-workspace-hero__stats span,
.employee-workspace-hero__sidecard span {
    display: block;
    color: rgba(191, 215, 255, .92);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.employee-workspace-hero__stats strong,
.employee-workspace-hero__sidecard strong {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.45;
    color: #fff;
}

.employee-profile-tabs {
    display: grid;
    gap: 20px;
}

.employee-profile-tabs__nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid #dce5f2;
    border-radius: 20px;
    background: #fff;
}

.employee-profile-tabs__tab {
    border: 0;
    background: transparent;
    color: #6e809c;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
}

.employee-profile-tabs__tab.is-active {
    background: linear-gradient(180deg, #1f5bca, #15449a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 91, 202, .2);
}

.employee-profile-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
}

.employee-workspace-card {
    padding: 24px;
    border: 1px solid #dbe5f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.employee-workspace-card--wide {
    grid-column: span 2;
}

.employee-workspace-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.employee-workspace-card__header h2 {
    margin: 0 0 6px;
    color: #102a5a;
    font-size: 1.7rem;
    letter-spacing: -.03em;
}

.employee-workspace-card__header p {
    margin: 0;
    color: #74839a;
}

.employee-workspace-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #d7e3f3;
    color: #193a74;
    font-weight: 800;
    background: #f7fbff;
}

.employee-workspace-card__content--split {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0,1.2fr);
    gap: 24px;
}

.employee-workspace-basic-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 12px;
    border-right: 1px solid #e7edf5;
}

.employee-workspace-basic-profile__avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #e7efff, #d4e1fb);
    color: #1f5cc8;
    font-size: 2rem;
    font-weight: 900;
}

.employee-workspace-basic-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-workspace-basic-profile strong,
.employee-workspace-basic-profile span {
    display: block;
}

.employee-workspace-basic-profile strong {
    color: #102a5a;
    font-size: 1.1rem;
}

.employee-workspace-basic-profile span {
    margin-top: 6px;
    color: #6d7f9a;
}

.employee-profile-data-grid--compact {
    gap: 18px 22px;
}

.employee-profile-data-grid--single {
    grid-template-columns: 1fr;
}

.employee-payroll-grid {
    display: grid;
    gap: 16px;
}

.employee-payroll-card {
    padding: 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid #dce6f3;
    background: #fbfdff;
}

.employee-payroll-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.employee-payroll-card__head strong,
.employee-payroll-card__head span {
    display: block;
}

.employee-payroll-card__head span {
    margin-top: 4px;
    color: #75839a;
    font-size: .84rem;
}

.employee-payroll-status {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.employee-payroll-status.is-draft { background: #f5f7fb; color: #55657d; }
.employee-payroll-status.is-approved { background: #e9fbef; color: #18733e; }
.employee-payroll-status.is-locked { background: #eef4ff; color: #2359c7; }

.employee-payroll-card__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}

.employee-payroll-card__meta span,
.employee-payroll-card__notes p {
    color: #657892;
    font-size: .86rem;
    line-height: 1.55;
}

.employee-payroll-card__meta strong,
.employee-payroll-card__notes strong {
    color: #223b67;
}

.employee-payroll-card__notes {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6edf6;
}

.employee-map-preview {
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.employee-map-preview__toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee-map-preview__button {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #dce6f2;
    background: #f9fbff;
    text-align: left;
    cursor: pointer;
}

.employee-map-preview__button strong,
.employee-map-preview__button span {
    display: block;
}

.employee-map-preview__button strong {
    color: #17396e;
}

.employee-map-preview__button span {
    margin-top: 4px;
    color: #6d7f98;
    font-size: .84rem;
    line-height: 1.45;
}

.employee-map-preview__button.is-active {
    border-color: #2361d0;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(35, 97, 208, .1);
}

.employee-map-preview__frame {
    width: 100%;
    min-height: 320px;
    border: 1px solid #dce4ee;
    border-radius: 22px;
    background: #edf2f9;
}

.employee-work-location-list--workspace {
    gap: 14px;
}

.employee-work-location-item--workspace {
    align-items: center;
}

.employee-work-location-item--workspace small {
    display: block;
    margin-top: 4px;
    color: #6e809c;
}

.employee-work-location-item__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.employee-clock-table-wrap {
    overflow-x: auto;
}

.employee-clock-table {
    width: 100%;
    border-collapse: collapse;
}

.employee-clock-table thead th {
    padding: 0 0 12px;
    text-align: left;
    color: #6f819e;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e9f2;
}

.employee-clock-table tbody td {
    padding: 16px 8px 16px 0;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}

.employee-clock-table tbody strong,
.employee-clock-table tbody span,
.employee-clock-table tbody small {
    display: block;
}

.employee-clock-table tbody span,
.employee-clock-table tbody small {
    margin-top: 5px;
    color: #6f8097;
    line-height: 1.45;
}

.employee-clock-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

.employee-clock-status.is-accepted { background: #e9fbef; color: #18733e; }
.employee-clock-status.is-pending { background: #fff8e7; color: #9a6900; }
.employee-clock-status.is-rejected { background: #fff1f1; color: #c5323f; }

.employee-photo-field--enhanced {
    align-items: stretch;
    gap: 22px;
}

.employee-photo-field__avatar--preview {
    width: 104px;
    height: 104px;
    border-radius: 28px;
    overflow: hidden;
}

.employee-photo-field__avatar--preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-photo-field__content {
    flex: 1;
}

.employee-photo-field__heading-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.employee-photo-field__heading-row p {
    margin: 8px 0 0;
    color: #6f8099;
    line-height: 1.55;
}

.employee-photo-field__controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.employee-photo-field__meta {
    display: grid;
    gap: 6px;
}

.employee-photo-field__meta strong {
    color: #17396e;
}

.employee-photo-field__meta small {
    color: #6f8099;
}

.ta-button-small {
    padding: 10px 14px;
    font-size: .82rem;
}

@media (max-width: 1100px) {
    .employee-workspace-hero,
    .employee-workspace-card__content--split,
    .employee-map-preview {
        grid-template-columns: 1fr;
    }

    .employee-workspace-hero__stats,
    .employee-payroll-card__meta {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .employee-workspace-basic-profile {
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid #e7edf5;
        padding-bottom: 18px;
    }
}

@media (max-width: 860px) {
    .employee-profile-sections-grid {
        grid-template-columns: 1fr;
    }

    .employee-workspace-card--wide {
        grid-column: span 1;
    }

    .employee-workspace-hero__identity {
        flex-direction: column;
        align-items: flex-start;
    }

    .employee-profile-page__actions--hero {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .employee-workspace-hero {
        padding: 20px;
    }

    .employee-workspace-card {
        padding: 20px;
    }

    .employee-profile-tabs__nav {
        flex-direction: column;
    }

    .employee-profile-tabs__tab {
        width: 100%;
        text-align: left;
    }

    .employee-workspace-hero__stats,
    .employee-payroll-card__meta {
        grid-template-columns: 1fr;
    }

    .employee-clock-table thead {
        display: none;
    }

    .employee-clock-table,
    .employee-clock-table tbody,
    .employee-clock-table tr,
    .employee-clock-table td {
        display: block;
        width: 100%;
    }

    .employee-clock-table tr {
        padding: 14px 0;
        border-bottom: 1px solid #edf2f7;
    }

    .employee-clock-table tbody td {
        padding: 10px 0 0;
        border-bottom: 0;
    }

    .employee-photo-field__heading-row {
        flex-direction: column;
    }
}

/* Employee profile workspace v2 */
.employee-profile-page--workspace-v2 {
    gap: 22px;
}

.employee-profile-header-v2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.employee-profile-header-v2__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.employee-profile-header-v2 h1 {
    margin: 0;
    color: #102a5a;
    font-size: clamp(2.2rem, 3vw, 3.35rem);
    letter-spacing: -.04em;
}

.employee-profile-header-v2 p {
    margin: 10px 0 0;
    color: #6f819e;
    font-size: 1.12rem;
}

.employee-profile-header-v2__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-summary-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
    gap: 24px;
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #102b66 0%, #1f4fa8 100%);
    box-shadow: 0 18px 42px rgba(15, 42, 97, .16);
    color: #fff;
}

.employee-summary-shell__main {
    display: flex;
    align-items: center;
    gap: 24px;
}

.employee-summary-shell__avatar {
    width: 116px;
    height: 116px;
    border-radius: 32px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #4076e8, #2a53bb);
    border: 4px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
    flex-shrink: 0;
}

.employee-summary-shell__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-summary-shell__avatar span {
    font-size: 2.35rem;
    font-weight: 900;
}

.employee-summary-shell__eyebrow {
    display: block;
    color: rgba(189, 215, 255, .95);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.employee-summary-shell__identity h2 {
    margin: 8px 0 10px;
    font-size: clamp(2rem, 2.6vw, 2.9rem);
    letter-spacing: -.04em;
    line-height: 1.05;
}

.employee-summary-shell__subtext {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    color: rgba(235, 242, 255, .88);
}

.employee-summary-shell__subtext strong {
    color: #fff;
    font-size: 1.18rem;
}

.employee-summary-shell__highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-top: 24px;
}

.employee-summary-shell__highlights div,
.employee-summary-shell__side {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
}

.employee-summary-shell__highlights span,
.employee-summary-shell__side span {
    display: block;
    color: rgba(191, 215, 255, .92);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.employee-summary-shell__highlights strong,
.employee-summary-shell__side strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.45;
}

.employee-summary-shell__side p {
    margin: 12px 0 0;
    color: rgba(235, 242, 255, .86);
    line-height: 1.7;
}

.employee-review-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 20px;
    padding: 24px 26px;
    border-radius: 24px;
    border: 1px solid #dbe8fb;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
}

.employee-review-strip__copy h2 {
    margin: 6px 0 10px;
    color: #0f2b67;
    font-size: 1.55rem;
}

.employee-review-strip__copy p {
    margin: 0;
    color: #637693;
    line-height: 1.65;
}

.employee-review-strip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.employee-review-strip__meta span {
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2ebf7;
    color: #5e7393;
}

.employee-review-strip__meta strong {
    color: #17396e;
}

.employee-review-strip__actions {
    display: grid;
    gap: 12px;
    align-content: start;
}

.employee-review-strip__actions form {
    display: grid;
    gap: 10px;
}

.employee-review-strip__photo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 1px solid #d8e6ff;
    border-radius: 14px;
    background: #fff;
    color: #31527d;
    font-size: .78rem;
    font-weight: 750;
}

.employee-review-strip__photo img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #d6e2f7;
}

.employee-profile-tabs-v2 {
    display: grid;
    gap: 22px;
}

.employee-profile-tabs-v2__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #dbe5f2;
    border-radius: 22px;
    background: #fff;
}

.employee-profile-tabs-v2__tab {
    border: 0;
    background: transparent;
    color: #6e809c;
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.employee-profile-tabs-v2__tab:hover {
    color: #17396e;
    background: #f4f7fc;
}

.employee-profile-tabs-v2__tab.is-active {
    background: linear-gradient(180deg, #1f5bca, #15449a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(31, 91, 202, .18);
}

.employee-profile-tabs-v2__panel {
    display: grid;
    gap: 22px;
}

.employee-section-card {
    padding: 28px 30px;
    border: 1px solid #dbe5f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.employee-section-card--soft {
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}

.employee-section-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.employee-section-card__header h2 {
    margin: 0 0 6px;
    color: #102a5a;
    font-size: 1.75rem;
    letter-spacing: -.03em;
}

.employee-section-card__header p {
    margin: 0;
    color: #74839a;
    line-height: 1.6;
}

.employee-section-card__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid #d7e3f3;
    background: #f7fbff;
    color: #193a74;
    font-size: 1.3rem;
    font-weight: 900;
}

.employee-basic-layout {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.employee-basic-layout__identity {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 18px;
    border-right: 1px solid #e6edf6;
}

.employee-basic-layout__avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(160deg, #e7efff, #d4e1fb);
    color: #1f5cc8;
    font-size: 2.35rem;
    font-weight: 900;
}

.employee-basic-layout__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-basic-layout__copy strong,
.employee-basic-layout__copy span {
    display: block;
}

.employee-basic-layout__copy strong {
    color: #102a5a;
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.employee-basic-layout__copy span {
    color: #6d7f9a;
    margin-top: 8px;
    line-height: 1.55;
}

.employee-basic-layout__details dl,
.employee-details-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px 26px;
    margin: 0;
}

.employee-basic-layout__details dl div,
.employee-details-list div {
    display: grid;
    gap: 6px;
}

.employee-basic-layout__details dt,
.employee-details-list dt {
    color: #6c7f9d;
    font-weight: 800;
}

.employee-basic-layout__details dd,
.employee-details-list dd {
    margin: 0;
    color: #102a5a;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.55;
}

.employee-details-list--single {
    grid-template-columns: 1fr;
}

.employee-details-list--compact dt,
.employee-details-list--compact dd {
    font-size: .95rem;
}

.employee-two-column-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
}

.employee-two-column-layout--narrow-gap {
    gap: 18px;
}

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

.employee-summary-metrics div {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #e1e9f5;
    background: #f8fbff;
}

.employee-summary-metrics span {
    display: block;
    color: #6e809c;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-summary-metrics strong {
    display: block;
    margin-top: 8px;
    color: #102a5a;
    font-size: 1.3rem;
}

.employee-section-inline-note {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f6f9ff;
    border: 1px solid #e3ebf8;
    color: #5f7393;
}

.employee-section-inline-note strong {
    color: #102a5a;
}

.employee-payroll-stack {
    display: grid;
    gap: 14px;
}

.employee-payroll-row {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #dce6f3;
    background: #fbfdff;
    display: grid;
    grid-template-columns: minmax(210px,.7fr) minmax(120px,.25fr) minmax(0,1fr);
    gap: 16px;
    align-items: start;
}

.employee-payroll-row__period strong,
.employee-payroll-row__period span {
    display: block;
}

.employee-payroll-row__period span {
    margin-top: 4px;
    color: #75839a;
    font-size: .84rem;
}

.employee-payroll-row__meta {
    display: grid;
    gap: 8px;
}

.employee-payroll-row__meta span,
.employee-payroll-row__notes p {
    color: #657892;
    font-size: .88rem;
    line-height: 1.55;
}

.employee-payroll-row__meta strong,
.employee-payroll-row__notes strong {
    color: #223b67;
}

.employee-payroll-row__notes {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid #e6edf6;
}

.employee-location-workspace {
    display: grid;
    grid-template-columns: minmax(300px,.75fr) minmax(0,1fr);
    gap: 22px;
}

.employee-location-workspace__list {
    display: grid;
    gap: 12px;
}

.employee-location-list-item {
    width: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #dce6f2;
    background: #f9fbff;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.employee-location-list-item strong,
.employee-location-list-item span,
.employee-location-list-item small {
    display: block;
}

.employee-location-list-item strong {
    color: #17396e;
}

.employee-location-list-item span {
    margin-top: 4px;
    color: #6d7f98;
    font-size: .9rem;
    line-height: 1.55;
}

.employee-location-list-item small {
    margin-top: 6px;
    color: #7386a0;
}

.employee-location-list-item.is-active {
    border-color: #2361d0;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(35, 97, 208, .1);
}

.employee-location-list-item__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.employee-location-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.employee-location-badge--primary {
    background: #eaf3ff;
    color: #205cc8;
}

.employee-location-badge--inactive {
    background: #fff1f1;
    color: #c5323f;
}

.employee-location-workspace__preview {
    display: grid;
    gap: 16px;
}

.employee-location-map-frame {
    width: 100%;
    min-height: 320px;
    border: 1px solid #dce4ee;
    border-radius: 22px;
    background: #edf2f9;
}

.employee-location-preview-card {
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #dde7f3;
    background: #f9fbff;
}

.employee-location-preview-card h3 {
    margin: 0 0 8px;
    color: #102a5a;
    font-size: 1.25rem;
}

.employee-location-preview-card p {
    margin: 0 0 16px;
    color: #6f8098;
    line-height: 1.6;
}

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

.employee-attendance-filters label {
    display: grid;
    gap: 8px;
}

.employee-attendance-filters span {
    color: #6c7f9d;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.employee-attendance-filters select {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border: 1px solid #d7e3f3;
    background: #fff;
    color: #17396e;
    padding: 0 14px;
    font-weight: 700;
}

.employee-attendance-table-wrap {
    overflow-x: auto;
}

.employee-attendance-table {
    width: 100%;
    border-collapse: collapse;
}

.employee-attendance-table thead th {
    padding: 0 0 12px;
    text-align: left;
    color: #6f819e;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e9f2;
}

.employee-attendance-table tbody td {
    padding: 16px 8px 16px 0;
    border-bottom: 1px solid #edf2f7;
    vertical-align: top;
}

.employee-attendance-table tbody strong,
.employee-attendance-table tbody span,
.employee-attendance-table tbody small {
    display: block;
}

.employee-attendance-table tbody span,
.employee-attendance-table tbody small {
    margin-top: 5px;
    color: #6f8097;
    line-height: 1.45;
}

.employee-settings-actions {
    display: grid;
    gap: 12px;
}

.employee-empty-state--compact {
    margin: 0;
}

@media (max-width: 1180px) {
    .employee-summary-shell,
    .employee-review-strip,
    .employee-location-workspace,
    .employee-payroll-row {
        grid-template-columns: 1fr;
    }

    .employee-summary-shell__highlights,
    .employee-summary-metrics {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .employee-basic-layout {
        grid-template-columns: 1fr;
    }

    .employee-basic-layout__identity {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid #e6edf6;
    }
}

@media (max-width: 940px) {
    .employee-profile-header-v2,
    .employee-summary-shell__main {
        flex-direction: column;
        align-items: flex-start;
    }

    .employee-profile-header-v2__actions {
        width: 100%;
    }

    .employee-two-column-layout,
    .employee-attendance-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .employee-profile-tabs-v2__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-profile-tabs-v2__tab {
        width: 100%;
        text-align: left;
    }

    .employee-section-card {
        padding: 22px 20px;
    }

    .employee-summary-shell {
        padding: 22px;
    }

    .employee-summary-shell__highlights,
    .employee-summary-metrics,
    .employee-basic-layout__details dl,
    .employee-details-list {
        grid-template-columns: 1fr;
    }

    .employee-attendance-table thead {
        display: none;
    }

    .employee-attendance-table,
    .employee-attendance-table tbody,
    .employee-attendance-table tr,
    .employee-attendance-table td {
        display: block;
        width: 100%;
    }

    .employee-attendance-table tr {
        padding: 14px 0;
        border-bottom: 1px solid #edf2f7;
    }

    .employee-attendance-table tbody td {
        padding: 10px 0 0;
        border-bottom: 0;
    }
}

/* Employee profile tabs: the browser's [hidden] state must win over the grid panel layout. */
.employee-profile-tabs-v2__panel[hidden] {
    display: none !important;
}

/* Employee profile refinement: single identity header, flat section surfaces and contained list photos. */
.ta-mini-avatar {
    flex: 0 0 42px;
    min-width: 42px;
    max-width: 42px;
    overflow: hidden;
    line-height: 0;
}

.ta-mini-avatar--photo {
    background: #eaf1ff;
}

.ta-mini-avatar--photo img {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.employee-profile-page--workspace-v2 {
    gap: 16px;
}

.employee-profile-page__back {
    align-self: flex-start;
    margin: 0;
}

.employee-profile-header-v2 {
    display: none;
}

.employee-summary-shell {
    grid-template-columns: minmax(0, 1.45fr) minmax(275px, .55fr);
    gap: 28px;
    padding: 28px 30px;
    border-radius: 26px;
}

.employee-summary-shell__title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.employee-summary-shell__identity h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.15rem, 3vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.employee-summary-shell__account {
    margin: 10px 0 0;
    color: rgba(235, 242, 255, .88);
    line-height: 1.5;
}

.employee-summary-shell__highlights {
    display: flex;
    gap: 0;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
}

.employee-summary-shell__highlights div {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 0;
    background: transparent;
}

.employee-summary-shell__highlights div + div {
    border-left: 1px solid rgba(255,255,255,.11);
}

.employee-summary-shell__side {
    align-self: stretch;
    padding: 18px 20px;
    border-radius: 0;
    border-left: 1px solid rgba(255,255,255,.16);
    background: transparent;
}

.employee-profile-tabs-v2 {
    gap: 16px;
}

.employee-profile-tabs-v2__nav {
    padding: 8px 10px;
    border-radius: 18px;
}

.employee-profile-tabs-v2__tab {
    padding: 12px 17px;
}

.employee-profile-tabs-v2__panel {
    gap: 0;
    overflow: hidden;
    border: 1px solid #dbe5f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
}

.employee-profile-tabs-v2__panel[hidden] {
    display: none !important;
}

.employee-section-card {
    padding: 28px 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.employee-section-card--soft {
    background: transparent;
}

.employee-section-card__header {
    margin-bottom: 22px;
}

.employee-section-card__header h2 {
    font-size: 1.62rem;
}

.employee-section-card__edit,
.employee-inline-editor__cancel {
    cursor: pointer;
}

.employee-section-card__edit {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.employee-profile-subsections,
.employee-profile-tabs-v2__panel > .employee-two-column-layout {
    gap: 0;
    border-top: 1px solid #e7edf5;
}

.employee-profile-subsections > .employee-section-card,
.employee-profile-subsections > .employee-inline-editor,
.employee-profile-tabs-v2__panel > .employee-two-column-layout > .employee-section-card {
    min-width: 0;
}

.employee-profile-subsections > .employee-section-card + .employee-section-card,
.employee-profile-tabs-v2__panel > .employee-two-column-layout > .employee-section-card + .employee-section-card {
    border-left: 1px solid #e7edf5;
}

.employee-basic-layout__identity {
    padding-right: 26px;
}

.employee-summary-metrics {
    gap: 0;
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #e1e9f5;
    border-radius: 16px;
    background: #f8fbff;
}

.employee-summary-metrics div {
    padding: 15px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.employee-summary-metrics div + div {
    border-left: 1px solid #e1e9f5;
}

.employee-payroll-row {
    grid-template-columns: minmax(200px,.7fr) minmax(110px,.22fr) minmax(0,1fr) auto;
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff;
}

.employee-payroll-row__download {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.employee-payroll-row__download .ta-button {
    white-space: nowrap;
}

.employee-payroll-row__notes {
    grid-column: 1 / -1;
}

.employee-inline-editor {
    padding: 28px 30px;
    border-top: 1px solid #e7edf5;
    background: #f7faff;
}

.employee-inline-editor[hidden] {
    display: none !important;
}

.employee-inline-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.employee-inline-editor__header h2 {
    margin: 0 0 6px;
    color: #102a5a;
    font-size: 1.55rem;
}

.employee-inline-editor__header p {
    margin: 0;
    color: #71829b;
}

.employee-inline-editor__cancel {
    padding: 10px 14px;
    border: 1px solid #d5e2f4;
    border-radius: 12px;
    background: #fff;
    color: #193a74;
    font-weight: 800;
}

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

.employee-inline-editor__grid--single {
    grid-template-columns: 1fr;
}

.employee-inline-editor__grid label {
    display: grid;
    gap: 8px;
}

.employee-inline-editor__grid label span {
    color: #5f7393;
    font-size: .8rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.employee-inline-editor__grid input,
.employee-inline-editor__grid select {
    min-height: 48px;
    width: 100%;
    border: 1px solid #d6e2f2;
    border-radius: 12px;
    background: #fff;
    color: #102a5a;
    padding: 0 13px;
    font: inherit;
}

.employee-inline-editor__grid input[type="file"] {
    padding: 10px 12px;
    min-height: 48px;
}

.employee-inline-editor__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.employee-work-location-editor-list {
    display: grid;
    gap: 10px;
}

.employee-work-location-editor-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dce6f2;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.employee-work-location-editor-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #1f5bca;
}

.employee-work-location-editor-option strong,
.employee-work-location-editor-option small {
    display: block;
}

.employee-work-location-editor-option strong {
    color: #17396e;
}

.employee-work-location-editor-option small {
    margin-top: 4px;
    color: #6f819d;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .employee-summary-shell__highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .employee-summary-shell__highlights div + div {
        border-left: 0;
    }

    .employee-summary-shell__highlights div:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,.11);
    }

    .employee-summary-shell__highlights div:nth-child(n+3) {
        border-top: 1px solid rgba(255,255,255,.11);
    }

    .employee-summary-shell__side {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.16);
    }

    .employee-payroll-row {
        grid-template-columns: minmax(0,1fr) auto;
    }

    .employee-payroll-row__meta,
    .employee-payroll-row__notes {
        grid-column: 1 / -1;
    }

    .employee-payroll-row__download {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 940px) {
    .employee-profile-subsections > .employee-section-card + .employee-section-card,
    .employee-profile-tabs-v2__panel > .employee-two-column-layout > .employee-section-card + .employee-section-card {
        border-left: 0;
        border-top: 1px solid #e7edf5;
    }

    .employee-inline-editor__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .employee-summary-shell {
        padding: 22px;
    }

    .employee-summary-shell__highlights {
        grid-template-columns: 1fr;
    }

    .employee-summary-shell__highlights div:nth-child(even) {
        border-left: 0;
    }

    .employee-summary-shell__highlights div + div {
        border-top: 1px solid rgba(255,255,255,.11);
    }

    .employee-section-card,
    .employee-inline-editor {
        padding: 22px 20px;
    }

    .employee-inline-editor__header {
        flex-direction: column;
    }

    .employee-summary-metrics {
        grid-template-columns: 1fr;
    }

    .employee-summary-metrics div + div {
        border-left: 0;
        border-top: 1px solid #e1e9f5;
    }
}


/* Attendance reports */
.ta-report-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin:28px 0 16px}.ta-report-heading h3{margin:3px 0 6px;font-size:1.25rem}.ta-report-heading p{margin:0;color:var(--ta-text-muted);max-width:800px}.ta-report-generated{color:var(--ta-text-muted);font-size:.84rem;white-space:nowrap}.ta-report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.ta-report-metric{border:1px solid var(--ta-border);background:#fff;border-radius:18px;padding:18px 20px}.ta-report-metric span{display:block;color:var(--ta-text-muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.ta-report-metric strong{display:block;margin:7px 0 4px;font-size:1.45rem;color:var(--ta-navy)}.ta-report-metric small{display:block;color:var(--ta-text-muted);line-height:1.4}.ta-report-metric-primary{border-color:#c8d9ff;background:#f7faff}.ta-report-metric-warning{border-color:#f7d39b;background:#fffaf1}.ta-report-secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.ta-report-exception-list{display:grid;gap:0}.ta-report-exception{padding:15px 0;border-bottom:1px solid var(--ta-border);display:flex;justify-content:space-between;gap:16px}.ta-report-exception:last-child{border-bottom:0}.ta-report-exception strong,.ta-report-exception span,.ta-report-exception small{display:block}.ta-report-exception span,.ta-report-exception small{margin-top:3px;color:var(--ta-text-muted);font-size:.84rem}.ta-report-exception p{margin:8px 0 0;color:var(--ta-text);font-size:.9rem;line-height:1.45}.ta-report-exception-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;white-space:nowrap}.ta-text-warning{color:#b46a00!important}@media(max-width:1100px){.ta-report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ta-report-secondary-grid{grid-template-columns:1fr}}@media(max-width:680px){.ta-report-heading{display:block}.ta-report-generated{display:block;margin-top:8px;white-space:normal}.ta-report-metrics{grid-template-columns:1fr}.ta-report-exception{display:block}.ta-report-exception-actions{margin-top:10px;align-items:flex-start;flex-direction:row}.ta-filter-form-attendance-reports{grid-template-columns:1fr!important}}


/* Leave and absence */
.ta-filter-form-leave { grid-template-columns: minmax(250px, 1fr) 155px 155px 170px 165px auto auto auto; }
.ta-leave-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.ta-leave-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; margin-top: 18px; }
.ta-leave-review-form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; min-width: 260px; }
.ta-leave-review-form input { min-width: 190px; flex: 1 1 190px; border: 1px solid var(--ta-border); border-radius: 10px; padding: 8px 10px; background: #fff; }
.ta-leave-reject-btn { padding: 8px 10px; font-size: 12px; }
.ta-leave-reason { max-width: 280px; line-height: 1.45; color: #475569; white-space: normal; }
.ta-leave-policy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ta-leave-policy-form .ta-primary-btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 1380px) { .ta-filter-form-leave { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .ta-leave-metrics, .ta-leave-bottom-grid { grid-template-columns: 1fr; } .ta-filter-form-leave { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ta-filter-form-leave, .ta-leave-policy-form { grid-template-columns: 1fr; } .ta-leave-review-form { justify-content: stretch; min-width: 0; } .ta-leave-review-form input { width: 100%; } }

/* Scheduling and Pay - Pay and Rates layout fix */
.ta-pay-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

@media (max-width: 1100px) {
    .ta-pay-settings-grid {
        grid-template-columns: 1fr;
    }
}



/* Timesheets: aligned filters and monthly-report mode */

.ta-timesheet-filter-panel {
    padding: 22px;
}

.ta-filter-form-timesheets {
    display: block;
}

.ta-timesheet-filter-heading {
    margin-bottom: 18px;
}

    .ta-timesheet-filter-heading h3 {
        margin: 0;
        font-size: 18px;
    }

    .ta-timesheet-filter-heading p {
        margin: 5px 0 0;
        color: var(--ta-muted);
        font-size: 13px;
        line-height: 1.45;
    }

.ta-timesheet-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.55fr)
        minmax(150px, 0.78fr)
        minmax(230px, 1.14fr)
        minmax(160px, 0.78fr)
        minmax(170px, 0.86fr)
        minmax(170px, 0.86fr);
    gap: 16px;
    align-items: start;
}

    .ta-timesheet-filter-grid .ta-form-group {
        min-width: 0;
        align-content: start;
    }

    .ta-timesheet-filter-grid .ta-field-help {
        min-height: 30px;
    }

.ta-timesheet-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ta-border);
}

    .ta-timesheet-filter-actions .ta-filter-checkbox {
        min-height: auto;
        padding: 11px 0;
    }

.ta-timesheet-filter-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

    .ta-timesheet-filter-action-buttons .ta-primary-btn {
        min-width: 220px;
    }

.ta-timesheet-month-scope {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #312e81;
}

@media (max-width: 1500px) {
    .ta-timesheet-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .ta-timesheet-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-timesheet-filter-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .ta-timesheet-filter-action-buttons {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .ta-timesheet-filter-panel {
        padding: 16px;
    }

    .ta-timesheet-filter-grid {
        grid-template-columns: 1fr;
    }

    .ta-timesheet-filter-grid .ta-field-help {
        min-height: auto;
    }

    .ta-timesheet-filter-action-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .ta-timesheet-filter-action-buttons .ta-primary-btn,
    .ta-timesheet-filter-action-buttons .ta-secondary-btn {
        width: 100%;
        text-align: center;
    }
}

/* Timesheets filter layout hotfix - 20260628 */
.ta-timesheet-filter-panel {
    padding: 24px !important;
}

.ta-filter-form-timesheets {
    display: block !important;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid {
    display: grid !important;
    align-items: start;
    gap: 18px;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid-primary {
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(165px, 0.62fr)
        minmax(270px, 1fr) !important;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid-period {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 18px;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-form-group {
    display: grid;
    min-width: 0;
    align-content: start;
    grid-template-rows: auto minmax(48px, auto) minmax(34px, auto);
    gap: 7px;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-form-group input,
.ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-form-group select {
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
}

.ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-field-help {
    min-height: 34px;
    margin-top: 0;
}

.ta-filter-form-timesheets .ta-timesheet-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ta-border);
}

.ta-filter-form-timesheets .ta-timesheet-filter-actions .ta-filter-checkbox {
    min-height: auto;
    padding: 12px 0;
}

.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-primary-btn {
    min-width: 220px;
}

@media (max-width: 1120px) {
    .ta-filter-form-timesheets .ta-timesheet-filter-grid-primary {
        grid-template-columns: minmax(0, 1fr) minmax(185px, 0.66fr) !important;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid-primary .ta-form-group:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .ta-filter-form-timesheets .ta-timesheet-filter-grid-primary,
    .ta-filter-form-timesheets .ta-timesheet-filter-grid-period {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid-primary .ta-form-group:nth-child(3) {
        grid-column: auto;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid-period .ta-form-group:nth-child(3) {
        grid-column: 1 / -1;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-action-buttons {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .ta-timesheet-filter-panel {
        padding: 16px !important;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid-primary,
    .ta-filter-form-timesheets .ta-timesheet-filter-grid-period {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid-period .ta-form-group:nth-child(3) {
        grid-column: auto;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-form-group {
        grid-template-rows: auto minmax(48px, auto) auto;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-grid .ta-field-help {
        min-height: auto;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-action-buttons {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-primary-btn,
    .ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-secondary-btn {
        width: 100%;
        text-align: center;
    }
}
/* End Timesheets filter layout hotfix - 20260628 */
/* Timesheets direct desktop grid fix - 20260628 */
/*
   The Timesheets view contains two field-grid wrappers.  Flatten those wrappers
   only for this filter so every field is positioned by one explicit desktop grid.
*/
@media (min-width: 560px) {
    body .ta-filter-form.ta-filter-form-timesheets {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(160px, 0.62fr) minmax(250px, 1fr) !important;
        grid-template-areas:
            "search status location"
            "month from to"
            "inactive actions actions";
        align-items: start;
        gap: 18px 16px !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid {
        display: contents !important;
        margin: 0 !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-primary,
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-period {
        grid-template-columns: none !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-primary .ta-form-group:nth-child(1) { grid-area: search; }
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-primary .ta-form-group:nth-child(2) { grid-area: status; }
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-primary .ta-form-group:nth-child(3) { grid-area: location; }
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-period .ta-form-group:nth-child(1) { grid-area: month; }
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-period .ta-form-group:nth-child(2) { grid-area: from; }
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid-period .ta-form-group:nth-child(3) { grid-area: to; }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-actions {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-actions .ta-filter-checkbox {
        grid-area: inactive;
        align-self: center;
        margin: 0;
        padding: 10px 0;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons {
        grid-area: actions;
        display: flex !important;
        align-self: center;
        justify-content: flex-start !important;
        gap: 12px;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-primary-btn {
        min-width: 220px;
    }
}

@media (max-width: 559px) {
    body .ta-filter-form.ta-filter-form-timesheets {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-actions {
        display: flex !important;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-primary-btn,
    body .ta-filter-form.ta-filter-form-timesheets .ta-timesheet-filter-action-buttons .ta-secondary-btn {
        width: 100%;
        text-align: center;
    }
}
/* End Timesheets direct desktop grid fix - 20260628 */

/* Shift patterns foundation */
.ta-inline-note {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #2d62c8;
    font-size: 0.72rem;
    font-weight: 800;
}

.ta-shift-pattern-hint {
    padding: 0.85rem 1rem;
    border: 1px solid #b8d2ff;
    border-radius: 0.85rem;
    background: #eef5ff;
    color: #234b8e;
    font-size: 0.88rem;
    line-height: 1.45;
}

.ta-shift-pattern-priority-panel {
    margin-top: 1.25rem;
}

.ta-shift-pattern-priority {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0;
}

.ta-shift-pattern-priority span {
    display: block;
    padding: 0.75rem;
    border: 1px solid #dfe7f5;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: #40516d;
    font-size: 0.84rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .ta-shift-pattern-priority {
        grid-template-columns: 1fr;
    }
}

/* EXHALE_ROTA_NOTIFY_BASE_ASSETS_20260630 */
/*
   Rota and Notifications page styles are intentionally bundled into the
   already-proven global stylesheet. This avoids depending on Razor page
   sections for operational UI while keeping CSP strict and self-hosted.
*/
.rota-command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:6px 0 24px}
    .rota-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#fb5f14}
    .rota-command h2{margin:5px 0 8px;font-size:30px;letter-spacing:-.04em;color:#0d1c36}
    .rota-command p{margin:0;color:#60708a;max-width:720px;line-height:1.5}
    .rota-command-actions{display:flex;gap:10px;align-items:center}
    .rota-button{border:0;border-radius:13px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center}
    .rota-button-primary{background:linear-gradient(135deg,#1767ef,#0b49be);color:#fff;box-shadow:0 9px 20px rgba(22,95,231,.24)}
    .rota-button-ghost{background:#eef4ff;color:#164caa}
    .rota-shell{border:1px solid #dfe7f5;background:#fff;border-radius:24px;box-shadow:0 16px 44px rgba(23,44,84,.07);overflow:hidden}
    .rota-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:14px;align-items:center;padding:18px 20px;border-bottom:1px solid #e8edf6}
    .rota-range-nav{display:flex;gap:8px;align-items:center}
    .rota-range-nav a{color:#60708a;text-decoration:none;font-weight:800;padding:8px 10px;border-radius:9px}
    .rota-range-nav a:hover{background:#f2f6fe;color:#154cb5}
    .rota-range-title{text-align:center;font-size:17px;font-weight:900;color:#13233e}
    .rota-range-title small{display:block;font-size:12px;color:#70809b;font-weight:600;margin-top:3px}
    .rota-mode-tabs{display:flex;gap:6px;justify-content:flex-end}
    .rota-mode-tabs a{padding:8px 12px;border-radius:9px;text-decoration:none;color:#5f6f89;font-weight:800;font-size:13px}
    .rota-mode-tabs a.is-active{background:#0e56d8;color:white}
    .rota-filterbar{border-bottom:1px solid #e8edf6;padding:12px 20px;display:flex;gap:10px;flex-wrap:wrap;background:#fbfcff}
    .rota-filterbar select,.rota-filterbar input{border:1px solid #dce5f1;border-radius:10px;background:#fff;padding:9px 10px;min-width:150px;color:#263956}
    .rota-filterbar input{min-width:220px;flex:1}
    .rota-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid #edf1f7;border-top:1px solid #edf1f7}
    .rota-dow{padding:10px 12px;background:#f7f9fd;border-right:1px solid #edf1f7;border-bottom:1px solid #edf1f7;font-weight:900;font-size:11px;letter-spacing:.07em;color:#78869c;text-transform:uppercase}
    .rota-day{min-height:146px;padding:10px;border-right:1px solid #edf1f7;border-bottom:1px solid #edf1f7;background:#fff;position:relative}
    .rota-day.is-muted{background:#fbfcff;color:#a6b2c4}
    .rota-day.is-today{box-shadow:inset 0 0 0 2px #1d67e9;background:#f7faff}
    .rota-day.has-leave{background:linear-gradient(135deg,#fffdf1,#fff)}
    .rota-date{display:flex;align-items:center;justify-content:space-between;font-weight:900;color:#172946;margin-bottom:7px}
    .rota-date .today-mark{font-size:10px;color:#0d56d8;background:#e7f0ff;border-radius:999px;padding:3px 6px}
    .rota-leave-chip{display:block;font-size:10px;font-weight:800;color:#8a6500;background:#fff0b5;border-left:3px solid #e5ad00;padding:3px 5px;border-radius:4px;margin:3px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rota-shift-chip{display:block;text-decoration:none;color:#1a3260;background:#ecf2ff;border-left:3px solid #1260df;padding:5px 6px;border-radius:5px;margin:4px 0;font-size:11px;line-height:1.25;overflow:hidden}
    .rota-shift-chip:hover{background:#dce9ff}
    .rota-shift-chip.is-cancelled,.rota-shift-chip.is-employee-declined{background:#f5f6f8;border-left-color:#98a4b5;color:#67748a;text-decoration:line-through}
    .rota-shift-chip.is-interrupted{background:#fff0f0;border-left-color:#e65454;color:#8c2222}
    .rota-shift-chip strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rota-shift-chip small{color:inherit;opacity:.82}
    .rota-ops-strip{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:18px 0;padding:15px 18px;border:1px solid #e1e8f5;background:linear-gradient(90deg,#f8fbff,#fff);border-radius:16px}
    .rota-ops-strip strong{display:block;color:#1a2e52}.rota-ops-strip span{font-size:13px;color:#63728b}
    .rota-agenda{border:1px solid #e1e8f3;border-radius:18px;overflow:hidden;background:#fff}
    .rota-agenda-head{display:flex;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid #e8edf6}
    .rota-agenda-head h3{margin:0;color:#13233e}.rota-agenda-head p{margin:4px 0 0;color:#71809a;font-size:13px}
    .rota-agenda-row{display:grid;grid-template-columns:150px minmax(180px,1fr) minmax(140px,1fr) auto;gap:12px;padding:14px 18px;border-bottom:1px solid #eef2f7;align-items:center}
    .rota-agenda-row:last-child{border-bottom:0}.rota-agenda-time{font-weight:900;color:#17315d}.rota-agenda-row small{display:block;color:#6b7890;margin-top:3px}.rota-status{font-size:11px;font-weight:900;border-radius:999px;padding:5px 8px;white-space:nowrap}.rota-status.scheduled{background:#e5f7eb;color:#10713a}.rota-status.cancelled,.rota-status.employee-declined{background:#f3f4f6;color:#68758a}.rota-status.interrupted{background:#fff0ee;color:#bb3c22}
    .rota-modal[hidden]{display:none}.rota-modal{position:fixed;inset:0;background:rgba(7,18,43,.56);z-index:10000;display:grid;place-items:center;padding:18px}.rota-modal-panel{background:#fff;border-radius:22px;width:min(860px,100%);box-shadow:0 24px 80px rgba(0,0,0,.28);overflow:hidden}.rota-modal-head{padding:20px 24px;border-bottom:1px solid #e7edf7;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.rota-modal-head h3{margin:0;font-size:22px;color:#12233e}.rota-modal-head p{margin:5px 0 0;color:#6d7c94;font-size:13px}.rota-modal-close{border:0;background:#f1f4f9;border-radius:9px;width:34px;height:34px;font-size:20px;cursor:pointer}.rota-modal-body{padding:22px 24px}.rota-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.rota-form-field{display:grid;gap:6px}.rota-form-field label{font-size:12px;font-weight:900;color:#334763}.rota-form-field input,.rota-form-field select{border:1px solid #d9e3f1;border-radius:10px;padding:10px;background:#fff;color:#1a2e50}.rota-form-field.full{grid-column:1/-1}.rota-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px;border-top:1px solid #e7edf7;background:#fbfcff}.rota-leave-warning{display:none;padding:10px 12px;background:#fff3bf;border:1px solid #f2d36b;color:#745500;border-radius:10px;font-size:13px;font-weight:700}.rota-leave-warning.show{display:block}
    .rota-empty{padding:48px 20px;text-align:center;color:#6d7c94}.rota-empty strong{color:#1b2d4e;font-size:17px;display:block;margin-bottom:6px}
    .rota-agenda-actions{display:flex;gap:8px;align-items:center}.rota-button-small{padding:8px 10px}.rota-allowance-name{font-weight:900;color:#1a3158;margin-bottom:16px}.rota-button.is-disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.rota-modal-open{overflow:hidden}
    @media(max-width:980px){.rota-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}.rota-dow{display:none}.rota-day{min-height:120px}.rota-toolbar{grid-template-columns:1fr}.rota-range-title{text-align:left}.rota-mode-tabs{justify-content:flex-start}.rota-agenda-row{grid-template-columns:1fr}.rota-command{grid-template-columns:1fr}.rota-command-actions{justify-content:flex-start}.rota-form-grid{grid-template-columns:1fr}.rota-form-field.full{grid-column:auto}}

.notify-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin:4px 0 22px}
    .notify-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#f45b17}
    .notify-hero h2{margin:4px 0 6px;font-size:30px;letter-spacing:-.04em;color:#10213c}
    .notify-hero p{margin:0;max-width:700px;color:#6a7890;line-height:1.45}
    .notify-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px}
    .notify-compose,.notify-history{background:white;border:1px solid #e1e8f4;border-radius:22px;box-shadow:0 12px 32px rgba(25,48,88,.06)}
    .notify-compose-head,.notify-history-head{padding:20px 22px;border-bottom:1px solid #e9eef6}.notify-compose-head h3,.notify-history-head h3{margin:0;color:#152946}.notify-compose-head p,.notify-history-head p{margin:5px 0 0;color:#6d7c94;font-size:13px}
    .notify-compose-body{padding:20px 22px;display:grid;gap:16px}
    .notify-audience-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .notify-audience-tabs label{border:1px solid #dce5f3;border-radius:12px;padding:11px;cursor:pointer;color:#5a6c87;font-weight:800;font-size:13px}.notify-audience-tabs label:has(input:checked){border-color:#1765e5;background:#edf4ff;color:#124da9}.notify-audience-tabs input{margin-right:6px}
    .notify-field{display:grid;gap:7px}.notify-field label{font-size:12px;font-weight:900;color:#334966}.notify-field input,.notify-field textarea,.notify-field select{border:1px solid #d9e3f0;border-radius:10px;padding:10px 11px;font:inherit;color:#203757;background:white}.notify-field textarea{min-height:132px;resize:vertical}
    .notify-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.notify-employee-list{max-height:230px;overflow:auto;border:1px solid #dfe6f1;border-radius:12px;padding:6px;background:#fafcff}.notify-employee-option{display:flex;gap:9px;padding:9px;border-radius:8px;align-items:center}.notify-employee-option:hover{background:#eef4ff}.notify-employee-option strong{display:block;color:#253a58;font-size:13px}.notify-employee-option small{color:#74829a;font-size:11px}
    .notify-submit{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:4px}.notify-submit small{color:#697991;line-height:1.35}
    .notify-history-list{max-height:720px;overflow:auto}.notify-history-item{padding:16px 20px;border-bottom:1px solid #edf1f7}.notify-history-item:last-child{border-bottom:0}.notify-history-item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.notify-history-item h4{margin:0;color:#172a48;font-size:14px}.notify-history-item p{margin:6px 0;color:#5f718b;font-size:13px;line-height:1.45}.notify-meta{font-size:11px;color:#8390a4}.notify-severity{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:4px 7px;background:#edf3ff;color:#1852af}.notify-severity.urgent{background:#fff0e9;color:#bd4b16}.notify-severity.actionrequired{background:#fff5c9;color:#806000}
    .notify-delivery{font-size:11px;font-weight:700;color:#5f718b}.notify-delivery.ok{color:#0f7a42}.notify-delivery.fail{color:#bb402b}
    @media(max-width:980px){.notify-grid{grid-template-columns:1fr}.notify-row{grid-template-columns:1fr}.notify-hero{display:block}.notify-hero p{margin-bottom:12px}.notify-audience-tabs{grid-template-columns:1fr}}
/* Root header correction: the Rota view uses #rota-page as its command surface. */
#rota-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: 6px 0 24px;
}
#rota-page h2 {
    margin: 5px 0 8px;
    font-size: 30px;
    letter-spacing: -.04em;
    color: #0d1c36;
}
#rota-page p {
    margin: 0;
    color: #60708a;
    max-width: 720px;
    line-height: 1.5;
}
#rota-page .rota-command-actions {
    justify-content: flex-end;
}
@media (max-width: 980px) {
    #rota-page {
        grid-template-columns: 1fr;
    }
    #rota-page .rota-command-actions {
        justify-content: flex-start;
    }
}


/* Navigation, account archive and audit console */

.ta-nav-group {
    position: relative;
}

.ta-nav-group-toggle {
    display: flex;
    width: 100%;
    min-height: 45px;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #d7e1f1;
    cursor: pointer;
    text-align: left;
}

.ta-nav-group-toggle:hover,
.ta-nav-group.is-active .ta-nav-group-toggle {
    border-color: rgba(182, 204, 239, 0.11);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.ta-nav-group.is-active .ta-nav-group-toggle {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 3px 0 0 #5f96ff;
}

.ta-nav-group-toggle .ta-nav-icon:first-child {
    flex: 0 0 20px;
}

.ta-nav-group-toggle .ta-nav-icon:last-child {
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform .18s ease;
}

.ta-nav-group.is-open .ta-nav-group-toggle .ta-nav-icon:last-child {
    transform: rotate(180deg);
}

.ta-nav-group-toggle:hover .ta-nav-icon,
.ta-nav-group.is-active .ta-nav-group-toggle .ta-nav-icon {
    color: #ffffff;
}

.ta-nav-submenu {
    display: none;
    gap: 3px;
    margin: 3px 0 8px;
    padding: 2px 0 2px 21px;
    border-left: 1px solid rgba(185, 208, 242, 0.17);
}

.ta-nav-group.is-open .ta-nav-submenu {
    display: grid;
}

.ta-nav-sublink {
    display: flex;
    min-height: 35px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #aebfda;
    font-size: .83rem;
    font-weight: 650;
    text-decoration: none;
}

.ta-nav-sublink:hover,
.ta-nav-sublink.active {
    border-color: rgba(182, 204, 239, .11);
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.ta-nav-sublink .ta-nav-badge {
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    font-size: .67rem;
}

.ta-nav-divider {
    height: 1px;
    margin: 10px 8px 6px;
    background: rgba(186, 207, 240, .16);
}

.ta-nav-link-governance {
    color: #c3d2e8;
}

.ta-table-secondary {
    display: block;
    margin-top: 3px;
    color: var(--ta-muted);
    font-size: .8rem;
    line-height: 1.35;
}

.ta-table-detail-preview {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-monospace {
    font-family: Consolas, "Courier New", monospace;
    font-size: .78rem;
}

.ta-break-anywhere {
    overflow-wrap: anywhere;
}

.ta-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
}

.ta-secondary-link {
    color: var(--ta-primary);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
}

.ta-secondary-link:hover {
    text-decoration: underline;
}

.ta-archive-summary-panel,
.ta-audit-summary-panel {
    margin-bottom: 18px;
}

.ta-archive-summary,
.ta-audit-summary {
    display: grid;
    grid-template-columns: 145px 145px 190px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.ta-audit-summary {
    grid-template-columns: 155px 155px minmax(0, 1fr);
}

.ta-archive-summary > div,
.ta-audit-summary > div {
    padding-right: 18px;
    border-right: 1px solid var(--ta-border);
}

.ta-archive-summary span,
.ta-audit-summary span {
    display: block;
    color: var(--ta-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ta-archive-summary strong,
.ta-audit-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--ta-text);
    font-size: 1.4rem;
}

.ta-archive-summary p,
.ta-audit-summary p {
    margin: 0;
    color: var(--ta-muted);
    font-size: .87rem;
    line-height: 1.5;
}

.ta-archive-filter {
    grid-template-columns: minmax(240px, 1fr) 185px 210px auto;
}

.ta-audit-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ta-archive-prepare-layout,
.ta-archive-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
    gap: 18px;
    align-items: start;
}

.ta-archive-action-panel {
    border-color: #e2e9f3;
}

.ta-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.ta-detail-list > div {
    min-width: 0;
    padding: 15px 16px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-detail-list > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.ta-detail-list dt {
    margin: 0 0 5px;
    color: var(--ta-muted);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ta-detail-list dd {
    margin: 0;
    color: var(--ta-text);
    font-size: .91rem;
    line-height: 1.45;
}

.ta-detail-list-wide {
    grid-column: 1 / -1;
}

.ta-archive-safeguard {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    background: #f8fbff;
    color: #34445f;
    font-size: .88rem;
    line-height: 1.5;
}

.ta-archive-safeguard strong {
    color: #18345f;
}

.ta-archive-safeguard ul {
    display: grid;
    gap: 6px;
    margin: 9px 0 0;
    padding-left: 18px;
}

.ta-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ta-archive-inline-action {
    display: grid;
    gap: 12px;
    padding: 0 0 20px;
}

.ta-archive-inline-action + .ta-archive-inline-action {
    padding-top: 20px;
    border-top: 1px solid var(--ta-border);
}

.ta-archive-inline-action h4 {
    margin: 0;
    color: #a81d2a;
    font-size: .98rem;
}

.ta-archive-inline-action p {
    margin: 0;
    color: var(--ta-muted);
    font-size: .87rem;
    line-height: 1.5;
}

.ta-archive-permanent-action {
    margin-top: 2px;
}

.ta-field-help {
    margin: 0;
    color: var(--ta-muted);
    font-size: .8rem;
}

.ta-validation-summary {
    margin-bottom: 14px;
    color: #ba1e2e;
    font-size: .88rem;
}

.ta-audit-detail-panel {
    max-width: 980px;
}

@media (min-width: 901px) {
    html.ta-sidebar-pref-collapsed .ta-nav-group-toggle {
        justify-content: center;
        padding: 11px;
    }

    html.ta-sidebar-pref-collapsed .ta-nav-group-toggle .ta-nav-icon:last-child {
        display: none;
    }

    html.ta-sidebar-pref-collapsed .ta-nav-group-toggle:hover::after {
        position: absolute;
        z-index: 205;
        top: 50%;
        left: calc(100% + 12px);
        transform: translateY(-50%);
        padding: 8px 10px;
        border-radius: 10px;
        background: #10203d;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .22);
        color: #ffffff;
        content: attr(data-nav-label);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        pointer-events: none;
    }

    html.ta-sidebar-pref-collapsed .ta-nav-group .ta-nav-submenu {
        display: none;
        position: absolute;
        z-index: 204;
        top: 0;
        left: calc(100% + 10px);
        width: 220px;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(175, 199, 235, .18);
        border-radius: 13px;
        background: #132744;
        box-shadow: 0 14px 32px rgba(11, 28, 60, .28);
    }

    html.ta-sidebar-pref-collapsed .ta-nav-group:hover .ta-nav-submenu,
    html.ta-sidebar-pref-collapsed .ta-nav-group:focus-within .ta-nav-submenu {
        display: grid;
    }

    html.ta-sidebar-pref-collapsed .ta-nav-divider {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 1380px) {
    .ta-audit-filter {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .ta-archive-prepare-layout,
    .ta-archive-detail-grid {
        grid-template-columns: 1fr;
    }

    .ta-archive-filter,
    .ta-audit-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ta-archive-summary,
    .ta-audit-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ta-archive-summary > div,
    .ta-audit-summary > div {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid var(--ta-border);
    }

    .ta-detail-list {
        grid-template-columns: 1fr;
    }

    .ta-detail-list > div:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--ta-border);
    }

    .ta-detail-list > div:last-child {
        border-bottom: 0;
    }

    .ta-archive-filter,
    .ta-audit-filter {
        grid-template-columns: 1fr;
    }

    .ta-filter-actions {
        justify-content: flex-start;
    }

    .ta-table-detail-preview {
        max-width: 180px;
    }
}

/* Rota mileage/break review patch */
.rota-shift-chip.is-missed{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B;animation:rotaMissedPulse 1.6s ease-in-out infinite}
.rota-status.missed{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5;animation:rotaMissedPulse 1.6s ease-in-out infinite}
@keyframes rotaMissedPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.28)}50%{box-shadow:0 0 0 5px rgba(220,38,38,.08)}}

/* Rota view/edit hotfix 20260709 */
.rota-shift-chip{width:100%;border:0;text-align:left;cursor:pointer;font-family:inherit}
.rota-detail-panel{width:min(760px,100%)}
.rota-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:0}
.rota-detail-grid>div{border:1px solid #e1e8f5;border-radius:14px;padding:12px;background:#fbfdff}
.rota-detail-grid>div.full{grid-column:1/-1}
.rota-detail-grid dt{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:900;margin-bottom:5px}
.rota-detail-grid dd{margin:0;color:#102340;font-weight:800;line-height:1.35}
.rota-agenda-row{grid-template-columns:170px minmax(220px,.85fr) minmax(330px,1.25fr) minmax(260px,auto);align-items:center}
.rota-agenda-row small{line-height:1.35}
.rota-agenda-actions{justify-content:flex-end;flex-wrap:wrap;gap:8px}
.rota-button-small{min-height:36px;white-space:nowrap}
@media(max-width:980px){.rota-detail-grid{grid-template-columns:1fr}.rota-detail-grid>div.full{grid-column:auto}.rota-agenda-actions{justify-content:flex-start}}

/* Rota create/edit form polish - 20260709 */
.ta-form-card {
    background: #fff;
    border: 1px solid var(--ta-border, #dbe5f4);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    padding: 24px;
    margin: 0 0 24px;
}

.ta-form-card .ta-form-grid > div {
    display: grid;
    gap: 7px;
}

.ta-form-card label {
    color: #16233c;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.ta-form-card input,
.ta-form-card select,
.ta-form-card textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d9e3f1;
    border-radius: 13px;
    background: #fff;
    color: #111827;
    padding: 10px 12px;
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
}

.ta-form-card input:focus,
.ta-form-card select:focus,
.ta-form-card textarea:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.ta-form-card .ta-adjustment-help,
.ta-form-card small {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
}

.ta-form-card .field-validation-error,
.ta-form-card [data-valmsg-for] {
    color: #dc2626;
    font-size: .78rem;
    font-weight: 800;
}

.ta-form-card .ta-form-actions {
    border-top: 1px solid #e7edf7;
    margin-top: 22px;
    padding-top: 18px;
}

@media (max-width: 900px) {
    .ta-form-card .ta-form-grid {
        grid-template-columns: 1fr;
    }
}
/* Live attention compact card fix 20260709 */
.ta-live-attendance-list {
    align-content: start;
    grid-auto-rows: max-content;
}

.ta-live-attendance-list > .ta-live-employee-row {
    align-self: start;
}

.ta-live-employee-row .ta-live-attention-reason {
    margin-top: 8px;
}


/* Final rota action cleanup 20260709 */
.rota-detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.rota-inline-action-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.rota-inline-action-form select,.rota-inline-action-form input{border:1px solid #d8e2f1;border-radius:10px;padding:10px 12px;font-weight:700;color:#102340;background:#fff}
.rota-button-danger{background:#fff1f2;color:#b42318;border:1px solid #fecaca;box-shadow:none}
.rota-button-danger:hover{background:#fee2e2;color:#991b1b}

/* Secure live mileage journey UI 20260710 */
.ta-live-route-controls {
    position: absolute;
    z-index: 520;
    top: 112px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    backdrop-filter: blur(12px);
}

.ta-live-date-nav,
.ta-live-route-filters {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.ta-live-route-controls label {
    margin: 0;
    color: #475569;
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.ta-live-route-controls button,
.ta-live-route-controls input,
.ta-live-route-controls select {
    min-height: 38px;
    border: 1px solid #d7e0ec;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    padding: 8px 11px;
}

.ta-live-route-controls button:hover,
.ta-live-route-controls button:focus-visible,
.ta-live-route-controls input:focus,
.ta-live-route-controls select:focus {
    border-color: #2563eb;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.ta-live-route-controls .is-today {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-live-route-count {
    color: #475569;
    white-space: nowrap;
    font-size: .8rem;
}

.ta-live-route-count strong { color: #0f172a; }
.ta-map-legend-route {
    display: inline-block;
    width: 30px;
    height: 5px;
    margin-right: 7px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .15);
}

.ta-live-journey-popup { min-width: 270px; }
.ta-live-location-popup-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.ta-live-location-popup-title-row > div { display: grid; gap: 2px; }
.ta-live-location-popup-title-row span { color: #64748b; font-size: .76rem; }
.ta-live-route-live,
.ta-live-route-warning {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.ta-live-route-live { background: #dcfce7; color: #166534; }
.ta-live-route-warning { margin-top: 8px; background: #fff7ed; color: #c2410c; }
.ta-live-location-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 8px;
}
.ta-live-location-stats div { display: grid; gap: 2px; }
.ta-live-location-stats span { color: #64748b; font-size: .68rem; }
.ta-live-location-stats strong { color: #0f172a; font-size: .82rem; }
.ta-live-route-detail-link { color: #1d4ed8; font-weight: 850; text-decoration: none; }

.ta-mileage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.ta-mileage-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
}

.ta-mileage-filter a {
    border-radius: 9px;
    padding: 8px 12px;
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}
.ta-mileage-filter a:hover,
.ta-mileage-filter a.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }

.ta-mileage-list {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}
.ta-mileage-list-head,
.ta-mileage-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) minmax(220px, 1fr) minmax(130px, .45fr) 28px;
    align-items: center;
    gap: 18px;
}
.ta-mileage-list-head {
    padding: 12px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ta-mileage-row {
    padding: 17px 18px;
    border-bottom: 1px solid #edf2f7;
    color: #0f172a;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}
.ta-mileage-row:last-child { border-bottom: 0; }
.ta-mileage-row:hover { background: #f8fbff; }
.ta-mileage-row-main,
.ta-mileage-row-metrics { display: grid; gap: 4px; }
.ta-mileage-row small { color: #64748b; font-size: .78rem; line-height: 1.4; }
.ta-row-chevron { color: #94a3b8; font-size: 1.4rem; text-align: right; }

.ta-mileage-status {
    display: inline-flex;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
    font-weight: 900;
    white-space: nowrap;
}
.ta-mileage-status.is-live,
.ta-mileage-status.is-active { background: #dcfce7; color: #166534; }
.ta-mileage-status.is-review { background: #fff7ed; color: #c2410c; }
.ta-mileage-status.is-approved { background: #dbeafe; color: #1d4ed8; }
.ta-mileage-status.is-partial { background: #ede9fe; color: #6d28d9; }
.ta-mileage-status.is-rejected { background: #fee2e2; color: #b91c1c; }

.ta-mileage-summary-line {
    display: grid;
    grid-template-columns: repeat(9, minmax(110px, 1fr));
    gap: 0;
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
}
.ta-mileage-summary-line > div {
    display: grid;
    gap: 5px;
    min-width: 120px;
    padding: 14px 15px;
    border-right: 1px solid #edf2f7;
}
.ta-mileage-summary-line > div:last-child { border-right: 0; }
.ta-mileage-summary-line span { color: #64748b; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ta-mileage-summary-line strong { color: #0f172a; font-size: .92rem; }

.ta-mileage-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
}
.ta-mileage-detail-layout main { display: grid; gap: 18px; }
.ta-section-block {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
}
.ta-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ta-section-heading h2 { margin: 2px 0 0; font-size: 1.1rem; }
.ta-section-heading > span { color: #64748b; font-size: .76rem; }
.ta-mileage-review-map { min-height: 420px; border-radius: 13px; overflow: hidden; background: #eaf0f7; }
.ta-mileage-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ta-mileage-evidence-grid figure { margin: 0; }
.ta-mileage-evidence-grid figcaption { margin-bottom: 8px; color: #334155; font-weight: 850; }
.ta-mileage-evidence-grid img { width: 100%; max-height: 360px; object-fit: contain; border: 1px solid #dce5f0; border-radius: 12px; background: #f8fafc; }
.ta-mileage-notes dl { display: grid; margin: 0; }
.ta-mileage-notes dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid #edf2f7; }
.ta-mileage-notes dl > div:last-child { border-bottom: 0; }
.ta-mileage-notes dt { color: #64748b; font-size: .78rem; font-weight: 800; }
.ta-mileage-notes dd { margin: 0; color: #0f172a; }
.ta-mileage-review-panel {
    position: sticky;
    top: 20px;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
.ta-mileage-review-panel form { display: grid; gap: 10px; }
.ta-mileage-review-panel label { color: #334155; font-size: .8rem; font-weight: 850; }
.ta-mileage-review-panel input,
.ta-mileage-review-panel select,
.ta-mileage-review-panel textarea { width: 100%; border: 1px solid #cfd9e7; border-radius: 10px; padding: 10px 12px; font: inherit; }
.ta-mileage-review-panel small { color: #64748b; line-height: 1.45; }

.ta-pending-mileage-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ta-pending-mileage-warning > div { display: grid; gap: 3px; }
.ta-pending-mileage-warning a { color: #9a3412; font-weight: 900; white-space: nowrap; }

@media (max-width: 1100px) {
    .ta-live-route-controls { position: relative; inset: auto; margin: 10px 12px 0; flex-direction: column; align-items: stretch; }
    .ta-mileage-detail-layout { grid-template-columns: 1fr; }
    .ta-mileage-review-panel { position: static; }
    .ta-mileage-list-head { display: none; }
    .ta-mileage-row { grid-template-columns: 1fr auto; }
    .ta-mileage-row-metrics { grid-column: 1; }
    .ta-mileage-row .ta-mileage-status { grid-column: 2; grid-row: 1; }
    .ta-row-chevron { grid-column: 2; grid-row: 2; }
}

@media (max-width: 700px) {
    .ta-mileage-header { flex-direction: column; }
    .ta-mileage-filter { width: 100%; }
    .ta-mileage-summary-line { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .ta-mileage-evidence-grid { grid-template-columns: 1fr; }
    .ta-mileage-notes dl > div { grid-template-columns: 1fr; gap: 4px; }
    .ta-pending-mileage-warning { align-items: flex-start; flex-direction: column; }
}


/* Mileage route review, historical map controls and audited review patch 20260713 */
.ta-live-route-controls {
    z-index: 690;
    top: 132px;
}

.ta-live-kpi-strip {
    top: 204px;
}

.ta-live-attendance-panel {
    top: 278px;
}

.ta-mileage-review-map {
    position: relative;
    min-height: 440px;
}

.ta-mileage-map-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: .86rem;
    font-weight: 750;
    pointer-events: none;
}

.ta-mileage-review-map.leaflet-container .ta-mileage-map-fallback {
    display: none;
}

.ta-mileage-route-quality {
    margin: 10px 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
}

.ta-mileage-route-quality.is-warning {
    color: #9a3412;
    font-weight: 750;
}

.ta-mileage-review-panel {
    overflow: hidden;
}

.ta-mileage-review-panel h2 {
    margin: 8px 0 18px;
    color: #0f172a;
    font-size: 1.45rem;
    letter-spacing: -.025em;
}

.ta-mileage-review-panel form {
    gap: 16px;
}

.ta-mileage-review-field {
    display: grid;
    gap: 7px;
}

.ta-mileage-review-panel label {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1e293b;
    font-size: .79rem;
    font-weight: 900;
}

.ta-mileage-review-panel label span {
    color: #dc2626;
}

.ta-mileage-review-panel input,
.ta-mileage-review-panel select,
.ta-mileage-review-panel textarea {
    min-height: 46px;
    border-color: #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .025);
}

.ta-mileage-review-panel textarea {
    min-height: 132px;
    resize: vertical;
}

.ta-mileage-review-panel input:focus,
.ta-mileage-review-panel select:focus,
.ta-mileage-review-panel textarea:focus {
    border-color: #2563eb;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.ta-mileage-review-panel input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.ta-mileage-number-shell {
    position: relative;
}

.ta-mileage-number-shell input {
    padding-right: 44px;
}

.ta-mileage-number-shell > span {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    pointer-events: none;
}

.ta-mileage-review-warning {
    display: grid;
    gap: 5px;
    border: 1px solid #fed7aa;
    border-radius: 13px;
    background: #fff7ed;
    padding: 12px 13px;
    color: #9a3412;
}

.ta-mileage-review-warning strong {
    font-size: .82rem;
}

.ta-mileage-review-warning span {
    color: #7c2d12;
    font-size: .76rem;
    line-height: 1.45;
}

.ta-mileage-review-submit {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .22);
}

.ta-mileage-review-submit:hover {
    background: #1d4ed8;
}

.ta-mileage-review-submit:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .25);
    outline-offset: 2px;
}

@media (max-width: 1100px) {
    .ta-live-route-controls {
        position: relative;
        z-index: 690;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        margin: 10px 12px 0;
    }

    .ta-live-kpi-strip {
        top: 138px;
    }

    .ta-live-attendance-panel {
        top: 210px;
    }
}

@media (max-width: 760px) {
    .ta-live-date-nav,
    .ta-live-route-filters {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        width: 100%;
    }

    .ta-live-date-nav label,
    .ta-live-route-filters label {
        grid-column: 1 / -1;
    }

    .ta-live-route-filters select {
        grid-column: 1 / -1;
    }

    .ta-live-route-count {
        grid-column: 1 / -1;
    }
}


/* Truthful mileage GPS evidence and detailed map pins */
.ta-map-pin-host {
    background: transparent !important;
    border: 0 !important;
}

.ta-map-event-pin {
    --ta-pin-color: #2563eb;
    --ta-pin-ring: #ffffff;
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 2px 0 0 5px;
    border: 3px solid var(--ta-pin-ring);
    border-radius: 50% 50% 50% 0;
    background: var(--ta-pin-color);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28);
    transform: rotate(-45deg);
}

.ta-map-event-pin > span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1;
    transform: rotate(45deg);
}

.ta-map-pin-count {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #0f172a;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.28);
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
    transform: rotate(45deg);
}

.ta-map-event-pin.is-live::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 3px solid color-mix(in srgb, var(--ta-pin-color) 70%, transparent);
    border-radius: 50%;
    animation: ta-map-live-pulse 1.8s ease-out infinite;
}

.ta-map-event-pin-mileage-start,
.ta-map-event-pin-clock-in {
    --ta-pin-color: #15803d;
}

.ta-map-event-pin-mileage-end {
    --ta-pin-color: #ea580c;
}

.ta-map-event-pin-clock-out {
    --ta-pin-color: #b91c1c;
}

.ta-map-event-pin-combined {
    --ta-pin-color: #5b21b6;
}

.ta-map-event-pin-unlisted-location {
    --ta-pin-color: #7e22ce;
}

.ta-map-event-pin-work-location,
.ta-map-event-pin-work-location-inactive {
    --ta-pin-color: #4f46e5;
}

.ta-map-event-pin-work-location-inactive {
    opacity: 0.72;
}

.ta-map-event-pin-live-location {
    --ta-pin-color: #2563eb;
}

@keyframes ta-map-live-pulse {
    0% {
        opacity: 0.85;
        transform: scale(0.72);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

.ta-map-event-tooltip-shell {
    border: 0 !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25) !important;
    color: #ffffff !important;
    padding: 0 !important;
}

.ta-map-event-tooltip-shell::before {
    border-top-color: #0f172a !important;
}

.ta-map-event-tooltip {
    display: grid;
    gap: 3px;
    min-width: 150px;
    padding: 9px 11px;
}

.ta-map-event-tooltip strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.ta-map-event-tooltip span {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 650;
}

.ta-map-event-popup-shell .leaflet-popup-content-wrapper {
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
}

.ta-map-event-popup-shell .leaflet-popup-content {
    margin: 0;
}

.ta-map-event-popup {
    min-width: 280px;
    overflow: hidden;
    color: #0f172a;
}

.ta-map-event-popup header {
    display: grid;
    gap: 3px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
}

.ta-map-event-popup header strong {
    font-size: 17px;
    font-weight: 950;
}

.ta-map-event-popup header > span:last-child {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.ta-map-event-popup-kicker {
    color: #ea580c;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ta-map-event-popup dl {
    display: grid;
    margin: 0;
    padding: 10px 18px 16px;
}

.ta-map-event-popup dl > div {
    display: grid;
    grid-template-columns: minmax(105px, 0.8fr) minmax(130px, 1.2fr);
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}

.ta-map-event-popup dl > div:last-child {
    border-bottom: 0;
}

.ta-map-event-popup dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.ta-map-event-popup dd {
    margin: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ta-map-coordinate-note {
    margin: 10px 18px 0;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    line-height: 1.45;
}

.ta-map-event-group-popup {
    max-height: 470px;
    overflow-y: auto;
}

.ta-map-event-group-item {
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.ta-map-event-group-item > header {
    padding: 12px 18px 9px;
    background: #f8fafc;
}

.ta-map-event-group-item > header strong {
    font-size: 14px;
}

.ta-map-event-group-item > header span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.ta-map-event-group-item dl {
    padding-top: 6px;
    padding-bottom: 10px;
}

.ta-map-event-group-item .ta-live-route-detail-link {
    display: inline-flex;
    margin: 0 18px 14px;
}

.ta-map-evidence-legend {
    display: grid;
    gap: 7px;
    min-width: 180px;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(8px);
}

.ta-map-evidence-legend strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
}

.ta-map-evidence-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
}

.ta-map-legend-line {
    width: 24px;
    height: 0;
    border-top: 4px solid #15803d;
    border-radius: 999px;
}

.ta-map-legend-gap {
    width: 24px;
    height: 0;
    border-top: 3px dashed #b45309;
    border-radius: 999px;
}

.ta-map-legend-dot {
    width: 9px;
    height: 9px;
    border: 2px solid #166534;
    border-radius: 50%;
    background: #dcfce7;
}

.ta-map-legend-dot.is-excluded {
    border-color: #b91c1c;
    background: #fecaca;
}

.ta-map-legend-pin {
    width: 14px;
    height: 14px;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    background: #2563eb;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.25);
    transform: rotate(-45deg);
}

.ta-mileage-route-quality {
    display: grid;
    gap: 4px;
}

.ta-mileage-route-quality strong {
    color: #166534;
    font-weight: 950;
}

.ta-mileage-route-quality span {
    display: block;
}

.ta-mileage-route-quality.is-warning {
    border-left: 4px solid #ea580c;
    background: #fff7ed;
    color: #9a3412;
}

.ta-mileage-route-quality.is-warning strong {
    color: #c2410c;
}

@media (max-width: 720px) {
    .ta-map-event-popup {
        min-width: 240px;
    }

    .ta-map-event-popup dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ta-map-evidence-legend {
        min-width: 158px;
        padding: 9px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-map-event-pin.is-live::after {
        animation: none;
    }
}


.ta-map-legend-mini-pin {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 4px 0 2px;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.24);
    transform: rotate(-45deg);
}

.ta-map-legend-mini-pin.is-live {
    background: #2563eb;
}

.ta-map-legend-mini-pin.is-event {
    background: #7e22ce;
}


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

/* Advanced mileage diagnostics and playback */
.ta-mileage-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #f8fafc;
}

.ta-mileage-map-mode,
.ta-mileage-playback-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ta-mileage-map-mode button,
.ta-mileage-playback-button,
.ta-mileage-playback-reset {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ta-mileage-map-mode button:hover,
.ta-mileage-playback-button:hover,
.ta-mileage-playback-reset:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.ta-mileage-map-mode button.is-active,
.ta-mileage-playback-button.is-playing {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

.ta-mileage-map-toolbar button:disabled,
.ta-mileage-map-toolbar select:disabled,
.ta-mileage-map-toolbar input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.ta-mileage-playback-controls {
    flex: 1 1 520px;
    justify-content: flex-end;
}

.ta-mileage-playback-controls input[type="range"] {
    min-width: 180px;
    flex: 1 1 260px;
    accent-color: #0f766e;
}

.ta-mileage-playback-controls > span {
    min-width: 190px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 750;
}

.ta-mileage-playback-speed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 800;
}

.ta-mileage-playback-speed select {
    min-height: 38px;
    padding: 7px 28px 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
}

.ta-mileage-tracking-diagnostics {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #ffffff;
}

.ta-mileage-diagnostics-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
}

.ta-mileage-diagnostics-heading h3 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.06rem;
}

.ta-mileage-diagnostics-heading > span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
}

.ta-mileage-diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #e2e8f0;
}

.ta-mileage-diagnostics-grid > div {
    min-height: 76px;
    padding: 12px;
    background: #f8fafc;
}

.ta-mileage-diagnostics-grid span,
.ta-mileage-diagnostics-grid strong {
    display: block;
}

.ta-mileage-diagnostics-grid span {
    color: #64748b;
    font-size: 0.77rem;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.ta-mileage-diagnostics-grid strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.ta-mileage-tracking-diagnostics > p {
    margin: 13px 0 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.55;
}

.ta-mileage-direction-host {
    border: 0;
    background: transparent;
}

.ta-mileage-direction-arrow {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--ta-route-color, #0f766e);
    font-size: 15px;
    line-height: 1;
    text-shadow:
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff,
        0 2px 4px rgba(15, 23, 42, 0.35);
    transform-origin: 50% 50%;
}

.ta-map-legend-stop {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #7c2d12;
    border-radius: 50%;
    background: #fed7aa;
}

@media (max-width: 1100px) {
    .ta-mileage-map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ta-mileage-playback-controls {
        justify-content: flex-start;
    }

    .ta-mileage-diagnostics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ta-mileage-map-mode {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ta-mileage-map-mode button {
        padding-inline: 8px;
    }

    .ta-mileage-playback-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-mileage-playback-controls input[type="range"],
    .ta-mileage-playback-controls > span {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .ta-mileage-playback-speed {
        justify-content: flex-end;
    }

    .ta-mileage-diagnostics-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ta-mileage-diagnostics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .ta-mileage-map-mode,
    .ta-mileage-playback-controls,
    .ta-mileage-diagnostics-grid {
        grid-template-columns: 1fr;
    }

    .ta-mileage-playback-controls input[type="range"],
    .ta-mileage-playback-controls > span {
        grid-column: auto;
    }

    .ta-mileage-playback-speed {
        justify-content: flex-start;
    }
}



/* Advanced live mileage operations map 20260716 */
.ta-live-mileage-operations {
    position: absolute;
    z-index: 675;
    left: 22px;
    bottom: 132px;
    width: min(440px, calc(100% - 44px));
    max-height: min(310px, calc(100% - 330px));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    backdrop-filter: blur(14px);
}

.ta-live-mileage-operations[hidden] {
    display: none !important;
}

.ta-live-mileage-operations > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.ta-live-mileage-operations > header strong,
.ta-live-mileage-operations > header small {
    display: block;
}

.ta-live-mileage-operations > header strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: .95rem;
}

.ta-live-mileage-operations > header small {
    max-width: 210px;
    color: #64748b;
    font-size: .7rem;
    line-height: 1.4;
    text-align: right;
}

.ta-live-mileage-operations-list {
    display: grid;
    max-height: 235px;
    overflow-y: auto;
}

.ta-live-mileage-operation {
    display: grid;
    gap: 10px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    background: transparent;
    padding: 13px 16px;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.ta-live-mileage-operation:last-child {
    border-bottom: 0;
}

.ta-live-mileage-operation:hover,
.ta-live-mileage-operation:focus-visible {
    outline: 0;
    background: #f5f9ff;
}

.ta-live-mileage-operation-head,
.ta-live-mileage-operation-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ta-live-mileage-operation-head strong {
    overflow: hidden;
    color: #102a5a;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-live-mileage-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 8px;
    background: #dcfce7;
    color: #166534;
    font-size: .64rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ta-live-mileage-status.is-updating {
    background: #fef3c7;
    color: #92400e;
}

.ta-live-mileage-status.is-signal-lost {
    background: #fee2e2;
    color: #b91c1c;
}

.ta-live-mileage-operation-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ta-live-mileage-operation-route > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.ta-live-mileage-operation-route small,
.ta-live-mileage-operation-route em,
.ta-live-mileage-operation-meta {
    color: #64748b;
    font-size: .68rem;
    font-style: normal;
}

.ta-live-mileage-operation-route b {
    overflow: hidden;
    color: #0f172a;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-live-mileage-operation-route i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: #2563eb;
    font-size: .85rem;
    font-style: normal;
    font-weight: 900;
}

.ta-live-mileage-operation-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.ta-live-mileage-operation-meta span + span::before {
    margin-right: 8px;
    color: #cbd5e1;
    content: "•";
}

.ta-live-mileage-marker-host {
    border: 0 !important;
    background: transparent !important;
}

.ta-live-mileage-marker {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--ta-live-route-colour, #2563eb);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .3);
    color: #fff;
}

.ta-live-mileage-marker::after {
    position: absolute;
    inset: -9px;
    border: 3px solid color-mix(in srgb, var(--ta-live-route-colour, #2563eb) 66%, transparent);
    border-radius: 50%;
    content: "";
    animation: ta-live-mileage-pulse 1.7s ease-out infinite;
}

.ta-live-mileage-marker.is-updating::after {
    animation-duration: 2.6s;
}

.ta-live-mileage-marker.is-signal-lost {
    filter: grayscale(.35);
    opacity: .8;
}

.ta-live-mileage-marker.is-signal-lost::after {
    display: none;
}

.ta-live-mileage-marker strong {
    position: relative;
    z-index: 2;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.ta-live-mileage-bearing {
    position: absolute;
    z-index: 3;
    top: -12px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform-origin: 50% 36px;
    color: var(--ta-live-route-colour, #2563eb);
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff;
}

@keyframes ta-live-mileage-pulse {
    0% { opacity: .85; transform: scale(.72); }
    75%, 100% { opacity: 0; transform: scale(1.32); }
}

.ta-live-route-from-to {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
}

.ta-live-route-from-to > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
}

.ta-live-route-from-to dt {
    color: #64748b;
    font-size: .7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ta-live-route-from-to dd {
    margin: 0;
    color: #0f172a;
    font-size: .76rem;
    font-weight: 750;
}

.ta-live-route-live.is-updating {
    background: #fef3c7;
    color: #92400e;
}

.ta-live-route-live.is-signal-lost {
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 1100px) {
    .ta-live-mileage-operations {
        right: 12px;
        bottom: 122px;
        left: 12px;
        width: auto;
        max-height: 250px;
    }

    .ta-live-mileage-operations-list {
        max-height: 175px;
    }
}

@media (max-width: 620px) {
    .ta-live-mileage-operations > header small {
        display: none;
    }

    .ta-live-mileage-operation-route {
        grid-template-columns: 1fr;
    }

    .ta-live-mileage-operation-route i {
        width: 22px;
        height: 22px;
        transform: rotate(90deg);
    }

    .ta-live-mileage-operation-meta {
        display: none;
    }
}

@media (max-width: 560px) {
    .ta-live-mileage-operations {
        right: 10px;
        bottom: 70px;
        left: 10px;
    }
}

.ta-mileage-technical-details {
    padding: 0;
}

.ta-mileage-technical-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
}

.ta-mileage-technical-details > summary::-webkit-details-marker {
    display: none;
}

.ta-mileage-technical-details > summary::after {
    color: #2563eb;
    content: "+";
    font-size: 1.25rem;
    font-weight: 900;
}

.ta-mileage-technical-details[open] > summary::after {
    content: "−";
}

.ta-mileage-technical-details > summary span,
.ta-mileage-technical-details > summary strong,
.ta-mileage-technical-details > summary small {
    display: block;
}

.ta-mileage-technical-details > summary strong {
    margin-top: 3px;
    color: #0f172a;
}

.ta-mileage-technical-details > summary small {
    color: #64748b;
    font-size: .72rem;
    text-align: right;
}

.ta-mileage-technical-details[open] > .ta-mileage-diagnostics-heading,
.ta-mileage-technical-details[open] > .ta-mileage-diagnostics-grid,
.ta-mileage-technical-details[open] > p {
    margin-right: 16px;
    margin-left: 16px;
}

.ta-mileage-technical-details[open] > p {
    margin-bottom: 16px;
}

/* Worked-day Annual Leave guard and UK date controls */
.rota-uk-date-control{position:relative;display:grid;grid-template-columns:minmax(140px,1fr) 38px;min-width:180px}
.rota-uk-date-control>input[data-rota-date-text]{min-width:0;border-radius:12px 0 0 12px!important}
.rota-uk-date-control>button{border:1px solid #d9e2f1;border-left:0;background:#edf4ff;color:#1d5fd0;border-radius:0 12px 12px 0;font-weight:900;cursor:pointer}
.rota-uk-date-control>input[type=date]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rota-annual-leave-guard{grid-column:1/-1;border:1px solid #f4b8aa;background:#fff4f1;color:#9f2f1d;border-radius:12px;padding:10px 12px;font-size:12px;font-weight:750;line-height:1.45}
.rota-leave-chip.is-shift-cancellation{background:#eef1f5;border-left-color:#7b8798;color:#596579;text-decoration:line-through}
.rota-shift-chip.is-cancelled strong,.rota-shift-chip.is-cancelled small{text-decoration:line-through}
@media(max-width:900px){.rota-uk-date-control{width:100%}}


/* EXHALE_ADVANCED_ROTA_ATTENDANCE_UI_20260721 */
#rota-page{display:block;grid-template-columns:none;gap:0;align-items:stretch;padding:0}
#rota-page>.rota-command{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:6px 0 24px}

.rota-range-form{
    align-items:end;
    display:grid;
    grid-template-columns:repeat(3,minmax(170px,1fr)) auto;
    gap:12px;
}
.rota-date-field{display:grid;gap:6px;min-width:0}
.rota-date-field>span:first-child{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#63728b}
.rota-uk-date-control{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    min-width:0;
}
.rota-uk-date-control>input[data-rota-date-text]{
    min-width:0!important;
    width:100%;
    border-radius:12px 0 0 12px!important;
}
.rota-uk-date-control>button{
    min-height:42px;
    border:1px solid #d9e2f1;
    border-left:0;
    border-radius:0 12px 12px 0;
    background:#edf4ff;
    color:#1d5fd0;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}
.rota-uk-date-control>input[type=date][data-rota-date-native]{
    position:absolute;
    right:0;
    top:0;
    width:42px;
    height:100%;
    opacity:0;
    pointer-events:auto;
    cursor:pointer;
}
.rota-shift-card{
    display:grid;
    gap:3px;
    padding:7px 8px;
    border:1px solid transparent;
    border-left-width:4px;
    border-radius:8px;
    text-decoration:none!important;
    line-height:1.3;
}
.rota-shift-card .rota-card-plan{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}
.rota-shift-card .rota-card-plan strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-decoration:none;
}
.rota-shift-card .rota-card-plan em{
    flex:0 0 auto;
    font-size:9px;
    font-style:normal;
    font-weight:900;
    white-space:nowrap;
    color:#36547d;
}
.rota-shift-card small{display:block;text-decoration:none!important}
.rota-card-actual,.rota-card-effective,.rota-card-payroll,.rota-card-outcome,.rota-card-event-time,.rota-card-timing{
    display:block;
    font-size:9px;
    font-weight:800;
    text-decoration:none!important;
}
.rota-card-actual{color:#087443}
.rota-card-effective{color:#6d28d9}
.rota-card-payroll.is-excluded{color:#b42318;font-weight:900}
.rota-card-outcome{color:#475467}
.rota-card-event-time{color:#344054;font-weight:700}
.rota-card-timing{padding-top:2px}
.rota-shift-card.is-on-time{background:#ecfdf3;border-color:#a6f4c5;border-left-color:#087443;color:#075f3b}
.rota-shift-card.is-late,.rota-shift-card.is-missed{background:#fff1f0;border-color:#f7b4ad;border-left-color:#b42318;color:#8f1d13}
.rota-shift-card.is-authorised-early{background:#eff6ff;border-color:#bfdbfe;border-left-color:#175cd3;color:#1849a9}
.rota-shift-card.is-warning{background:#fffaeb;border-color:#fedf89;border-left-color:#b54708;color:#7a2e0e}
.rota-shift-card.is-cancelled{
    background:#f4f6f8;
    border-color:#d0d5dd;
    border-left-color:#667085;
    color:#475467;
    text-decoration:none;
}
.rota-shift-card.is-cancelled .rota-card-plan,
.rota-shift-card.is-cancelled .rota-card-outcome{text-decoration:line-through}
.rota-shift-card.is-cancelled .rota-card-actual,
.rota-shift-card.is-cancelled .rota-card-effective,
.rota-shift-card.is-cancelled .rota-card-payroll,
.rota-shift-card.is-cancelled .rota-card-event-time,
.rota-shift-card.is-cancelled .rota-card-timing{text-decoration:none}
.tone-success{color:#067647!important}
.tone-danger{color:#b42318!important}
.tone-info{color:#175cd3!important}
.tone-warning{color:#b54708!important}
.tone-muted,.tone-neutral{color:#667085!important}

.rota-modal{padding:12px}
.rota-modal-panel{
    display:flex;
    flex-direction:column;
    max-height:calc(100dvh - 24px);
    overflow:hidden;
}
.rota-viewport-panel{width:min(1080px,100%)}
.rota-detail-panel{width:min(1080px,100%)}
.rota-sticky-head,.rota-sticky-foot{flex:0 0 auto;position:relative;z-index:3;background:#fff}
.rota-sticky-foot{background:#fbfcff}
.rota-detail-scroll,.rota-modal-panel form>.rota-modal-body{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.rota-modal-kicker{
    display:block;
    margin-bottom:5px;
    color:#175cd3;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.rota-detail-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}
.rota-detail-summary>div{
    min-width:0;
    border:1px solid #dfe7f3;
    border-radius:15px;
    padding:13px 14px;
    background:#f8fbff;
}
.rota-detail-summary span,.rota-detail-summary small{display:block;color:#667085;font-size:11px}
.rota-detail-summary strong{display:block;margin:4px 0;color:#101828;font-size:15px;overflow-wrap:anywhere}
.rota-comparison-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.rota-comparison-card{
    min-width:0;
    border:1px solid #dfe7f3;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}
.rota-comparison-card>header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 14px;
    border-bottom:1px solid #e4e7ec;
}
.rota-comparison-card>header>span{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 auto;
    border-radius:999px;
    background:#eaf2ff;
    color:#175cd3;
    font-size:12px;
    font-weight:900;
}
.rota-comparison-card header strong,.rota-comparison-card header small{display:block}
.rota-comparison-card header strong{color:#101828}
.rota-comparison-card header small{margin-top:2px;color:#667085;font-size:10px}
.rota-comparison-card dl{margin:0;padding:4px 14px 12px}
.rota-comparison-card dl>div{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr);gap:10px;padding:9px 0;border-bottom:1px solid #f0f2f5}
.rota-comparison-card dl>div:last-child{border-bottom:0}
.rota-comparison-card dt{color:#667085;font-size:10px;font-weight:900;text-transform:uppercase}
.rota-comparison-card dd{margin:0;color:#101828;font-size:12px;font-weight:800;overflow-wrap:anywhere}
.rota-comparison-card.is-planned{border-top:4px solid #175cd3}
.rota-comparison-card.is-recorded{border-top:4px solid #087443}
.rota-comparison-card.is-payroll{border-top:4px solid #7f56d9}
.rota-comparison-card.has-no-evidence{opacity:.72}
.rota-comparison-card.is-adjusted{background:#fcfaff}
.rota-detail-section{
    margin-top:16px;
    padding:16px;
    border:1px solid #dfe7f3;
    border-radius:18px;
    background:#fff;
}
.rota-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:12px;
}
.rota-section-head span{display:block;color:#667085;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.rota-section-head h4{margin:3px 0 0;color:#101828;font-size:16px}
.rota-detail-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.rota-timing-badge{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    border-radius:999px;
    padding:5px 9px;
    background:#f2f4f7;
    font-size:11px;
    font-weight:900;
}
.rota-detail-inline-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.rota-outcome-disclosure{
    margin-top:16px;
    border:1px solid #dfe7f3;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}
.rota-outcome-disclosure>summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:15px 16px;
    cursor:pointer;
    list-style:none;
}
.rota-outcome-disclosure>summary::-webkit-details-marker{display:none}
.rota-outcome-disclosure summary strong,.rota-outcome-disclosure summary small{display:block}
.rota-outcome-disclosure summary small{margin-top:3px;color:#667085;font-size:11px}
.rota-outcome-body{padding:0 16px 16px;border-top:1px solid #e4e7ec}
.rota-outcome-body .rota-absence-convert-form{padding-top:16px}
.rota-plain-cancel-form{margin-top:12px;padding-top:12px;border-top:1px solid #e4e7ec}
.rota-detail-actions{justify-content:space-between}
.rota-modal-foot{flex-wrap:wrap}
.rota-modal-head{flex:0 0 auto}
#rota-modal .rota-modal-panel,#rota-allowance-modal .rota-modal-panel{max-height:calc(100dvh - 24px)}
#rota-modal form,#rota-allowance-modal form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#rota-modal .rota-modal-body,#rota-allowance-modal .rota-modal-body{overflow-y:auto}
.rota-leave-warning{position:sticky;top:0;z-index:2;margin-bottom:14px}
@media(max-width:1100px){
    .rota-comparison-grid{grid-template-columns:1fr}
    .rota-detail-summary{grid-template-columns:1fr}
}
@media(max-width:980px){
    .rota-range-form{grid-template-columns:1fr 1fr}
    .rota-range-form>.rota-button{width:100%}
    .rota-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
    .rota-modal{padding:0;place-items:stretch}
    .rota-modal-panel,.rota-viewport-panel,.rota-detail-panel{
        width:100%;
        max-height:100dvh;
        height:100dvh;
        border-radius:0;
    }
    .rota-modal-head,.rota-modal-body,.rota-modal-foot{padding-left:16px;padding-right:16px}
    .rota-range-form{grid-template-columns:1fr}
    .rota-calendar{grid-template-columns:1fr}
    .rota-detail-grid,.rota-detail-grid-compact{grid-template-columns:1fr}
    .rota-detail-grid>div.full{grid-column:auto}
    .rota-detail-actions{justify-content:stretch}
    .rota-detail-actions>*{flex:1 1 auto}
    .rota-comparison-card dl>div{grid-template-columns:1fr}
}


/* EXHALE_ROTA_AUDIT_TIMELINE_REVERSIBLE_OUTCOME_20260721 */
.rota-audited-correction-warning{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
    padding:16px 18px;
    border:1px solid #f6b8aa;
    border-left:5px solid #d92d20;
    border-radius:16px;
    background:#fff7f5;
    color:#7a271a;
}
.rota-audited-correction-warning strong{display:block;font-size:15px}
.rota-audited-correction-warning p{margin:5px 0 0;color:#912018;line-height:1.45}
.rota-audited-correction-warning>span{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#fff;color:#7a271a;font-size:11px;font-weight:900}
.ta-form-field-full{grid-column:1/-1}
.rota-change-reason-field textarea{width:100%;min-height:110px;resize:vertical}
.rota-change-reason-field small{display:block;margin-top:6px;color:#667085}

.rota-mini-activity{display:block;margin-top:7px;padding-top:6px;border-top:1px solid rgba(16,24,40,.08)}
.rota-mini-scale{display:flex;justify-content:space-between;margin-bottom:3px;color:#667085;font-size:8px;font-weight:800}
.rota-mini-track{position:relative;display:block;height:12px;border-radius:999px;background:#eef2f7;overflow:visible}
.rota-mini-planned,.rota-mini-session{position:absolute;display:block;border-radius:999px}
.rota-mini-planned{top:2px;height:3px;background:#175cd3;opacity:.72}
.rota-mini-session{bottom:1px;height:5px;min-width:3px;background:#039855}
.rota-mini-session.is-excluded{background:repeating-linear-gradient(135deg,#d92d20 0 3px,#fecdca 3px 6px)}
.rota-mini-session.is-evidence-only{background:#98a2b3}
.rota-mini-session.is-adjusted{background:#7f56d9}
.rota-mini-marker{position:absolute;top:-2px;width:2px;height:16px;border-radius:999px;background:#f79009;transform:translateX(-1px)}
.rota-mini-marker.is-cancelled{background:#d92d20}
.rota-shift-card.is-cancelled .rota-mini-planned{background:#667085}

.rota-activity-count{padding:5px 9px;border-radius:999px;background:#f2f4f7;color:#475467!important;white-space:nowrap}
.rota-activity-chart{padding:12px;border:1px solid #e4e7ec;border-radius:14px;background:#f8fafc}
.rota-activity-scale{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:8px;color:#667085;font-size:10px;font-weight:800}
.rota-activity-scale strong{text-align:center;color:#344054;text-transform:uppercase;letter-spacing:.05em}
.rota-activity-track{position:relative;height:38px;border-radius:12px;background:linear-gradient(180deg,#fff 0,#fff 49%,#eef2f6 50%,#eef2f6 54%,#fff 55%,#fff 100%);overflow:visible}
.rota-activity-planned,.rota-activity-session{position:absolute;display:block;border-radius:999px;min-width:4px}
.rota-activity-planned{top:9px;height:6px;background:#175cd3;box-shadow:0 0 0 2px rgba(23,92,211,.12)}
.rota-activity-session{bottom:8px;height:9px;background:#039855;box-shadow:0 0 0 2px rgba(3,152,85,.12)}
.rota-activity-session.is-excluded{background:repeating-linear-gradient(135deg,#d92d20 0 5px,#fecdca 5px 10px);box-shadow:0 0 0 2px rgba(217,45,32,.12)}
.rota-activity-session.is-evidence-only{background:#98a2b3;box-shadow:0 0 0 2px rgba(102,112,133,.12)}
.rota-activity-session.is-adjusted{background:#7f56d9;box-shadow:0 0 0 2px rgba(127,86,217,.12)}
.rota-activity-marker{position:absolute;top:2px;width:3px;height:34px;border-radius:999px;background:#667085;transform:translateX(-1.5px);z-index:3}
.rota-activity-marker.tone-primary{background:#175cd3}.rota-activity-marker.tone-success{background:#039855}.rota-activity-marker.tone-danger{background:#d92d20}.rota-activity-marker.tone-warning{background:#f79009}.rota-activity-marker.tone-info{background:#7f56d9}
.rota-activity-empty{padding:8px;text-align:center;color:#667085;font-size:12px}
.rota-activity-list{display:grid;gap:0;margin:14px 0 0;padding:0;list-style:none}
.rota-activity-list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;min-height:48px;position:relative}
.rota-activity-list li:not(:last-child)::before{content:"";position:absolute;left:8px;top:17px;bottom:-2px;width:2px;background:#e4e7ec}
.rota-activity-list-marker{display:block;width:16px;height:16px;margin-top:2px;border:4px solid #eaecf0;border-radius:50%;background:#667085;z-index:1}
.rota-activity-list li.tone-primary .rota-activity-list-marker{background:#175cd3;border-color:#d1e9ff}.rota-activity-list li.tone-success .rota-activity-list-marker{background:#039855;border-color:#d1fadf}.rota-activity-list li.tone-danger .rota-activity-list-marker{background:#d92d20;border-color:#fee4e2}.rota-activity-list li.tone-warning .rota-activity-list-marker{background:#f79009;border-color:#fef0c7}.rota-activity-list li.tone-info .rota-activity-list-marker{background:#7f56d9;border-color:#ebe9fe}
.rota-activity-list strong,.rota-activity-list small{display:block}.rota-activity-list strong{color:#101828;font-size:12px}.rota-activity-list small{margin-top:3px;color:#667085;font-size:11px;line-height:1.35}.rota-activity-list time{color:#475467;font-size:10px;font-weight:800;white-space:nowrap}

.rota-session-list{display:grid;gap:10px}
.rota-session-card{border:1px solid #d1fadf;border-left:4px solid #039855;border-radius:14px;background:#fbfffd;overflow:hidden}
.rota-session-card.is-excluded{border-color:#fecdca;border-left-color:#d92d20;background:#fffafa}.rota-session-card.is-evidence-only{border-color:#d0d5dd;border-left-color:#667085;background:#fcfcfd}.rota-session-card.is-adjusted{border-color:#d9d6fe;border-left-color:#7f56d9;background:#fcfaff}
.rota-session-card header{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 13px;border-bottom:1px solid rgba(16,24,40,.07)}
.rota-session-card header strong,.rota-session-card header small{display:block}.rota-session-card header small{margin-top:2px;color:#667085;font-size:10px}.rota-session-card header>span{padding:5px 8px;border-radius:999px;background:#eef2f6;color:#344054;font-size:10px;font-weight:900;text-align:right}
.rota-session-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:4px 12px 10px}
.rota-session-card dl>div{padding:8px;border-bottom:1px solid #eef2f6}.rota-session-card dt{color:#667085;font-size:9px;font-weight:900;text-transform:uppercase}.rota-session-card dd{margin:3px 0 0;color:#101828;font-size:11px;font-weight:750;overflow-wrap:anywhere}

.rota-attendance-impact-warning{grid-column:1/-1;margin:12px 0;padding:14px;border:1px solid #f6b8aa;border-radius:14px;background:#fff5f3;color:#912018}
.rota-attendance-impact-warning strong{display:block}.rota-attendance-impact-warning p{margin:5px 0 10px;line-height:1.4}.rota-attendance-impact-warning label{display:flex;gap:8px;align-items:flex-start;font-weight:800}.rota-attendance-impact-warning input[type=checkbox]{margin-top:2px;flex:0 0 auto}
.rota-plain-cancel-form{display:grid;gap:10px}.rota-plain-cancel-form .rota-form-field{display:grid;gap:5px}.rota-plain-cancel-form input{width:100%}
.rota-undo-section{border-color:#d9d6fe;background:#fcfaff}.rota-undo-section>p{margin:-3px 0 12px;color:#667085}.rota-undo-form{display:grid;gap:12px}.rota-undo-form textarea{width:100%;resize:vertical}.rota-restore-payroll-option{display:flex;gap:8px;align-items:flex-start;padding:11px;border:1px solid #d9d6fe;border-radius:12px;background:#fff;font-weight:800;color:#42307d}

@media(max-width:760px){
    .rota-audited-correction-warning{display:grid}.rota-audited-correction-warning>span{justify-self:start}
    .rota-session-card dl{grid-template-columns:1fr 1fr}
    .rota-activity-list li{grid-template-columns:18px 1fr}.rota-activity-list time{grid-column:2;margin-top:-8px}
}
@media(max-width:480px){.rota-session-card dl{grid-template-columns:1fr}.rota-session-card header{align-items:flex-start;flex-direction:column}}

/* EXHALE_ROTA_FUTURE_VISIBILITY_AND_PAY_PREVIEW_20260722 */
.rota-button[hidden],
.rota-detail-inline-actions [hidden],
.rota-outcome-disclosure[hidden],
.rota-detail-section[hidden],
.rota-undo-section[hidden]{display:none!important}

.rota-activity-section.is-future-timeline{
    border-color:#b9d2ff;
    background:#f8fbff;
}
.rota-activity-section.is-future-timeline .rota-activity-chart{
    border-color:#b9d2ff;
    background:linear-gradient(180deg,#f7faff 0,#fff 100%);
}
.rota-activity-section.is-future-timeline .rota-activity-planned{
    background:repeating-linear-gradient(90deg,#175cd3 0 12px,#84adff 12px 18px);
}
.rota-activity-list li.is-future{opacity:.82}
.rota-activity-list li.is-future .rota-activity-list-marker{
    background:#fff;
    border-color:#84adff;
    box-shadow:inset 0 0 0 2px #175cd3;
}
.rota-upcoming-badge{
    display:inline-flex;
    margin-left:6px;
    padding:2px 6px;
    border-radius:999px;
    background:#eaf2ff;
    color:#175cd3;
    font-size:8px;
    font-style:normal;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    vertical-align:middle;
}

.rota-form-field input[readonly]{
    background:#f8fafc;
    color:#344054;
    cursor:not-allowed;
}
.rota-form-field small{
    color:#667085;
    font-size:10px;
    line-height:1.35;
}
.rota-pay-result{
    display:grid;
    gap:12px;
    padding:14px 16px;
    border:1px solid #b9d2ff;
    border-left:5px solid #175cd3;
    border-radius:14px;
    background:#f8fbff;
}
.rota-pay-result>div>span{
    display:block;
    color:#475467;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.rota-pay-result>div>strong{
    display:block;
    margin-top:4px;
    color:#101828;
    font-size:15px;
}
.rota-pay-result dl{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0;
}
.rota-pay-result dl>div{
    padding:10px 12px;
    border:1px solid #d6e4ff;
    border-radius:11px;
    background:#fff;
}
.rota-pay-result dt{
    color:#667085;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}
.rota-pay-result dd{
    margin:3px 0 0;
    color:#101828;
    font-size:12px;
    font-weight:850;
}
.rota-pay-result p{
    margin:0;
    color:#475467;
    font-size:11px;
    line-height:1.45;
}
@media(max-width:680px){
    .rota-pay-result dl{grid-template-columns:1fr}
}


/* Exhale HR final brand system and map-first Home workspace 20260727 */
.ta-brand-title {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.ta-brand-hr {
    margin-top: 1px;
    color: #42b8ff;
    font-size: .62em;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
}

.ta-brand-icon img {
    object-fit: contain;
}

.exhale-login-wordmark {
    max-height: 86px;
    object-fit: contain;
    object-position: left center;
}

.exhale-showcase-dashboard-visual[src$="exhale-hr-brand-board.jpg"] {
    width: min(92%, 760px);
    max-height: 360px;
    object-fit: contain;
    border: 1px solid rgba(120, 178, 255, .24);
    border-radius: 24px;
    background: #071a3a;
    box-shadow: 0 24px 70px rgba(0, 8, 31, .42);
}

.ta-live-attendance-dashboard--map-first .ta-live-map-shell {
    isolation: isolate;
}

.ta-live-command-bar {
    position: absolute;
    z-index: 710;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 36px);
    padding: 7px;
    border: 1px solid rgba(203, 213, 225, .88);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    backdrop-filter: blur(16px);
}

.ta-live-command-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-size: .79rem;
    font-weight: 850;
    padding: 8px 11px;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.ta-live-command-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-live-command-button:hover,
.ta-live-command-button:focus-visible,
.ta-live-command-button.is-active {
    border-color: #bfdbfe;
    outline: 0;
    background: #eff6ff;
    color: #1d4ed8;
}

.ta-live-command-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.ta-live-command-count {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    background: #fff1f2;
    color: #be123c;
    font-size: .67rem;
    line-height: 1;
    padding: 0 6px;
}

.ta-live-floating-panel {
    position: absolute !important;
    z-index: 705 !important;
    top: 78px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: min(430px, calc(100% - 36px)) !important;
    max-height: calc(100% - 96px);
    min-height: 0 !important;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-8px) scale(.985) !important;
    transform-origin: top right;
    border: 1px solid rgba(226, 232, 240, .98) !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 22px 56px rgba(15, 23, 42, .22) !important;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(18px);
    transition: transform .16s ease, opacity .16s ease;
}

.ta-live-floating-panel[hidden] {
    display: none !important;
}

.ta-live-floating-panel.is-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ta-live-floating-panel--wide {
    width: min(840px, calc(100% - 36px)) !important;
}

.ta-live-floating-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 19px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.ta-live-floating-panel-header h2 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 1.05rem;
    letter-spacing: -.025em;
}

.ta-live-floating-panel-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: .77rem;
    line-height: 1.45;
}

.ta-live-floating-panel .ta-live-route-controls {
    position: static !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 !important;
    padding: 16px 18px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.ta-live-summary-panel {
    overflow-y: auto;
}

.ta-live-summary-panel .ta-live-kpi-strip {
    position: static !important;
    inset: auto !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: auto;
    max-width: none;
    padding: 16px 18px;
}

.ta-live-summary-panel .ta-live-kpi-card {
    box-shadow: none;
}

.ta-live-summary-panel .ta-live-mileage-operations {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 18px 18px;
    border-radius: 16px;
    box-shadow: none;
    backdrop-filter: none;
}

.ta-live-summary-panel .ta-live-mileage-operations-list {
    max-height: 250px;
}

.ta-live-attendance-panel.ta-live-floating-panel {
    top: 78px !important;
    right: 18px !important;
    bottom: 18px !important;
    max-height: none;
}

.ta-live-attendance-panel.ta-live-floating-panel .ta-live-attendance-list {
    min-height: 0;
}

.ta-live-actions-panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 18px 18px;
}

.ta-live-actions-panel-body .ta-live-map-alert-link {
    grid-column: 1 / -1;
}

.ta-live-actions-panel-body .ta-live-map-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ta-live-attendance-dashboard--map-first .ta-live-map-legend {
    z-index: 690;
}

@media (max-width: 900px) {
    .ta-live-command-bar {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .ta-live-command-bar::-webkit-scrollbar {
        display: none;
    }

    .ta-live-command-button {
        flex: 0 0 auto;
    }

    .ta-live-floating-panel,
    .ta-live-floating-panel--wide,
    .ta-live-attendance-panel.ta-live-floating-panel {
        top: 72px !important;
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: none;
    }

    .ta-live-floating-panel .ta-live-route-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .ta-live-summary-panel .ta-live-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ta-live-command-button span {
        display: none;
    }

    .ta-live-command-button {
        min-width: 42px;
        padding: 8px 10px;
    }

    .ta-live-command-button:has(.ta-live-command-count) {
        min-width: auto;
    }

    .ta-live-floating-panel-header {
        padding: 15px 16px 13px;
    }

    .ta-live-floating-panel .ta-live-route-controls,
    .ta-live-summary-panel .ta-live-kpi-strip,
    .ta-live-actions-panel-body {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ta-live-summary-panel .ta-live-kpi-strip {
        grid-template-columns: 1fr;
    }

    .ta-live-actions-panel-body {
        grid-template-columns: 1fr;
    }

    .ta-live-actions-panel-body .ta-live-map-alert-link {
        grid-column: auto;
    }

    .ta-live-attendance-dashboard--map-first .ta-live-map-legend {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-live-floating-panel,
    .ta-live-command-button {
        transition: none !important;
    }
}

/* ============================================================
   Employee "all set" completion page (post password setup)
   ============================================================ */
.exhale-all-set-card {
    text-align: center;
    align-items: center;
}

.exhale-all-set-card .exhale-login-wordmark {
    margin-bottom: 22px;
}

.exhale-all-set-check {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(22, 163, 74, 0.28);
    animation: exhale-all-set-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.exhale-all-set-check svg {
    width: 30px;
    height: 30px;
}

@keyframes exhale-all-set-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.exhale-app-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 8px;
}

.exhale-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 20px;
    min-width: 168px;
    border-radius: 14px;
    background: #0b1220;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.exhale-app-badge:hover,
.exhale-app-badge:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(11, 18, 32, 0.32);
    color: #ffffff;
}

.exhale-app-badge svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.exhale-app-badge span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.exhale-app-badge small {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #a3b3cc;
}

.exhale-app-badge strong {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.exhale-all-set-note {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.9rem;
    line-height: 1.55;
}

.exhale-all-set-hint {
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

@media (max-width: 560px) {
    .exhale-app-badges {
        flex-direction: column;
        align-items: stretch;
    }

    .exhale-app-badge {
        justify-content: center;
    }
}


/* --- Sign-in loading animation -------------------------------------------
   Added while the login form is submitting: the showcase illustration shifts
   into an active "connecting" state until the server responds. */
.exhale-login-shell.is-authenticating .exhale-login-card {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.exhale-login-shell.is-authenticating .exhale-showcase-orbit-large {
    animation: exhale-auth-spin 2.6s linear infinite;
}

.exhale-login-shell.is-authenticating .exhale-showcase-orbit-small {
    animation: exhale-auth-spin 1.4s linear infinite reverse;
}

.exhale-login-shell.is-authenticating .exhale-showcase-route path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: exhale-auth-route 1.8s ease-in-out infinite;
}

.exhale-login-shell.is-authenticating .exhale-showcase-route circle {
    animation: exhale-auth-node 0.9s ease-in-out infinite alternate;
}

.exhale-login-shell.is-authenticating .exhale-showcase-dashboard-visual {
    animation: exhale-auth-float 1.6s ease-in-out infinite alternate;
}

.exhale-login-shell.is-authenticating .exhale-showcase-halo {
    animation: exhale-auth-halo 1.2s ease-in-out infinite alternate;
}

.exhale-login-shell.is-authenticating .exhale-showcase-live-dot {
    animation: exhale-auth-blink 0.5s ease-in-out infinite alternate;
}

.exhale-login-shell.is-authenticating .exhale-showcase-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
    background-size: 240% 100%;
    animation: exhale-auth-sweep 1.5s linear infinite;
}

@keyframes exhale-auth-spin {
    to { transform: rotate(360deg); }
}

@keyframes exhale-auth-route {
    0% { stroke-dashoffset: 1; opacity: 0.5; }
    55% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -1; opacity: 0.5; }
}

@keyframes exhale-auth-node {
    from { opacity: 0.45; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.25); }
}

@keyframes exhale-auth-float {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-9px) scale(1.02); }
}

@keyframes exhale-auth-halo {
    from { opacity: 0.55; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1.05); }
}

@keyframes exhale-auth-blink {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@keyframes exhale-auth-sweep {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .exhale-login-shell.is-authenticating .exhale-showcase-orbit-large,
    .exhale-login-shell.is-authenticating .exhale-showcase-orbit-small,
    .exhale-login-shell.is-authenticating .exhale-showcase-route path,
    .exhale-login-shell.is-authenticating .exhale-showcase-route circle,
    .exhale-login-shell.is-authenticating .exhale-showcase-dashboard-visual,
    .exhale-login-shell.is-authenticating .exhale-showcase-halo,
    .exhale-login-shell.is-authenticating .exhale-showcase-visual::after {
        animation: none;
    }
}