:root {
    --yellow: #ffd900;
    --yellow-hover: #efca00;
    --ink: #2b2725;
    --muted: #77716e;
    --line: #e9e4df;
    --panel: rgba(255,255,255,.95);
    --shadow: 0 24px 70px rgba(42,34,25,.18);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 20%, rgba(255,217,0,.20), transparent 31rem),
        radial-gradient(circle at 85% 85%, rgba(196,184,176,.20), transparent 30rem),
        #f8f5f0;
}

/* LOGIN */

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

.login-card {
    width: min(100%, 980px);
    min-height: 590px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.brand {
    position: relative;
    display: grid;
    place-items: center;
    padding: 55px;
    background: linear-gradient(145deg, rgba(255,217,0,.98), rgba(255,230,84,.9));
}

.brand img {
    width: min(100%, 370px);
    filter: drop-shadow(0 12px 18px rgba(60,45,20,.14));
}

.content {
    padding: 68px 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.subtitle, .dashboard-subtitle, .section-description {
    color: var(--muted);
}

.subtitle { margin: 0 0 34px; }

form { display: grid; gap: 14px; }

label { font-size: .9rem; font-weight: 650; }

.input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: white;
}

.input-wrap:focus-within {
    border-color: #d1ae00;
    box-shadow: 0 0 0 4px rgba(255,217,0,.14);
}

.icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #a49b94;
}

.icon svg { width: 20px; height: 20px; fill: currentColor; }

input[type="text"], input[type="password"] {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 15px 0;
    font: inherit;
}

.remember {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--muted);
    font-weight: 500;
}

button {
    border: 0;
    border-radius: 14px;
    padding: 15px 20px;
    background: var(--yellow);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

button:hover { background: var(--yellow-hover); }

.demo-accounts {
    display: grid;
    gap: 4px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
}

.demo-accounts strong { color: var(--ink); }

.alert {
    margin-bottom: 18px;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: .92rem;
}

.alert.error { background: #fff0ef; color: #9f2d27; border: 1px solid #ffd5d2; }
.alert.success { background: #eff9ef; color: #2d7237; border: 1px solid #cde8d1; }

/* HEADER */

.dashboard-header {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 5%;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.dashboard-brand img { width: 105px; display: block; }

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

.profile-menu { position: relative; }

.profile-menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.profile-menu-button:hover,
.profile-menu-button[aria-expanded="true"] {
    background: #fff9d8;
    border-color: #f0dd73;
}

.mini-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--yellow);
}

.mini-avatar svg { width: 18px; height: 18px; fill: currentColor; }

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

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    display: none;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 18px 50px rgba(42,34,25,.16);
    z-index: 30;
}

.profile-dropdown.show { display: block; }

.dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: linear-gradient(145deg, #fff8c7, #fff078);
}

.dropdown-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 20px;
}

.dropdown-info > div { display: flex; flex-direction: column; gap: 5px; }
.dropdown-positions { grid-column: 1 / -1; }

.dropdown-label, .info-label, .summary-label {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.logout-link, .approval-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: white;
    text-decoration: none;
    font-weight: 700;
}

.count-badge {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--yellow);
    font-size: .73rem;
}

/* DASHBOARD */

.dashboard-container {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
    padding: 52px 0 70px;
}

.welcome-section { margin-bottom: 24px; }

