:root {
    --employee-bg: #fbf8f3;
    --employee-card: #fffefd;
    --employee-ink: #302b2a;
    --employee-muted: #766d69;
    --employee-line: #eee5de;
    --employee-coral: #e86f51;
    --employee-coral-dark: #c85339;
    --employee-peach: #fff0e9;
    --employee-green: #2c8a61;
    --employee-blue: #487cba;
    --employee-purple: #775aa2;
    --employee-shadow: 0 12px 35px rgba(74, 55, 45, .055);
}
.employee-shell-active { background: var(--employee-bg); color: var(--employee-ink); }
.employee-shell-active .ambient-bg { opacity: .25; }
.employee-app-shell { min-height: 100vh; }
.employee-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 220; display: flex; flex-direction: column;
    width: 252px; padding: 25px 18px 20px; overflow-y: auto; background: rgba(255, 254, 252, .97);
    border-right: 1px solid var(--employee-line); box-shadow: 5px 0 24px rgba(68, 50, 43, .025);
}
.employee-brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 29px; color: var(--employee-ink); }
.employee-brand:hover { color: var(--employee-ink); }
.employee-brand-mark {
    display: grid; width: 43px; height: 43px; place-items: center; flex: 0 0 43px; border-radius: 13px;
    background: var(--employee-coral); color: #fff; font: 800 .82rem Manrope, sans-serif;
    box-shadow: 0 8px 19px rgba(232, 111, 81, .22);
}
.employee-brand > span:last-child { display: grid; min-width: 0; }
.employee-brand strong { font: 800 .93rem Manrope, sans-serif; letter-spacing: -.02em; }
.employee-brand small { color: #9a8378; font-size: .57rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.employee-side-nav { display: grid; gap: 4px; }
.employee-side-nav > a {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
    min-height: 46px; padding: 7px 10px; border-radius: 12px; color: #655c58; cursor: pointer;
    font-size: .82rem; font-weight: 700; list-style: none;
}
.employee-side-nav > a::before {
    content: ""; position: absolute; left: -18px; width: 3px; height: 24px; border-radius: 0 3px 3px 0;
    background: transparent;
}
.employee-side-nav > a:hover { background: #fff8f4; color: var(--employee-coral-dark); }
.employee-side-nav > a.active { background: var(--employee-peach); color: var(--employee-coral-dark); }
.employee-side-nav > a.active::before { background: var(--employee-coral); }
.employee-side-nav i {
    display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid transparent; border-radius: 9px;
    color: #91827b; font-size: .96rem; font-style: normal;
}
.employee-side-nav .active i { color: var(--employee-coral); }
.employee-shell-content { min-width: 0; margin-left: 252px; overflow-x: clip; }
.employee-topbar {
    position: sticky; top: 0; z-index: 180; display: flex; align-items: center; gap: 15px; min-height: 77px;
    padding: 13px clamp(18px, 3vw, 42px); border-bottom: 1px solid rgba(232, 222, 215, .8);
    background: rgba(251, 248, 243, .9); backdrop-filter: blur(18px);
}
.employee-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--employee-line); border-radius: 12px; background: #fff; }
.employee-menu-button span { display: block; width: 18px; height: 2px; margin: 3px auto; border-radius: 2px; background: #625954; }
.employee-global-search {
    display: flex; align-items: center; gap: 10px; width: min(520px, 48vw); min-width: 0; height: 45px; padding: 0 15px;
    border: 1px solid #eee5df; border-radius: 14px; background: rgba(255, 255, 255, .8);
}
.employee-global-search:focus-within { border-color: #e5a693; box-shadow: 0 0 0 3px rgba(232, 111, 81, .11); }
.employee-global-search i { color: #9c8f89; font-style: normal; font-size: 1.15rem; }
.employee-global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--employee-ink); font-size: .78rem; }
.employee-global-search input::placeholder { color: #a29893; }
.employee-top-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.employee-top-actions a {
    position: relative; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid transparent;
    border-radius: 12px; color: #706762; font-size: 1.1rem;
}
.employee-top-actions a:hover { border-color: var(--employee-line); background: #fff; color: var(--employee-coral-dark); }
.employee-top-actions b { position: absolute; right: -1px; top: 0; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--employee-coral); color: #fff; font-size: .54rem; line-height: 17px; text-align: center; }
.employee-profile-button {
    display: flex; align-items: center; gap: 9px; max-width: 270px; padding: 4px 7px 4px 4px; border: 0; border-radius: 14px;
    background: transparent; color: var(--employee-ink); text-align: left;
}
.employee-profile-button:hover { background: rgba(255, 255, 255, .75); }
.employee-profile-menu { flex: 0 0 auto; margin-left: auto; }
.employee-profile-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: #f7c3b1; color: #9e422e; font-weight: 800; }
.employee-profile-button > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.25; }
.employee-profile-button strong,
.employee-profile-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-profile-button strong { font-size: .75rem; }
.employee-profile-button small { max-width: 170px; color: var(--employee-muted); font-size: .63rem; }
.employee-profile-dropdown { min-width: 210px; }
.employee-profile-dropdown form { margin: 0; }
.employee-profile-dropdown button { width: 100%; border: 0; }
.employee-main { min-width: 0; min-height: calc(100vh - 112px); padding: 31px clamp(18px, 3.4vw, 52px) 55px; overflow-x: clip; }
.employee-footer { display: flex; justify-content: space-between; padding: 16px clamp(18px, 3.4vw, 52px) 25px; color: #9b8e87; font-size: .68rem; }
.employee-sidebar-scrim { display: none; }

.employee-dashboard { width: min(1180px, 100%); margin: 0 auto; }
.employee-greeting { margin: 0 0 20px; }
.employee-view-title { display: inline-flex; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: var(--employee-peach); color: var(--employee-coral-dark); font-size: .61rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.employee-greeting p { margin: 0; color: var(--employee-muted); font-size: .86rem; font-weight: 650; }
.employee-greeting h1 { margin: 2px 0 5px; color: var(--employee-ink); font: 800 clamp(1.65rem, 3vw, 2.35rem) Manrope, sans-serif; letter-spacing: -.045em; }
.employee-greeting time { color: #93857e; font-size: .72rem; font-weight: 600; }
.employee-local-context { display: flex; flex-wrap: wrap; gap: 5px 12px; color: #93857e; font-size: .72rem; font-weight: 600; }
.employee-local-context span::before { content: "•"; margin-right: 12px; color: #c3b6af; }
.employee-eyebrow { display: block; margin-bottom: 4px; color: #9a7467; font-size: .59rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.employee-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.employee-card-heading h2 { margin: 0; color: var(--employee-ink); font: 750 1.03rem Manrope, sans-serif; letter-spacing: -.025em; }
.employee-attendance-card,
.employee-panel { border: 1px solid var(--employee-line); border-radius: 18px; background: var(--employee-card); box-shadow: var(--employee-shadow); }
.employee-primary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.employee-attendance-card { padding: clamp(20px, 2.5vw, 29px); }
.employee-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #eaf7f0; color: #237650; font-size: .59rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.employee-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--employee-green); box-shadow: 0 0 0 4px rgba(44, 138, 97, .1); animation: employee-live 1.8s ease-in-out infinite; }
@keyframes employee-live { 50% { opacity: .4; } }
.employee-attendance-main { display: grid; grid-template-columns:minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-top: 24px; }
.employee-attendance-state { display: flex; align-items: center; gap: 12px; }
.employee-attendance-state h3,
.employee-attendance-error h3 { margin: 0 0 5px; font: 760 1.08rem Manrope, sans-serif; letter-spacing: -.02em; }
.employee-attendance-state p,
.employee-attendance-error p { margin: 0; color: var(--employee-muted); font-size: .75rem; }
.employee-state-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; font-weight: 900; }
.employee-state-icon.success { background: #e8f5ed; color: var(--employee-green); }
.employee-state-icon.idle { border: 1px solid #e2d8d2; background: #fbf8f5; color: #a29690; }
.employee-state-icon.error { background: #fff0ed; color: #bf4f3c; }
.employee-work-duration { display: flex; align-items: baseline; gap: 8px; margin: 17px 0 0 50px; }
.employee-work-duration span,
.employee-today-time span { color: var(--employee-muted); font-size: .67rem; }
.employee-work-duration strong { font: 800 1.35rem Manrope, sans-serif; }
.employee-today-time { display: grid; min-width: 130px; padding-left: 22px; border-left: 1px solid var(--employee-line); }
.employee-today-time strong { margin-top: 3px; font: 800 1.15rem Manrope, sans-serif; }
.employee-attendance-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--employee-line); }
.employee-attendance-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.employee-capture-message { margin: 0; color: #8b7e77; font-size: .66rem; }
.employee-capture-message.warning { margin: 10px 0; padding: 10px 12px; border-radius: 11px; background: #fff5df; color: #805b19; }
.employee-button { display: inline-flex; min-width: 126px; min-height: 43px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px; font-size: .75rem; font-weight: 800; }
.employee-button.primary { background: var(--employee-coral); color: #fff; box-shadow: 0 8px 19px rgba(232, 111, 81, .18); }
.employee-button.primary:hover { background: var(--employee-coral-dark); color: #fff; transform: translateY(-1px); }
.employee-button.secondary { border-color: var(--employee-line); background: #fff; color: var(--employee-ink); }
.employee-button:disabled { cursor: wait; opacity: .65; transform: none; }
.employee-location-picker { display: grid; gap: 5px; max-width: 430px; margin-bottom: 14px; }
.employee-location-picker label,
.employee-verification-field label { color: #665d59; font-size: .66rem; font-weight: 800; }
.employee-location-picker select,
.employee-verification-field input,
.employee-verification-field textarea { min-height: 41px; padding: 8px 10px; border: 1px solid var(--employee-line); border-radius: 10px; background: #fff; color: var(--employee-ink); font-size: .74rem; }
.employee-location-picker small { color: var(--employee-muted); font-size: .62rem; }
.employee-detected-location { display: grid; gap: 3px; max-width: 430px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid rgba(38, 167, 111, .28); border-radius: 12px; background: rgba(225, 246, 236, .78); }
.employee-detected-location span, .employee-detected-location small { color: var(--employee-muted); font-size: .62rem; }
.employee-detected-location strong { font-size: .85rem; }
.employee-verification-field { display: grid; gap: 5px; margin: 10px 0; }
.employee-verification-field textarea { min-height: 78px; resize: vertical; }
.employee-attendance-error { display: grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 22px; }
.employee-attendance-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 12px; margin: 21px 0 17px; }
.employee-attendance-facts > div { padding: 13px; border-radius: 12px; background: #faf7f4; }
.employee-attendance-facts dt { color: var(--employee-muted); font-size: .62rem; font-weight: 700; }
.employee-attendance-facts dd { margin: 4px 0 0; font: 800 .95rem Manrope, sans-serif; }
.employee-attendance-facts.active-workday { margin-bottom: 0; }
.employee-attendance-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 13px 15px; border: 1px solid #f0d5c8; border-radius: 13px; background: #fff6ef; }
.employee-attendance-alert div { display: grid; gap: 2px; }
.employee-attendance-alert strong { font-size: .73rem; }
.employee-attendance-alert span { color: var(--employee-muted); font-size: .65rem; }
.employee-attendance-alert > a { flex: 0 0 auto; color: var(--employee-coral-dark); font-size: .68rem; font-weight: 850; }
.employee-text-link { display: inline-flex; gap: 6px; margin-top: 17px; color: var(--employee-coral-dark); font-size: .7rem; font-weight: 800; }
.employee-text-link:hover { color: #963c2a; }

.employee-content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); grid-template-rows: auto auto; gap: 16px; margin-top: 17px; align-items: stretch; }
.employee-content-grid > :only-child { grid-column: 1 / -1; }
.employee-panel { min-width: 0; padding: 21px; }
.recent-requests-panel { grid-row: 1 / span 2; }
.attention-panel { margin-top: 17px; }
.employee-count-badge { display: grid; min-width: 27px; height: 27px; place-items: center; padding: 0 7px; border-radius: 999px; background: var(--employee-peach); color: var(--employee-coral-dark); font-size: .65rem; font-weight: 850; }
.employee-attention-list { display: grid; gap: 4px; margin-top: 14px; }
.employee-attention-list a { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 3px; border-bottom: 1px solid var(--employee-line); color: var(--employee-ink); }
.employee-attention-list a:last-child { border-bottom: 0; }
.employee-attention-list a:hover { color: var(--employee-coral-dark); }
.employee-attention-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--employee-coral); }
.employee-attention-list i.request { background: var(--employee-purple); }
.employee-attention-list i.learning { background: var(--employee-blue); }
.employee-attention-list span { display: grid; gap: 2px; }
.employee-attention-list strong { font-size: .78rem; }
.employee-attention-list small { color: var(--employee-muted); font-size: .69rem; }
.employee-attention-list b { color: #ab9d96; font-size: .8rem; }
.employee-empty-state { display: flex; align-items: center; gap: 12px; margin-top: 17px; padding: 17px; border-radius: 13px; background: #f2f8f4; }
.employee-empty-state > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: #e2f2e8; color: var(--employee-green); font-weight: 900; }
.employee-empty-state strong { font-size: .73rem; }
.employee-empty-state p { margin: 2px 0 0; color: var(--employee-muted); font-size: .64rem; }
.employee-empty-state.compact { background: #faf7f4; }
.employee-upcoming-list { display: grid; gap: 12px; margin-top: 17px; }
.employee-upcoming-list > div { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: start; gap: 10px; }
.employee-upcoming-list time { color: var(--employee-muted); font-size: .63rem; font-weight: 750; }
.employee-upcoming-list span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; }
.employee-upcoming-list strong { font-size: .71rem; }
.employee-upcoming-list small { padding: 3px 7px; border-radius: 999px; background: #eaf6ef; color: var(--employee-green); font-size: .55rem; font-weight: 800; }
.employee-upcoming-list small.holiday { background: #edf4fb; color: var(--employee-blue); }
.announcement-panel { background: #fffaf7; }
.announcement-panel p { display: -webkit-box; margin: 14px 0 8px; overflow: hidden; color: var(--employee-muted); font-size: .7rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.announcement-meta { color: #9a8b84; font-size: .6rem; }
.quick-actions-panel { margin-top: 17px; }
.employee-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.employee-quick-actions a { display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 10px; border: 1px solid var(--employee-line); border-radius: 12px; background: #fff; color: var(--employee-ink); font-size: .72rem; font-weight: 750; }
.employee-quick-actions a:hover { border-color: #e9cfc2; color: var(--employee-coral-dark); transform: translateY(-1px); }
.employee-quick-actions i { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; background: var(--employee-peach); color: var(--employee-coral-dark); font-style: normal; }
.employee-quick-actions i.request { background: #f1ecf8; color: var(--employee-purple); }
.employee-quick-actions i.document { background: #edf5fb; color: var(--employee-blue); }
.employee-quick-actions i.attendance { background: #edf7f1; color: var(--employee-green); }
.recent-requests-panel .employee-card-heading > a { color: var(--employee-coral-dark); font-size: .66rem; font-weight: 800; }
.employee-request-list { display: grid; margin-top: 12px; }
.employee-request-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--employee-line); color: var(--employee-ink); }
.employee-request-list a:last-child { border-bottom: 0; }
.employee-request-list a:hover strong { color: var(--employee-coral-dark); }
.employee-request-list a > span { display: grid; min-width: 0; gap: 3px; }
.employee-request-list strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-request-list small { color: var(--employee-muted); font-size: .61rem; }
.employee-request-list em { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #edf4fb; color: var(--employee-blue); font-size: .55rem; font-style: normal; font-weight: 800; }
.employee-request-list em.complete { background: #eaf6ef; color: var(--employee-green); }
.employee-request-list em.attention { background: #fff3df; color: #98651c; }
.employee-request-list em.closed { background: #f2efed; color: #766d69; }
.upcoming-panel { grid-column: 2; }
.employee-toast { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid #dcece3; border-radius: 12px; background: #f0f8f3; color: #246f4e; font-size: .71rem; font-weight: 700; }
.employee-toast.error { border-color: #f0d7d1; background: #fff2ef; color: #a74633; }
.employee-toast > span { font-weight: 900; }

.employee-shell-active :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(232, 111, 81, .26); outline-offset: 2px; }

/* Keep permission-based team and workforce dashboards in the same restrained visual system. */
.dashboard-workspace { width: min(1240px, 100%); margin-inline: auto; }
.dashboard-workspace .dashboard-hero { padding: 18px 2px 24px; }
.dashboard-workspace .dashboard-hero p { max-width: 620px; }
.dashboard-workspace .hero-orb { background: #fff; border: 1px solid var(--employee-line); box-shadow: var(--employee-shadow); }
.dashboard-workspace .filter-pills { gap: 6px; padding: 5px; border: 1px solid var(--employee-line); border-radius: 14px; background: rgba(255, 255, 255, .68); }
.dashboard-workspace .filter-pills a { flex: 0 0 auto; }
.dashboard-workspace .filter-pills span { border-radius: 10px; }
.dashboard-workspace .filter-pills span.active { background: #fff; color: var(--employee-coral-dark); box-shadow: 0 4px 14px rgba(65, 50, 43, .07); }
.dashboard-workspace .metric-grid { gap: 14px; }
.dashboard-workspace .metric-card { min-height: 150px; border: 1px solid var(--employee-line); border-top: 3px solid #df8068; border-radius: 18px; background: #fff; box-shadow: var(--employee-shadow); }
.dashboard-workspace .metric-card.amber { border-top-color: #c99332; }
.dashboard-workspace .metric-card.plum { border-top-color: var(--employee-purple); }
.dashboard-workspace .metric-card.mint { border-top-color: var(--employee-green); }
.dashboard-workspace .metric-card::after { display: none; }
.dashboard-workspace .metric-card:hover { transform: translateY(-2px); }
.dashboard-workspace .glass-panel { border-color: var(--employee-line); background: rgba(255, 255, 255, .9); box-shadow: var(--employee-shadow); }
.dashboard-workspace .management-view-note { margin-bottom: 18px; }

@media (max-width: 1080px) {
    .employee-sidebar { width: 226px; padding-inline: 14px; }
    .employee-shell-content { margin-left: 226px; }
    .employee-profile-button > span:nth-child(2) { display: none; }
    .employee-profile-button { padding-right: 4px; }
    .employee-topbar { gap: 8px; }
    .employee-content-grid { grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); }
    .employee-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
    .employee-sidebar { transform: translateX(-102%); width: min(290px, 86vw); transition: transform .24s ease; }
    .employee-shell-content { margin-left: 0; }
    .employee-shell-active.employee-menu-open .employee-sidebar { transform: translateX(0); }
    .employee-sidebar-scrim { position: fixed; inset: 0; z-index: 210; border: 0; background: rgba(50, 39, 34, .3); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .employee-shell-active.employee-menu-open .employee-sidebar-scrim { display: block; opacity: 1; pointer-events: auto; }
    .employee-menu-button { display: block; flex: 0 0 42px; }
    .employee-global-search { width: min(100%, 440px); }
    .employee-main { padding-top: 24px; }
    .employee-primary-grid { grid-template-columns: 1fr; }
    .employee-content-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .recent-requests-panel { grid-row: auto; }
    .upcoming-panel { grid-column: auto; }
}

@media (max-width: 650px) {
    .dashboard-workspace .filter-pills { display: flex; flex-wrap: wrap; }
    .employee-topbar { min-height: 65px; padding: 10px 12px; }
    .employee-global-search { flex: 1; }
    .employee-global-search input::placeholder { font-size: 0; }
    .employee-top-actions { margin-left: 0; }
    .employee-profile-button { display: flex; padding-right: 4px; }
    .employee-main { padding: 21px 12px 40px; }
    .employee-footer { padding-inline: 12px; }
    .employee-greeting { margin-left: 3px; }
    .employee-attendance-main { grid-template-columns: 1fr; align-items: start; }
    .employee-today-time { padding: 12px 0 0 50px; border: 0; border-top: 1px solid var(--employee-line); }
    .employee-attendance-actions { align-items: stretch; flex-direction: column; }
    .employee-button { width: 100%; }
    .employee-attendance-error { grid-template-columns: auto minmax(0, 1fr); }
    .employee-attendance-error .employee-button { grid-column: 1/-1; }
    .employee-attendance-facts { grid-template-columns: 1fr; }
    .employee-attendance-alert { align-items: flex-start; flex-direction: column; }
    .employee-content-grid { grid-template-columns: 1fr; }
    .employee-quick-actions { grid-template-columns: 1fr; }
    .employee-request-list a { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .employee-live-badge i { animation: none; }
    .employee-sidebar, .employee-sidebar-scrim { transition: none; }
}
.employee-side-nav .action-count {
    margin-left: auto;
    min-width: 1.5rem;
    padding: .1rem .38rem;
    border-radius: 999px;
    background: #a64f35;
    color: #fff;
    font-size: .72rem;
    line-height: 1.3;
    text-align: center;
}
.employee-nav-section { display:flex; align-items:center; gap:.5rem; padding:.8rem .9rem .3rem; color:#806f66; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.request-history-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.request-history-grid .catalogue-card { display:block; min-height:0; padding:1rem; text-decoration:none; }
.request-history-grid .catalogue-card h3 { margin:.65rem 0 .35rem; }

/* Premium employee experience — shared by the live dashboard and employee pages. */
:root {
    --employee-bg: #f3f5f9;
    --employee-card: #ffffff;
    --employee-ink: #101828;
    --employee-muted: #667085;
    --employee-line: #e4e9f1;
    --employee-coral: #316cff;
    --employee-coral-dark: #2357d5;
    --employee-peach: #edf3ff;
    --employee-green: #14a97b;
    --employee-blue: #316cff;
    --employee-purple: #7758d8;
    --employee-shadow: 0 18px 45px rgba(15, 28, 53, .075);
    --employee-navy: #0a1426;
    --employee-navy-soft: #111e35;
}

.employee-shell-active {
    background:
        radial-gradient(circle at 82% -5%, rgba(49, 108, 255, .09), transparent 30rem),
        var(--employee-bg);
}
.employee-shell-active .ambient-bg { display: none; }
.employee-sidebar {
    width: 264px;
    padding: 25px 17px 20px;
    border-right: 1px solid rgba(255, 255, 255, .055);
    background: linear-gradient(180deg, #0c172a 0%, #08111f 100%);
    box-shadow: 16px 0 42px rgba(6, 14, 28, .1);
    scrollbar-color: rgba(255,255,255,.14) transparent;
}
.employee-brand { margin: 0 10px 30px; color: #fff; }
.employee-brand:hover { color: #fff; }
.employee-brand-mark {
    border-radius: 14px;
    background: linear-gradient(145deg, #4b7eff, #2456dd);
    box-shadow: 0 10px 28px rgba(49, 108, 255, .36);
}
.employee-brand strong { color: #fff; font-size: .96rem; }
.employee-brand small { color: #7f91ad; letter-spacing: .15em; }
.employee-side-nav { gap: 5px; }
.employee-side-nav > a {
    min-height: 45px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #abb8cd;
    font-size: .78rem;
    font-weight: 680;
}
.employee-side-nav > a::before { left: -17px; width: 3px; height: 22px; }
.employee-side-nav > a:hover {
    border-color: rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}
.employee-side-nav > a.active {
    border-color: rgba(102, 143, 255, .18);
    background: linear-gradient(90deg, rgba(49, 108, 255, .26), rgba(49, 108, 255, .1));
    color: #fff;
    box-shadow: inset 0 0 24px rgba(49, 108, 255, .08);
}
.employee-side-nav > a.active::before { background: #5d8aff; box-shadow: 0 0 12px rgba(93, 138, 255, .7); }
.employee-side-nav i { color: #7486a3; }
.employee-side-nav .active i { color: #82a4ff; }
.employee-nav-section { padding: 1.05rem .65rem .35rem; color: #62738e; font-size: .59rem; letter-spacing: .15em; }
.employee-side-nav .action-count {
    background: #2f68f5;
    color: #fff;
    box-shadow: 0 5px 14px rgba(49, 108, 255, .25);
}
.employee-shell-content { margin-left: 264px; }
.employee-topbar {
    min-height: 76px;
    padding: 13px clamp(20px, 3.4vw, 50px);
    border-bottom: 1px solid rgba(216, 224, 235, .88);
    background: rgba(247, 249, 252, .88);
    backdrop-filter: blur(20px) saturate(145%);
}
.employee-menu-button { border-color: var(--employee-line); background: #fff; box-shadow: 0 7px 20px rgba(17, 34, 63, .07); }
.employee-menu-button span { background: #31415b; }
.employee-global-search {
    height: 44px;
    border-color: #e1e6ee;
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 5px 20px rgba(16, 36, 70, .035);
}
.employee-global-search:focus-within { border-color: #89a8ff; box-shadow: 0 0 0 3px rgba(49, 108, 255, .11); }
.employee-global-search i { color: #71809a; }
.employee-profile-button:hover { background: #fff; box-shadow: 0 8px 24px rgba(15, 30, 55, .07); }
.employee-profile-avatar {
    border-radius: 12px;
    background: linear-gradient(145deg, #dce7ff, #bcd0ff);
    color: #2357d5;
}
.employee-profile-dropdown {
    min-width: 245px;
    padding: 9px;
    border: 1px solid var(--employee-line);
    border-radius: 15px;
    box-shadow: 0 18px 50px rgba(11, 24, 47, .15);
}
.employee-profile-dropdown .dropdown-item { padding: 9px 10px; border-radius: 9px; font-size: .78rem; }
.employee-profile-primary { display: grid; }
.employee-profile-primary small { color: var(--employee-muted); font-size: .64rem; }
.employee-main { padding: 33px clamp(20px, 3.8vw, 58px) 58px; }
.employee-footer { color: #8a96a9; }

.employee-dashboard { width: min(1220px, 100%); }
.employee-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 22px; }
.employee-view-title { margin-bottom: 11px; padding: 0; background: transparent; color: #416ede; font-size: .62rem; letter-spacing: .14em; }
.employee-greeting h1 { margin: 0 0 7px; color: #142037; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.employee-greeting h1 span { color: #316cff; }
.employee-greeting p { color: #78859a; font-size: .82rem; font-weight: 550; }
.employee-local-context { margin-top: 8px; color: #8390a5; }
.employee-local-context span::before { color: #b1bccd; }
.employee-profile-shortcut {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    grid-template-rows: auto auto;
    gap: 0 11px;
    min-width: 225px;
    padding: 13px 15px;
    border: 1px solid var(--employee-line);
    border-radius: 16px;
    background: rgba(255,255,255,.83);
    color: var(--employee-ink);
    box-shadow: 0 12px 30px rgba(15, 31, 60, .055);
}
.employee-profile-shortcut > span { display: grid; grid-row: 1 / 3; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #edf3ff; color: #316cff; font-size: 1.15rem; }
.employee-profile-shortcut strong { font-size: .75rem; }
.employee-profile-shortcut small { color: var(--employee-muted); font-size: .62rem; }
.employee-profile-shortcut:hover { border-color: #b8cbff; color: #2357d5; transform: translateY(-1px); }
.employee-announcement-strip {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: 11px;
    margin: 0 0 15px;
    padding: 11px 15px;
    border: 1px solid #dce5f6;
    border-radius: 14px;
    background: rgba(255,255,255,.7);
    color: var(--employee-ink);
    font-size: .7rem;
}
.employee-announcement-strip > span { padding: 4px 8px; border-radius: 999px; background: #edf3ff; color: #316cff; font-size: .56rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.employee-announcement-strip small { color: #71809a; }
.employee-announcement-strip i { color: #316cff; font-style: normal; }
.employee-eyebrow { color: #6880ad; letter-spacing: .15em; }
.employee-card-heading h2 { color: #152039; font-size: 1.06rem; }
.employee-panel { border-color: var(--employee-line); border-radius: 19px; background: rgba(255,255,255,.94); box-shadow: var(--employee-shadow); }
.employee-primary-grid { gap: 18px; }
.employee-attendance-card {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 0%, rgba(81, 126, 255, .29), transparent 24rem),
        linear-gradient(135deg, #101d33 0%, #0b1528 58%, #07101e 100%);
    color: #fff;
    box-shadow: 0 23px 55px rgba(9, 22, 44, .21);
}
.employee-attendance-card::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border: 1px solid rgba(119, 157, 255, .12); border-radius: 50%; pointer-events: none; }
.employee-attendance-card .employee-eyebrow { color: #85a6ff; }
.employee-attendance-card .employee-card-heading h2,
.employee-attendance-card .employee-attendance-state h3,
.employee-attendance-card .employee-attendance-error h3,
.employee-attendance-card .employee-work-duration strong,
.employee-attendance-card .employee-today-time strong,
.employee-attendance-card .employee-attendance-facts dd,
.employee-attendance-card .employee-detected-location strong { color: #fff; }
.employee-attendance-card .employee-attendance-state p,
.employee-attendance-card .employee-attendance-error p,
.employee-attendance-card .employee-work-duration span,
.employee-attendance-card .employee-today-time span,
.employee-attendance-card .employee-today-time small,
.employee-attendance-card .employee-capture-message,
.employee-attendance-card .employee-location-picker small,
.employee-attendance-card .employee-detected-location span,
.employee-attendance-card .employee-detected-location small { color: #96a7c2; }
.employee-live-badge { background: rgba(20,169,123,.14); color: #6fe0ba; }
.employee-live-badge i { background: #39d29f; box-shadow: 0 0 0 4px rgba(57,210,159,.12); }
.employee-state-icon.success { background: rgba(33, 205, 148, .14); color: #5fe0b4; }
.employee-state-icon.idle { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); color: #aebbd0; }
.employee-today-time { border-left-color: rgba(255,255,255,.11); }
.employee-attendance-form { border-top-color: rgba(255,255,255,.1); }
.employee-location-picker label,
.employee-verification-field label { color: #d5deec; }
.employee-location-picker select,
.employee-verification-field input,
.employee-verification-field textarea {
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.075);
    color: #fff;
}
.employee-location-picker select option { color: #101828; }
.employee-detected-location { border-color: rgba(62, 220, 166, .24); background: rgba(31, 153, 113, .12); }
.employee-attendance-facts > div { border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.045); }
.employee-attendance-facts dt { color: #8fa0ba; }
.employee-button { border-radius: 11px; }
.employee-button.primary { background: #316cff; box-shadow: 0 10px 24px rgba(49,108,255,.3); }
.employee-button.primary:hover { background: #4b7eff; }
.employee-button.secondary { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; }
.employee-attendance-alert { border-color: rgba(248, 194, 93, .22); background: rgba(203, 139, 42, .12); }
.employee-attendance-alert span { color: #aebbd0; }
.employee-attendance-alert > a,
.employee-attendance-card .employee-text-link { color: #88a9ff; }

.attention-panel,
.quick-actions-panel { margin-top: 18px; }
.employee-count-badge { background: #edf3ff; color: #316cff; }
.employee-attention-list a:hover,
.employee-request-list a:hover strong { color: #2357d5; }
.employee-attention-list i { background: #316cff; }
.employee-empty-state { background: #eff8f4; }
.employee-empty-state.compact { background: #f5f7fa; }
.employee-quick-actions { gap: 11px; }
.employee-quick-actions a { min-height: 59px; border-color: #e4e9f1; border-radius: 13px; background: #f9fbfd; }
.employee-quick-actions a:hover { border-color: #b8cbff; color: #2357d5; box-shadow: 0 10px 24px rgba(35,87,213,.08); }
.employee-quick-actions i { background: #edf3ff; color: #316cff; }
.employee-content-grid { grid-template-columns: minmax(0,1.35fr) minmax(280px,.75fr); gap: 18px; margin-top: 18px; }
.recent-requests-panel { grid-row: auto; }
.recent-requests-panel .employee-card-heading > a,
.employee-text-link { color: #316cff; }
.upcoming-panel { grid-column: auto; }
.employee-toast { border-color: #cde9dd; border-radius: 14px; }
.employee-shell-active :is(a, button, input, select, textarea, summary):focus-visible { outline-color: rgba(49,108,255,.34); }

/* Employee profile and resignation. */
.employee-profile-page { width: min(1180px, 100%); margin: 0 auto; }
.employee-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 20px;
    padding: clamp(23px, 3vw, 34px);
    border-radius: 22px;
    background: linear-gradient(135deg, #0f1d33, #0a1426 70%);
    color: #fff;
    box-shadow: 0 22px 52px rgba(9, 22, 44, .2);
}
.employee-profile-monogram { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(145deg,#467aff,#2859dd); font: 800 1.35rem Manrope,sans-serif; box-shadow: 0 12px 28px rgba(49,108,255,.28); }
.employee-profile-hero h1 { margin: 2px 0 6px; color: #fff; font: 800 clamp(1.45rem,3vw,2.2rem) Manrope,sans-serif; letter-spacing: -.035em; }
.employee-profile-hero p { margin: 0; color: #a9b7ca; font-size: .78rem; }
.employee-profile-code { display: inline-flex; margin-top: 10px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #b9c9df; font-size: .62rem; font-weight: 750; }
.employee-profile-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.employee-profile-hero .employee-button.secondary { background: rgba(255,255,255,.08); }
.employee-profile-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.8fr); gap: 18px; margin-top: 18px; }
.employee-profile-stack { display: grid; gap: 18px; }
.employee-profile-card { padding: 22px; border: 1px solid var(--employee-line); border-radius: 19px; background: #fff; box-shadow: var(--employee-shadow); }
.employee-profile-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.employee-profile-card header h2 { margin: 2px 0 0; font: 760 1.02rem Manrope,sans-serif; color: #152039; }
.employee-profile-card header a { color: #316cff; font-size: .68rem; font-weight: 800; }
.employee-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--employee-line); border-radius: 14px; background: var(--employee-line); }
.employee-detail-grid > div { min-width: 0; padding: 14px 15px; background: #fbfcfe; }
.employee-detail-grid dt { color: #7d899c; font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.employee-detail-grid dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #1a263d; font-size: .76rem; font-weight: 700; }
.employee-profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 16px; }
.employee-profile-stats > div { padding: 13px; border-radius: 13px; background: #f4f7fb; }
.employee-profile-stats strong { display: block; color: #142039; font: 800 1.25rem Manrope,sans-serif; }
.employee-profile-stats span { color: #78859a; font-size: .6rem; }
.employee-profile-links { display: grid; gap: 8px; }
.employee-profile-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--employee-line); border-radius: 12px; color: #1a263d; font-size: .72rem; font-weight: 750; }
.employee-profile-links a:hover { border-color: #b8cbff; color: #2357d5; }
.employee-resignation-card { border-color: #f0d5d5; background: linear-gradient(180deg,#fff,#fffafa); }
.employee-resignation-card p { color: var(--employee-muted); font-size: .7rem; line-height: 1.6; }
.employee-button.danger { border-color: #edc9c9; background: #fff; color: #b43d3d; }
.employee-button.danger:hover { background: #fff2f2; }
.employee-notice-status { display: grid; gap: 7px; padding: 13px; border-radius: 13px; background: #f6f8fb; }
.employee-notice-status strong { font-size: .75rem; }
.employee-notice-status span { color: var(--employee-muted); font-size: .65rem; }
.employee-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.employee-form-field { display: grid; gap: 6px; }
.employee-form-field.full { grid-column: 1 / -1; }
.employee-form-field label { color: #344054; font-size: .68rem; font-weight: 800; }
.employee-form-field input,
.employee-form-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dbe2ec; border-radius: 11px; background: #fff; color: #101828; font-size: .76rem; }
.employee-form-field textarea { min-height: 105px; resize: vertical; }
.employee-form-field small { color: var(--employee-muted); font-size: .62rem; }
.employee-form-consent { display: flex; align-items: flex-start; gap: 9px; grid-column: 1 / -1; color: #475467; font-size: .7rem; }
.employee-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; margin-top: 5px; }
.employee-validation { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #f0cece; border-radius: 12px; background: #fff4f4; color: #a03c3c; font-size: .7rem; }

/* Premium employee module surfaces. Keeps every routed page visually connected
   to the dashboard without changing the Manager or HR workspaces. */
.employee-shell-active .employee-main > :is(main, section, form, div):not(.employee-dashboard):not(.employee-profile-page) {
    width: min(1220px, 100%);
}
.employee-shell-active .page-enter { animation: employeePageEnter .28s ease-out both; }
@keyframes employeePageEnter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}
.employee-shell-active .page-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: clamp(23px, 3vw, 34px);
    border: 1px solid #dce5f3;
    border-radius: 22px;
    background:
        radial-gradient(circle at 93% 5%, rgba(49,108,255,.12), transparent 18rem),
        linear-gradient(145deg, #fff 0%, #f7faff 100%);
    box-shadow: 0 16px 42px rgba(15,31,60,.07);
}
.employee-shell-active .page-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -105px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(49,108,255,.1);
    border-radius: 50%;
    pointer-events: none;
}
.employee-shell-active .page-hero :is(h1, h2) {
    color: #13213a;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    letter-spacing: -.04em;
}
.employee-shell-active .page-hero p { color: #6f7d92; }
.employee-shell-active .eyebrow { color: #316cff; font-weight: 850; letter-spacing: .14em; }
.employee-shell-active :is(.coral-wash, .mint-wash, .plum-wash, .amber-wash) {
    border-color: #dce5f3;
    background:
        radial-gradient(circle at 95% 0%, rgba(49,108,255,.1), transparent 17rem),
        linear-gradient(145deg, #fff, #f7faff);
}
.employee-shell-active :is(.glass-panel, .glass-inset, .record-card, .catalogue-card, .course-card, .asset-employee-card, .metric-card, .attendance-kpi) {
    border-color: #dfe6f0;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 34px rgba(15,31,60,.06);
}
.employee-shell-active :is(.glass-panel, .record-card, .catalogue-card, .course-card, .asset-employee-card) {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.employee-shell-active :is(.record-card, .catalogue-card, .course-card, .asset-employee-card):hover {
    border-color: #bfd0ff;
    box-shadow: 0 18px 40px rgba(35,87,213,.09);
    transform: translateY(-2px);
}
.employee-shell-active :is(.panel-heading, .section-heading) h2,
.employee-shell-active :is(.panel-heading, .section-heading) h3,
.employee-shell-active .record-top h3 {
    color: #17243c;
    font-family: Manrope, sans-serif;
    font-weight: 780;
    letter-spacing: -.025em;
}
.employee-shell-active :is(.form-control, .form-select) {
    min-height: 43px;
    border-color: #dce3ed;
    border-radius: 11px;
    background-color: #fff;
    color: #17243c;
    box-shadow: none;
}
.employee-shell-active :is(.form-control, .form-select):focus {
    border-color: #88a7ff;
    box-shadow: 0 0 0 3px rgba(49,108,255,.11);
}
.employee-shell-active :is(.form-label, .form-field label) { color: #39475e; font-weight: 750; }
.employee-shell-active :is(.btn-luminous, .btn-primary) {
    border-color: #316cff;
    background: #316cff;
    color: #fff;
    box-shadow: 0 9px 22px rgba(49,108,255,.22);
}
.employee-shell-active :is(.btn-luminous, .btn-primary):hover {
    border-color: #245bdd;
    background: #245bdd;
    color: #fff;
    transform: translateY(-1px);
}
.employee-shell-active .btn-soft {
    border-color: #d9e2ee;
    background: #f7f9fc;
    color: #30405b;
}
.employee-shell-active .btn-soft:hover { border-color: #b8cbff; background: #edf3ff; color: #2357d5; }
.employee-shell-active .filter-pills {
    gap: 7px;
    padding: 5px;
    border: 1px solid #e0e6ef;
    border-radius: 13px;
    background: #f5f7fa;
}
.employee-shell-active .filter-pills :is(a, button) {
    border: 0;
    border-radius: 9px;
    color: #68768c;
    font-weight: 750;
}
.employee-shell-active .filter-pills :is(a, button).active {
    background: #fff;
    color: #2357d5;
    box-shadow: 0 4px 13px rgba(19,41,78,.09);
}
.employee-shell-active :is(.status-chip, .pill) { border-radius: 999px; font-weight: 800; }
.employee-shell-active .elegant-table { border-collapse: separate; border-spacing: 0; }
.employee-shell-active .elegant-table thead th {
    border-bottom-color: #dfe6f0;
    background: #f6f8fb;
    color: #748197;
    font-size: .62rem;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.employee-shell-active .elegant-table tbody td { border-bottom-color: #e8edf4; color: #26354d; }
.employee-shell-active .elegant-table tbody tr:hover td { background: #f8faff; }
.employee-shell-active :is(.empty-state, .boundary-note, .toast-note) {
    border-color: #dfe6f0;
    border-radius: 14px;
    background: #f7f9fc;
}
.employee-shell-active .back-link { color: #316cff; font-weight: 800; }
.employee-shell-active .course-art { background: linear-gradient(145deg, #eaf1ff, #d8e5ff); color: #2357d5; }
.employee-shell-active .alert { border-radius: 13px; }

@media (max-width: 1080px) {
    .employee-sidebar { width: 236px; }
    .employee-shell-content { margin-left: 236px; }
}
@media (max-width: 840px) {
    .employee-shell-content { margin-left: 0; }
    .employee-greeting { align-items: stretch; flex-direction: column; gap: 14px; }
    .employee-profile-shortcut { min-width: 0; }
    .employee-profile-layout { grid-template-columns: 1fr; }
    .employee-profile-hero { grid-template-columns: auto minmax(0,1fr); }
    .employee-profile-hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 650px) {
    .employee-announcement-strip { grid-template-columns: auto minmax(0,1fr) auto; }
    .employee-announcement-strip small { display: none; }
    .employee-profile-hero { grid-template-columns: 1fr; text-align: left; }
    .employee-profile-monogram { width: 60px; height: 60px; border-radius: 18px; }
    .employee-detail-grid,
    .employee-form-grid { grid-template-columns: 1fr; }
    .employee-form-field.full,
    .employee-form-consent,
    .employee-form-actions { grid-column: auto; }
    .employee-profile-stats { grid-template-columns: 1fr; }
    .employee-content-grid { grid-template-columns: 1fr; }
}

/* Premium employee workspaces ------------------------------------------------ */
.employee-shell-active :is(.my-space-page, .holiday-workspace, .employee-attendance-workspace, .employee-security-page, .request-workspace) {
    width: min(1320px, 100%);
    margin-inline: auto;
}

/* My Space */
.my-space-page { display: grid; gap: 22px; }
.my-space-hero {
    position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 224px; padding: clamp(28px, 4vw, 50px); overflow: hidden; border-radius: 28px;
    background:
        radial-gradient(circle at 78% 22%, rgba(255,255,255,.16), transparent 22%),
        linear-gradient(125deg, #20233b 0%, #31345a 58%, #684b68 100%);
    color: #fff; box-shadow: 0 24px 58px rgba(32,35,59,.18);
}
.my-space-hero::after {
    content: ""; position: absolute; z-index: -1; right: -48px; bottom: -92px; width: 250px; height: 250px;
    border: 54px solid rgba(255,255,255,.055); border-radius: 50%;
}
.my-space-hero .employee-eyebrow { color: #ffc6b5; }
.my-space-hero h1 { max-width: 650px; margin: 8px 0 10px; color: #fff; font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.02; letter-spacing: -.055em; }
.my-space-hero p { max-width: 610px; margin: 0; color: rgba(255,255,255,.7); font-size: .96rem; }
.my-space-date {
    display: grid; width: 146px; min-width: 146px; min-height: 150px; padding: 17px; place-items: center;
    border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(255,255,255,.09);
    box-shadow: inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(12px); text-align: center;
}
.my-space-date span { color: #ffc6b5; font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.my-space-date strong { color: #fff; font-size: 3.6rem; line-height: 1; letter-spacing: -.08em; }
.my-space-date small { color: rgba(255,255,255,.65); font-size: .68rem; font-weight: 700; }
.my-space-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.my-space-metrics article {
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 19px 21px;
    overflow: hidden; border: 1px solid var(--employee-line); border-radius: 18px; background: rgba(255,254,253,.94); box-shadow: var(--employee-shadow);
}
.my-space-metrics article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--employee-coral); }
.my-space-metrics article:nth-child(2)::before { background: #d09c37; }
.my-space-metrics article:nth-child(3)::before { background: var(--employee-green); }
.my-space-metrics span { align-self: end; color: #857872; font-size: .67rem; font-weight: 850; letter-spacing: .085em; text-transform: uppercase; }
.my-space-metrics strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #282636; font-size: 2rem; letter-spacing: -.06em; }
.my-space-metrics small { color: #9a8e88; font-size: .7rem; }
.my-space-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.65fr); gap: 20px; align-items: start; }
.employee-shell-active .my-space-compose,
.employee-shell-active .my-space-board { padding: clamp(22px, 3vw, 31px); border-radius: 24px; }
.my-space-compose h2, .my-space-board h2 { margin: 5px 0 6px; font-size: 1.45rem; letter-spacing: -.035em; }
.my-space-compose > p { margin: 0 0 22px; color: var(--employee-muted); font-size: .82rem; }
.my-space-compose form { display: grid; gap: 15px; }
.my-space-form-row { display: grid; grid-template-columns: 1fr .9fr; gap: 12px; }
.my-space-compose .employee-button { width: 100%; justify-content: center; min-height: 46px; }
.my-space-privacy { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; margin-top: 20px; padding: 13px; border-radius: 14px; background: #f6f3f7; }
.my-space-privacy i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #ece4ef; color: var(--employee-purple); font-style: normal; }
.my-space-privacy span { display: grid; gap: 2px; }
.my-space-privacy strong { color: #443951; font-size: .75rem; }
.my-space-privacy small { color: #807584; font-size: .64rem; line-height: 1.45; }
.my-space-board > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.my-space-filters { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f3efec; }
.my-space-filters button { padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: #80746f; font-size: .7rem; font-weight: 800; }
.my-space-filters button.active { background: #fff; color: var(--employee-coral-dark); box-shadow: 0 4px 12px rgba(59,42,35,.09); }
.my-space-list { display: grid; gap: 10px; }
.my-space-task {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: start; padding: 16px;
    border: 1px solid #eee7e2; border-radius: 17px; background: #fffdfa; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.my-space-task:hover { transform: translateY(-1px); border-color: #e4cec3; box-shadow: 0 12px 25px rgba(71,53,44,.07); }
.my-space-task.completed { background: #f8f7f5; opacity: .76; }
.my-space-task.completed .my-space-task-copy > strong { text-decoration: line-through; }
.my-space-task-toggle { display: grid; width: 27px; height: 27px; margin-top: 1px; place-items: center; border: 1.5px solid #d5c9c2; border-radius: 9px; background: #fff; color: transparent; font-weight: 900; }
.my-space-task.completed .my-space-task-toggle { border-color: var(--employee-green); background: var(--employee-green); color: #fff; }
.my-space-task-copy { min-width: 0; }
.my-space-task-copy > strong { display: block; margin: 0 0 5px; color: #302b2a; font-size: .87rem; line-height: 1.4; }
.my-space-task-copy p { margin: 6px 0 0; color: #7d726d; font-size: .72rem; white-space: pre-wrap; }
.my-space-task-copy > small { display: block; margin-top: 6px; color: #8f837d; font-size: .6rem; font-weight: 750; }
.my-space-task-copy > small.overdue { color: #bd563e; }
.my-space-task-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.my-space-task-meta span { padding: 4px 7px; border-radius: 7px; background: #f2efed; color: #796f6b; font-size: .59rem; font-weight: 800; }
.my-space-task-meta .high { background: #fff0ec; color: #bd563e; }
.my-space-task-meta .low { background: #edf5fc; color: #3f75a7; }
.my-space-task-actions { display: flex; }
.my-space-delete { min-height: 29px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #a39994; font-size: .59rem; font-weight: 800; }
.my-space-delete:hover { background: #fff0ec; color: #b94d39; }
.my-space-empty { display: grid; min-height: 210px; padding: 34px; place-items: center; align-content: center; text-align: center; }
.my-space-empty[hidden] { display: none; }
.my-space-empty > span { display: grid; width: 48px; height: 48px; margin-bottom: 10px; place-items: center; border-radius: 16px; background: #f3eeea; color: #a58f83; font-size: 1.25rem; }
.my-space-empty h3 { margin: 0 0 5px; font-size: 1rem; }
.my-space-empty p { max-width: 330px; margin: 0; color: var(--employee-muted); font-size: .76rem; }
.my-space-empty.compact { min-height: 150px; grid-column: 1 / -1; }

/* Company holiday calendar */
.holiday-workspace { display: grid; gap: 20px; }
.holiday-hero {
    position: relative; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,.75fr); gap: 30px; min-height: 286px;
    padding: clamp(30px, 5vw, 58px); overflow: hidden; border-radius: 30px; background: #1f2932; color: #fff;
    box-shadow: 0 26px 60px rgba(31,41,50,.18);
}
.holiday-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 30%, rgba(232,111,81,.23), transparent 28%), linear-gradient(115deg, transparent 48%, rgba(255,255,255,.035)); pointer-events: none; }
.holiday-hero-copy, .holiday-next-card { position: relative; z-index: 1; }
.holiday-hero .employee-eyebrow { color: #f6ad94; }
.holiday-hero h1 { margin: 11px 0 13px; color: #fff; font-size: clamp(2.25rem, 4.6vw, 4.15rem); line-height: .98; letter-spacing: -.065em; }
.holiday-hero h1 span { color: #e7b66a; }
.holiday-hero-copy > p { max-width: 590px; margin: 0; color: rgba(255,255,255,.64); font-size: .91rem; }
.holiday-year-switcher { display: inline-grid; grid-template-columns: 34px auto 34px; gap: 5px; align-items: center; margin-top: 24px; padding: 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.055); }
.holiday-year-switcher a { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: rgba(255,255,255,.7); }
.holiday-year-switcher a:hover { background: rgba(255,255,255,.11); color: #fff; }
.holiday-year-switcher strong { padding: 0 10px; color: #fff; font-size: .75rem; letter-spacing: .08em; }
.holiday-next-card { position: relative; align-self: center; overflow: hidden; padding: 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 23px; background: rgba(255,255,255,.075); box-shadow: inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(15px); }
.holiday-next-icon { position: absolute; top: 12px; right: 18px; color: rgba(255,255,255,.13); font-style: normal; font-size: 4.8rem; line-height: 1; transform: rotate(8deg); }
.holiday-next-card > span { color: #f2b09b; font-size: .59rem; font-weight: 900; letter-spacing: .14em; }
.holiday-next-date { display: flex; align-items: baseline; gap: 8px; margin: 17px 0 11px; }
.holiday-next-date strong { color: #fff; font-size: 3.45rem; line-height: .88; letter-spacing: -.08em; }
.holiday-next-date small { color: #e7b66a; font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.holiday-next-card h2 { margin: 0 0 6px; color: #fff; font-size: 1.25rem; }
.holiday-next-card p { margin: 0; color: rgba(255,255,255,.58); font-size: .7rem; }
.holiday-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.holiday-summary-grid article { display: flex; gap: 13px; align-items: center; padding: 17px 18px; border: 1px solid var(--employee-line); border-radius: 17px; background: rgba(255,254,252,.93); box-shadow: var(--employee-shadow); }
.holiday-summary-grid i { display: grid; width: 39px; height: 39px; place-items: center; flex: 0 0 39px; border-radius: 12px; background: #fff0ea; color: var(--employee-coral); font-style: normal; }
.holiday-summary-grid article:nth-child(2) i { background: #eef4fa; color: var(--employee-blue); }
.holiday-summary-grid article:nth-child(3) i { background: #f7f0df; color: #b7822a; }
.holiday-summary-grid article:nth-child(4) i { background: #edf5ef; color: var(--employee-green); }
.holiday-summary-grid div { display: grid; }
.holiday-summary-grid strong { font-size: 1.25rem; letter-spacing: -.045em; }
.holiday-summary-grid span { color: #8a7d77; font-size: .63rem; font-weight: 750; }
.holiday-calendar-panel { overflow: hidden; border: 1px solid var(--employee-line); border-radius: 25px; background: rgba(255,254,252,.96); box-shadow: var(--employee-shadow); }
.holiday-calendar-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border-bottom: 1px solid #eee7e2; }
.holiday-calendar-panel > header h2 { margin: 4px 0; font-size: 1.45rem; letter-spacing: -.035em; }
.holiday-calendar-panel > header p { margin: 0; color: var(--employee-muted); font-size: .73rem; }
.holiday-calendar-state { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: #edf7f0; color: #337557; font-size: .62rem; font-weight: 850; }
.holiday-calendar-state i { width: 6px; height: 6px; border-radius: 50%; background: #45a16f; box-shadow: 0 0 0 4px rgba(69,161,111,.12); }
.holiday-month-list { display: grid; padding: 5px 28px 12px; }
.holiday-month-group { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 22px; padding: 25px 0; border-bottom: 1px solid #eee8e3; }
.holiday-month-group:last-child { border-bottom: 0; }
.holiday-month-label { display: grid; align-content: start; gap: 2px; padding-top: 9px; }
.holiday-month-label span { color: var(--employee-coral); font-size: .59rem; font-weight: 900; letter-spacing: .13em; }
.holiday-month-label strong { font-size: .9rem; }
.holiday-month-label small { color: #a0948e; font-size: .62rem; }
.holiday-card-list { display: grid; gap: 9px; }
.holiday-date-card { --holiday-accent:#e86f51; --holiday-soft:#fff0ea; position: relative; display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 15px; align-items: center; min-height: 82px; padding: 11px 15px 11px 11px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--holiday-accent) 18%,#eee7e2); border-radius: 18px; background: linear-gradient(110deg,#fffdfa 58%,color-mix(in srgb,var(--holiday-soft) 68%,#fff)); box-shadow: 0 9px 24px rgba(43,36,31,.045); transition: transform .18s ease,box-shadow .18s ease; }
.holiday-date-card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(43,36,31,.08); }
.holiday-card-decoration { position: absolute; right: 105px; color: color-mix(in srgb,var(--holiday-accent) 14%,transparent); font-size: 3.8rem; line-height: 1; transform: rotate(-8deg); pointer-events: none; }
.holiday-date-card.holiday-lights { --holiday-accent:#b57a16; --holiday-soft:#fff4cc; }
.holiday-date-card.holiday-dussehra { --holiday-accent:#c6532d; --holiday-soft:#ffe6d7; }
.holiday-date-card.holiday-christmas { --holiday-accent:#2f7d59; --holiday-soft:#e0f3e8; }
.holiday-date-card.holiday-new-year { --holiday-accent:#6056a8; --holiday-soft:#ebe9ff; }
.holiday-date-card.holiday-spring { --holiday-accent:#57934f; --holiday-soft:#e8f6dc; }
.holiday-date-card.holiday-national { --holiday-accent:#3577a8; --holiday-soft:#e1f1ff; }
.holiday-date-card.holiday-holi { --holiday-accent:#a85091; --holiday-soft:#fae5f6; }
.holiday-date-card.holiday-eid { --holiday-accent:#1f897e; --holiday-soft:#ddf6f1; }
.holiday-date-card.holiday-ganesh { --holiday-accent:#b46b28; --holiday-soft:#faead6; }
.holiday-date-card.holiday-harvest { --holiday-accent:#8d791f; --holiday-soft:#f8f0c9; }
.holiday-date-card.today { border-color: #edab94; box-shadow: 0 0 0 3px rgba(232,111,81,.08); }
.holiday-date-card.past { background: #f9f7f4; opacity: .66; }
.holiday-date-badge { position: relative; z-index: 1; display: grid; width: 56px; height: 56px; place-items: center; align-content: center; border: 1px solid color-mix(in srgb,var(--holiday-accent) 16%,transparent); border-radius: 14px; background: var(--holiday-soft); color: var(--holiday-accent); }
.holiday-date-card.optional .holiday-date-badge { background: #f6f0df; color: #997028; }
.holiday-date-badge strong { font-size: 1.25rem; line-height: 1; letter-spacing: -.04em; }
.holiday-date-badge span { margin-top: 3px; font-size: .52rem; font-weight: 900; letter-spacing: .09em; }
.holiday-date-copy { min-width: 0; }
.holiday-date-copy > div { display: flex; align-items: center; gap: 8px; }
.holiday-date-copy h3 { margin: 0; font-size: .83rem; }
.holiday-date-copy p { margin: 4px 0 0; color: #8e817b; font-size: .67rem; }
.holiday-date-copy small { display: block; margin-top: 3px; color: var(--holiday-accent); font-size: .56rem; font-weight: 800; }
.holiday-today-badge { padding: 3px 6px; border-radius: 6px; background: var(--employee-coral); color: #fff; font-size: .52rem; font-weight: 850; }
.holiday-type { padding: 6px 9px; border-radius: 8px; background: #f2efed; color: #716762; font-size: .57rem; font-weight: 850; }
.holiday-date-card.optional .holiday-type { background: #f6f0df; color: #8c682a; }
.holiday-calendar-panel > footer { display: flex; justify-content: space-between; gap: 18px; padding: 17px 28px; border-top: 1px solid #eee7e2; background: #faf8f5; color: #887c76; font-size: .66rem; }
.holiday-calendar-panel > footer a { color: var(--employee-coral-dark); font-weight: 850; }

/* Attendance + Leave */
.employee-attendance-workspace { display: grid; gap: 19px; }
.attendance-premium-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 180px; padding: clamp(27px,4vw,42px); border-radius: 27px; background: linear-gradient(125deg,#24334a 0%,#344a69 62%,#496f78 100%); color: #fff; box-shadow: 0 22px 50px rgba(36,51,74,.16); }
.attendance-premium-hero .employee-eyebrow { color: #a9d9d4; }
.attendance-premium-hero h1 { margin: 6px 0 7px; color: #fff; font-size: clamp(2rem,4vw,3.25rem); letter-spacing: -.055em; }
.attendance-premium-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.68); font-size: .86rem; }
.attendance-hero-stat { display: grid; min-width: 210px; padding: 19px 21px; border: 1px solid rgba(255,255,255,.15); border-radius: 19px; background: rgba(255,255,255,.075); }
.attendance-hero-stat span { color: #a9d9d4; font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.attendance-hero-stat strong { margin: 5px 0 2px; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.attendance-hero-stat small { color: rgba(255,255,255,.58); font-size: .63rem; }
.leave-hero { background: linear-gradient(125deg,#3a2f4e 0%,#5b446a 58%,#85586b 100%); }
.leave-hero .employee-eyebrow, .leave-hero .attendance-hero-stat span { color: #e9bfd2; }
.attendance-module-tabs.premium-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 0; border: 0; background: transparent; }
.attendance-module-tabs.premium-tabs a { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 74px; padding: 13px 16px; border: 1px solid var(--employee-line); border-radius: 18px; background: rgba(255,254,252,.92); color: #6c625e; box-shadow: 0 7px 22px rgba(65,48,41,.035); }
.attendance-module-tabs.premium-tabs a::after { display: none; }
.attendance-module-tabs.premium-tabs a > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #f1eeeb; color: #776e69; font-style: normal; font-size: 1.12rem; }
.attendance-module-tabs.premium-tabs a > span { display: grid; gap: 2px; }
.attendance-module-tabs.premium-tabs a strong { font-size: .81rem; }
.attendance-module-tabs.premium-tabs a small { color: #998d87; font-size: .61rem; font-weight: 600; }
.attendance-module-tabs.premium-tabs a.active { border-color: #bfcbd8; background: #fff; color: #26384f; box-shadow: 0 12px 30px rgba(38,56,79,.09); }
.attendance-module-tabs.premium-tabs a.active > i { background: #e8f0f6; color: #315f81; }
.employee-leave-workspace .attendance-module-tabs.premium-tabs a.active { border-color: #d7bfd2; color: #59405f; box-shadow: 0 12px 30px rgba(89,64,95,.09); }
.employee-leave-workspace .attendance-module-tabs.premium-tabs a.active > i { background: #f4eaf2; color: #875f83; }
.attendance-view-switcher { display: inline-flex; width: max-content; max-width: 100%; gap: 4px; padding: 5px; overflow-x: auto; border: 1px solid #e9e2dc; border-radius: 14px; background: #f4f1ee; }
.attendance-view-switcher a { min-width: max-content; padding: 9px 14px; border: 0; border-radius: 10px; color: #7e736e; font-size: .68rem; font-weight: 800; }
.attendance-view-switcher a::after { display: none; }
.attendance-view-switcher a.active { background: #fff; color: #315f81; box-shadow: 0 5px 14px rgba(55,61,68,.09); }
.employee-shell-active .attendance-tab-panel { padding: clamp(22px,3vw,32px); border: 1px solid var(--employee-line); border-radius: 24px; background: rgba(255,254,252,.96); box-shadow: var(--employee-shadow); }
.attendance-panel-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.attendance-panel-heading h2 { margin: 4px 0; font-size: 1.48rem; letter-spacing: -.04em; }
.attendance-panel-heading p { margin: 0; color: var(--employee-muted); font-size: .73rem; }
.attendance-time-pair { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 17px; }
.attendance-time-pair > span { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid #ebe5e0; border-radius: 13px; background: #faf8f5; }
.attendance-time-pair small { color: #90847e; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.attendance-time-pair strong { color: #344256; font-size: .78rem; }
.attendance-action-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.82fr); gap: 25px; padding: clamp(22px,3vw,31px); border: 1px solid #dce5ea; border-radius: 22px; background: linear-gradient(135deg,#f4f8fa,#fffdfa 70%); }
.attendance-action-copy h2 { margin: 7px 0; font-size: 1.65rem; }
.attendance-action-copy > p { max-width: 620px; color: var(--employee-muted); font-size: .79rem; }
.attendance-capture-form { display: grid; gap: 13px; align-content: start; padding: 20px; border: 1px solid #e6e1dc; border-radius: 18px; background: #fff; box-shadow: 0 13px 28px rgba(51,52,54,.07); }
.attendance-location-picker { display: grid; gap: 6px; }
.attendance-location-picker label, .attendance-capture-form > label { color: #4b4542; font-size: .67rem; font-weight: 850; }
.attendance-location-picker small { color: #8e837e; font-size: .6rem; line-height: 1.45; }
.attendance-capture-form .btn { min-height: 45px; justify-content: center; }
.attendance-day-card { padding: 19px; border: 1px solid #e8e2dc; border-radius: 18px; background: #fff; }
.attendance-day-card h3 { margin: 5px 0; }
.attendance-day-card p { color: var(--employee-muted); font-size: .7rem; }
.attendance-day-card .attendance-time-pair { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 15px 0 0; }
.employee-shell-active :is(.attendance-day-list,.premium-leave-request-list) { display: grid; gap: 10px; }
.employee-shell-active :is(.attendance-day-list > article,.attendance-exception) { border: 1px solid #e8e2dc; border-radius: 17px; background: #fffdfa; box-shadow: none; }
.attendance-issue-group { margin-top: 18px; }
.attendance-issue-group > h3 { display: flex; align-items: center; gap: 8px; font-size: .91rem; }
.attendance-issue-group > h3 span { padding: 4px 8px; border-radius: 999px; background: #edf1f5; color: #536575; font-size: .58rem; }
.employee-shell-active .work-progress { height: 8px; margin: 22px 0 12px; overflow: hidden; border-radius: 99px; background: #e6ebed; }
.employee-shell-active .work-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4a7c92,#58a28b); }
.employee-shell-active .workday-time-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.employee-shell-active .workday-time-summary span { display: grid; gap: 3px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,.65); }
.employee-shell-active .workday-time-summary small { color: #8b807a; font-size: .54rem; }
.employee-shell-active .workday-time-summary strong { font-size: .71rem; }
.employee-shell-active .gps-status { border-radius: 13px; }

.leave-balance-section, .premium-leave-requests { padding: clamp(22px,3vw,30px); border: 1px solid var(--employee-line); border-radius: 24px; background: rgba(255,254,252,.96); box-shadow: var(--employee-shadow); }
.premium-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.premium-section-heading h2 { margin: 4px 0 0; font-size: 1.4rem; }
.premium-section-heading > small { padding: 7px 10px; border-radius: 9px; background: #f1edeb; color: #796e69; font-size: .6rem; font-weight: 850; }
.premium-leave-balances { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.premium-leave-card { padding: 19px; border: 1px solid #e9e1e8; border-radius: 18px; background: linear-gradient(145deg,#fff,#fbf7fb); }
.premium-leave-card > div:first-child { display: grid; gap: 2px; }
.premium-leave-card > div:first-child span { color: #514954; font-size: .75rem; font-weight: 850; }
.premium-leave-card > div:first-child small { color: #9a8f98; font-size: .58rem; }
.premium-leave-card > strong { display: block; margin: 17px 0 12px; color: #624e68; font-size: 1.9rem; letter-spacing: -.05em; }
.premium-leave-card > strong small { font-size: .65rem; letter-spacing: 0; }
.leave-balance-track { height: 6px; overflow: hidden; border-radius: 99px; background: #eee8ed; }
.leave-balance-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#866381,#c27d91); }
.premium-leave-card details { margin-top: 14px; }
.premium-leave-card summary { color: #826c80; cursor: pointer; font-size: .61rem; font-weight: 800; }
.leave-ledger-mini { display: grid; gap: 6px; margin-top: 9px; }
.leave-ledger-mini p { display: grid; grid-template-columns: 45px 1fr; gap: 7px; margin: 0; padding-top: 6px; border-top: 1px solid #eee8ed; font-size: .61rem; }
.leave-ledger-mini p > span { display: grid; color: #756b74; }
.leave-ledger-mini small { color: #a89ea6; }
.premium-leave-apply { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(420px,1.35fr); gap: 28px; padding: clamp(24px,4vw,39px); border-radius: 25px; background: linear-gradient(125deg,#292536,#40354c); color: #fff; box-shadow: 0 22px 45px rgba(41,37,54,.14); }
.leave-apply-copy .employee-eyebrow { color: #e4b2ca; }
.leave-apply-copy h2 { margin: 7px 0 9px; color: #fff; font-size: 1.7rem; }
.leave-apply-copy > p { color: rgba(255,255,255,.62); font-size: .76rem; }
.leave-apply-note { display: grid; grid-template-columns: 35px 1fr; gap: 10px; align-items: center; margin-top: 25px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055); }
.leave-apply-note i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: rgba(228,178,202,.16); color: #e4b2ca; font-style: normal; }
.leave-apply-note span { display: grid; }
.leave-apply-note strong { font-size: .69rem; }
.leave-apply-note small { color: rgba(255,255,255,.5); font-size: .58rem; }
.premium-leave-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 21px; border-radius: 19px; background: #fff; color: var(--employee-ink); }
.premium-leave-form .full { grid-column: 1 / -1; }
.premium-leave-form .employee-button { justify-content: center; min-height: 45px; }
.leave-type-selector { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.leave-type-selector legend { grid-column: 1 / -1; margin-bottom: 2px; color: #514954; font-size: .67rem; font-weight: 850; }
.leave-type-option { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 78px; padding: 12px; border: 1px solid #e8e0e7; border-radius: 14px; background: #fcfafc; cursor: pointer; }
.leave-type-option:has(input:checked) { border-color: #9c7596; background: #f8f0f6; box-shadow: 0 0 0 3px rgba(135,95,131,.08); }
.leave-type-option.sick:has(input:checked) { border-color: #5f8a9f; background: #eef6f8; box-shadow: 0 0 0 3px rgba(72,119,141,.08); }
.leave-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.leave-type-option > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #eee3ec; color: #765873; font-style: normal; font-size: 1rem; }
.leave-type-option.sick > i { background: #e4f0f3; color: #3d7185; }
.leave-type-option > span { display: grid; gap: 3px; }
.leave-type-option > span strong { font-size: .69rem; }
.leave-type-option > span small { color: #8c818a; font-size: .54rem; line-height: 1.4; }
.leave-type-option > b { display: grid; color: #684e65; font-size: 1rem; text-align: right; }
.leave-type-option > b small { color: #9c9099; font-size: .49rem; font-weight: 750; }
.leave-date-range { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: end; gap: 8px; padding: 13px; border-radius: 14px; background: #f7f5f7; }
.leave-date-range > span { padding-bottom: 12px; color: #9b8b98; text-align: center; }
.leave-evidence-field { padding: 12px; border: 1px dashed #d8cbd5; border-radius: 12px; background: #fdfbfc; }
.premium-leave-request-list { display: grid; gap: 10px; }
.premium-leave-request { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 15px; padding: 16px; border: 1px solid #e9e2e7; border-radius: 17px; background: #fffdfa; }
.leave-request-date { display: grid; width: 56px; height: 56px; place-items: center; align-content: center; border-radius: 14px; background: #f3eaf1; color: #765873; }
.leave-request-date strong { font-size: 1.25rem; line-height: 1; }
.leave-request-date span { margin-top: 3px; font-size: .52rem; font-weight: 900; }
.leave-request-copy > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: #978a94; font-size: .59rem; font-weight: 800; }
.leave-request-copy h3 { margin: 5px 0 3px; font-size: .88rem; }
.leave-request-copy > p { margin: 0; color: #7d727a; font-size: .67rem; }
.leave-decision-list { display: grid; gap: 6px; margin-top: 12px; }
.leave-decision-list > span { display: grid; padding: 9px 11px; border-radius: 10px; background: #f7f4f6; font-size: .62rem; }
.leave-decision-list small { color: #938892; }
.leave-request-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.leave-request-actions details { padding: 6px 9px; border: 1px solid #e9e2e7; border-radius: 9px; }
.leave-request-actions summary { cursor: pointer; color: #725d70; font-size: .62rem; font-weight: 800; }
.leave-request-actions form { display: flex; gap: 7px; margin-top: 8px; }
.leave-request-actions input { min-width: 220px; }
.leave-admin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.leave-admin-links a { padding: 9px 12px; border: 1px solid var(--employee-line); border-radius: 10px; background: #fff; color: #6c5a6b; font-size: .65rem; font-weight: 800; }

/* Service requests */
.request-workspace { display: grid; gap: 20px; }
.employee-shell-active .request-workspace > .page-hero { min-height: 188px; padding: clamp(27px,4vw,42px); border: 0; border-radius: 27px; background: linear-gradient(125deg,#243b39,#315b55 58%,#55786a); color: #fff; box-shadow: 0 22px 50px rgba(36,59,57,.15); }
.employee-shell-active .request-workspace > .page-hero .eyebrow { color: #add5c5; }
.employee-shell-active .request-workspace > .page-hero h1 { margin: 6px 0 7px; color: #fff; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.055em; }
.employee-shell-active .request-workspace > .page-hero p { max-width: 650px; color: rgba(255,255,255,.65); }
.request-hero-actions { justify-content: flex-end; max-width: 560px; }
.request-hero-actions .btn { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.1); color: #fff; backdrop-filter: blur(10px); }
.request-hero-actions .btn:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.17); color: #fff; }
.employee-shell-active .request-builder, .employee-shell-active .request-tracking-panel { padding: clamp(22px,3vw,31px); border-radius: 24px; }
.request-builder > .panel-heading { align-items: center; }
.catalogue-discovery { display: grid; gap: 10px; padding: 20px; border: 1px solid #e4ece8; border-radius: 19px; background: #f7faf8; }
.catalogue-discovery > label { color: #3d514d; font-size: .69rem; font-weight: 850; }
.catalogue-discovery > input { min-height: 45px; border-color: #d9e5df; background: #fff; }
.catalogue-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 5px; }
.catalogue-card { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid #dfe8e3; border-radius: 17px; background: #fff; }
.catalogue-card > h3 { margin: 2px 0 0; font-size: .91rem; }
.catalogue-card > p { margin: 0; color: #75827e; font-size: .67rem; }
.catalogue-service-list { display: grid; gap: 6px; margin-top: 6px; }
.catalogue-service { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid #e2e9e5; border-radius: 11px; background: #fafcfb; color: #405550; text-align: left; }
.catalogue-service:hover, .catalogue-service.is-selected { border-color: #84ad9e; background: #edf6f2; color: #245b4d; }
.catalogue-service strong { font-size: .68rem; }
.catalogue-service small { color: #80908b; font-size: .58rem; }
.request-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 24px 0 18px; padding: 0; counter-reset: none; list-style: none; }
.request-steps li { position: relative; display: flex; gap: 7px; align-items: center; justify-content: center; min-height: 46px; border-block: 1px solid #e5e9e7; background: #f7f8f7; color: #8a918e; font-size: .63rem; font-weight: 800; }
.request-steps li:first-child { border-left: 1px solid #e5e9e7; border-radius: 12px 0 0 12px; }
.request-steps li:last-child { border-right: 1px solid #e5e9e7; border-radius: 0 12px 12px 0; }
.request-steps li span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #e9ecea; font-size: .56rem; }
.request-steps li.active { background: #eef7f3; color: #2e6a5b; }
.request-steps li.active span { background: #3f7d6b; color: #fff; }
.request-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.request-choice-primary { position: relative; margin-top: 4px; padding: 15px; border: 1px solid #cee0d8; border-radius: 18px; background: linear-gradient(135deg,#f2faf6,#fff); box-shadow: 0 10px 24px rgba(40,90,73,.05); }
.request-choice { display: grid; gap: 7px; padding: 17px; border: 1px solid #e8e4df; border-radius: 15px; background: #fffdfa; }
.request-choice > label { color: #4d4743; font-size: .67rem; font-weight: 850; }
.request-choice .field-note { margin: 0; color: #928782; font-size: .6rem; }
.request-details-stage { margin-top: 15px; padding: 20px; border: 1px solid #e1e8e4; border-radius: 18px; background: #f9fbfa; }
.request-details-stage[hidden], .request-review[hidden] { display: none; }
.request-details-stage .dynamic-field-grid { gap: 13px; }
.request-stage-actions { justify-content: flex-end; padding-top: 16px; }
.request-review { display: grid; gap: 16px; margin-top: 15px; padding: 21px; border: 1px solid #cfe1d9; border-radius: 18px; background: linear-gradient(145deg,#f3faf6,#fff); }
.request-review h3 { margin: 5px 0; }
.request-review .button-row { justify-content: flex-end; }
.request-tracking-panel .filter-chips { margin-bottom: 18px; }
.request-list { display: grid; gap: 9px; }
.request-list > a { display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid #e8e4df; border-radius: 14px; background: #fffdfa; color: #393331; }
.request-list > a:hover { border-color: #b8d0c7; background: #fbfefc; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(40,70,60,.06); }
.request-list .priority-marker { align-self: stretch; width: 4px; border-radius: 4px; background: #9aa6a1; }
.request-list .priority-marker.high, .request-list .priority-marker.urgent { background: var(--employee-coral); }

/* Security pages inside the employee shell */
.employee-security-page { display: grid; gap: 18px; }
.employee-security-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; min-height: 190px; padding: 45px clamp(27px,4vw,42px) 31px; overflow: hidden; border-radius: 27px; background: linear-gradient(125deg,#262838,#383c57 62%,#5e5266); color: #fff; box-shadow: 0 22px 50px rgba(38,40,56,.16); }
.employee-security-back { position: absolute; top: 19px; left: clamp(27px,4vw,42px); color: rgba(255,255,255,.66); font-size: .64rem; font-weight: 800; }
.employee-security-back:hover { color: #fff; }
.employee-security-hero .employee-eyebrow { color: #e1b9c8; }
.employee-security-hero h1 { margin: 7px 0; color: #fff; font-size: clamp(1.9rem,3.8vw,3rem); letter-spacing: -.05em; }
.employee-security-hero p { margin: 0; color: rgba(255,255,255,.62); font-size: .8rem; }
.employee-security-shield { display: grid; width: 80px; height: 80px; place-items: center; align-self: center; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.075); color: #e8c6d2; font-size: 2rem; }
.employee-security-tabs { display: flex; width: max-content; max-width: 100%; gap: 4px; padding: 5px; border: 1px solid var(--employee-line); border-radius: 14px; background: #f4f1ee; }
.employee-security-tabs a { padding: 9px 14px; border-radius: 10px; color: #827670; font-size: .67rem; font-weight: 800; }
.employee-security-tabs a.active { background: #fff; color: #71556f; box-shadow: 0 5px 14px rgba(65,48,62,.09); }
.employee-security-layout { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(430px,1.28fr); gap: 18px; align-items: start; }
.employee-security-layout.single { max-width: 950px; margin-inline: auto; }
.employee-security-guidance, .employee-security-form-card { padding: clamp(23px,3vw,31px); border: 1px solid var(--employee-line); border-radius: 22px; background: rgba(255,254,252,.96); box-shadow: var(--employee-shadow); }
.employee-security-guidance { background: linear-gradient(145deg,#f5f0f5,#fffdfa); }
.employee-security-guidance h2, .employee-security-form-card h2 { margin: 7px 0 14px; font-size: 1.25rem; }
.employee-security-guidance ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.employee-security-guidance li { position: relative; padding-left: 22px; color: #6f646d; font-size: .71rem; }
.employee-security-guidance li::before { content: "✓"; position: absolute; left: 0; display: grid; width: 15px; height: 15px; place-items: center; border-radius: 5px; background: #ebe0e9; color: #795b74; font-size: .52rem; font-weight: 900; }
.employee-security-guidance > p { margin: 19px 0 0; padding-top: 15px; border-top: 1px solid #e8dfe6; color: #948892; font-size: .63rem; }
.employee-security-form-card > p { color: var(--employee-muted); font-size: .72rem; }
.employee-security-form { display: grid; gap: 14px; margin-top: 19px; }
.employee-security-form .employee-button { min-height: 45px; justify-content: center; }
.employee-recovery-current { padding: 11px 13px; border-radius: 11px; background: #f3eef2; color: #6f5b6b; font-size: .66rem; }

@media (max-width: 1020px) {
    .holiday-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .premium-leave-balances { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .attendance-action-shell, .premium-leave-apply { grid-template-columns: 1fr; }
    .employee-security-layout { grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr); }
}
@media (max-width: 780px) {
    .my-space-layout, .holiday-hero, .employee-security-layout { grid-template-columns: 1fr; }
    .my-space-date { display: none; }
    .holiday-next-card { max-width: 420px; }
    .attendance-premium-hero { align-items: stretch; flex-direction: column; }
    .attendance-hero-stat { min-width: 0; }
    .attendance-time-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .catalogue-card-grid { grid-template-columns: 1fr; }
    .request-workspace > .page-hero { align-items: flex-start; flex-direction: column; }
    .request-hero-actions { justify-content: flex-start; }
    .employee-calendar-detail { grid-template-columns: 1fr; }
    .attendance-issue-tile > summary { grid-template-columns: 42px minmax(0,1fr) auto; }
    .attendance-issue-meta { grid-column: 2; padding: 0; border: 0; }
    .attendance-issue-tile > summary > i { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 580px) {
    .my-space-metrics { grid-template-columns: 1fr; }
    .my-space-form-row, .premium-leave-form, .request-choice-grid { grid-template-columns: 1fr; }
    .my-space-board > header, .holiday-calendar-panel > header, .holiday-calendar-panel > footer { align-items: flex-start; flex-direction: column; }
    .holiday-summary-grid, .premium-leave-balances { grid-template-columns: 1fr; }
    .holiday-month-group { grid-template-columns: 1fr; gap: 10px; }
    .holiday-month-label { grid-template-columns: auto 1fr auto; gap: 7px; align-items: baseline; padding-top: 0; }
    .holiday-date-card { grid-template-columns: 52px minmax(0,1fr); }
    .holiday-date-badge { width: 49px; height: 49px; }
    .holiday-type { grid-column: 2; justify-self: start; }
    .attendance-module-tabs.premium-tabs { grid-template-columns: 1fr; }
    .attendance-time-pair, .employee-shell-active .workday-time-summary { grid-template-columns: 1fr; }
    .attendance-action-shell { padding: 17px; }
    .premium-leave-form .full { grid-column: auto; }
    .leave-type-selector { grid-template-columns: 1fr; }
    .leave-type-selector legend { grid-column: auto; }
    .leave-date-range { grid-template-columns: 1fr; }
    .leave-date-range > span { display: none; }
    .premium-leave-request { grid-template-columns: 1fr; }
    .leave-request-actions form { align-items: stretch; flex-direction: column; }
    .leave-request-actions input { min-width: 0; }
    .request-steps li { font-size: 0; }
    .request-steps li span { font-size: .56rem; }
    .employee-security-hero { grid-template-columns: 1fr; }
    .employee-security-shield { display: none; }
}

/* Connected employee records, documents, assets and compact attendance views. */
.employee-profile-overflow { position: relative; }
.employee-profile-overflow > summary {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .08em;
    list-style: none;
}
.employee-profile-overflow > summary::-webkit-details-marker { display: none; }
.employee-profile-overflow[open] > summary { background: rgba(255,255,255,.15); }
.employee-profile-overflow > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 12;
    display: grid;
    min-width: 230px;
    gap: 5px;
    padding: 9px;
    border: 1px solid #e0e6ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(7,18,37,.22);
}
.employee-profile-overflow > div span { padding: 7px 9px 3px; color: #8a96aa; font-size: .58rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.employee-profile-overflow > div a { padding: 10px; border-radius: 9px; color: #a33c3c; font-size: .72rem; font-weight: 800; }
.employee-profile-overflow > div a:hover { background: #fff1f1; color: #8d2e2e; }
.employee-profile-feature-grid { display: grid; gap: 10px; }
.employee-profile-feature-tile {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e2e8f1;
    border-radius: 14px;
    background: #fafcff;
    color: #16233b;
}
.employee-profile-feature-tile:hover { border-color: #bbccfc; color: #2357d5; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(35,87,213,.07); }
.employee-profile-feature-tile > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #eaf1ff; color: #316cff; font-style: normal; font-size: 1.05rem; }
.employee-profile-feature-tile.issued > i { background: #ecf7f3; color: #148d6b; }
.employee-profile-feature-tile.security > i { background: #f3edff; color: #7758d8; }
.employee-profile-feature-tile > span { display: grid; gap: 3px; }
.employee-profile-feature-tile strong { font-size: .76rem; }
.employee-profile-feature-tile small { color: #78869a; font-size: .61rem; line-height: 1.45; }
.employee-profile-feature-tile > b { color: #8ea2c2; font-size: .9rem; }
.employee-profile-personal-recent { display: grid; gap: 6px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #e5eaf2; }
.employee-profile-personal-recent > span { color: #78859a; font-size: .6rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.employee-profile-personal-recent small { color: #4f5e74; font-size: .63rem; }

.personal-document-page, .document-library-page, .employee-assets-page { display: grid; gap: 18px; }
.personal-document-hero, .document-library-hero, .employee-assets-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    gap: 24px;
    overflow: hidden;
    padding: clamp(27px,4vw,43px);
    border-radius: 27px;
    background: radial-gradient(circle at 88% 0%, rgba(94,139,255,.27), transparent 22rem), linear-gradient(135deg,#101f38,#081426 72%);
    color: #fff;
    box-shadow: 0 24px 54px rgba(8,21,43,.2);
}
.personal-document-hero a { display: inline-flex; margin-bottom: 22px; color: #afc2e6; font-size: .65rem; font-weight: 800; }
.personal-document-hero .employee-eyebrow, .document-library-hero .employee-eyebrow, .employee-assets-hero .employee-eyebrow { color: #84a7ff; }
.personal-document-hero h1, .document-library-hero h1, .employee-assets-hero h1 { margin: 7px 0 9px; color: #fff; font: 800 clamp(2rem,4vw,3.3rem) Manrope,sans-serif; letter-spacing: -.055em; }
.personal-document-hero p, .document-library-hero p, .employee-assets-hero p { max-width: 690px; margin: 0; color: #a5b4ca; font-size: .8rem; line-height: 1.65; }
.personal-document-count, .employee-assets-count { display: grid; min-width: 145px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.personal-document-count strong, .employee-assets-count strong { color: #fff; font: 800 2.35rem Manrope,sans-serif; line-height: 1; }
.personal-document-count span, .employee-assets-count span { margin-top: 5px; color: #9eb0ca; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.personal-document-grid, .issued-document-grid, .employee-asset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.personal-document-card, .issued-document-tile, .employee-asset-card { display: grid; align-content: start; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(15,31,60,.065); }
.personal-document-preview { display: grid; height: 158px; overflow: hidden; place-items: center; background: linear-gradient(145deg,#eaf1ff,#f8faff); color: #316cff; font: 900 1rem Manrope,sans-serif; letter-spacing: .09em; }
.personal-document-preview img { width: 100%; height: 100%; object-fit: cover; }
.personal-document-preview.file { background: linear-gradient(145deg,#f1eff6,#fbfaff); color: #7758d8; }
.personal-document-copy { padding: 17px 17px 10px; }
.personal-document-copy > span, .issued-document-copy > span { color: #316cff; font-size: .56rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.personal-document-copy h2, .issued-document-copy h3 { margin: 5px 0; color: #17243c; font-size: .93rem; }
.personal-document-copy p, .issued-document-copy p { margin: 0; color: #6e7b8f; font-size: .67rem; line-height: 1.5; }
.personal-document-copy small, .issued-document-copy small { display: block; margin-top: 9px; color: #94a0b2; font-size: .58rem; }
.personal-document-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px 17px 17px; }
.personal-document-actions .employee-button { width: 100%; min-width: 0; }
.personal-document-empty { display: grid; min-height: 330px; place-items: center; align-content: center; text-align: center; }
.personal-document-empty > span { display: grid; width: 60px; height: 60px; margin-bottom: 12px; place-items: center; border-radius: 18px; background: #edf3ff; color: #316cff; font-size: 1.4rem; }
.personal-document-empty h2 { margin: 0 0 5px; }
.personal-document-empty p { max-width: 460px; margin: 0; color: var(--employee-muted); font-size: .73rem; }

.document-library-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.document-library-hero .employee-button.secondary { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); }
.document-library-panel, .document-request-history { padding: clamp(22px,3vw,31px); border-radius: 24px; }
.issued-document-preview { display: grid; min-height: 142px; place-items: center; align-content: center; gap: 5px; background: radial-gradient(circle at 80% 5%,rgba(49,108,255,.15),transparent 9rem),linear-gradient(145deg,#f0f5ff,#fbfcff); color: #316cff; }
.issued-document-preview span { font: 900 1.05rem Manrope,sans-serif; letter-spacing: .08em; }
.issued-document-preview small { color: #8494af; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.issued-document-copy { padding: 17px; }
.issued-document-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 17px; border-top: 1px solid #e8edf4; }
.issued-document-footer > div { display: flex; gap: 10px; }
.issued-document-footer a, .employee-text-button { border: 0; background: transparent; color: #316cff; font-size: .62rem; font-weight: 850; }
.issued-document-tile > form { padding: 0 17px 15px; }
.employee-text-button { padding: 0; cursor: pointer; }
.document-request-layout { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(420px,1.25fr); gap: 28px; padding: clamp(25px,4vw,40px); border-radius: 25px; background: linear-gradient(125deg,#202e45,#34496a); color: #fff; box-shadow: 0 22px 48px rgba(19,35,61,.17); }
.document-request-copy .employee-eyebrow { color: #92aff8; }
.document-request-copy h2 { margin: 7px 0 9px; color: #fff; font: 800 1.75rem Manrope,sans-serif; }
.document-request-copy > p { color: rgba(255,255,255,.62); font-size: .76rem; line-height: 1.65; }
.document-request-copy > div { display: grid; gap: 4px; margin-top: 25px; padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.055); }
.document-request-copy strong { font-size: .71rem; }
.document-request-copy small { color: rgba(255,255,255,.56); font-size: .61rem; line-height: 1.5; }
.document-request-form { display: grid; gap: 13px; padding: 22px; border-radius: 20px; background: #fff; color: #101828; }
.document-request-form select, .document-request-form textarea, .document-request-form input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dbe2ec; border-radius: 11px; background: #fff; }
.document-request-form .employee-form-field > small { display: block; margin-top: 6px; color: #7d8aa0; font-size: .58rem; }
.document-request-list { display: grid; gap: 9px; }
.document-request-list article { display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid #e4e9f1; border-radius: 14px; background: #fbfcfe; }
.document-request-marker { align-self: stretch; width: 4px; border-radius: 4px; background: #316cff; }
.document-request-list article > div { display: grid; gap: 3px; }
.document-request-list strong { font-size: .74rem; }
.document-request-list small { color: #8591a4; font-size: .59rem; }
.document-request-list p { margin: 3px 0 0; color: #687589; font-size: .66rem; }

.employee-assets-hero { background: radial-gradient(circle at 88% 0%,rgba(51,196,149,.22),transparent 22rem),linear-gradient(135deg,#132b31,#0c2028 72%); }
.employee-assets-hero .employee-eyebrow { color: #78d8b9; }
.employee-assets-admin { display: flex; justify-content: flex-end; }
.employee-asset-card { padding: 20px; }
.employee-asset-card > header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.employee-asset-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: #eaf7f3; color: #13906c; }
.employee-asset-card header small { color: #8290a4; font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.employee-asset-card h2 { margin: 4px 0 0; color: #17243c; font-size: .95rem; }
.employee-asset-code { margin: 16px 0 12px; padding: 9px 11px; border-radius: 10px; background: #f4f7fa; color: #4f5e72; font-size: .63rem; font-weight: 800; }
.employee-asset-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; margin: 0; border: 1px solid #e5eaf1; border-radius: 13px; background: #e5eaf1; }
.employee-asset-facts > div { padding: 11px; background: #fbfcfe; }
.employee-asset-facts dt { color: #8b97a9; font-size: .54rem; font-weight: 850; text-transform: uppercase; }
.employee-asset-facts dd { margin: 4px 0 0; color: #29374d; font-size: .65rem; font-weight: 750; }
.employee-asset-acknowledged { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 11px; border-radius: 12px; background: #edf8f4; }
.employee-asset-acknowledged > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #d9f1e8; color: #128865; font-weight: 900; }
.employee-asset-acknowledged > div { display: grid; }
.employee-asset-acknowledged strong { color: #20624f; font-size: .67rem; }
.employee-asset-acknowledged small { color: #699183; font-size: .56rem; }
.employee-asset-acknowledge { margin-top: 14px; }
.employee-asset-acknowledge summary { padding: 11px; border-radius: 11px; background: #eef4ff; color: #285fdc; cursor: pointer; font-size: .66rem; font-weight: 850; }
.employee-asset-acknowledge form { display: grid; gap: 10px; margin-top: 10px; }
.employee-asset-history { padding: 0; overflow: hidden; }
.employee-asset-history > summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 21px; cursor: pointer; list-style: none; }
.employee-asset-history > summary span { display: grid; gap: 3px; }
.employee-asset-history > summary strong { font-size: .83rem; }
.employee-asset-history > summary small { color: #8591a4; font-size: .6rem; }
.employee-asset-history-list { display: grid; gap: 8px; padding: 0 21px 21px; }
.employee-asset-history-list article { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e5eaf1; border-radius: 12px; }
.employee-asset-history-list .employee-asset-icon { width: 38px; height: 38px; }
.employee-asset-history-list article > div { display: grid; gap: 3px; }
.employee-asset-history-list strong { font-size: .71rem; }
.employee-asset-history-list small, .employee-asset-history-list article > span:last-child { color: #7f8b9e; font-size: .59rem; }

.employee-updates-panel { margin-bottom: 18px; padding: 20px; }
.employee-updates-panel .employee-card-heading > a { color: #316cff; font-size: .64rem; font-weight: 850; }
.employee-update-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.employee-update-list > a { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 10px; align-items: start; min-width: 0; padding: 14px; border: 1px solid #e4e9f1; border-radius: 14px; background: #fafcff; color: #17243c; }
.employee-update-list > a:hover { border-color: #bfd0ff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35,87,213,.07); }
.employee-update-list > a > span { grid-row: 1 / 3; padding: 5px 7px; border-radius: 8px; background: #edf3ff; color: #316cff; font-size: .52rem; font-weight: 850; text-transform: uppercase; }
.employee-update-list > a > span.circular { background: #ecf7f3; color: #158866; }
.employee-update-list strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-update-list p { grid-column: 2; display: -webkit-box; margin: 0; overflow: hidden; color: #6e7b8f; font-size: .62rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.employee-update-list small { grid-column: 2; color: #99a3b2; font-size: .55rem; }

.employee-register-table { min-width: 760px; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px rgba(15,31,60,.05); }
.attendance-tab-panel:has(.employee-register-table) { overflow-x: auto; }
.employee-register-row { display: grid; grid-template-columns: 105px minmax(210px,1.4fr) repeat(3,minmax(92px,.65fr)) 76px; align-items: center; min-height: 62px; border-top: 1px solid #edf0f5; }
.employee-register-row:first-child { border-top: 0; }
.employee-register-row > span { min-width: 0; padding: 11px 13px; color: #4e5b70; font-size: .65rem; }
.employee-register-row > span > small { display: block; margin-top: 3px; color: #929daf; font-size: .54rem; }
.employee-register-head { min-height: 42px; background: #f6f8fb; }
.employee-register-head > span { color: #7d899c; font-size: .55rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.employee-register-status { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; }
.employee-register-status .attendance-calendar-cell { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; font-size: .57rem; font-style: normal; font-weight: 900; }
.employee-register-status > span { min-width: 0; }
.employee-register-status strong { display: block; overflow: hidden; color: #26344a; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-register-status small { display: block; overflow: hidden; margin-top: 2px; color: #929daf; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-regularization-marker, .employee-regularization-legend b { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #d94040; border-radius: 50%; background: #fff4f4; color: #c62f2f; font-size: .63rem; font-weight: 900; }
.employee-regularization-marker:hover { background: #d94040; color: #fff; }
.employee-regularization-legend { display: inline-flex; align-items: center; gap: 5px; }
.employee-regularization-legend b { display: inline-grid; width: 22px; height: 22px; }
.employee-register-open { color: #316cff; font-size: .61rem; font-weight: 850; }
.premium-attendance-calendar { max-width: none; margin: 18px 0 0; padding: clamp(13px,2vw,20px); border: 1px solid #e0e7f0; border-radius: 20px; background: linear-gradient(145deg,#f8fafd,#fff); box-shadow: 0 13px 32px rgba(23,48,85,.055); }
.premium-attendance-calendar .employee-calendar-day { position: relative; min-height: 92px; justify-content: center; background: #fff; box-shadow: 0 6px 15px rgba(20,41,72,.035); }
.premium-attendance-calendar .employee-calendar-day:hover { border-color: #aabbd1; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(20,41,72,.07); }
.employee-calendar-regularize { position: absolute; top: 6px; right: 6px; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #d94040; border-radius: 50%; background: #fff4f4; color: #c62f2f; font-size: .52rem; font-style: normal; font-weight: 900; }
.employee-calendar-detail { display: grid; grid-template-columns: minmax(180px,1fr) minmax(300px,1.5fr) auto; gap: 15px; align-items: center; margin-top: 14px; }
.employee-calendar-detail .attendance-time-pair { margin: 0; }
.employee-shell-active .attendance-day-list { grid-template-columns: 1fr; align-items: start; }
.attendance-issue-tile { overflow: hidden; border: 1px solid #e1e7ef; border-radius: 15px; background: #fff; }
.attendance-issue-tile > summary { display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(135px,.42fr) auto; align-items: center; gap: 13px; min-height: 68px; padding: 11px 14px; cursor: pointer; list-style: none; }
.attendance-issue-tile > summary::-webkit-details-marker { display: none; }
.attendance-issue-tile > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.attendance-issue-tile > summary > span:nth-child(2) strong { overflow: hidden; color: #26344a; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.attendance-issue-tile > summary > span:nth-child(2) small { overflow: hidden; color: #8793a5; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.attendance-issue-tile > summary > i { color: #9aa5b5; font-style: normal; transition: transform .18s ease; }
.attendance-issue-summary-main { display: grid; min-width: 0; gap: 4px; }
.attendance-issue-summary-main strong { overflow: hidden; color: #26344a; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.attendance-issue-summary-main small { overflow: hidden; color: #8793a5; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.attendance-issue-meta { display: grid; justify-items: start; gap: 3px; padding-left: 13px; border-left: 1px solid #e7ebf1; }
.attendance-issue-meta b { padding: 4px 7px; border-radius: 7px; background: #fff0ed; color: #b84b3e; font-size: .53rem; }
.attendance-issue-meta small { color: #8793a5; font-size: .53rem; }
.attendance-issue-meta.neutral b { background: #edf2f7; color: #607086; }
.attendance-issue-meta.approved b { background: #e9f6ef; color: #2f7954; }
.attendance-issue-meta.rejected b { background: #f9e9e9; color: #9c3e3e; }
.attendance-issue-tile[open] > summary { background: #f7f9fc; }
.attendance-issue-tile[open] > summary > i { transform: rotate(90deg); }
.attendance-issue-date { display: grid; width: 40px; height: 42px; place-items: center; align-content: center; border-radius: 11px; background: #fff1ef; color: #b8493b; }
.attendance-issue-date strong { font-size: .88rem; line-height: 1; }
.attendance-issue-date small { margin-top: 3px; font-size: .48rem; font-weight: 850; text-transform: uppercase; }
.attendance-issue-detail { padding: 14px; border-top: 1px solid #e7ebf1; }
.attendance-issue-detail > p { margin: 0 0 12px; color: #687589; font-size: .65rem; line-height: 1.55; }

.my-space-task { display: block; padding: 0; }
.my-space-task-open { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: start; gap: 12px; width: 100%; padding: 15px; border: 0; background: transparent; color: inherit; text-align: left; }
.my-space-task-open > i { align-self: center; color: #9b8f89; font-style: normal; font-size: 1rem; }
.my-space-task-dialog { width: min(520px,calc(100vw - 28px)); padding: 0; overflow: visible; border: 0; border-radius: 24px; background: transparent; }
.my-space-task-dialog::backdrop { background: rgba(8,15,28,.54); backdrop-filter: blur(4px); }
.my-space-task-dialog-card { position: relative; display: grid; gap: 12px; padding: 28px; border: 1px solid rgba(255,255,255,.5); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(7,17,34,.3); }
.my-space-task-dialog-close { position: absolute; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 10px; background: #f2f4f7; color: #6e798b; font-size: 1.1rem; }
.my-space-task-dialog h2 { margin: 4px 40px 0 0; color: #17243c; font: 800 1.35rem Manrope,sans-serif; }
.my-space-task-dialog [data-space-dialog-notes] { margin: 0; color: #687589; font-size: .74rem; line-height: 1.6; white-space: pre-wrap; }
.my-space-task-dialog-meta { padding: 10px 12px; border-radius: 11px; background: #f5f7fa; color: #617087; font-size: .63rem; font-weight: 750; }
.my-space-task-question { margin: 5px 0 0; color: #27364d; font-size: .78rem; font-weight: 850; }
.my-space-task-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.my-space-task-dialog-actions .employee-button { min-width: 0; }

@media (max-width: 1020px) {
    .personal-document-grid, .issued-document-grid, .employee-asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .document-request-layout { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .personal-document-hero, .document-library-hero, .employee-assets-hero { grid-template-columns: 1fr; align-items: start; }
    .personal-document-count, .employee-assets-count { width: max-content; min-width: 135px; }
    .document-library-hero-actions { justify-content: flex-start; }
    .employee-update-list { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
    .personal-document-grid, .issued-document-grid, .employee-asset-grid { grid-template-columns: 1fr; }
    .personal-document-actions { grid-template-columns: 1fr; }
    .employee-asset-card > header { grid-template-columns: 44px minmax(0,1fr); }
    .employee-asset-card > header .status-chip { grid-column: 2; justify-self: start; }
    .employee-asset-facts { grid-template-columns: 1fr; }
    .document-request-layout { padding: 20px; }
    .document-request-form { padding: 17px; }
    .my-space-task-dialog-card { padding: 23px 18px 18px; }
    .my-space-task-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
    .my-space-task-dialog-actions .employee-button { width: 100%; }
}