.eyebrow {
    margin: 0 0 8px;
    color: #9a8110;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.dashboard-subtitle { margin: 0; }

.compact-week-navigation {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.week-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.week-title-label {
    color: #9a8110;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.week-nav-actions { display: flex; gap: 8px; }

.week-nav-button.compact {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
}

.current-week-row { text-align: center; margin-top: 10px; }

.current-week-link {
    color: #806b0e;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 28px 0 30px;
}

.summary-grid.two { grid-template-columns: repeat(2, 1fr); }

.summary-card {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 24px;
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 12px 35px rgba(42,34,25,.08);
}

.summary-card strong { font-size: 2rem; }

.next-shift-card { background: linear-gradient(145deg, #ffe978, #ffd900); }

.schedule-section { margin-top: 34px; }

.section-heading { margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 1.55rem; }
.section-description { margin: 7px 0 0; font-size: .92rem; }

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

.shift-card {
    display: grid;
    grid-template-columns: 1.05fr 1.55fr 1.1fr 1.25fr .7fr 1fr;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 17px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(42,34,25,.07);
}

.offered-shift { border-color: #e4ca45; background: #fffdf2; }

.shift-date, .shift-time, .shift-position, .shift-break, .shift-hours {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shift-day { font-weight: 800; }
.shift-calendar-date, .shift-break small { color: var(--muted); font-size: .82rem; }

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

.position-badge {
    width: fit-content;
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
}

.position-badge.position-manager {
    background: #fde8e7;
    border-color: #f4c7c4;
    color: #a32924;
}

.position-badge.position-supervisor {
    background: #fff0df;
    border-color: #f4d0a8;
    color: #a85a12;
}

.position-badge.position-barista {
    background: #e7f2ff;
    border-color: #bedaff;
    color: #2364a3;
}

.position-badge.position-cashier {
    background: #e8f7ec;
    border-color: #c2e7ca;
    color: #28713c;
}

.position-badge.position-kitchen {
    background: #f1e9fb;
    border-color: #ddc9f3;
    color: #70419a;
}


.position-badge.position-floater {
    background: #f3f1ed;
    border-color: #d9d4cb;
    color: #625d55;
}

.shift-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.shift-action form, .market-card form, .approval-actions form { display: block; }

.small-button {
    width: auto;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .82rem;
}

.small-button.secondary {
    background: white;
    border: 1px solid var(--line);
}

.small-button.disabled {
    background: #eeeae6;
    color: #9a9490;
    cursor: not-allowed;
}

.offered-badge {
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff0a3;
    color: #6f5c09;
    font-size: .73rem;
    font-weight: 850;
    text-transform: uppercase;
}

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

.market-card {
    display: grid;
    gap: 15px;
    padding: 20px;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(42,34,25,.07);
}

.market-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.market-top > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.market-top span, .market-meta { color: var(--muted); }

.market-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .83rem;
}

.eligibility-note {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .82rem;
}

.eligibility-note.warning { background: #fff4d6; color: #7a5d0a; }
.eligibility-note.muted { background: #f4f1ee; color: var(--muted); }
.eligibility-note.success-text { background: #eff9ef; color: #2d7237; }

.empty-state {
    padding: 28px;
    border: 1px dashed #d7d0ca;
    border-radius: 16px;
    background: rgba(255,255,255,.55);
    color: var(--muted);
    text-align: center;
}

/* APPROVALS */

.approval-list { display: grid; gap: 14px; }

.approval-card {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1.45fr .9fr;
    align-items: start;
    gap: 20px;
    padding: 20px;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(42,34,25,.07);
}

.approval-card > div,
.approval-review-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

.approval-shift-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.approval-review-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.approval-adjustment {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-adjustment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.time-adjustment-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 750;
}

.approval-time-input {
    min-width: 140px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    color: var(--ink);
    font: inherit;
}

.approval-time-input:focus {
    outline: 0;
    border-color: #d1ae00;
    box-shadow: 0 0 0 3px rgba(255,217,0,.14);
}

.adjusted-hours-preview {
    color: var(--muted);
    font-size: .82rem;
}

.adjusted-hours-preview strong { color: var(--ink); }

.approval-actions {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* MOBILE */

@media (max-width: 980px) {
    .shift-card {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .shift-action { justify-content: flex-start; }

    .approval-card {
        grid-template-columns: 1fr 1fr;
    }

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

    .approval-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .login-card { grid-template-columns: 1fr; min-height: 0; }
    .brand { min-height: 240px; padding: 34px; }
    .brand img { width: min(72vw, 310px); }
    .content { padding: 40px 28px 46px; }

    .dashboard-header { min-height: 74px; padding: 10px 14px; }
    .dashboard-brand img { width: 82px; }
    .profile-name { display: none; }
    .profile-dropdown { width: min(310px, calc(100vw - 28px)); right: -70px; }
    .approval-link { padding: 9px 10px; font-size: .82rem; }
    .logout-link { padding: 9px 10px; font-size: .82rem; }

    .dashboard-container { width: min(100% - 28px, 1180px); padding: 34px 0 50px; }
    .summary-grid.two, .market-grid { grid-template-columns: 1fr; }

    .shift-card, .approval-card {
        grid-template-columns: 1fr;
    }

    .market-meta { flex-direction: column; gap: 5px; }
    .approval-actions { justify-content: flex-start; }
}


/* =========================================================
   Motion & interaction layer
   ========================================================= */

:root {
    --motion-fast: 160ms;
    --motion-normal: 260ms;
    --motion-slow: 420ms;
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

body { animation: pageFadeIn var(--motion-slow) var(--motion-ease) both; }

main,
.main-content,
.dashboard-content {
    animation: contentRise var(--motion-slow) var(--motion-ease) both;
}

.site-header,
.app-header {
    animation: headerDrop 380ms var(--motion-ease) both;
}

.brand img,
.logo img,
.header-logo,
.login-logo {
    transition: transform var(--motion-normal) var(--motion-ease),
                filter var(--motion-normal) var(--motion-ease);
}

.brand img:hover,
.logo img:hover,
.header-logo:hover,
.login-logo:hover {
    transform: translateY(-2px) scale(1.025);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

button,
.button,
.small-button,
.week-arrow,
a.button,
input[type="submit"] {
    transition: transform var(--motion-fast) var(--motion-ease),
                box-shadow var(--motion-fast) var(--motion-ease),
                background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease,
                color var(--motion-fast) ease,
                opacity var(--motion-fast) ease;
}

button:hover,
.button:hover,
.small-button:hover,
.week-arrow:hover,
a.button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px);
}

button:active,
.button:active,
.small-button:active,
.week-arrow:active,
a.button:active,
input[type="submit"]:active {
    transform: translateY(0) scale(.97);
}

.stat-card,
.schedule-card,
.marketplace-card,
.approval-card,
.profile-card,
.card {
    transition: transform var(--motion-normal) var(--motion-ease),
                box-shadow var(--motion-normal) var(--motion-ease),
                border-color var(--motion-normal) ease;
}

.stat-card:hover,
.schedule-card:hover,
.marketplace-card:hover,
.approval-card:hover,
.profile-card:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(42,34,25,.10);
}

.stat-card,
.schedule-card,
.marketplace-card,
.approval-card {
    animation: cardRise 420ms var(--motion-ease) both;
}

.stat-card:nth-child(1),
.schedule-card:nth-child(1),
.marketplace-card:nth-child(1),
.approval-card:nth-child(1) { animation-delay: 40ms; }

.stat-card:nth-child(2),
.schedule-card:nth-child(2),
.marketplace-card:nth-child(2),
.approval-card:nth-child(2) { animation-delay: 80ms; }

.stat-card:nth-child(3),
.schedule-card:nth-child(3),
.marketplace-card:nth-child(3),
.approval-card:nth-child(3) { animation-delay: 120ms; }

.stat-card:nth-child(4),
.schedule-card:nth-child(4),
.marketplace-card:nth-child(4),
.approval-card:nth-child(4) { animation-delay: 160ms; }

.position-badge {
    transition: transform var(--motion-fast) var(--motion-ease),
                box-shadow var(--motion-fast) var(--motion-ease);
}

.position-badge:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 5px 12px rgba(0,0,0,.07);
}

input,
select,
textarea {
    transition: border-color var(--motion-fast) ease,
                box-shadow var(--motion-fast) ease,
                transform var(--motion-fast) var(--motion-ease);
}

input:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
}

.flash-message,
.alert,
.message {
    animation: noticeSlide 360ms var(--motion-ease) both;
}

.login-brand-panel {
    animation: loginPanelIn 520ms var(--motion-ease) both;
}

.login-form-panel,
.login-card {
    animation: loginFormIn 520ms var(--motion-ease) 70ms both;
}

.is-submitting {
    pointer-events: none;
    opacity: .78;
}

.submit-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin .7s linear infinite;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes contentRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes headerDrop {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(12px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes noticeSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loginPanelIn {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes loginFormIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   No-refresh dashboard interactions
   ========================================================= */

.dashboard-container {
    transition:
        opacity 150ms ease,
        transform 150ms var(--motion-ease);
}

.dashboard-container.dashboard-content-leave {
    opacity: 0;
    transform: translateX(-8px);
}

.dashboard-container.dashboard-content-enter {
    opacity: 0;
    transform: translateX(8px);
}

.ajax-button-loading {
    position: relative;
    opacity: .72;
    cursor: wait;
}

.ajax-button-loading::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin .7s linear infinite;
}

.ajax-toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.ajax-toast {
    min-width: 260px;
    max-width: 390px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: white;
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(42, 34, 25, .16);
    font-weight: 750;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition:
        opacity 200ms ease,
        transform 200ms var(--motion-ease);
}

.ajax-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ajax-toast-success {
    border-left: 4px solid #4d9b62;
}

.ajax-toast-error {
    border-left: 4px solid #c9544d;
}

@media (max-width: 640px) {
    .ajax-toast-container {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .ajax-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}


/* =========================================================
   Top navigation scroll behavior
   Keep the header in the normal document flow.
   ========================================================= */

.site-header,
.app-header,
.top-nav,
.navbar,
header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto;
}


/* Scheduled + paid hours summary */
.summary-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .summary-grid.three {
        grid-template-columns: 1fr;
    }
}


/* Hours + Paid compact single-row presentation */
.hours-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 18px;
}

.hours-summary-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hours-summary-divider {
    width: 1px;
    align-self: stretch;
    background: var(--line);
}

.shift-hours {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.shift-paid-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

@media (max-width: 520px) {
    .hours-summary-card {
        gap: 12px;
    }
}


/* =========================================================
   Hours / Paid: true two-column layout
   ========================================================= */

/* Top summary card: Hours and Paid side-by-side */
.hours-summary-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 22px !important;
}

.hours-summary-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    min-width: 0;
}

.hours-summary-divider {
    width: 1px !important;
    height: 70% !important;
    align-self: center !important;
    background: var(--line) !important;
}

/* Shift card: Hours and Paid side-by-side */
.shift-hours.shift-hours-two-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 170px;
}

.shift-hours-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.shift-hours-divider {
    width: 1px;
    height: 100%;
    min-height: 42px;
    background: var(--line);
    align-self: stretch;
}

/* Remove styling from the old inline paid layout if cached/left behind */
.shift-paid-inline {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}

/* Preserve two columns on normal desktop/tablet widths */
@media (min-width: 521px) {
    .hours-summary-card {
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    }

    .shift-hours.shift-hours-two-col {
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    }
}

/* Only stack on very narrow phones */
@media (max-width: 520px) {
    .hours-summary-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hours-summary-divider {
        width: 100% !important;
        height: 1px !important;
    }

    .shift-hours.shift-hours-two-col {
        grid-template-columns: 1fr 1px 1fr !important;
        gap: 10px !important;
        min-width: 0;
    }
}


/* Available shift Hours / Paid two-column layout */
.marketplace-hours.marketplace-hours-two-col,
.marketplace-hours-two-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 170px;
}

.marketplace-hours-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.marketplace-hours-divider {
    width: 1px;
    min-height: 42px;
    height: 100%;
    background: var(--line);
}

@media (max-width: 520px) {
    .marketplace-hours.marketplace-hours-two-col,
    .marketplace-hours-two-col {
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-width: 0;
    }
}


/* Available Shift: show scheduled + paid hours together */
.market-hours-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.market-hours-inline strong {
    color: var(--ink);
}

.market-hours-separator {
    opacity: .45;
}


/* Pending shift approval state */
.waiting-approval-button,
.waiting-approval-button:disabled {
    cursor: default !important;
    opacity: .62;
    transform: none !important;
    box-shadow: none !important;
}

.waiting-approval-button:hover {
    transform: none !important;
}


/* Weekly schedule: compact muted rows for days without a shift */
.off-day-card {
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background: #f1f0ed !important;
    border-color: #e4e2dd !important;
    box-shadow: none !important;
    opacity: 0.72;
}

.off-day-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.off-day-card .shift-day,
.off-day-card .shift-calendar-date {
    color: #77746f !important;
}

.off-day-label {
    grid-column: 2 / -1;
    align-self: center;
    font-size: 0.98rem;
    font-weight: 700;
    color: #8a8781;
    letter-spacing: 0.01em;
}

@media (max-width: 760px) {
    .off-day-card {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    .off-day-label {
        grid-column: 1 / -1;
    }
}

.manager-hours-editor {
    position: relative;
}

.manager-hours-editor summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.manager-hours-editor summary::-webkit-details-marker {
    display: none;
}

.manager-hours-form {
    margin-top: 10px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    background: #f7f6f3;
    border: 1px solid #e6e2da;
    border-radius: 14px;
}

.manager-hours-form label {
    display: grid;
    gap: 5px;
    font-size: .75rem;
    font-weight: 700;
    color: #77736c;
}

.manager-hours-form input[type="time"] {
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #ddd8cf;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}


/* MANAGER TEAM SCHEDULE */

.manager-nav-link {
    background: #fff9d8;
    border-color: #f0dd73;
}

.team-employees {
    display: grid;
    gap: 34px;
    margin-top: 30px;
}

.team-employee-section {
    display: grid;
    gap: 14px;
}

.team-employee-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 4px;
}

.team-employee-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.team-employee-name-row h2 {
    margin: 0;
    font-size: 1.45rem;
}

.team-username {
    display: inline-block;
    margin-top: 5px;
    color: var(--muted);
    font-size: .86rem;
}

.team-week-totals {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.team-week-totals > div {
    min-width: 92px;
    display: grid;
    gap: 3px;
    padding: 10px 14px;
    text-align: center;
}

.team-week-totals > div + div {
    border-left: 1px solid var(--line);
}

.team-week-totals strong {
    font-size: 1.05rem;
}

.team-shift-card {
    grid-template-columns: 1fr 1.5fr 1fr 1.2fr .9fr 1.2fr;
}

.team-shift-card .manager-hours-form {
    position: absolute;
    right: 0;
    z-index: 10;
    width: max-content;
    max-width: min(460px, 85vw);
    box-shadow: 0 14px 32px rgba(42,34,25,.13);
}

.team-shift-card .manager-hours-editor {
    position: relative;
}

@media (max-width: 900px) {
    .team-employee-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .team-week-totals {
        width: fit-content;
    }
}

@media (max-width: 760px) {
    .team-week-totals {
        width: 100%;
    }

    .team-week-totals > div {
        flex: 1;
        min-width: 0;
    }

    .team-shift-card .manager-hours-form {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: none;
    }
}


/* MANAGER EMPLOYEE PICKER */

.manager-schedule-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 28px;
}

.employee-picker-form {
    display: block;
}

.employee-picker-form label {
    height: 100%;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.employee-picker-form select {
    width: 100%;
    min-height: 44px;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
}

.single-employee-view {
    margin-top: 0;
}

@media (max-width: 760px) {
    .manager-schedule-toolbar {
        grid-template-columns: 1fr;
    }
}


.small-button.danger {
    background: #fff0ef;
    border: 1px solid #efc6c2;
    color: #a32924;
}

.small-button.danger:hover {
    background: #fde4e1;
    border-color: #e7aaa4;
}

.manager-delete-shift-form {
    display: block;
}


/* MANAGER ADD SHIFT */

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

.manager-add-shift {
    position: relative;
}

.manager-add-shift summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.manager-add-shift summary::-webkit-details-marker {
    display: none;
}

.manager-add-shift-form {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    width: min(620px, 90vw);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.15fr auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: 0 16px 38px rgba(42,34,25,.15);
}

.manager-add-shift-form label {
    display: grid;
    gap: 5px;
    color: #77736c;
    font-size: .75rem;
    font-weight: 700;
}

.manager-add-shift-form input,
.manager-add-shift-form select {
    min-height: 40px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #ddd8cf;
    border-radius: 10px;
    background: white;
    color: var(--ink);
    font: inherit;
}

@media (max-width: 900px) {
    .team-employee-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .manager-add-shift-form {
        position: static;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        margin-top: 10px;
        box-shadow: none;
    }
}

@media (max-width: 560px) {
    .manager-add-shift-form {
        grid-template-columns: 1fr;
    }
}


/* INLINE ADD SHIFT ON NOT SCHEDULED CARD */

.manager-off-day-card {
    grid-template-columns: 1.05fr 1fr auto !important;
    align-items: center;
}

.off-day-add-action {
    display: flex;
    justify-content: flex-end;
}

.manager-inline-add-shift {
    width: 100%;
}

.manager-inline-add-shift summary {
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.manager-inline-add-shift summary::-webkit-details-marker {
    display: none;
}

.manager-inline-add-shift[open] {
    grid-column: 1 / -1;
}

.manager-inline-add-shift-form {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid #dedbd5;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr auto;
    gap: 10px;
    align-items: end;
}

.manager-inline-add-shift-form label {
    display: grid;
    gap: 5px;
    color: #77736c;
    font-size: .75rem;
    font-weight: 700;
}

.manager-inline-add-shift-form input,
.manager-inline-add-shift-form select {
    min-height: 40px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #d8d4cd;
    border-radius: 10px;
    background: white;
    color: var(--ink);
    font: inherit;
}

.manager-off-day-card:has(.manager-inline-add-shift[open]) {
    opacity: 1;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.manager-off-day-card:has(.manager-inline-add-shift[open]) .off-day-label {
    color: #77746f;
}

@media (max-width: 760px) {
    .manager-off-day-card {
        grid-template-columns: 1fr auto !important;
    }

    .manager-off-day-card .shift-date {
        grid-column: 1;
    }

    .manager-off-day-card .off-day-label {
        grid-column: 1;
    }

    .manager-off-day-card .off-day-add-action {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .manager-inline-add-shift[open] {
        grid-column: 1 / -1;
    }

    .manager-inline-add-shift-form {
        grid-template-columns: 1fr;
    }
}


/* ADD SHIFT ACTION ALIGNMENT + GREEN BUTTON */

.manager-off-day-card {
    grid-template-columns: 1.05fr 1fr 1fr 1fr 1fr auto !important;
}

.manager-off-day-card .off-day-label {
    grid-column: 2 / 6;
}

.manager-off-day-card .off-day-add-action {
    grid-column: 6;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.manager-inline-add-shift summary.small-button.success {
    background: #eaf7ee;
    border: 1px solid #acd8b8;
    color: #237a3b;
}

.manager-inline-add-shift summary.small-button.success:hover {
    background: #dff2e5;
    border-color: #8fcba0;
}

@media (max-width: 760px) {
    .manager-off-day-card {
        grid-template-columns: 1fr auto !important;
    }

    .manager-off-day-card .off-day-label {
        grid-column: 1;
    }

    .manager-off-day-card .off-day-add-action {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}


/* ADD SHIFT INLINE VALIDATION */

.manager-add-shift-error {
    display: none;
    grid-column: 1 / -1;
    margin-top: 2px;
    padding: 9px 11px;
    border: 1px solid #efc6c2;
    border-radius: 9px;
    background: #fff0ef;
    color: #a32924;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
}

.manager-add-shift-error.show {
    display: block;
}


/* SIX DAY ADD SHIFT DISABLED */

.add-shift-disabled,
.add-shift-disabled:disabled {
    background: #eceae6;
    border: 1px solid #d3d0ca;
    color: #8c8881;
    opacity: 1;
    cursor: not-allowed;
}

.add-shift-disabled:hover,
.add-shift-disabled:disabled:hover {
    background: #eceae6;
    border-color: #d3d0ca;
    color: #8c8881;
}



.profile-dropdown,
.profile-panel,
.user-menu-dropdown {
    z-index: 1100 !important;
}

main,
.page-content,
.dashboard-content,
.team-schedule-page,
.team-schedule-layout,
.week-panel,
.schedule-card,
.card {
    position: relative;
    z-index: 1;
}




/* Profile dropdown stacking-context fix.
   The header uses backdrop-filter, which creates its own stacking context.
   Give the entire header a higher stack level than animated page/card content,
   while keeping it in the normal document flow (not sticky). */
.dashboard-header {
    position: relative !important;
    top: auto !important;
    z-index: 1000 !important;
}

.profile-menu {
    position: relative;
    z-index: 1;
}

.profile-dropdown {
    z-index: 2 !important;
}


/* PROFILE SETTINGS */
.profile-dropdown {
    width: 360px;
    max-height: min(78vh, 680px);
    overflow-y: auto;
}

.profile-settings {
    border-top: 1px solid var(--line);
    padding: 0 20px 20px;
}

.profile-settings-section {
    display: grid;
    gap: 9px;
    padding-top: 16px;
}

.profile-inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.profile-settings input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 10px 11px;
    outline: none;
    font: inherit;
}

.profile-settings input:focus {
    border-color: #d1ae00;
    box-shadow: 0 0 0 3px rgba(255,217,0,.13);
}

.profile-save-button {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .82rem;
}

.profile-help-text {
    color: var(--muted);
    font-size: .72rem;
}

.profile-password-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    font-size: .84rem;
    text-align: left;
}

.profile-password-toggle:hover,
.profile-password-toggle[aria-expanded="true"] {
    background: #fff9d8;
}

.profile-password-form {
    display: none;
    gap: 8px;
}

.profile-password-form.show {
    display: grid;
}

@media (max-width: 520px) {
    .profile-dropdown {
        width: min(360px, calc(100vw - 24px));
    }
}


/* PROFILE DROPDOWN ACTION */
.profile-dropdown-actions {
    padding: 0 20px 20px;
}

.profile-edit-link {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border: 1px solid #eed762;
    border-radius: 11px;
    background: #fff9d8;
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
}

.profile-edit-link:hover { background: #fff2a3; }

/* EDIT PROFILE PAGE */
.profile-page-container { width: min(100% - 40px, 980px); }

.profile-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.profile-back-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.profile-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.profile-settings-card {
    padding: 24px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 14px 38px rgba(42,34,25,.08);
}

.profile-card-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 22px;
}

.profile-card-heading h2 { margin: 0 0 5px; font-size: 1.15rem; }
.profile-card-heading p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }

.profile-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff3a6;
    font-weight: 900;
    font-size: .78rem;
}

.profile-page-form { display: grid; gap: 10px; }
.profile-page-form label { margin-top: 2px; font-size: .82rem; font-weight: 800; }

.profile-page-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    padding: 12px 13px;
    outline: none;
    font: inherit;
}

.profile-page-form input:focus {
    border-color: #d1ae00;
    box-shadow: 0 0 0 4px rgba(255,217,0,.12);
}

.profile-form-footer { display: grid; gap: 12px; margin-top: 5px; }
.profile-form-footer small, .profile-readonly-box small { color: var(--muted); line-height: 1.4; }
.profile-form-footer button { justify-self: start; padding: 11px 15px; }

.profile-readonly-box {
    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #faf8f5;
}

.profile-readonly-box strong { font-size: 1.05rem; }

@media (max-width: 760px) {
    .profile-page-heading { flex-direction: column; }
    .profile-page-grid { grid-template-columns: 1fr; }
}


/* MANAGER PROFILE EDITOR */
.profile-person-selector-card {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.profile-person-selector-card label {
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.profile-person-selector-card select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    padding: 12px 13px;
    outline: none;
    font: inherit;
    font-weight: 700;
}

.profile-person-selector-card select:focus {
    border-color: #d1ae00;
    box-shadow: 0 0 0 4px rgba(255,217,0,.12);
}

.profile-password-card {
    grid-column: 1 / -1;
}

.profile-readonly-second-label {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .profile-person-selector-card {
        grid-template-columns: 1fr;
    }

    .profile-password-card {
        grid-column: auto;
    }
}


/* SCHEDULE PEOPLE / ACCOUNT INVITES */
.claim-account-entry {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: .84rem;
}

.claim-account-entry a,
.claim-back-link {
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.claim-account-entry a:hover,
.claim-back-link:hover {
    text-decoration: underline;
}

.claim-back-link {
    display: inline-block;
    margin-top: 18px;
    font-size: .86rem;
}

.account-status-banner {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border: 1px solid #ead77c;
    border-radius: 15px;
    background: #fff9d8;
}

.account-status-banner > div {
    display: grid;
    gap: 4px;
}

.account-status-banner span {
    color: var(--muted);
    font-size: .86rem;
}

.team-account-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .72rem;
    font-weight: 850;
}

.team-account-status.account-ready {
    background: #eff9ef;
    color: #2d7237;
    border: 1px solid #cde8d1;
}

.team-account-status.account-missing {
    background: #fff4d7;
    color: #8a6500;
    border: 1px solid #efd78f;
}

.team-account-missing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.team-account-missing form {
    display: block;
}

.team-account-missing .small-button {
    padding: 6px 9px;
    font-size: .72rem;
}

.account-code-alert {
    line-height: 1.5;
    font-weight: 650;
    user-select: text;
}

.alert.account-info {
    background: #fff9d8;
    color: #6d5700;
    border: 1px solid #ead77c;
}


.position-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}

.position-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 10px;
    cursor: pointer;
}

.position-checkbox input {
    width: auto;
    margin: 0;
}

@media (max-width: 640px) {
    .position-checkbox-grid {
        grid-template-columns: 1fr;
    }
}


/* Compact Team Schedule employee picker */
.team-person-picker {
    position: relative;
    min-width: 260px;
    max-width: 340px;
}

.team-person-picker > .info-label {
    display: block;
    margin-bottom: 7px;
}

.team-person-picker-button {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    color: var(--ink);
    box-shadow: none;
    text-align: left;
}

.team-person-picker-button:hover {
    background: #fffdf2;
    border-color: #dfc74d;
}

.team-person-picker-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-person-picker-chevron {
    color: var(--muted);
    font-size: 1rem;
    transition: transform var(--motion-fast) var(--motion-ease);
}

.team-person-picker-button[aria-expanded="true"] .team-person-picker-chevron {
    transform: rotate(180deg);
}

.team-person-picker-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(360px, calc(100vw - 32px));
    display: none;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: white;
    box-shadow: 0 18px 48px rgba(42,34,25,.16);
    z-index: 50;
}

.team-person-picker-panel.show {
    display: block;
}

.team-person-search-wrap {
    padding: 2px 2px 9px;
    border-bottom: 1px solid var(--line);
}

.team-person-search {
    width: 100%;
    padding: 10px 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    background: #faf9f7 !important;
}

.team-person-list {
    max-height: 310px;
    overflow-y: auto;
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-right: 2px;
}

.team-person-option {
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    box-shadow: none;
}

.team-person-option:hover,
.team-person-option.selected {
    background: #fff8cf;
}

.team-person-option-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f1eee8;
    font-size: .82rem;
    font-weight: 850;
}

.team-person-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-person-option-copy strong,
.team-person-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-person-option-copy small {
    color: var(--muted);
    font-size: .74rem;
}

.team-person-option-check {
    color: #8f7600;
    font-weight: 900;
}

@media (max-width: 760px) {
    .team-person-picker {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .team-person-picker-panel {
        width: 100%;
    }
}


.team-person-option.team-person-option-filtered {
    display: none !important;
}

.team-person-search-empty {
    padding: 18px 12px;
    color: var(--muted);
    text-align: center;
    font-size: .86rem;
}

.team-person-search-empty[hidden] {
    display: none !important;
}


.danger-button {
    background: #fbe7e5;
    color: #9f2d27;
    border: 1px solid #efc3bf;
}

.danger-button:hover {
    background: #f6d4d1;
}


/* Modern 15-minute schedule time controls */
.modern-time-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modern-time-control {
    position: relative;
    min-width: 152px;
}

.modern-time-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #8e847b;
    font-size: 1rem;
    pointer-events: none;
}

.modern-time-select,
.approval-time-input.modern-time-select {
    width: 100%;
    min-width: 152px;
    height: 42px;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 36px 0 36px;
    border: 1px solid #ddd6cd;
    border-radius: 12px;
    background:
        linear-gradient(45deg, transparent 50%, #837a71 50%) calc(100% - 16px) 17px / 5px 5px no-repeat,
        linear-gradient(135deg, #837a71 50%, transparent 50%) calc(100% - 11px) 17px / 5px 5px no-repeat,
        white;
    color: var(--ink);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(42,34,25,.04);
}

.modern-time-select:hover,
.approval-time-input.modern-time-select:hover {
    border-color: #c9b84d;
    background-color: #fffdf3;
}

.modern-time-select:focus,
.approval-time-input.modern-time-select:focus {
    outline: none;
    border-color: #c6a900;
    box-shadow: 0 0 0 4px rgba(255,217,0,.15);
    transform: translateY(-1px);
}

.manager-hours-form .modern-time-control,
.manager-inline-add-shift-form .modern-time-control {
    min-width: 148px;
}

.time-adjustment-row .modern-time-field {
    min-width: 160px;
}

@media (max-width: 640px) {
    .modern-time-control,
    .modern-time-select,
    .approval-time-input.modern-time-select {
        width: 100%;
        min-width: 0;
    }
}


/* Typed + picker time control, constrained to 15-minute increments */
.modern-time-input,
.approval-time-input.modern-time-input {
    width: 100%;
    min-width: 152px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #ddd6cd;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 750;
    box-shadow: 0 3px 10px rgba(42,34,25,.04);
    cursor: text;
}

.modern-time-input:hover,
.approval-time-input.modern-time-input:hover {
    border-color: #c9b84d;
    background: #fffdf3;
}

.modern-time-input:focus,
.approval-time-input.modern-time-input:focus {
    outline: none;
    border-color: #c6a900;
    box-shadow: 0 0 0 4px rgba(255,217,0,.15);
}

.modern-time-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .72;
}


/* Quarter-hour typed + dropdown time fields */
input.modern-time-input[list="quarter-hour-times"] {
    cursor: text;
    letter-spacing: .01em;
}

input.modern-time-input[list="quarter-hour-times"]::placeholder {
    color: #9a9289;
    font-weight: 600;
}


/* Always-full quarter-hour picker */
.quarter-time-picker {
    position: relative;
    min-width: 152px;
}

.quarter-time-picker .modern-time-input {
    padding-right: 44px;
}

.quarter-time-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 40px;
    border: 0;
    border-left: 1px solid #e5ded6;
    border-radius: 0 11px 11px 0;
    background: transparent;
    color: #756d65;
    font-size: 1rem;
    cursor: pointer;
}

.quarter-time-toggle:hover {
    background: #fff9da;
}

.quarter-time-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 80;
    width: 100%;
    min-width: 170px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #ddd6cd;
    border-radius: 12px;
    background: white;
    box-shadow: 0 14px 32px rgba(42,34,25,.16);
}

.quarter-time-picker.open .quarter-time-menu {
    display: block;
}

.quarter-time-option {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.quarter-time-option:hover,
.quarter-time-option:focus {
    outline: none;
    background: #fff7c7;
}

@media (max-width: 640px) {
    .quarter-time-picker,
    .quarter-time-menu {
        width: 100%;
        min-width: 0;
    }
}


/* Team Schedule Excel upload */
.schedule-upload-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid #e2dbd1;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(42,34,25,.05);
}

.schedule-upload-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.schedule-upload-copy > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.schedule-upload-copy strong {
    color: var(--ink);
}

.schedule-upload-copy span:not(.schedule-upload-icon) {
    color: var(--muted);
    font-size: .86rem;
}

.schedule-upload-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff7c7;
    font-size: 1.2rem;
    font-weight: 800;
}

.schedule-upload-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.schedule-upload-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.schedule-file-button,
.schedule-upload-submit {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}

.schedule-file-button {
    max-width: 260px;
    padding: 0 13px;
    border: 1px solid #d9d1c7;
    background: #fff;
    color: var(--ink);
    overflow: hidden;
}

.schedule-file-button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-file-button:hover {
    background: #fffdf3;
    border-color: #c9b84d;
}

.schedule-upload-submit {
    padding: 0 15px;
    border: 1px solid #c9b84d;
    background: #f4d928;
    color: #2c281b;
}

.schedule-upload-submit:hover {
    filter: brightness(.98);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .schedule-upload-card,
    .schedule-upload-form {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-upload-form {
        width: 100%;
    }

    .schedule-file-button,
    .schedule-upload-submit {
        width: 100%;
        max-width: none;
    }
}


/* Clear an entire Team Schedule week */
.clear-week-form {
    margin: 0;
}

.clear-week-button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #e6b7b1;
    border-radius: 10px;
    background: #fff4f2;
    color: #9f2d27;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.clear-week-button:hover {
    background: #fbe2df;
    border-color: #dc9f98;
}

.clear-week-button:disabled {
    opacity: .6;
    cursor: wait;
}



/* Tiny inline Clear Week action beside the displayed week range */
.week-range-inline {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.clear-week-inline-form {
    display: inline-flex;
    margin: 0;
}

.clear-week-badge-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 3px 7px;
    border: 1px solid #e5b8b2;
    border-radius: 999px;
    background: #fff3f1;
    color: #a43a32;
    font: inherit;
    font-size: .67rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.clear-week-badge-button:hover {
    background: #fbe3df;
    border-color: #d99f98;
    transform: translateY(-1px);
}

.clear-week-badge-button:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}


/* Small brand message beside CHA logo */
.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-happiness-message {
    display: inline-block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
    transform-origin: left center;
    transition:
        color .2s ease,
        transform .2s ease,
        text-shadow .2s ease,
        letter-spacing .2s ease;
    cursor: default;
}

.brand-happiness-message:hover {
    color: var(--ink);
    transform: translateY(-1px) scale(1.045);
    letter-spacing: .025em;
    text-shadow: 0 4px 12px rgba(42, 34, 25, .12);
    animation: happiness-bounce .55s ease;
}

@keyframes happiness-bounce {
    0%, 100% { transform: translateY(-1px) scale(1.045) rotate(0deg); }
    30% { transform: translateY(-3px) scale(1.055) rotate(-1deg); }
    60% { transform: translateY(0) scale(1.045) rotate(.7deg); }
}

@media (max-width: 760px) {
    .dashboard-brand {
        gap: 8px;
    }

    .brand-happiness-message {
        font-size: .68rem;
        max-width: 135px;
        white-space: normal;
        line-height: 1.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-happiness-message:hover {
        animation: none;
        transform: none;
    }
}


/* Login logo emphasis: a single circle behind the untouched CHA logo. */
.login-logo-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 520px);
    min-height: 520px;
    isolation: isolate;
}

.login-logo-frame::before {
    content: "";
    position: absolute;
    width: min(100%, 505px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow:
        0 22px 42px rgba(73, 56, 15, .13),
        inset 0 1px 0 rgba(255, 255, 255, .24);
    z-index: -1;
    pointer-events: none;
}

.login-logo-ring {
    display: none;
}

.login-logo-frame img {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    transform: translate(-8px, -5px);
}

/* Consistent button motion across the entire app, including button-like links,
   labels, and summary controls used after login. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
.small-button,
.week-nav-button,
.profile-menu-button,
.team-person-picker-button,
.schedule-file-button,
.schedule-upload-submit,
.clear-week-button,
.clear-week-badge-button,
.danger-button,
.profile-save-button,
summary.small-button,
label.schedule-file-button,
a.button,
a.btn,
a.week-nav-button,
.approval-link,
.manager-nav-link,
.logout-link {
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease !important;
    transform-origin: center;
}

button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
.button:not(.disabled):hover,
.btn:not(.disabled):hover,
.small-button:not(.disabled):hover,
.week-nav-button:hover,
.profile-menu-button:hover,
.team-person-picker-button:hover,
.schedule-file-button:hover,
.schedule-upload-submit:hover,
.clear-week-button:not(:disabled):hover,
.clear-week-badge-button:not(:disabled):hover,
.danger-button:hover,
.profile-save-button:hover,
summary.small-button:hover,
label.schedule-file-button:hover,
a.button:hover,
a.btn:hover,
a.week-nav-button:hover,
.approval-link:hover,
.manager-nav-link:hover,
.logout-link:hover {
    transform: translateY(-2px) scale(1.015) !important;
    filter: brightness(1.025);
}

button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active,
.button:not(.disabled):active,
.btn:not(.disabled):active,
.small-button:not(.disabled):active,
.week-nav-button:active,
.profile-menu-button:active,
.team-person-picker-button:active,
.schedule-file-button:active,
.schedule-upload-submit:active,
.clear-week-button:not(:disabled):active,
.clear-week-badge-button:not(:disabled):active,
.danger-button:active,
.profile-save-button:active,
summary.small-button:active,
label.schedule-file-button:active,
a.button:active,
a.btn:active,
a.week-nav-button:active,
.approval-link:active,
.manager-nav-link:active,
.logout-link:active {
    transform: translateY(0) scale(.965) !important;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button.disabled,
.btn.disabled,
.small-button.disabled,
.button[aria-disabled="true"],
.btn[aria-disabled="true"] {
    transform: none !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    .btn,
    .small-button,
    .week-nav-button,
    .profile-menu-button,
    .team-person-picker-button,
    .schedule-file-button,
    .schedule-upload-submit,
    .clear-week-button,
    .clear-week-badge-button,
    .danger-button,
    .profile-save-button,
    summary.small-button,
    label.schedule-file-button,
    a.button,
    a.btn,
    a.week-nav-button,
    .approval-link,
    .manager-nav-link,
    .logout-link {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 720px) {
    .login-logo-frame {
        width: min(100%, 410px);
        min-height: 410px;
    }

    .login-logo-frame::before {
        width: min(100%, 400px);
    }
}


/* Top navigation motion: Team Schedule, Approvals, and Sign out. */
.approval-link:hover,
.manager-nav-link:hover,
.logout-link:hover {
    box-shadow: 0 8px 18px rgba(43, 38, 28, .10);
}


/* Prevent duplicate form submissions while a save/request is in progress. */
button.is-submitting,
button:disabled,
input[type="submit"].is-submitting,
input[type="submit"]:disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

button.is-submitting,
input[type="submit"].is-submitting {
    opacity: .58 !important;
    filter: grayscale(.55) !important;
    box-shadow: none !important;
    transform: none !important;
}


/* Add Shift position picker — matches the custom quarter-hour picker. */
.position-picker {
    position: relative;
    width: 100%;
}

.position-picker-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border, #ddd8c8);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.position-picker-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    max-height: 245px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border, #ddd8c8);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(44, 38, 25, .14);
}

.position-picker.open .position-picker-menu {
    display: grid;
    gap: 3px;
}

.position-picker-option {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.position-picker-option:hover {
    background: rgba(43, 38, 28, .055);
    filter: none !important;
}

.position-picker-option.selected {
    background: rgba(43, 38, 28, .035);
}

.position-picker-option:hover,
.position-picker-option.selected {
    color: inherit;
    box-shadow: none !important;
}


/* Adjust Hours spacing: keep time text comfortably inside the field and
   separate the Save button from the End field. */
[data-quarter-time-picker] [data-quarter-time-input] {
    padding-left: 16px !important;
    padding-right: 58px !important;
}

[data-quarter-time-picker] [data-quarter-time-toggle] {
    right: 6px;
}

[data-team-ajax-action] button[type="submit"],
[data-team-ajax-action] input[type="submit"] {
    margin-top: 10px;
}


/* Position picker: match the time picker's interaction and neutral styling. */
.position-picker {
    position: relative;
    min-width: 152px;
}

.position-picker-toggle {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 44px 9px 14px;
    border: 1px solid #d8c23a;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.position-picker-toggle .quarter-time-chevron {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    display: grid;
    place-items: center;
    border-left: 1px solid #e5ded6;
    color: #756d65;
    pointer-events: none;
}

.position-picker-toggle:hover,
.position-picker-toggle:focus,
.position-picker.open .position-picker-toggle {
    background: #fff !important;
    filter: none !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.position-picker-menu {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: 100%;
    min-width: 170px;
    max-height: 260px;
    padding: 6px;
    border: 1px solid #ddd6cd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(42,34,25,.16);
}

.position-picker.open .position-picker-menu {
    display: block;
}

.position-picker-option {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
    filter: none !important;
}

.position-picker-option:hover,
.position-picker-option:focus,
.position-picker-option.selected {
    outline: none;
    background: rgba(43, 38, 28, .055) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    filter: none !important;
}


.position-picker-menu {
    opacity: 0;
    transform: translateY(-4px) scale(.985);
    transform-origin: top center;
    transition: opacity .14s ease, transform .14s ease;
}

.position-picker.open .position-picker-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Adjust Hours: give Start/End fields breathing room. */
.manager-hours-form .modern-time-field + .modern-time-field {
    margin-top: 12px;
}



/* Adjust Hours animation is driven by JS so it reliably replays every time. */
.manager-hours-form {
    transform-origin: top center;
}


/* Adjust Hours uses one panel animation only. Prevent the summary button itself
   from adding a second lift/press animation that makes opening look duplicated. */
.manager-hours-editor > summary,
.manager-hours-editor > summary:hover,
.manager-hours-editor > summary:active {
    transform: none !important;
}

.manager-hours-editor > summary {
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease !important;
}


/* Time picker interaction: animate the whole field instead of only the arrow area. */
.quarter-time-picker {
    border-radius: 12px;
    transition:
        transform .16s ease,
        box-shadow .16s ease;
    transform-origin: center;
}

.quarter-time-picker:hover,
.quarter-time-picker:focus-within,
.quarter-time-picker.open {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 9px 20px rgba(42, 34, 25, .10);
}

/* Keep the arrow area visually consistent with the textbox. */
.quarter-time-toggle,
.quarter-time-toggle:hover,
.quarter-time-toggle:focus {
    background: transparent !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Let the whole control carry the active emphasis. */
.quarter-time-picker:focus-within .modern-time-input,
.quarter-time-picker.open .modern-time-input {
    border-color: #d8c23a;
    box-shadow: 0 0 0 3px rgba(216, 194, 58, .10);
}

@media (prefers-reduced-motion: reduce) {
    .quarter-time-picker,
    .quarter-time-picker:hover,
    .quarter-time-picker:focus-within,
    .quarter-time-picker.open {
        transition: none !important;
        transform: none !important;
    }
}


/* Keep an open time dropdown above the neighboring Start/End picker.
   The pop animation creates stacking contexts, so the active picker needs
   an explicit higher layer. */
.manager-hours-form .quarter-time-picker {
    z-index: 1;
}

.manager-hours-form .quarter-time-picker.open,
.manager-hours-form .quarter-time-picker:focus-within {
    z-index: 120;
}

.manager-hours-form .quarter-time-menu {
    z-index: 130;
}

/* The form itself should sit above the rest of the shift card while editing. */
.team-shift-card .manager-hours-editor[open] {
    z-index: 110;
}


/* Clear Week is unavailable when the displayed week has no scheduled shifts. */
.clear-week-badge-button:disabled,
.clear-week-badge-button[aria-disabled="true"] {
    background: #eceae6 !important;
    border-color: #d8d4ce !important;
    color: #9a958e !important;
    opacity: .72 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}


/* Back to Dashboard: match the rest of the app's button animation. */
.back-to-dashboard,
.back-dashboard-button,
.return-dashboard-link,
.current-week-link {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) ease,
        filter var(--motion-fast) ease !important;
    will-change: transform;
}

.back-to-dashboard:hover,
.back-dashboard-button:hover,
.return-dashboard-link:hover,
.current-week-link:hover {
    transform: translateY(-2px) scale(1.015) !important;
    filter: brightness(1.025);
}

.back-to-dashboard:active,
.back-dashboard-button:active,
.return-dashboard-link:active,
.current-week-link:active {
    transform: translateY(0) scale(.965) !important;
}

@media (prefers-reduced-motion: reduce) {
    .back-to-dashboard,
    .back-dashboard-button,
    .return-dashboard-link,
    .current-week-link {
        transition: none !important;
        transform: none !important;
    }
}


/* Actual profile-page "Back to Dashboard" link. */
.profile-back-link {
    display: inline-flex;
    align-items: center;
    transition:
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) ease,
        filter var(--motion-fast) ease !important;
    transform-origin: center;
    will-change: transform;
}

.profile-back-link:hover {
    transform: translateY(-2px) scale(1.025) !important;
    filter: brightness(1.025);
    box-shadow: 0 8px 18px rgba(43, 38, 28, .10);
}

.profile-back-link:active {
    transform: translateY(0) scale(.955) !important;
}

@media (prefers-reduced-motion: reduce) {
    .profile-back-link,
    .profile-back-link:hover,
    .profile-back-link:active {
        transition: none !important;
        transform: none !important;
    }
}


/* Modern Edit Profile employee picker — mirrors Team Schedule picker. */
.profile-person-selector-card {
    position: relative;
    overflow: visible !important;
}

.profile-person-selector-label {
    display: block;
    margin-bottom: 10px;
    color: #716d68;
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-employee-picker {
    position: relative;
    width: 100%;
}

.profile-employee-picker-button {
    width: 100%;
    min-height: 58px;
    padding: 12px 52px 12px 18px;
    border: 1px solid #d8c23a;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.profile-employee-picker-chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #756f68;
    transition: transform .16s ease;
}

.profile-employee-picker.open .profile-employee-picker-chevron {
    transform: translateY(-50%) rotate(180deg);
}

.profile-employee-picker-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 300;
    padding: 12px;
    border: 1px solid #ded9d1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(42,34,25,.16);
    opacity: 0;
    transform: translateY(-5px) scale(.99);
}

.profile-employee-picker.open .profile-employee-picker-panel {
    display: block;
    animation: profilePickerOpen .16s ease-out both;
}

@keyframes profilePickerOpen {
    from { opacity: 0; transform: translateY(-5px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-employee-picker-search {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #d8d3cc;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    outline: none;
}

.profile-employee-picker-search:focus {
    border-color: #d8c23a;
    box-shadow: 0 0 0 3px rgba(216,194,58,.12);
}

.profile-employee-picker-list {
    max-height: 330px;
    overflow-y: auto;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e8e3dc;
}

.profile-employee-picker-option {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: transform .14s ease, background-color .14s ease;
}

.profile-employee-picker-option:hover {
    background: rgba(43,38,28,.055);
    transform: translateX(2px);
}

.profile-employee-picker-option.selected {
    background: #fff8cc;
}

.profile-employee-picker-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f0eeea;
    font-weight: 900;
}

.profile-employee-picker-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-employee-picker-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-employee-picker-copy small {
    color: #77716b;
    font-weight: 650;
}

.profile-employee-picker-check {
    color: #8b7714;
    font-size: 1.25rem;
    font-weight: 900;
}

.profile-employee-picker-empty {
    padding: 18px 12px;
    color: #77716b;
    text-align: center;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .profile-employee-picker.open .profile-employee-picker-panel {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* Editing Profile picker: no background-color change on employee hover. */
.profile-employee-picker-option:hover,
.profile-employee-picker-option:focus {
    background: transparent !important;
}

/* Keep the currently selected employee highlighted even while hovered. */
.profile-employee-picker-option.selected,
.profile-employee-picker-option.selected:hover,
.profile-employee-picker-option.selected:focus {
    background: #fff8cc !important;
}


/* Editing Profile employee rows: completely neutral hover/focus appearance.
   Override global link/button hover rules as well as picker-specific rules. */
.profile-employee-picker-list .profile-employee-picker-option:hover,
.profile-employee-picker-list .profile-employee-picker-option:focus,
.profile-employee-picker-list .profile-employee-picker-option:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Selected row keeps the same selected background; hovering does not alter it. */
.profile-employee-picker-list .profile-employee-picker-option.selected,
.profile-employee-picker-list .profile-employee-picker-option.selected:hover,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus-visible {
    background: #fff8cc !important;
    background-color: #fff8cc !important;
    color: var(--ink) !important;
    filter: none !important;
    box-shadow: none !important;
}


/* Editing Profile picker: absolutely no hover/focus background color change.
   The selected employee is identified by the checkmark instead of a colored row. */
.profile-employee-picker-button,
.profile-employee-picker-button:hover,
.profile-employee-picker-button:focus,
.profile-employee-picker-button:focus-visible,
.profile-employee-picker.open .profile-employee-picker-button {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--ink) !important;
    filter: none !important;
}

.profile-employee-picker-list .profile-employee-picker-option,
.profile-employee-picker-list .profile-employee-picker-option:hover,
.profile-employee-picker-list .profile-employee-picker-option:focus,
.profile-employee-picker-list .profile-employee-picker-option:focus-visible,
.profile-employee-picker-list .profile-employee-picker-option.selected,
.profile-employee-picker-list .profile-employee-picker-option.selected:hover,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Keep hover feedback motion-only, with no color change. */
.profile-employee-picker-list .profile-employee-picker-option:hover {
    transform: translateX(2px);
}


/* Add Shift time dropdown layering:
   keep the active off-day card and its open picker above neighboring cards. */
.manager-off-day-card {
    position: relative;
    z-index: 1;
}

.manager-off-day-card:has(.manager-inline-add-shift[open]),
.manager-off-day-card:has(.quarter-time-picker.open) {
    z-index: 220 !important;
}

.manager-inline-add-shift[open] {
    position: relative;
    z-index: 230;
}

.manager-inline-add-shift-form {
    position: relative;
    z-index: 231;
    overflow: visible !important;
}

.manager-inline-add-shift-form .quarter-time-picker {
    position: relative;
    z-index: 1;
}

.manager-inline-add-shift-form .quarter-time-picker.open,
.manager-inline-add-shift-form .quarter-time-picker:focus-within {
    z-index: 240 !important;
}

.manager-inline-add-shift-form .quarter-time-menu {
    z-index: 250 !important;
}

/* Ensure surrounding schedule containers do not clip the expanded picker. */
.team-schedule-list,
.team-schedule-day,
.team-schedule-card,
.schedule-card {
    overflow: visible;
}


/* Editing Profile picker:
   - keep selected employee highlighted
   - never change the top dropdown bar color on hover/focus/open
   - employee row hover stays colorless */
.profile-employee-picker-button,
.profile-employee-picker-button:hover,
.profile-employee-picker-button:focus,
.profile-employee-picker-button:focus-visible,
.profile-employee-picker.open .profile-employee-picker-button {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--ink) !important;
    filter: none !important;
}

.profile-employee-picker-list .profile-employee-picker-option,
.profile-employee-picker-list .profile-employee-picker-option:hover,
.profile-employee-picker-list .profile-employee-picker-option:focus,
.profile-employee-picker-list .profile-employee-picker-option:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Selected user keeps a visible background at all times. */
.profile-employee-picker-list .profile-employee-picker-option.selected,
.profile-employee-picker-list .profile-employee-picker-option.selected:hover,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus,
.profile-employee-picker-list .profile-employee-picker-option.selected:focus-visible {
    background: #fff8cc !important;
    background-color: #fff8cc !important;
    color: var(--ink) !important;
    filter: none !important;
    box-shadow: none !important;
}


/* EMPLOYEE EMPLOYMENT STATUS TOOL */
.employee-admin-container {
    overflow: visible;
}

.employee-status-form {
    display: grid;
    gap: 16px;
}

.employee-status-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.employee-status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.employee-status-heading h2 {
    margin: 0 0 4px;
}

.employee-status-heading p {
    margin: 0;
    color: var(--muted);
}

.employee-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f1efeb;
    color: #6f6a64;
    font-size: .76rem;
    font-weight: 800;
}

.employee-status-list {
    display: grid;
}

.employee-status-row {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid #ece8e2;
    cursor: pointer;
    transition: transform .14s ease;
}

.employee-status-row:last-child {
    border-bottom: 0;
}

.employee-status-row:hover {
    transform: translateX(2px);
}

.employee-status-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f0eeea;
    color: var(--ink);
    font-weight: 900;
}

.employee-status-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.employee-status-copy strong {
    font-size: .98rem;
}

.employee-status-copy small {
    color: var(--muted);
    font-weight: 650;
}

.employee-status-control {
    position: relative;
    width: 30px;
    height: 30px;
}

.employee-status-control input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.employee-status-checkbox {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d6d0c8;
    border-radius: 9px;
    background: #fff;
    color: transparent;
    font-weight: 900;
    transition:
        transform .14s ease,
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease;
    pointer-events: none;
}

.employee-status-control input:checked + .employee-status-checkbox {
    background: #fff6b8;
    border-color: #d8c23a;
    color: #75630e;
}

.employee-status-control input:focus-visible + .employee-status-checkbox {
    box-shadow: 0 0 0 3px rgba(216,194,58,.16);
}

.employee-status-row:active .employee-status-checkbox {
    transform: scale(.93);
}

.employee-status-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 0;
}

.employee-status-actions small {
    color: var(--muted);
    max-width: 680px;
    line-height: 1.45;
}

.employee-status-save {
    flex: 0 0 auto;
}

.employee-status-empty {
    padding: 28px 22px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 680px) {
    .employee-status-heading,
    .employee-status-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-status-save {
        width: 100%;
    }
}


/* Employee page filters */
.employee-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #ece8e2;
    background: rgba(255,255,255,.45);
}

.employee-status-filter-button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d9d4cc;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform .14s ease,
        border-color .14s ease,
        box-shadow .14s ease;
}

.employee-status-filter-button:hover {
    transform: translateY(-1px);
    background: #fff !important;
}

.employee-status-filter-button.active {
    border-color: #d8c23a;
    box-shadow: 0 0 0 2px rgba(216,194,58,.10);
}

.employee-status-row[hidden] {
    display: none !important;
}


/* MANAGEMENT NAV DROPDOWN */
.management-menu {
    position: relative;
}

.management-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.management-menu-chevron {
    display: inline-block;
    transition: transform .16s ease;
}

.management-menu.open .management-menu-chevron {
    transform: rotate(180deg);
}

.management-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    min-width: 290px;
    padding: 8px;
    border: 1px solid #ded9d1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(42,34,25,.16);
    opacity: 0;
    transform: translateY(-5px) scale(.985);
    transform-origin: top right;
}

.management-menu.open .management-menu-panel {
    display: block;
    animation: managementMenuOpen .16s ease-out both;
}

@keyframes managementMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.management-menu-item {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    transition:
        transform .14s ease,
        box-shadow .14s ease;
}

.management-menu-item:hover {
    background: transparent !important;
    transform: translateX(2px);
    box-shadow: none !important;
    filter: none !important;
}

.management-menu-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f1efeb;
    font-size: 1rem;
}

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

.management-menu-copy strong {
    font-size: .9rem;
}

.management-menu-copy small {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.3;
}

@media (max-width: 820px) {
    .management-menu-panel {
        right: -40px;
        min-width: 270px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .management-menu.open .management-menu-panel {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .management-menu-chevron {
        transition: none;
    }
}


/* Modern centered custom-dropdown chevrons */
.modern-chevron {
    box-sizing: border-box;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
    border-radius: 1px;
    background: transparent !important;
    transform: rotate(45deg) translate(-1px, -1px);
    transform-origin: center;
    vertical-align: middle;
    line-height: 0;
    font-size: 0;
    pointer-events: none;
}

/* Keep arrows optically centered in the right-side dropdown button area. */
.quarter-time-toggle .modern-chevron,
.position-picker-toggle .modern-chevron {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto !important;
    transform: translate(-50%, -62%) rotate(45deg);
}

.profile-employee-picker-chevron.modern-chevron,
.management-menu-chevron.modern-chevron,
.profile-menu-button .modern-chevron {
    position: relative;
    top: -1px;
}

/* Rotate the modern management arrow cleanly when open. */
.management-menu.open .management-menu-chevron.modern-chevron {
    transform: rotate(225deg) translate(-1px, -1px) !important;
}


/* =========================================================
   CUSTOM DROPDOWN CHEVRONS + MANAGER EDITOR LAYERING
   Final overrides for Team Schedule.
   ========================================================= */

/* Draw the same modern chevron everywhere instead of text "v" glyphs. */
.quarter-time-chevron.modern-chevron,
.position-picker .modern-chevron {
    box-sizing: border-box;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px;
    border: 0 !important;
    border-right: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
    border-radius: 1px;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    pointer-events: none;
}

/* Time dropdown arrow: perfectly centered inside the narrow button on the right. */
.quarter-time-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
}

.quarter-time-toggle .modern-chevron {
    position: static !important;
    margin: 0 !important;
    transform: translateY(-2px) rotate(45deg) !important;
}

/* Position dropdown: label stays left, chevron is pinned to the far right. */
.position-picker-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-right: 50px !important;
}

.position-picker-toggle .modern-chevron {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-66%) rotate(45deg) !important;
}

/* When a picker is open, rotate the chevron upward without changing alignment. */
.quarter-time-picker.open .quarter-time-toggle .modern-chevron {
    transform: translateY(2px) rotate(225deg) !important;
}

.position-picker.open .position-picker-toggle .modern-chevron {
    transform: translateY(-34%) rotate(225deg) !important;
}

/*
   Adjust Hours is an editing overlay. When open it must always sit above
   Add Shift cards/forms and every dropdown inside those cards.
*/
.team-shift-card {
    position: relative;
}

.team-shift-card:has(.manager-hours-editor[open]) {
    z-index: 5000 !important;
}

.manager-hours-editor[open] {
    position: relative !important;
    z-index: 5100 !important;
}

.manager-hours-editor[open] .manager-hours-form {
    position: relative !important;
    z-index: 5200 !important;
    overflow: visible !important;
}

.manager-hours-editor[open] .quarter-time-picker {
    position: relative !important;
    z-index: 5210 !important;
}

.manager-hours-editor[open] .quarter-time-picker.open,
.manager-hours-editor[open] .quarter-time-picker:focus-within {
    z-index: 5400 !important;
}

.manager-hours-editor[open] .quarter-time-menu {
    z-index: 5500 !important;
}

/* Add Shift still layers correctly internally, but stays below Adjust Hours. */
.manager-off-day-card,
.manager-inline-add-shift[open],
.manager-inline-add-shift-form {
    z-index: auto;
}

.manager-off-day-card:has(.manager-inline-add-shift[open]),
.manager-off-day-card:has(.quarter-time-picker.open),
.manager-off-day-card:has(.position-picker.open) {
    z-index: 1000 !important;
}

.manager-inline-add-shift[open] {
    position: relative;
    z-index: 1100 !important;
}

.manager-inline-add-shift-form {
    position: relative;
    z-index: 1110 !important;
    overflow: visible !important;
}

.manager-inline-add-shift-form .quarter-time-picker.open,
.manager-inline-add-shift-form .quarter-time-picker:focus-within,
.manager-inline-add-shift-form .position-picker.open {
    z-index: 1200 !important;
}

.manager-inline-add-shift-form .quarter-time-menu,
.manager-inline-add-shift-form .position-picker-menu {
    z-index: 1300 !important;
}


/* =========================================================
   ADJUST HOURS AS TRUE OVERLAY + FINAL MODERN CHEVRON PASS
   ========================================================= */

/* The details wrapper itself must not grow the shift card when opened. */
.team-shift-card {
    position: relative !important;
    overflow: visible !important;
}

.manager-hours-editor {
    position: relative !important;
}

/* Keep only the summary button in normal document flow. */
.manager-hours-editor > summary {
    position: relative;
    z-index: 2;
}

/* The editor form is a floating panel, not part of card height. */
.manager-hours-editor[open] .manager-hours-form {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(410px, calc(100vw - 32px)) !important;
    margin: 0 !important;
    z-index: 5200 !important;
    overflow: visible !important;
}

/* Raise the whole scheduled card while Adjust Hours is open. */
.team-shift-card:has(.manager-hours-editor[open]) {
    z-index: 5000 !important;
}

/* Its dropdowns remain above everything inside the overlay. */
.manager-hours-editor[open] .quarter-time-picker {
    position: relative !important;
    z-index: 5210 !important;
}

.manager-hours-editor[open] .quarter-time-picker.open,
.manager-hours-editor[open] .quarter-time-picker:focus-within {
    z-index: 5400 !important;
}

.manager-hours-editor[open] .quarter-time-menu {
    z-index: 5500 !important;
}

/* Modern CSS chevron: no font glyphs, centered consistently. */
.modern-chevron {
    box-sizing: border-box !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    border: 0 !important;
    border-right: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
    border-radius: 1px !important;
    background: transparent !important;
    color: currentColor;
    font-size: 0 !important;
    line-height: 0 !important;
    pointer-events: none !important;
}

/* Time pickers: chevron exactly centered in right-side button. */
.quarter-time-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
}

.quarter-time-toggle .modern-chevron {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: translateY(-2px) rotate(45deg) !important;
}

.quarter-time-picker.open .quarter-time-toggle .modern-chevron {
    transform: translateY(2px) rotate(225deg) !important;
}

/* Position picker: chevron pinned to far-right, never after text. */
.position-picker-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-right: 52px !important;
}

.position-picker-toggle .modern-chevron,
.position-picker-toggle .quarter-time-chevron {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-68%) rotate(45deg) !important;
}

.position-picker.open .position-picker-toggle .modern-chevron,
.position-picker.open .position-picker-toggle .quarter-time-chevron {
    transform: translateY(-32%) rotate(225deg) !important;
}

/* Keep Add Shift below Adjust Hours, while preserving its own dropdown layering. */
.manager-off-day-card:has(.manager-inline-add-shift[open]),
.manager-off-day-card:has(.quarter-time-picker.open),
.manager-off-day-card:has(.position-picker.open) {
    z-index: 1000 !important;
}

.manager-inline-add-shift[open] {
    position: relative !important;
    z-index: 1100 !important;
}

.manager-inline-add-shift-form {
    position: relative !important;
    z-index: 1110 !important;
    overflow: visible !important;
}

.manager-inline-add-shift-form .quarter-time-menu,
.manager-inline-add-shift-form .position-picker-menu {
    z-index: 1300 !important;
}

/* On narrow screens, let the Adjust Hours overlay anchor to the card edge safely. */
@media (max-width: 760px) {
    .manager-hours-editor[open] .manager-hours-form {
        right: 0 !important;
        width: min(360px, calc(100vw - 28px)) !important;
    }
}
\n\n/* PROFILE EMPLOYEE PICKER — FINAL ALIGNMENT */\n.profile-person-selector-card { align-items: center !important; }\n.profile-employee-picker { position: relative !important; min-width: 0; }\n.profile-employee-picker-button {\n    position: relative !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: flex-start !important;\n    width: 100% !important;\n    min-height: 58px;\n    padding: 14px 56px 14px 20px !important;\n    text-align: left !important;\n}\n.profile-employee-picker-button > span:first-child { min-width: 0; line-height: 1.25; }\n.profile-employee-picker-button .profile-employee-picker-chevron.modern-chevron {\n    position: absolute !important;\n    top: 50% !important;\n    right: 22px !important;\n    left: auto !important;\n    bottom: auto !important;\n    width: 9px !important;\n    height: 9px !important;\n    margin: 0 !important;\n    transform: translateY(-68%) rotate(45deg) !important;\n    transform-origin: center !important;\n}\n.profile-employee-picker.open .profile-employee-picker-button .profile-employee-picker-chevron.modern-chevron {\n    transform: translateY(-32%) rotate(225deg) !important;\n}\n

/* PROFILE MANAGEMENT PICKER — geometry fix
   Use grid instead of absolute positioning so the arrow cannot fall below the name. */
.profile-person-selector-card .profile-employee-picker-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    align-items: center !important;
    column-gap: 14px !important;
    position: relative !important;
    min-height: 58px !important;
    padding: 14px 18px 14px 20px !important;
}

.profile-person-selector-card .profile-employee-picker-value {
    display: block !important;
    min-width: 0 !important;
    grid-column: 1 !important;
    align-self: center !important;
    line-height: 1.25 !important;
}

/* Reset every earlier absolute/left/top rule before drawing the arrow. */
.profile-person-selector-card
.profile-employee-picker-button
.profile-employee-picker-chevron.modern-chevron {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    margin: -4px 0 0 0 !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
}

.profile-person-selector-card
.profile-employee-picker.open
.profile-employee-picker-button
.profile-employee-picker-chevron.modern-chevron {
    margin-top: 4px !important;
    transform: rotate(225deg) !important;
}


/* PROFILE EMPLOYEE PICKER — pin chevron to the actual far-right edge */
.profile-person-selector-card .profile-employee-picker-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    width: 100% !important;
    align-items: center !important;
    justify-items: stretch !important;
    padding: 14px 20px !important;
}

.profile-person-selector-card .profile-employee-picker-button
.profile-employee-picker-value {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    width: auto !important;
}

.profile-person-selector-card .profile-employee-picker-button
.profile-employee-picker-chevron.modern-chevron {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    width: 9px !important;
    height: 9px !important;
    margin: -4px 3px 0 0 !important;
    transform: rotate(45deg) !important;
}

.profile-person-selector-card .profile-employee-picker.open
.profile-employee-picker-button
.profile-employee-picker-chevron.modern-chevron {
    margin: 4px 3px 0 0 !important;
    transform: rotate(225deg) !important;
}


/* Employee page account-position badges */
.employee-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.employee-status-badges .position-badge {
    font-size: .68rem;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 999px;
}


/* Employee name + badges on one line */
.employee-status-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.employee-status-name-line > strong {
    flex: 0 0 auto;
}

.employee-status-name-line .employee-status-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
}


/* Employee list row navigation: row opens profile; checkbox is the only status toggle. */
.employee-status-row {
    cursor: pointer;
}

.employee-status-row:focus-visible {
    outline: 3px solid rgba(216, 194, 58, .22);
    outline-offset: -3px;
}

.employee-status-control {
    cursor: pointer;
}

.employee-status-control input {
    cursor: pointer;
}

/* Employee profile page */
.employee-profile-container {
    display: grid;
    gap: 18px;
}

.employee-profile-hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.employee-profile-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f0eeea;
    font-size: 1.6rem;
    font-weight: 900;
}

.employee-profile-identity {
    min-width: 0;
}

.employee-profile-identity .eyebrow {
    margin-bottom: 4px;
}

.employee-profile-identity p:last-child {
    margin: 5px 0 0;
    color: var(--muted);
    font-weight: 650;
}

.employee-profile-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.employee-profile-name-line h1 {
    margin: 0;
}

.employee-profile-status {
    padding: 8px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.employee-profile-status.active {
    background: #eaf6eb;
    color: #3d7543;
    border: 1px solid #bfdfc3;
}

.employee-profile-status.inactive {
    background: #f1efeb;
    color: #77716a;
    border: 1px solid #ded9d1;
}

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

.employee-profile-tool-button {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(42,34,25,.05);
    transition: transform .15s ease, box-shadow .15s ease;
}

.employee-profile-tool-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(42,34,25,.09);
    filter: none !important;
}

.employee-profile-tool-button > span:last-child {
    display: grid;
    gap: 3px;
}

.employee-profile-tool-button small {
    color: var(--muted);
    font-size: .75rem;
}

.employee-profile-tool-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff8cc;
    font-size: 1.1rem;
}

.employee-profile-info-card,
.employee-tool-placeholder {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.06);
}

.employee-profile-card-heading {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.employee-profile-card-heading h2 {
    margin: 0;
}

.employee-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.employee-profile-info-grid > div {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.employee-profile-info-grid > div:nth-child(3n) {
    border-right: 0;
}

.employee-profile-info-grid > div:nth-last-child(-n+3) {
    border-bottom: 0;
}

.employee-profile-info-grid span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.employee-tool-page {
    display: grid;
    gap: 10px;
}

.employee-tool-page h1 {
    margin-top: 0;
}

.employee-tool-placeholder {
    padding: 24px;
}

.employee-tool-placeholder h2 {
    margin-top: 0;
}

.employee-tool-placeholder p {
    margin-bottom: 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .employee-profile-hero {
        grid-template-columns: 58px minmax(0,1fr);
    }

    .employee-profile-avatar {
        width: 58px;
        height: 58px;
    }

    .employee-profile-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .employee-profile-actions,
    .employee-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .employee-profile-info-grid > div,
    .employee-profile-info-grid > div:nth-child(3n),
    .employee-profile-info-grid > div:nth-last-child(-n+3) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .employee-profile-info-grid > div:last-child {
        border-bottom: 0;
    }
}


/* Real-time employment status updates */
.employee-status-row.is-saving-employment {
    opacity: .72;
}

.employee-status-live-note {
    min-width: 70px;
    text-align: right;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.employee-status-live-note.success {
    color: #4f7f54;
}

.employee-status-live-note.error {
    color: #a33b32;
}

.employee-status-control input:disabled + .employee-status-checkbox {
    cursor: wait;
    opacity: .65;
}


/* Employee tool-page breadcrumb */
.employee-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.employee-breadcrumb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .14s ease, border-color .14s ease;
}

.employee-breadcrumb a:hover,
.employee-breadcrumb a:focus-visible {
    color: var(--ink);
    border-bottom-color: currentColor;
}


/* Keep clickable Employee · Name breadcrumb the same color as the original eyebrow. */
.employee-breadcrumb,
.employee-breadcrumb a,
.employee-breadcrumb a:visited,
.employee-breadcrumb a:hover,
.employee-breadcrumb a:focus-visible,
.employee-breadcrumb a:active {
    color: var(--muted) !important;
}

.employee-breadcrumb a {
    border-bottom-color: transparent !important;
}

.employee-breadcrumb a:hover,
.employee-breadcrumb a:focus-visible {
    text-decoration: none !important;
}


/* Match the original CHA eyebrow styling exactly while keeping breadcrumb links clickable. */
.employee-breadcrumb {
    margin: 0 0 8px !important;
    color: #9a8110 !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.employee-breadcrumb a,
.employee-breadcrumb a:visited,
.employee-breadcrumb a:hover,
.employee-breadcrumb a:focus-visible,
.employee-breadcrumb a:active,
.employee-breadcrumb span {
    color: #9a8110 !important;
}

.employee-breadcrumb a {
    text-decoration: none !important;
    border-bottom: 0 !important;
}


/* Original breadcrumb interaction restored, with the original gold eyebrow color retained. */
.employee-breadcrumb a,
.employee-breadcrumb a:visited,
.employee-breadcrumb a:active {
    color: #9a8110 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: color .14s ease, border-color .14s ease !important;
}

.employee-breadcrumb a:hover,
.employee-breadcrumb a:focus-visible {
    color: #9a8110 !important;
    border-bottom-color: #9a8110 !important;
}


/* Employee account filter */
.employee-status-filter {
    align-items: center;
}


/* Weekly employee availability */
.availability-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.availability-page-heading h1 {
    margin: 0;
}

.availability-page-heading .dashboard-subtitle {
    margin: 6px 0 0;
}

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

.availability-card {
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.07);
}

.availability-table-heading,
.availability-row {
    display: grid;
    grid-template-columns: minmax(130px, 1.15fr) minmax(150px, .9fr) minmax(180px, 1fr) minmax(180px, 1fr);
    align-items: center;
    gap: 14px;
}

.availability-table-heading {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.availability-row {
    position: relative;
    padding: 14px 20px;
    border-bottom: 1px solid #ece8e2;
    transition: opacity .14s ease, background-color .14s ease;
}

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

.availability-row.is-unavailable {
    background: rgba(244,242,238,.52);
}

.availability-row.is-unavailable .availability-time-field {
    opacity: .45;
}

.availability-day {
    font-size: .95rem;
}

.availability-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    width: fit-content;
}

.availability-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.availability-toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #d8d4ce;
    transition: background-color .15s ease;
}

.availability-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(42,34,25,.2);
    transition: transform .15s ease;
}

.availability-toggle input:checked + .availability-toggle-track {
    background: #d3b934;
}

.availability-toggle input:checked + .availability-toggle-track .availability-toggle-knob {
    transform: translateX(16px);
}

.availability-toggle input:focus-visible + .availability-toggle-track {
    box-shadow: 0 0 0 3px rgba(216,194,58,.18);
}

.availability-toggle-copy {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.availability-time-field {
    margin: 0 !important;
}

.availability-time-field > span:first-child {
    display: none;
}

.availability-row .quarter-time-picker {
    z-index: auto;
}

.availability-row .quarter-time-picker.open,
.availability-row .quarter-time-picker:focus-within {
    z-index: 1200;
}

.availability-row .quarter-time-menu {
    z-index: 1300;
}

.availability-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.availability-actions small {
    color: var(--muted);
}

.availability-save-status {
    min-width: 76px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    text-align: right;
}

.availability-save-status.success {
    color: #4f7f54;
}

.availability-save-status.error {
    color: #a33b32;
}

.availability-mobile-label {
    display: none !important;
}

@media (max-width: 820px) {
    .availability-table-heading {
        display: none;
    }

    .availability-row {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .availability-day {
        font-size: 1rem;
    }

    .availability-toggle {
        justify-self: end;
    }

    .availability-time-field {
        grid-column: span 1;
    }

    .availability-time-field > .availability-mobile-label {
        display: block !important;
        margin-bottom: 5px;
        color: var(--muted);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
    }
}

@media (max-width: 560px) {
    .availability-page-heading,
    .availability-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .availability-save-status {
        text-align: left;
    }

    .availability-row {
        grid-template-columns: 1fr;
    }

    .availability-toggle {
        justify-self: start;
    }

    .availability-time-field {
        grid-column: 1;
    }

    .availability-save-button {
        width: 100%;
    }
}


/* Availability validity timeframe + last-updated metadata */
.availability-update-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 210px;
}

.availability-last-updated-label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.availability-update-meta strong {
    color: var(--ink);
    font-size: .78rem;
}

.availability-update-meta .availability-save-status {
    min-height: 1em;
}

.availability-validity-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(42,34,25,.055);
}

.availability-validity-copy h2 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.availability-validity-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

.availability-validity-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 190px));
    gap: 12px;
}

.availability-validity-fields label {
    display: grid;
    gap: 6px;
}

.availability-validity-fields label > span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.availability-validity-fields input[type="date"] {
    min-height: 42px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d9d4cc;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .86rem;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.availability-validity-fields input[type="date"]:focus {
    border-color: #d8c23a;
    box-shadow: 0 0 0 3px rgba(216,194,58,.13);
    transform: translateY(-1px);
}

@media (max-width: 820px) {
    .availability-page-heading {
        align-items: flex-start;
    }

    .availability-update-meta {
        justify-items: start;
        min-width: 0;
    }

    .availability-validity-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .availability-validity-fields {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 560px) {
    .availability-validity-fields {
        grid-template-columns: 1fr;
    }
}


/* Modern Availability date picker */
.availability-validity-fields {
    overflow: visible;
}

.availability-date-field {
    min-width: 0;
}

.modern-date-picker {
    position: relative;
}

.modern-date-button {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border: 1px solid #d9d4cc;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.modern-date-button:hover {
    transform: translateY(-1px);
    border-color: #cfc8bd;
}

.modern-date-picker.open .modern-date-button,
.modern-date-button:focus-visible {
    border-color: #d8c23a;
    box-shadow: 0 0 0 3px rgba(216,194,58,.13);
    outline: none;
}

.modern-date-button [data-modern-date-label].is-placeholder {
    color: #9b958c;
}

.modern-date-calendar-icon {
    position: relative;
    width: 16px;
    height: 15px;
    justify-self: end;
    border: 1.7px solid currentColor;
    border-radius: 4px;
    color: #8a8176;
}

.modern-date-calendar-icon::before,
.modern-date-calendar-icon::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: currentColor;
}

.modern-date-calendar-icon::before { left: 3px; }
.modern-date-calendar-icon::after { right: 3px; }

.modern-date-calendar-icon {
    background:
        linear-gradient(currentColor, currentColor) 2px 4px / 10px 1.4px no-repeat;
}

.modern-date-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(290px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid #ddd6cc;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(42,34,25,.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.985);
    transform-origin: top right;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    z-index: 7000;
}

.modern-date-picker.open {
    z-index: 7000;
}

.modern-date-picker.open .modern-date-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.modern-date-header {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.modern-date-header strong {
    text-align: center;
    font-size: .88rem;
}

.modern-date-nav {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background .13s ease, transform .13s ease;
}

.modern-date-nav:hover {
    background: #f4f1eb;
    transform: translateY(-1px);
}

.modern-date-nav-chevron {
    width: 8px;
    height: 8px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
}

.modern-date-nav-chevron.left {
    transform: rotate(135deg);
    margin-left: 3px;
}

.modern-date-nav-chevron.right {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.modern-date-weekdays,
.modern-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.modern-date-weekdays {
    margin-bottom: 4px;
}

.modern-date-weekdays span {
    padding: 3px 0;
    color: #9b958c;
    font-size: .62rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.modern-date-spacer {
    min-height: 34px;
}

.modern-date-day {
    min-width: 0;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}

.modern-date-day:hover {
    background: #f4f1eb;
    transform: translateY(-1px);
}

.modern-date-day.today {
    box-shadow: inset 0 0 0 1px #d6c35a;
}

.modern-date-day.selected {
    background: #e5ce46;
    color: #2d271c;
    font-weight: 850;
    box-shadow: none;
}

.modern-date-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eee9e2;
}

.modern-date-clear,
.modern-date-today {
    border: 0;
    border-radius: 9px;
    padding: 7px 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

.modern-date-clear:hover,
.modern-date-today:hover {
    background: #f4f1eb;
    color: var(--ink);
}

/* Five-column weekly availability + All Day */
.availability-table-heading,
.availability-row {
    grid-template-columns:
        minmax(115px, 1.05fr)
        minmax(140px, .9fr)
        minmax(92px, .62fr)
        minmax(165px, 1fr)
        minmax(165px, 1fr);
}

.availability-all-day-control {
    position: relative;
    display: inline-flex;
    width: fit-content;
}

.availability-all-day-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.availability-all-day-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d9d4cc;
    border-radius: 999px;
    background: #fff;
    color: #766f66;
    font-size: .74rem;
    font-weight: 850;
    cursor: pointer;
    user-select: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, opacity .14s ease;
}

.availability-all-day-button:hover {
    transform: translateY(-1px);
    border-color: #cfc8bd;
}

.availability-all-day-control input:checked + .availability-all-day-button {
    background: #f3e9a4;
    border-color: #dbc53d;
    color: #5a4c0c;
}

.availability-all-day-control input:focus-visible + .availability-all-day-button {
    box-shadow: 0 0 0 3px rgba(216,194,58,.15);
}

.availability-all-day-control input:disabled + .availability-all-day-button {
    opacity: .4;
    cursor: default;
    transform: none;
}

.availability-row.is-all-day .availability-time-field {
    opacity: .42;
}

@media (max-width: 1040px) {
    .availability-table-heading,
    .availability-row {
        grid-template-columns:
            minmax(105px, 1fr)
            minmax(135px, .9fr)
            minmax(85px, .6fr)
            minmax(145px, 1fr)
            minmax(145px, 1fr);
    }
}

@media (max-width: 820px) {
    .availability-row {
        grid-template-columns: 1fr auto;
    }

    .availability-all-day-control {
        justify-self: end;
    }

    .availability-time-field {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .availability-all-day-control {
        justify-self: start;
    }
}


/* Calendar grid alignment fix */
.modern-date-popover {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.modern-date-weekdays,
.modern-date-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modern-date-weekdays > span,
.modern-date-spacer,
.modern-date-day {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
}

.modern-date-weekdays > span {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
}

.modern-date-day {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}

.modern-date-day:hover,
.modern-date-day:focus-visible,
.modern-date-day:active,
.modern-date-day.selected,
.modern-date-day.today {
    transform: none !important;
}

.modern-date-grid {
    overflow: hidden !important;
}


/* Account dropdown self-service actions */
.profile-dropdown-actions {
    display: grid;
    gap: 4px;
}

.profile-dropdown-actions .profile-edit-link {
    display: flex;
    align-items: center;
    width: 100%;
}


/* Request Time Off + manager review workflow */
.time-off-request-form,
.time-off-history,
.manager-time-off-list {
    margin-top: 18px;
}

.time-off-request-card,
.manager-time-off-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(42,34,25,.06);
}

.time-off-request-card {
    padding: 20px;
}

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

.time-off-date-grid label,
.time-off-reason-field,
.manager-time-off-review label {
    display: grid;
    gap: 7px;
}

.time-off-date-grid label > span,
.time-off-reason-field > span,
.manager-time-off-review label > span,
.manager-time-off-label {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.time-off-date-grid input,
.time-off-reason-field textarea,
.manager-time-off-review textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9d4cc;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.time-off-date-grid input {
    min-height: 44px;
    padding: 10px 12px;
}

.time-off-reason-field {
    margin-top: 14px;
}

.time-off-reason-field textarea,
.manager-time-off-review textarea {
    padding: 12px 13px;
    resize: vertical;
}

.time-off-date-grid input:focus,
.time-off-reason-field textarea:focus,
.manager-time-off-review textarea:focus {
    border-color: #d8c23a;
    box-shadow: 0 0 0 3px rgba(216,194,58,.13);
}

.time-off-request-actions,
.manager-time-off-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.time-off-request-actions [data-time-off-request-status],
.manager-time-off-actions [data-review-status] {
    margin-right: auto;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.time-off-section-heading {
    margin-bottom: 10px;
}

.time-off-section-heading h2 {
    margin: 0;
}

.time-off-section-heading p {
    margin: 4px 0 0;
    color: var(--muted);
}

.time-off-request-list,
.manager-time-off-list {
    display: grid;
    gap: 12px;
}

.time-off-request-item {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
}

.time-off-request-main,
.manager-time-off-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.time-off-request-main > div,
.manager-time-off-top > div {
    display: grid;
    gap: 3px;
}

.time-off-request-main span:not(.time-off-status),
.manager-time-off-top span:not(.time-off-status) {
    color: var(--muted);
    font-size: .74rem;
}

.time-off-request-item p,
.manager-time-off-body p {
    margin: 10px 0 0;
    color: var(--ink);
    line-height: 1.5;
}

.time-off-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
}

.time-off-status-pending {
    background: #f3ead0;
    color: #78611a;
}

.time-off-status-approved {
    background: #e0efe2;
    color: #426b48;
}

.time-off-status-denied {
    background: #f2dfdc;
    color: #8d433a;
}

.time-off-empty {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}

.manager-time-off-card {
    padding: 18px;
}

.manager-time-off-body {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #ece8e2;
}

.manager-time-off-body p {
    margin-top: 4px;
}

.manager-time-off-review {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ece8e2;
}

@media (max-width: 620px) {
    .time-off-date-grid {
        grid-template-columns: 1fr;
    }

    .time-off-request-main,
    .manager-time-off-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .time-off-request-actions,
    .manager-time-off-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .time-off-request-actions [data-time-off-request-status],
    .manager-time-off-actions [data-review-status] {
        margin-right: 0;
    }
}


/* Request Time Off uses the same modern calendar picker as Availability. */
.time-off-date-grid .modern-date-picker {
    width: 100%;
}

.time-off-date-grid .modern-date-popover {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.time-off-date-grid .modern-date-weekdays,
.time-off-date-grid .modern-date-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
}

.time-off-date-grid .modern-date-day {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    transform: none !important;
}

.time-off-date-grid .modern-date-day:hover,
.time-off-date-grid .modern-date-day:focus-visible,
.time-off-date-grid .modern-date-day:active,
.time-off-date-grid .modern-date-day.selected,
.time-off-date-grid .modern-date-day.today {
    transform: none !important;
}


/* APPROVALS NAV DROPDOWN */
.approval-menu {
    position: relative;
}

.approval-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.approval-menu-chevron {
    display: inline-block;
    transition: transform .16s ease;
}

.approval-menu.open .approval-menu-chevron {
    transform: rotate(180deg);
}

.approval-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    min-width: 290px;
    padding: 8px;
    border: 1px solid #ded9d1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(42,34,25,.16);
    opacity: 0;
    transform: translateY(-5px) scale(.985);
    transform-origin: top right;
}

.approval-menu.open .approval-menu-panel {
    display: block;
    animation: approvalMenuOpen .16s ease-out both;
}

@keyframes approvalMenuOpen {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.time-off-employee-link {
    display: inline-block;
    width: fit-content;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 850;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .14s ease, transform .14s ease;
}

.time-off-employee-link:hover,
.time-off-employee-link:focus-visible {
    border-bottom-color: currentColor;
    transform: translateY(-1px);
}

.manager-time-off-card.is-reviewed {
    opacity: .6;
    transform: scale(.995);
    transition: opacity .18s ease, transform .18s ease;
}

@media (max-width: 820px) {
    .approval-menu-panel {
        right: -30px;
        min-width: 270px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .approval-menu.open .approval-menu-panel {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* Polished employee Time Off request history */
.employee-time-off-history-card {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid #e2ddd5 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,248,244,.96)) !important;
    box-shadow: 0 10px 30px rgba(42,34,25,.065);
    transition: transform .16s ease, box-shadow .16s ease, opacity .18s ease;
}

.employee-time-off-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 38px rgba(42,34,25,.09);
}

.employee-time-off-card-accent {
    height: 4px;
    width: 100%;
}

.time-off-accent-pending { background: #d8bd42; }
.time-off-accent-approved { background: #6f9e73; }
.time-off-accent-denied { background: #b9675d; }

.employee-time-off-history-card .time-off-request-main {
    padding: 18px 20px 14px;
}

.employee-time-off-date-block {
    display: grid;
    gap: 4px;
}

.employee-time-off-kicker {
    color: #9a7f22 !important;
    font-size: .64rem !important;
    font-weight: 900;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.employee-time-off-date-block > strong {
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.3;
}

.time-off-range-arrow {
    display: inline-block;
    margin: 0 4px;
    color: #a29b91;
    font-weight: 700;
}

.employee-time-off-requested {
    color: var(--muted) !important;
    font-size: .73rem !important;
}

.employee-time-off-details {
    display: grid;
    gap: 10px;
    margin: 0 20px;
    padding: 14px 0;
    border-top: 1px solid #ece7df;
}

.employee-time-off-detail {
    display: grid;
    gap: 4px;
}

.employee-time-off-detail-label {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.employee-time-off-detail p {
    margin: 0;
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.5;
}

.manager-response-detail {
    padding: 10px 12px;
    border-radius: 11px;
    background: #f4f1eb;
}

.time-off-status {
    gap: 6px;
    white-space: nowrap;
}

.time-off-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .72;
}

.employee-time-off-card-actions,
.manager-approved-time-off-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 11px 20px 15px;
}

.employee-time-off-card-actions [data-delete-time-off-status],
.manager-approved-time-off-actions [data-manager-delete-status] {
    margin-right: auto;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
}

.manager-approved-time-off-actions {
    margin-top: 14px;
    padding: 12px 0 0;
    border-top: 1px solid #ece8e2;
}

.time-off-delete-button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #dfc7c3;
    border-radius: 10px;
    background: #fff;
    color: #9a5148;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.time-off-delete-button:hover {
    background: #fbf3f1;
    border-color: #d8aaa4;
    transform: translateY(-1px);
}

.time-off-delete-button:disabled {
    opacity: .48;
    cursor: default;
    transform: none;
}

.employee-time-off-history-card.is-removing,
.manager-time-off-card.is-removing {
    opacity: 0;
    transform: scale(.985);
}

@media (max-width: 620px) {
    .employee-time-off-history-card .time-off-request-main {
        padding: 16px 16px 12px;
    }

    .employee-time-off-details {
        margin: 0 16px;
    }

    .employee-time-off-card-actions {
        padding: 10px 16px 14px;
    }
}


/* One-time account code action on employee profile */
.employee-profile-no-account {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.employee-profile-no-account form {
    display: inline-flex;
    margin: 0;
}

.employee-profile-code-button {
    min-height: 30px;
    padding: 5px 10px;
    font-size: .68rem;
}


/* Compact one-time-code action immediately after "No account yet" */
.employee-profile-no-account {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
}

.employee-profile-no-account form {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.employee-profile-no-account .employee-profile-code-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    font-size: .66rem !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}


/* Hard reset for the employee-profile account-code control.
   This intentionally does not inherit the app's normal button dimensions. */
.employee-profile-identity p .employee-profile-no-account {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-flow: row nowrap !important;
    gap: 5px !important;
    width: max-content !important;
    max-width: 100% !important;
}

.employee-profile-identity p .employee-profile-no-account > span {
    flex: 0 0 auto !important;
}

.employee-profile-identity p .employee-profile-no-account > form {
    display: inline !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.employee-profile-identity p .employee-profile-code-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border: 1px solid #d8c34a !important;
    border-radius: 7px !important;
    background: #fff9d8 !important;
    box-shadow: none !important;
    color: #75621d !important;
    font: inherit !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    cursor: pointer !important;
}

.employee-profile-identity p .employee-profile-code-button:hover {
    background: #fff3ad !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}


/* Employee profile account row — valid block markup so the form stays inline */
.employee-profile-account-line {
    margin: 5px 0 0 !important;
    color: var(--muted) !important;
    font-weight: 650 !important;
}

.employee-profile-account-line .employee-profile-no-account {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
}

.employee-profile-account-line .employee-profile-no-account > form {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.employee-profile-account-line .employee-profile-code-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border: 1px solid #d8c34a !important;
    border-radius: 7px !important;
    background: #fff9d8 !important;
    color: #75621d !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}


/* Employee profile account controls use the exact Team Schedule visual treatment. */
.employee-profile-account-line {
    margin-top: 4px !important;
}

.employee-profile-team-account {
    margin-top: 0 !important;
}

.employee-profile-team-account .team-account-status {
    margin-top: 0 !important;
}

/* Neutralize the old employee-profile-only button rules so Team Schedule wins. */
.employee-profile-account-line .employee-profile-code-button,
.employee-profile-no-account,
.employee-profile-no-account form {
    all: revert;
}


.availability-updated-by { color: var(--muted); font-size: .7rem; font-weight: 750; }


/* Team Schedule shift actions — polished compact controls */
.manager-hours-editor > summary.small-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    width: auto !important;
    padding: 9px 15px !important;
    border: 1px solid #ded7c9 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fffdf7 0%, #faf6e9 100%) !important;
    color: #4f493f !important;
    box-shadow: 0 3px 10px rgba(42,34,25,.055) !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}

.manager-hours-editor > summary.small-button:hover,
.manager-hours-editor > summary.small-button:focus-visible {
    background: linear-gradient(180deg, #fffbed 0%, #f8f0cf 100%) !important;
    border-color: #dbc86b !important;
    box-shadow: 0 6px 16px rgba(42,34,25,.09) !important;
    transform: translateY(-1px) !important;
}

.manager-hours-editor[open] > summary.small-button {
    background: #fff4bd !important;
    border-color: #d9bf42 !important;
    color: #5f5018 !important;
    box-shadow: 0 0 0 3px rgba(217,191,66,.12) !important;
    transform: none !important;
}

.manager-delete-shift-form {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

.manager-delete-shift-form .small-button.danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 42px !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    flex: 0 0 auto !important;
}


/* Team Schedule action buttons: same size/alignment, different colors only */
.shift-action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.shift-action .manager-hours-editor,
.shift-action .manager-delete-shift-form {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.shift-action .manager-hours-editor > summary.small-button,
.shift-action .manager-delete-shift-form .small-button.danger {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Warm yellow Adjust Hours */
.shift-action .manager-hours-editor > summary.small-button {
    background: #fff0c8 !important;
    border-color: #e9cf91 !important;
    color: #8a5a16 !important;
}

.shift-action .manager-hours-editor > summary.small-button:hover,
.shift-action .manager-hours-editor > summary.small-button:focus-visible {
    background: #ffe7a5 !important;
    border-color: #dfbd69 !important;
    color: #75480f !important;
    transform: none !important;
    box-shadow: none !important;
}

.shift-action .manager-hours-editor[open] > summary.small-button {
    background: #ffdf82 !important;
    border-color: #d9af36 !important;
    color: #65400c !important;
    box-shadow: 0 0 0 3px rgba(217,175,54,.11) !important;
}

/* Red Delete Shift, exact same geometry */
.shift-action .manager-delete-shift-form .small-button.danger {
    background: #fff0ef !important;
    border-color: #efc6c2 !important;
    color: #96342d !important;
}

.shift-action .manager-delete-shift-form .small-button.danger:hover,
.shift-action .manager-delete-shift-form .small-button.danger:focus-visible {
    background: #fde4e1 !important;
    border-color: #e7aaa4 !important;
    color: #872b25 !important;
    transform: none !important;
    box-shadow: none !important;
}


/* Approval dropdown notification counts */
.approval-dropdown-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.approval-dropdown-count {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* Live approval counters */
.count-badge[hidden] {
    display: none !important;
}


/* Availability autosave */
.availability-autosave-actions {
    justify-content: flex-end;
}

.availability-autosave-actions small {
    color: var(--muted);
    font-weight: 650;
}


/* Shift transfer audit log */
.shift-transfer-log-page {
    padding-bottom: 48px;
}

.shift-transfer-log-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.shift-transfer-log-total {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(154, 129, 16, .22);
    border-radius: 999px;
    background: rgba(255, 240, 168, .28);
    font-size: .82rem;
    font-weight: 800;
}

.shift-transfer-log-list {
    display: grid;
    gap: 12px;
}

.shift-transfer-log-card {
    padding: 18px 20px;
    border: 1px solid rgba(35, 31, 20, .09);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 27, 16, .06);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.shift-transfer-log-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(31, 27, 16, .09);
}

.shift-transfer-log-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.shift-transfer-log-route {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.shift-transfer-person {
    display: grid;
    gap: 3px;
}

.shift-transfer-label {
    color: #8b8373;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shift-transfer-person a,
.shift-transfer-person strong {
    color: inherit;
    font-weight: 850;
    text-decoration: none;
}

.shift-transfer-person a:hover {
    text-decoration: underline;
}

.shift-transfer-arrow {
    font-size: 1.25rem;
    font-weight: 900;
    opacity: .55;
}

.shift-transfer-shift {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    text-align: right;
}

.shift-transfer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(35, 31, 20, .07);
    color: #797161;
    font-size: .78rem;
}

.shift-transfer-type {
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 800;
}

.shift-transfer-type.direct {
    background: #eef6ff;
    color: #36658d;
}

.shift-transfer-type.approved {
    background: #fff4d5;
    color: #8a5a16;
}

@media (max-width: 760px) {
    .shift-transfer-log-heading,
    .shift-transfer-log-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .shift-transfer-shift {
        justify-content: flex-start;
        text-align: left;
    }

    .shift-transfer-log-route {
        width: 100%;
    }
}


/* Cleaner manager header: secondary tools live inside dropdowns */
.header-right {
    gap: 10px;
}

.manager-nav-link {
    white-space: nowrap;
}

@media (min-width: 1000px) {
    .approval-link.manager-nav-link,
    .management-menu-button,
    .approval-menu-button {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* Shift day staffing popup */
.shift-card-clickable {
    cursor: pointer;
}

.shift-card-clickable:hover {
    transform: translateY(-2px);
}

.shift-card-clickable:focus-visible {
    outline: 3px solid rgba(255, 217, 0, .45);
    outline-offset: 3px;
}

.shift-day-modal[hidden] {
    display: none !important;
}

.shift-day-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.shift-day-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 28, .46);
    backdrop-filter: blur(5px);
}

.shift-day-modal-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(80vh, 720px);
    overflow: auto;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 80px rgba(34, 28, 20, .28);
    animation: shiftDayModalIn 180ms ease both;
}

.shift-day-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-size: 1.45rem;
    line-height: 1;
}

.shift-day-modal-heading {
    padding-right: 52px;
    margin-bottom: 20px;
}

.shift-day-modal-heading h2 {
    margin: 0;
}

.shift-day-modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.shift-day-group {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #faf9f6;
}

.shift-day-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.shift-day-group-heading strong {
    font-size: 1rem;
}

.shift-day-group-heading span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.shift-day-worker-list {
    display: grid;
    gap: 9px;
}

.shift-day-worker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(35,31,28,.07);
    border-radius: 14px;
    background: #fff;
}

.shift-day-worker-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.shift-day-worker-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shift-day-worker-copy span {
    color: var(--muted);
    font-size: .82rem;
}

.shift-day-empty {
    padding: 20px 12px;
    color: var(--muted);
    text-align: center;
    font-size: .88rem;
}

.shift-day-modal-open {
    overflow: hidden;
}

@keyframes shiftDayModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
    .shift-day-modal-columns {
        grid-template-columns: 1fr;
    }
}


/* Smoother shift-card interaction */
.shift-card,
.shift-card-clickable {
    transition:
        transform 320ms cubic-bezier(.22, .61, .36, 1),
        box-shadow 320ms cubic-bezier(.22, .61, .36, 1),
        border-color 260ms ease !important;
    will-change: transform;
}

.shift-card-clickable:hover {
    transform: translateY(-3px) scale(1.003) !important;
    box-shadow: 0 15px 34px rgba(42, 34, 25, .10) !important;
}

.shift-card-clickable:active {
    transform: translateY(-1px) scale(.998) !important;
    transition-duration: 140ms !important;
}

@media (prefers-reduced-motion: reduce) {
    .shift-card,
    .shift-card-clickable {
        transition: none !important;
        transform: none !important;
    }
}


/* Manager Schedule Change */
.schedule-change-heading {
    margin-bottom: 22px;
}

.schedule-change-date-card {
    margin-bottom: 24px;
}

.schedule-change-date-field-wrap {
    grid-template-columns: minmax(260px, 360px) !important;
}

.schedule-change-groups {
    display: grid;
    gap: 22px;
}

.schedule-change-section {
    padding: 20px;
    border: 1px solid rgba(35,31,28,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 30px rgba(42,34,25,.06);
}

.schedule-change-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.schedule-change-section-heading h2 {
    margin: 0;
}

.schedule-change-section-heading > span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

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

.schedule-change-row {
    display: grid;
    grid-template-columns: minmax(105px, .7fr) minmax(180px, 1.4fr) minmax(145px, 1fr) minmax(145px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.schedule-change-row:hover {
    border-color: rgba(209,174,0,.34);
    box-shadow: 0 10px 24px rgba(42,34,25,.07);
}

.schedule-change-position {
    min-height: 46px;
    display: flex;
    align-items: center;
}

.schedule-change-employee-field,
.schedule-change-time-field {
    display: grid;
    gap: 7px;
}

.schedule-change-employee-select {
    width: 100%;
    height: 46px;
    padding: 0 38px 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
}

.schedule-change-employee-select:focus {
    border-color: #d1ae00;
    box-shadow: 0 0 0 4px rgba(255,217,0,.14);
}

.schedule-change-action {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.schedule-change-status {
    max-width: 180px;
    color: var(--muted);
    font-size: .77rem;
    font-weight: 700;
    text-align: right;
}

.schedule-change-status.success {
    color: #2d7237;
}

.schedule-change-status.error {
    color: #9f2d27;
}

@media (max-width: 950px) {
    .schedule-change-row {
        grid-template-columns: 1fr 1fr;
    }

    .schedule-change-position,
    .schedule-change-action {
        grid-column: 1 / -1;
    }

    .schedule-change-action {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .schedule-change-row {
        grid-template-columns: 1fr;
    }

    .schedule-change-position,
    .schedule-change-action {
        grid-column: auto;
    }
}


/* Schedule Change dropdown layering + modern employee picker */
.schedule-change-section,
.schedule-change-list {
    overflow: visible !important;
}

.schedule-change-row {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.schedule-change-row:has(.quarter-time-picker.open),
.schedule-change-row:has(.schedule-change-employee-picker.open) {
    z-index: 7000 !important;
}

.schedule-change-employee-field,
.schedule-change-time-field {
    position: relative;
    min-width: 0;
    overflow: visible !important;
}

.schedule-change-employee-picker {
    position: relative;
    z-index: 2;
    width: 100%;
}

.schedule-change-employee-picker.open {
    z-index: 7600 !important;
}

.schedule-change-employee-button {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.schedule-change-employee-button:hover {
    border-color: rgba(209,174,0,.48);
    transform: translateY(-1px);
}

.schedule-change-employee-picker.open .schedule-change-employee-button,
.schedule-change-employee-button:focus-visible {
    border-color: #d1ae00;
    box-shadow: 0 0 0 4px rgba(255,217,0,.14);
    outline: none;
}

.schedule-change-employee-button .modern-chevron {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.schedule-change-employee-picker.open .schedule-change-employee-button .modern-chevron {
    transform: rotate(225deg);
}

.schedule-change-employee-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 7800 !important;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid rgba(35,31,28,.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(34,28,20,.20);
}

.schedule-change-employee-picker.open .schedule-change-employee-menu {
    display: grid;
    gap: 3px;
    animation: scheduleChangeMenuIn 150ms ease both;
}

.schedule-change-employee-option {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.schedule-change-employee-option:hover {
    background: rgba(255,217,0,.12);
}

.schedule-change-employee-option.selected {
    background: rgba(255,217,0,.22);
    font-weight: 800;
}

/* Time pickers must float above every Schedule Change card, not inside its layer. */
.schedule-change-row .quarter-time-picker {
    position: relative;
    z-index: 2;
}

.schedule-change-row .quarter-time-picker.open {
    z-index: 8000 !important;
}

.schedule-change-row .quarter-time-menu {
    z-index: 8200 !important;
    box-shadow: 0 20px 48px rgba(34,28,20,.20) !important;
}

.schedule-change-row:has(.quarter-time-picker.open) .quarter-time-menu {
    z-index: 8200 !important;
}

@keyframes scheduleChangeMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Login logo: shadow-only emphasis. Keep the original logo colors untouched. */
.login-logo-frame::before {
    display: none !important;
    content: none !important;
}
.login-logo-ring { display: none !important; }
.login-logo-frame { background: transparent !important; box-shadow: none !important; }
.login-logo-frame img {
    filter: drop-shadow(0 12px 14px rgba(73, 56, 15, .22)) drop-shadow(0 28px 34px rgba(73, 56, 15, .15)) !important;
    transition: filter 320ms ease, transform 320ms cubic-bezier(.22, .61, .36, 1);
}


/* Schedule Change: one bulk save action */
.schedule-change-save-bar {
    position: sticky;
    bottom: 18px;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(209,174,0,.22);
    border-radius: 17px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 42px rgba(42,34,25,.14);
    backdrop-filter: blur(12px);
}

.schedule-change-save-copy {
    display: grid;
    gap: 3px;
}

.schedule-change-save-copy strong {
    font-size: .93rem;
}

.schedule-change-save-copy span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
}

.schedule-change-save-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.schedule-change-save-all {
    min-width: 138px;
}

.schedule-change-row.has-unsaved-changes {
    border-color: rgba(209,174,0,.48);
    background: rgba(255,250,226,.42);
}

.schedule-change-row-state {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
    text-align: right;
}

.schedule-change-row-state.unsaved {
    color: #9a8110;
}

.schedule-change-row-state.saved,
.schedule-change-page-status.success {
    color: #2d7237;
}

.schedule-change-row-state.error,
.schedule-change-page-status.error {
    color: #9f2d27;
}

.schedule-change-page-status {
    max-width: 320px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 700px) {
    .schedule-change-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-change-save-actions {
        justify-content: space-between;
    }

    .schedule-change-save-all {
        flex: 0 0 auto;
    }
}


/* Schedule Change employee picker now reuses the Team Schedule picker UI */
.schedule-change-team-person-picker {
    width: 100%;
    min-width: 0;
    max-width: none;
    z-index: 2;
}

.schedule-change-team-person-picker .team-person-picker-button {
    height: 46px;
    min-height: 46px;
    border-radius: 12px;
}

.schedule-change-team-person-panel {
    width: max(100%, 360px);
    max-width: min(420px, calc(100vw - 32px));
    z-index: 8600 !important;
}

.schedule-change-row:has(.schedule-change-team-person-panel.show) {
    z-index: 8400 !important;
}

.schedule-change-row:has(.schedule-change-team-person-panel.show)
.schedule-change-team-person-picker {
    z-index: 8500 !important;
}

.schedule-change-row:has(.schedule-change-team-person-panel.show)
.schedule-change-team-person-panel {
    z-index: 8600 !important;
}

.schedule-change-team-person-panel .team-person-search {
    background: #fff !important;
}

.schedule-change-team-person-panel .team-person-list {
    max-height: 310px;
}

/* Hidden selected checkmarks must not reserve space. */
.schedule-change-team-person-panel .team-person-option-check[hidden] {
    display: none !important;
}

@media (max-width: 620px) {
    .schedule-change-team-person-panel {
        width: 100%;
        max-width: 100%;
    }
}


/* Custom date pickers: remove the unwanted hover background wash.
   Selected dates, range states, and today indicators keep their intentional styling. */
.custom-date-picker button:hover,
.custom-date-calendar button:hover,
.modern-date-picker button:hover,
.modern-calendar button:hover,
.date-picker-calendar button:hover,
.calendar-picker button:hover,
[data-date-picker] button:hover,
[data-calendar] button:hover,
.custom-date-day:hover,
.modern-calendar-day:hover,
.calendar-day:hover,
.date-picker-day:hover {
    background-color: transparent !important;
    background-image: none !important;
}

/* Keep intentionally selected/range date states visible even while hovered. */
.custom-date-picker button.selected:hover,
.custom-date-picker button.active:hover,
.custom-date-picker button[aria-selected="true"]:hover,
.custom-date-calendar button.selected:hover,
.custom-date-calendar button.active:hover,
.custom-date-calendar button[aria-selected="true"]:hover,
.modern-date-picker button.selected:hover,
.modern-date-picker button.active:hover,
.modern-date-picker button[aria-selected="true"]:hover,
.modern-calendar button.selected:hover,
.modern-calendar button.active:hover,
.modern-calendar button[aria-selected="true"]:hover,
[data-date-picker] button.selected:hover,
[data-date-picker] button.active:hover,
[data-date-picker] button[aria-selected="true"]:hover,
[data-calendar] button.selected:hover,
[data-calendar] button.active:hover,
[data-calendar] button[aria-selected="true"]:hover {
    background-color: inherit !important;
}


/* Shift Transfer Log date filter */
.shift-transfer-log-heading-actions {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.shift-log-date-filter {
    width: 210px;
    margin: 0;
}

.shift-log-date-filter > span {
    display: block;
    margin-bottom: 6px;
}

.shift-log-date-filter .modern-date-picker {
    width: 100%;
}

.shift-log-date-filter .modern-date-button {
    width: 100%;
}

@media (max-width: 760px) {
    .shift-transfer-log-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .shift-transfer-log-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .shift-log-date-filter {
        width: 100%;
    }
}


/* Navbar CHA logo: soft playful bounce on hover */
.dashboard-header .brand-logo,
.dashboard-header .header-logo,
.dashboard-header .nav-logo,
.dashboard-header .dashboard-logo,
.dashboard-header .header-brand img,
.dashboard-header .brand img {
    transform-origin: 50% 85%;
    will-change: transform;
}

.dashboard-header .brand-logo:hover,
.dashboard-header .header-logo:hover,
.dashboard-header .nav-logo:hover,
.dashboard-header .dashboard-logo:hover,
.dashboard-header .header-brand:hover img,
.dashboard-header .brand:hover img {
    animation: chaNavLogoBounce 560ms cubic-bezier(.22, .61, .36, 1);
}

@keyframes chaNavLogoBounce {
    0%   { transform: translateY(0) scale(1); }
    24%  { transform: translateY(-5px) scale(1.035); }
    46%  { transform: translateY(1px) scale(.99); }
    66%  { transform: translateY(-2px) scale(1.015); }
    84%  { transform: translateY(.5px) scale(.998); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-header .brand-logo:hover,
    .dashboard-header .header-logo:hover,
    .dashboard-header .nav-logo:hover,
    .dashboard-header .dashboard-logo:hover,
    .dashboard-header .header-brand:hover img,
    .dashboard-header .brand:hover img {
        animation: none !important;
    }
}


/* FIX: actual navbar logo selector */
.dashboard-header .dashboard-brand > a {
    display: inline-block;
}

.dashboard-header .dashboard-brand > a > img {
    transform-origin: 50% 85%;
    will-change: transform;
}

.dashboard-header .dashboard-brand > a:hover > img {
    animation: chaNavbarLogoBounce 620ms cubic-bezier(.22, .61, .36, 1) both !important;
}

@keyframes chaNavbarLogoBounce {
    0%   { transform: translateY(0) scale(1) rotate(0deg); }
    22%  { transform: translateY(-6px) scale(1.045) rotate(-1deg); }
    43%  { transform: translateY(2px) scale(.99) rotate(.6deg); }
    62%  { transform: translateY(-3px) scale(1.025) rotate(-.4deg); }
    80%  { transform: translateY(1px) scale(1.005) rotate(.2deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-header .dashboard-brand > a:hover > img {
        animation: none !important;
        transform: none !important;
    }
}


/* Dropdown menus: keep scrolling, hide the glitchy visible scrollbar rails.
   Applies to employee, time, position, profile/management, approval and date menus. */
.team-person-list,
.schedule-change-team-person-panel .team-person-list,
.quarter-time-menu,
.position-picker-menu,
.profile-dropdown,
.management-dropdown,
.approvals-dropdown,
.modern-date-popover,
.modern-date-grid,
[data-team-person-list],
[data-schedule-employee-list],
[data-quarter-time-menu],
[data-position-picker-menu],
[data-profile-dropdown],
[data-management-dropdown],
[data-approvals-dropdown],
[data-date-picker] [class*="popover"],
[class*="picker-menu"],
[class*="dropdown-menu"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.team-person-list::-webkit-scrollbar,
.schedule-change-team-person-panel .team-person-list::-webkit-scrollbar,
.quarter-time-menu::-webkit-scrollbar,
.position-picker-menu::-webkit-scrollbar,
.profile-dropdown::-webkit-scrollbar,
.management-dropdown::-webkit-scrollbar,
.approvals-dropdown::-webkit-scrollbar,
.modern-date-popover::-webkit-scrollbar,
.modern-date-grid::-webkit-scrollbar,
[data-team-person-list]::-webkit-scrollbar,
[data-schedule-employee-list]::-webkit-scrollbar,
[data-quarter-time-menu]::-webkit-scrollbar,
[data-position-picker-menu]::-webkit-scrollbar,
[data-profile-dropdown]::-webkit-scrollbar,
[data-management-dropdown]::-webkit-scrollbar,
[data-approvals-dropdown]::-webkit-scrollbar,
[data-date-picker] [class*="popover"]::-webkit-scrollbar,
[class*="picker-menu"]::-webkit-scrollbar,
[class*="dropdown-menu"]::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}


/* Team Schedule time pickers: use the same modern V chevron as Position. */
.team-schedule-page .quarter-time-toggle {
    display: grid;
    place-items: center;
    font-size: 0;
}

.team-schedule-page .quarter-time-toggle .modern-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transform-origin: center;
    transition: transform var(--motion-fast) var(--motion-ease);
}

.team-schedule-page .quarter-time-picker.open .quarter-time-toggle .modern-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}


/* Schedule Change: fade/slide in freshly loaded date content */
.schedule-change-groups.schedule-change-date-fade-in {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 320ms cubic-bezier(.22, .61, .36, 1),
        transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.schedule-change-groups.schedule-change-date-fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .schedule-change-groups.schedule-change-date-fade-in,
    .schedule-change-groups.schedule-change-date-fade-in.show {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   Manager employee time cards
   ========================================================= */

.employee-profile-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.time-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.time-card-week-nav {
    margin-top: 10px;
}

.employee-time-card-page .time-card-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.employee-time-card-page .time-card-hours-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.employee-time-card-page .time-card-shift-card {
    position: relative;
    grid-template-columns:
        minmax(110px, .9fr)
        minmax(180px, 1.35fr)
        minmax(105px, .85fr)
        minmax(145px, 1fr)
        minmax(290px, 1.8fr)
        minmax(145px, .9fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    overflow: visible;
}

.employee-time-card-page .time-card-break,
.employee-time-card-page .time-card-break-editor {
    min-width: 0;
}

.employee-time-card-page .time-card-break[hidden],
.employee-time-card-page .time-card-break-editor[hidden] {
    display: none !important;
}

.employee-time-card-page .time-card-break {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.employee-time-card-page .time-card-break small {
    color: var(--muted);
    font-size: .76rem;
}

.employee-time-card-page .time-card-break-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(132px, 1fr));
    align-items: end;
    gap: 10px;
    overflow: visible;
}

.employee-time-card-page .time-card-break-editor .modern-time-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.employee-time-card-page .time-card-break-editor .quarter-time-picker {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: stretch;
}

.employee-time-card-page .time-card-break-editor .modern-time-input {
    position: static !important;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px !important;
    border-radius: 12px 0 0 12px;
    text-align: center !important;
    font-size: .88rem;
    white-space: nowrap;
}

.employee-time-card-page .time-card-break-editor .quarter-time-toggle {
    position: static !important;
    grid-column: 2;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd6cd;
    border-left: 1px solid #e5ded6;
    border-radius: 0 12px 12px 0;
    background: white;
    color: #756d65;
    font-size: 0;
}

.employee-time-card-page .time-card-break-editor .quarter-time-toggle:hover {
    background: #fff9da;
}

.employee-time-card-page .time-card-break-editor .quarter-time-toggle .modern-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transform-origin: center;
    transition: transform var(--motion-fast) var(--motion-ease);
}

.employee-time-card-page .time-card-break-editor .quarter-time-picker.open .modern-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.employee-time-card-page .time-card-break-editor .quarter-time-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10030 !important;
    width: 100%;
    min-width: 170px;
    max-height: 230px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #ddd6cd;
    border-radius: 12px;
    background: white;
    box-shadow: 0 18px 44px rgba(42,34,25,.22);
}

.employee-time-card-page .time-card-shift-card.time-card-picker-active {
    z-index: 10000;
}

.employee-time-card-page .time-card-break-editor .quarter-time-picker.open {
    z-index: 10020;
}

.employee-time-card-page .time-card-break-actions {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center;
    gap: 6px;
    width: 100%;
}

.employee-time-card-page .time-card-action-label {
    visibility: hidden;
    height: .9rem;
    line-height: .9rem;
}

.employee-time-card-page .time-card-break-actions .small-button {
    margin: 0;
    padding: 10px 14px;
    font-size: .8rem;
    white-space: nowrap;
}

.employee-time-card-page .time-card-break-status {
    width: 100%;
    min-height: 0;
    color: var(--muted);
    font-size: .74rem;
    text-align: center;
}

.employee-time-card-page .time-card-break-status.saved {
    color: #2d7237;
}

.employee-time-card-page .time-card-break-status.error {
    color: #a32924;
}

[data-time-card-content] {
    transition:
        opacity 220ms var(--motion-ease),
        transform 220ms var(--motion-ease);
}

[data-time-card-content].time-card-content-leave {
    opacity: 0;
    transform: translateX(-8px);
}

[data-time-card-content].time-card-content-enter {
    opacity: 0;
    transform: translateX(8px);
}

.week-nav-button.disabled {
    opacity: .38;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .employee-time-card-page .time-card-shift-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .employee-profile-actions,
    .employee-time-card-page .time-card-summary-grid {
        grid-template-columns: 1fr;
    }

    .time-card-heading {
        flex-direction: column;
    }

    .employee-time-card-page .time-card-shift-card {
        grid-template-columns: 1fr;
    }

    .employee-time-card-page .time-card-break-editor {
        grid-template-columns: repeat(2, minmax(132px, 1fr));
    }
}

@media (max-width: 520px) {
    .employee-time-card-page .time-card-break-editor {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-time-card-content],
    [data-time-card-content].time-card-content-leave,
    [data-time-card-content].time-card-content-enter {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   Time Card break picker hard reset
   Keeps Start/Return controls separated and prevents global
   quarter-time rules from pushing one control into the next.
   ========================================================= */

.employee-time-card-page .time-card-break-editor {
    display: flex !important;
    align-items: flex-end !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.employee-time-card-page .time-card-break-editor > .modern-time-field {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.employee-time-card-page .time-card-break-editor > .modern-time-field > .quarter-time-picker {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    transform: none !important;
    box-shadow: none !important;
}

.employee-time-card-page .time-card-break-editor > .modern-time-field > .quarter-time-picker:hover,
.employee-time-card-page .time-card-break-editor > .modern-time-field > .quarter-time-picker:focus-within,
.employee-time-card-page .time-card-break-editor > .modern-time-field > .quarter-time-picker.open {
    transform: none !important;
}

.employee-time-card-page .time-card-break-editor .modern-time-input {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 12px 0 0 12px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.employee-time-card-page .time-card-break-editor .quarter-time-toggle {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    border-radius: 0 12px 12px 0 !important;
    box-sizing: border-box !important;
}

.employee-time-card-page .time-card-break-editor .quarter-time-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Align Record Break with the actual picker boxes. */
.employee-time-card-page .time-card-break-actions {
    justify-content: flex-start !important;
    align-items: center !important;
}

.employee-time-card-page .time-card-action-label {
    display: block !important;
    visibility: hidden !important;
    height: 18px !important;
    line-height: 18px !important;
}

.employee-time-card-page .time-card-break-actions .small-button {
    align-self: center !important;
}


/* =========================================================
   Mobile-friendly top navigation
   ========================================================= */

.mobile-nav-toggle {
    display: none;
}

@media (max-width: 760px) {
    .dashboard-header {
        min-height: 72px;
        padding: 10px 14px;
        gap: 10px;
        z-index: 3000;
    }

    .dashboard-brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    .dashboard-brand img {
        width: 74px;
    }

    .brand-happiness-message {
        display: none;
    }

    .mobile-nav-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        padding: 0;
        border: 1px solid #e2dbd1;
        border-radius: 12px;
        background: white;
        box-shadow: 0 5px 14px rgba(42,34,25,.07);
        z-index: 3010;
    }

    .mobile-nav-toggle:hover {
        background: #fff9da;
    }

    .mobile-nav-toggle span {
        position: absolute;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: var(--ink);
        transition:
            transform 180ms var(--motion-ease),
            opacity 180ms ease,
            top 180ms var(--motion-ease);
    }

    .mobile-nav-toggle span:nth-child(1) { top: 13px; }
    .mobile-nav-toggle span:nth-child(2) { top: 20px; }
    .mobile-nav-toggle span:nth-child(3) { top: 27px; }

    .mobile-nav-toggle.open span:nth-child(1) {
        top: 20px;
        transform: rotate(45deg);
    }

    .mobile-nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle.open span:nth-child(3) {
        top: 20px;
        transform: rotate(-45deg);
    }

    .dashboard-header .header-right {
        position: absolute;
        top: calc(100% + 8px);
        left: 14px;
        right: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border: 1px solid #e4ddd5;
        border-radius: 18px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 18px 50px rgba(42,34,25,.18);
        backdrop-filter: blur(16px);
        z-index: 3005;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .dashboard-header .header-right::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .dashboard-header .header-right.mobile-nav-open {
        display: flex;
        animation: mobileNavDrop 180ms var(--motion-ease) both;
    }

    .dashboard-header .header-right > .manager-nav-link,
    .dashboard-header .header-right > .logout-link,
    .dashboard-header .header-right > .management-menu,
    .dashboard-header .header-right > .approval-menu,
    .dashboard-header .header-right > .profile-menu {
        width: 100%;
    }

    .dashboard-header .manager-nav-link,
    .dashboard-header .logout-link,
    .dashboard-header .management-menu-button,
    .dashboard-header .approval-menu-button,
    .dashboard-header .profile-menu-button {
        width: 100%;
        min-height: 44px;
        justify-content: space-between;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        font-size: .9rem;
    }

    .dashboard-header .profile-menu-button {
        display: grid;
        grid-template-columns: auto 1fr auto;
        text-align: left;
    }

    .dashboard-header .profile-name {
        display: inline !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-header .management-menu,
    .dashboard-header .approval-menu,
    .dashboard-header .profile-menu {
        position: relative;
    }

    .dashboard-header .management-menu-panel,
    .dashboard-header .approval-menu-panel,
    .dashboard-header .profile-dropdown {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 6px;
        border-radius: 14px;
        box-shadow: none;
        border: 1px solid var(--line);
        transform: none !important;
    }

    .dashboard-header .management-menu-panel,
    .dashboard-header .approval-menu-panel {
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .dashboard-header .profile-dropdown {
        right: auto !important;
        top: auto !important;
    }

    .dashboard-header .management-menu-item {
        padding: 12px;
    }

    .dashboard-header .management-menu-copy small {
        white-space: normal;
    }

    .dashboard-header .dropdown-info {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 14px;
    }

    .dashboard-header .dropdown-header {
        padding: 14px;
    }

    .dashboard-header .profile-dropdown-actions {
        padding: 10px;
    }

    @keyframes mobileNavDrop {
        from {
            opacity: 0;
            transform: translateY(-8px) scale(.99);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

@media (max-width: 420px) {
    .dashboard-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard-header .header-right {
        left: 10px;
        right: 10px;
    }

    .dashboard-brand img {
        width: 68px;
    }
}