:root {
    --ink: #17201f;
    --ink-soft: #34413f;
    --muted: #687571;
    --canvas: #f5f7f6;
    --surface: #ffffff;
    --surface-subtle: #f8faf9;
    --line: #e2e8e5;
    --line-strong: #d4ddd9;
    --brand: #12705f;
    --brand-dark: #0b5145;
    --brand-deep: #0b2c27;
    --brand-soft: #e4f3ef;
    --accent: #e4a144;
    --accent-soft: #fff4df;
    --danger: #b33e4a;
    --danger-soft: #fcebed;
    --blue: #376ca6;
    --violet: #7454a3;
    --shadow-xs: 0 1px 2px rgba(16, 38, 32, .04);
    --shadow-sm: 0 8px 24px rgba(16, 38, 32, .055);
    --shadow-md: 0 20px 50px rgba(12, 35, 29, .14);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; }
body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    font-size: .925rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(1.85rem, 2.5vw, 2.45rem); font-weight: 720; line-height: 1.15; }
h1[tabindex="-1"]:focus { outline: none; }
h2 { margin: 0; font-size: 1.18rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin-top: 0; }
button, input, select, textarea { font: inherit; }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem .85rem 1rem;
    color: #fff;
    background:
        radial-gradient(circle at 20% 0%, rgba(58, 145, 122, .17), transparent 32%),
        linear-gradient(180deg, #0b302a 0%, #092720 100%);
    border-right: 1px solid rgba(255,255,255,.04);
}

.brand { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 .65rem 1.35rem; }
.brand-copy { min-width: 0; }
.brand strong { display: block; color: #fff; font-size: 1rem; font-weight: 720; letter-spacing: -.015em; }
.brand small { display: block; margin-top: .05rem; color: #91b2aa; font-size: .69rem; letter-spacing: .015em; }
.brand-logo {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 39px;
    height: 39px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #176f60, #0b4d42);
    box-shadow: inset 0 1px rgba(255,255,255,.15), 0 6px 16px rgba(0,0,0,.16);
}
.brand-logo svg { width: 100%; height: 100%; fill: currentColor; }
.brand-logo .brand-logo-signal { fill: var(--accent); }
.brand-logo.large { width: 58px; height: 58px; border-radius: 15px; }
.portal-icon { display: inline-block; flex: 0 0 auto; width: 19px; height: 19px; }

.portal-nav { display: flex; flex: 1; flex-direction: column; gap: .22rem; min-height: 0; }
.nav-section-label {
    display: block;
    padding: 1rem .75rem .35rem;
    color: #759a91;
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.nav-section-label:first-child { padding-top: .35rem; }
.portal-nav a,
.portal-nav button {
    position: relative;
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 43px;
    padding: .62rem .72rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #b9d0ca;
    background: transparent;
    font-weight: 590;
    text-decoration: none;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.portal-nav a:hover { color: #fff; background: rgba(255,255,255,.065); }
.portal-nav a.active {
    color: #fff;
    background: rgba(255,255,255,.105);
    border-color: rgba(255,255,255,.075);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.portal-nav a.active::before {
    position: absolute;
    left: -0.2rem;
    width: 3px;
    height: 20px;
    border-radius: 4px;
    background: var(--accent);
    content: "";
}
.portal-nav a.active .portal-icon { color: #f4bd70; }
.nav-spacer { flex: 1; min-height: .75rem; }
.sidebar-foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .8rem .35rem 0;
    padding: .85rem .55rem 0;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #c3d5d0;
    font-size: .7rem;
}
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-weight: 650; }
.sidebar-foot small { margin-top: .05rem; color: #769c93; font-size: .62rem; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #52cf91; box-shadow: 0 0 0 4px rgba(82,207,145,.1); }
.nav-toggle, .nav-toggle-label { display: none; }

.main-shell { min-width: 0; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem clamp(1.15rem, 3.2vw, 2.75rem);
    border-bottom: 1px solid rgba(219,227,223,.92);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(16px) saturate(150%);
}
.topbar-context { display: grid; gap: .2rem; }
.topbar-label { color: var(--muted); font-size: .64rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.topbar-title { color: var(--ink); font-size: .9rem; font-weight: 700; line-height: 1.2; }
.topbar-user-actions { display: flex; align-items: center; gap: .45rem; }
.identity-avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    font-size: .68rem;
    font-weight: 800;
}
.identity-copy { display: grid; line-height: 1.2; }
.identity-copy strong { font-size: .88rem; font-weight: 700; }
.identity-copy small { margin-top: .13rem; color: var(--muted); font-size: .72rem; }
.profile-menu { position: relative; }
.profile-trigger {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    padding: .35rem .4rem .35rem .7rem;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    text-align: right;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.profile-trigger { list-style: none; cursor: pointer; }
.profile-trigger::-webkit-details-marker { display: none; }
.profile-trigger:hover, .profile-menu[open] .profile-trigger { border-color: var(--line); background: var(--surface-subtle); }
.profile-menu[open] .profile-trigger { box-shadow: var(--shadow-xs); }
.profile-caret { width: 7px; height: 7px; margin: 0 .05rem 3px 0; border-right: 1.5px solid #71807b; border-bottom: 1.5px solid #71807b; transform: rotate(45deg); transition: transform .15s ease; }
.profile-menu[open] .profile-caret { margin-bottom: -3px; transform: rotate(225deg); }
.profile-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 61;
    width: 270px;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(12,35,29,.17);
    animation: profile-menu-in .14s ease-out;
}
@keyframes profile-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.profile-summary { display: flex; align-items: center; gap: .7rem; padding: .55rem .55rem .65rem; }
.profile-summary > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.profile-summary strong { overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary small { overflow: hidden; margin-top: .16rem; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.identity-avatar-large { width: 38px; height: 38px; border-radius: 10px; }
.user-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; outline: none; }
.user-avatar {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 34%;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(23,32,31,.08), 0 3px 9px rgba(20,44,38,.11);
    font-weight: 780;
    letter-spacing: -.015em;
    line-height: 1;
}
.user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.user-avatar-xs { width: 24px; height: 24px; border-radius: 7px; font-size: .5rem; }
.user-avatar-sm { width: 32px; height: 32px; border-radius: 9px; font-size: .62rem; }
.user-avatar-md { width: 36px; height: 36px; border-radius: 10px; font-size: .68rem; }
.user-avatar-lg { width: 42px; height: 42px; border-radius: 12px; font-size: .76rem; }
.user-avatar-xl { width: 88px; height: 88px; border-radius: 24px; font-size: 1.35rem; }
.avatar-color-0 { background: linear-gradient(145deg, #126d5d, #0b5145); }
.avatar-color-1 { background: linear-gradient(145deg, #4179b2, #2f5d8d); }
.avatar-color-2 { background: linear-gradient(145deg, #8562b2, #67488f); }
.avatar-color-3 { background: linear-gradient(145deg, #c17b36, #9c5b22); }
.avatar-color-4 { background: linear-gradient(145deg, #b65366, #923747); }
.avatar-color-5 { background: linear-gradient(145deg, #3f8990, #2d6970); }
.avatar-color-6 { background: linear-gradient(145deg, #657a42, #4e6331); }
.avatar-color-7 { background: linear-gradient(145deg, #736d91, #57516f); }
.user-avatar-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 8px);
    z-index: 1200;
    width: max-content;
    max-width: 220px;
    padding: .38rem .52rem;
    color: #fff;
    border-radius: 7px;
    background: #162421;
    box-shadow: var(--shadow-sm);
    font-size: .64rem;
    font-weight: 650;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, 3px);
    transition: opacity .12s ease, transform .12s ease;
}
.user-avatar-tooltip::after { position: absolute; top: 100%; right: 50%; border: 4px solid transparent; border-top-color: #162421; content: ""; transform: translateX(50%); }
.user-avatar-wrap:hover .user-avatar-tooltip, .user-avatar-wrap:focus-visible .user-avatar-tooltip { opacity: 1; transform: translate(50%, 0); }
.person-cell { display: inline-flex; align-items: center; gap: .58rem; min-width: 0; }
.person-copy { min-width: 0; display: grid; line-height: 1.2; }
.person-copy > strong, .person-copy > span { overflow: hidden; color: var(--ink-soft); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.person-copy > strong { font-weight: 700; }
.person-copy small { margin-top: .16rem; color: var(--muted); font-size: .65rem; }
.profile-menu-divider { height: 1px; margin: 0 .35rem .35rem; background: var(--line); }
.profile-dropdown form { margin: 0; }
.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 48px;
    padding: .55rem .65rem;
    color: var(--ink-soft);
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    transition: color .14s ease, background .14s ease;
}
.profile-menu-item:hover { color: var(--ink); background: #f2f6f4; }
.profile-menu-item .portal-icon { width: 18px; height: 18px; color: var(--brand); }
.profile-menu-item > span { display: grid; line-height: 1.2; }
.profile-menu-item strong { font-size: .78rem; font-weight: 700; }
.profile-menu-item small { margin-top: .15rem; color: var(--muted); font-size: .67rem; }
.profile-menu-signout:hover { color: var(--danger); background: var(--danger-soft); }
.profile-menu-signout:hover .portal-icon { color: var(--danger); }

.notification-center { position: relative; }
.notification-trigger {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    list-style: none;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.notification-trigger::-webkit-details-marker { display: none; }
.notification-trigger:hover, .notification-center[open] .notification-trigger { color: var(--brand-dark); border-color: var(--line); background: var(--surface-subtle); }
.notification-trigger .portal-icon { width: 18px; height: 18px; }
.notification-count { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; color: #fff; border: 2px solid #fff; border-radius: 999px; background: var(--danger); font-size: .55rem; font-weight: 800; line-height: 1; }
.notification-dropdown {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    z-index: 61;
    width: 380px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(12,35,29,.18);
    animation: profile-menu-in .14s ease-out;
}
.notification-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1rem .8rem; border-bottom: 1px solid var(--line); }
.notification-dropdown-head > div { display: grid; line-height: 1.2; }
.notification-dropdown-head strong { font-size: .9rem; }
.notification-dropdown-head small { margin-top: .18rem; color: var(--muted); font-size: .67rem; }
.notification-dropdown-head form { margin: 0; }
.notification-mark-all { padding: .25rem 0; color: var(--brand); border: 0; background: transparent; font-size: .68rem; font-weight: 700; }
.notification-mark-all:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.notification-list { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; }
.notification-item-form { margin: 0; }
.notification-item { position: relative; width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .72rem; padding: .78rem 1rem; color: var(--ink-soft); border: 0; border-bottom: 1px solid #edf1ef; background: #fff; text-align: left; transition: background .14s ease; }
.notification-item:hover { background: #f5f8f7; }
.notification-item.is-unread { background: #f2f8f6; }
.notification-item.is-unread:hover { background: #eaf4f1; }
.notification-type-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.notification-type-icon .portal-icon { width: 17px; height: 17px; }
.notification-type-TimeEntryApproved { color: #347252; background: #e8f5ed; }
.notification-type-TimeEntryReturned, .notification-type-WorkItemReturned { color: var(--danger); background: var(--danger-soft); }
.notification-type-TimeEntryCommented { color: #5c5592; background: #efedfa; }
.notification-type-ProjectCompleted { color: var(--blue); background: #eaf2fb; }
.notification-type-WorkItemAssigned { color: var(--violet); background: #f1ecf8; }
.notification-copy { min-width: 0; display: grid; line-height: 1.3; }
.notification-title-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.notification-title-row strong { overflow: hidden; color: var(--ink); font-size: .75rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.notification-unread-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(18,112,95,.1); }
.notification-message { display: -webkit-box; overflow: hidden; margin-top: .2rem; color: var(--muted); font-size: .69rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-copy time { margin-top: .32rem; color: #8b9793; font-size: .61rem; font-weight: 600; }
.notification-loading { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: .55rem; color: var(--muted); font-size: .72rem; }
.notification-empty { min-height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1.5rem; text-align: center; }
.notification-empty > span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: .7rem; color: var(--brand); border-radius: 12px; background: var(--brand-soft); }
.notification-empty strong { font-size: .82rem; }
.notification-empty small { max-width: 240px; margin-top: .25rem; color: var(--muted); font-size: .68rem; }
.notification-view-all { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 43px; color: var(--brand); border-top: 1px solid var(--line); background: var(--surface-subtle); font-size: .7rem; font-weight: 720; text-decoration: none; }
.notification-view-all:hover { color: var(--brand-dark); background: #f0f5f3; }
.notifications-page-panel { max-width: 880px; padding: 0; overflow: hidden; }
.notifications-page-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-subtle); font-size: .7rem; }
.notifications-page-summary strong { color: var(--ink-soft); }
.notification-list-page { max-height: none; }
.notification-list-page .notification-item { grid-template-columns: 42px minmax(0,1fr); padding: 1rem 1.15rem; }
.notification-list-page .notification-type-icon { width: 40px; height: 40px; }
.notification-list-page .notification-title-row strong { font-size: .82rem; }
.notification-list-page .notification-message { font-size: .74rem; }

.toast-region {
    position: fixed;
    top: 84px;
    right: clamp(1rem, 2.4vw, 2rem);
    z-index: 1400;
    width: min(390px, calc(100vw - 2rem));
    display: grid;
    gap: .65rem;
    pointer-events: none;
}
.portal-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .72rem;
    overflow: hidden;
    padding: .9rem .85rem .85rem .9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 13px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 50px rgba(12,35,29,.2);
    pointer-events: auto;
    animation: toast-enter .22s cubic-bezier(.22,.8,.3,1);
}
.toast-success { border-left-color: #28835f; }
.toast-info { border-left-color: var(--blue); }
.toast-warning { border-left-color: #c17b36; }
.toast-error { border-left-color: var(--danger); }
.toast-visual { display: inline-flex; }
.toast-kind-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); }
.toast-success .toast-kind-icon { color: #287252; background: #e7f5ed; }
.toast-info .toast-kind-icon { color: var(--blue); background: #eaf2fb; }
.toast-warning .toast-kind-icon { color: #a36220; background: var(--accent-soft); }
.toast-error .toast-kind-icon { color: var(--danger); background: var(--danger-soft); }
.toast-kind-icon .portal-icon { width: 17px; height: 17px; }
.toast-copy { min-width: 0; display: grid; line-height: 1.3; }
.toast-copy strong { color: var(--ink); font-size: .79rem; font-weight: 730; }
.toast-copy p { margin: .18rem 0 0; color: var(--muted); font-size: .69rem; line-height: 1.42; }
.toast-copy a { width: fit-content; margin-top: .36rem; font-size: .67rem; font-weight: 720; text-decoration: none; }
.toast-close { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -.2rem -.15rem 0 0; padding: 0; color: #71807b; border: 0; border-radius: 7px; background: transparent; font-size: 1.08rem; line-height: 1; text-decoration: none; }
.toast-close:hover { color: var(--ink); background: #edf2ef; text-decoration: none; }
.toast-timer { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: currentColor; opacity: .32; transform-origin: left; animation: toast-timer var(--toast-duration) linear forwards; }
.toast-region-static { position: fixed; }
.toast-region-static .portal-toast { animation: toast-enter .22s ease-out; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes toast-timer { to { transform: scaleX(0); } }

.content { width: 100%; max-width: 1460px; margin: 0 auto; padding: 2rem clamp(1.15rem, 3.2vw, 2.75rem) 4rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.65rem; }
.page-head-copy > p:not(.eyebrow) { max-width: 720px; margin: .55rem 0 0; color: var(--muted); font-size: .92rem; }
.eyebrow { margin: 0 0 .38rem; color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted { color: var(--muted) !important; }
.head-actions, .pager-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem; }
.filter-bar > .btn, .filter-bar > .form-control { min-height: 42px; }
.page-actions { flex: 0 0 auto; }

.panel, .metric-card, .form-card, .center-card, .account-nav-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.panel { padding: 1.2rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.panel-head p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.panel-badge { padding: .24rem .5rem; border-radius: 999px; color: var(--brand-dark); background: var(--brand-soft); font-size: .63rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.text-link { font-size: .78rem; font-weight: 700; text-decoration: none; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar > .muted { font-size: .75rem; }
.toolbar > .filter-bar { flex-wrap: nowrap; }
.toolbar > .filter-bar > .form-control { width: 260px; }
.active-filter-context { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .35rem .42rem .35rem .62rem; color: var(--brand-dark); border: 1px solid #cfe1db; border-radius: 999px; background: var(--brand-soft); font-size: .7rem; }
.active-filter-context > .portal-icon { width: 15px; height: 15px; }
.active-filter-context strong { font-weight: 750; }
.active-filter-context button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #5d7971; background: rgba(255,255,255,.62); cursor: pointer; font-size: 1rem; line-height: 1; }
.active-filter-context button:hover { color: var(--brand-dark); background: #fff; }
.report-filter-panel { margin-bottom: .85rem; }

.form-control, .form-select {
    min-height: 40px;
    padding: .48rem .7rem;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: #fff;
    font-size: .84rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover, .form-select:hover { border-color: #bccbc5; }
.form-control::placeholder { color: #98a39f; }
.form-control:focus, .form-select:focus {
    outline: 0;
    border-color: #4b9a8b;
    box-shadow: 0 0 0 3px rgba(18,112,95,.12);
}
textarea.form-control { min-height: 96px; resize: vertical; }

/* Product-native select and date controls. The popup is rendered by Blazor so
   expanded states keep the same visual language instead of inheriting OS UI. */
.portal-picker { position: relative; min-width: 0; }
.portal-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 42px;
    padding: .55rem .72rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: linear-gradient(180deg, #fff 0%, #fcfdfd 100%);
    box-shadow: 0 1px 2px rgba(12,39,32,.025);
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.25;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.portal-picker-trigger:hover { border-color: #aebfb8; background: #fff; }
.portal-picker-trigger:focus-visible { outline: 0; border-color: #4b9a8b; box-shadow: 0 0 0 3px rgba(18,112,95,.12); }
.portal-picker-trigger.invalid { border-color: #d67782; }
.portal-picker-trigger.invalid:focus { box-shadow: 0 0 0 3px rgba(181,65,78,.12); }
.portal-picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-picker-value.is-placeholder { color: #8b9793; }
.portal-picker-chevron, .portal-picker-calendar-icon { flex: 0 0 auto; width: 17px; height: 17px; color: #71827c; transition: transform .16s ease, color .16s ease; }
.portal-picker.is-open .portal-picker-trigger { border-color: #4b9a8b; box-shadow: 0 0 0 3px rgba(18,112,95,.12); }
.portal-picker.is-open .portal-picker-chevron { color: var(--brand); transform: rotate(180deg); }
.portal-picker.is-open .portal-picker-calendar-icon { color: var(--brand); }
.portal-picker-dismiss { position: fixed; inset: 0; z-index: 1190; padding: 0; border: 0; background: transparent; cursor: default; }
.portal-picker-menu {
    position: fixed;
    z-index: 1200;
    overflow: hidden;
    border: 1px solid #d5dfda;
    border-radius: 12px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 18px 48px rgba(12,39,32,.17), 0 4px 12px rgba(12,39,32,.08);
    animation: picker-open .14s ease-out;
    transform-origin: top center;
}
.portal-picker-menu.opens-above { transform-origin: bottom center; }
@keyframes picker-open { from { opacity: 0; transform: translateY(-4px) scale(.985); } }

.portal-select-menu { display: flex; flex-direction: column; padding: .38rem; }
.portal-select-search { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; padding: .48rem .58rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); }
.portal-select-search .portal-icon { width: 15px; height: 15px; flex: 0 0 auto; color: #7b8d87; }
.portal-select-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: .78rem; }
.portal-select-search input::placeholder { color: #98a39f; }
.portal-select-options { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.portal-select-options::-webkit-scrollbar, .portal-calendar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.portal-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 40px;
    padding: .52rem .62rem;
    border: 0;
    border-radius: 8px;
    color: var(--ink-soft);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: color .12s ease, background-color .12s ease;
}
.portal-select-option:hover, .portal-select-option:focus-visible { outline: 0; color: var(--ink); background: #f1f6f4; }
.portal-select-option.is-selected { color: var(--brand-dark); background: var(--brand-soft); }
.portal-select-option-copy { min-width: 0; display: grid; gap: .12rem; }
.portal-select-option-copy strong { overflow: hidden; font-size: .79rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.portal-select-option-copy small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-select-check { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); stroke-width: 2.2; }
.portal-select-empty { padding: 1.15rem .7rem; color: var(--muted); font-size: .74rem; text-align: center; }

.portal-calendar { padding: .75rem; overflow-y: auto; scrollbar-width: none; }
.portal-calendar-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: .45rem; margin-bottom: .6rem; }
.portal-calendar-head strong { color: var(--ink); font-size: .82rem; font-weight: 720; text-align: center; }
.portal-calendar-nav { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.portal-calendar-nav:hover { color: var(--brand); border-color: var(--line); background: var(--surface-subtle); }
.portal-calendar-nav .portal-icon { width: 16px; height: 16px; }
.portal-calendar-weekdays, .portal-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.portal-calendar-weekdays { margin-bottom: .25rem; }
.portal-calendar-weekdays span { padding: .2rem 0; color: #8a9893; font-size: .59rem; font-weight: 750; text-align: center; text-transform: uppercase; }
.portal-calendar-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 620; }
.portal-calendar-day:hover, .portal-calendar-day:focus-visible { outline: 0; color: var(--brand-dark); background: #edf5f2; }
.portal-calendar-day.is-outside { color: #b2bbb8; font-weight: 520; }
.portal-calendar-day.is-today::after { position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--brand); content: ""; }
.portal-calendar-day.is-selected { color: #fff; background: var(--brand); box-shadow: 0 4px 10px rgba(18,112,95,.2); }
.portal-calendar-day.is-selected:hover { color: #fff; background: var(--brand-dark); }
.portal-calendar-day.is-selected::after { background: #fff; }
.portal-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .55rem; padding: .55rem .18rem 0; border-top: 1px solid var(--line); }
.portal-calendar-text-action { padding: .25rem .2rem; border: 0; color: var(--brand); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 720; }
.portal-calendar-text-action:hover { color: var(--brand-dark); text-decoration: underline; }
.field > .portal-picker { width: 100%; }
.filter-bar > .portal-picker { min-width: 145px; }
.filter-bar > .portal-picker .portal-picker-trigger { min-width: 145px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 40px;
    padding: .48rem .82rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 680;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(18,112,95,.22); outline-offset: 2px; box-shadow: none; }
.btn-primary { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 5px 12px rgba(18,112,95,.14); }
.btn-primary:hover { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-quiet { color: var(--ink-soft); background: #f3f6f5; border-color: var(--line); }
.btn-quiet:hover { color: var(--ink); background: #eaf0ed; border-color: #d5dfda; }
.btn-danger-soft { color: var(--danger); background: var(--danger-soft); border-color: #f1cdd2; }
.btn-danger-soft:hover { color: #8e2935; background: #f8dfe3; border-color: #eabfc5; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-sm { min-height: 32px; padding: .32rem .55rem; font-size: .73rem; }
.btn-lg { min-height: 46px; }
.btn:disabled { cursor: not-allowed; opacity: .48; }

.alert { padding: .78rem .9rem; border: 1px solid; border-radius: 9px; font-size: .83rem; box-shadow: none; }
.alert-success { color: #27664c; background: #eaf6ef; border-color: #cce9d8; }
.alert-danger { color: #8f303b; background: #fcedef; border-color: #f2cfd4; }
.alert-warning { color: #805315; background: #fff6e6; border-color: #f2dfb9; }
.alert-info { color: #315f84; background: #ecf4fb; border-color: #d2e4f3; }

.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.quick-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.quick-grid thead { background: var(--surface-subtle); }
.quick-grid th {
    padding: .76rem .85rem !important;
    color: #65726e;
    border-bottom: 1px solid var(--line);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .075em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.quick-grid th:first-child { padding-left: .95rem !important; }
.quick-grid th:last-child { padding-right: .95rem !important; }
.quick-grid td {
    height: 60px;
    padding: .9rem .85rem !important;
    border-bottom: 1px solid #edf1ef;
    color: var(--ink-soft);
    line-height: 1.4;
    vertical-align: middle;
}
.quick-grid td:first-child { padding-left: .95rem !important; }
.quick-grid td:last-child { padding-right: .95rem !important; }
.quick-grid tbody tr:last-child td { border-bottom: 0; }
.quick-grid tbody tr { transition: background .12s ease; }
.quick-grid tbody tr:hover { background: #f8fbfa; }
.quick-grid td strong { color: var(--ink); font-weight: 680; }
.quick-grid .muted { margin-top: .12rem; font-size: .72rem; }
.quick-grid .head-actions { flex-wrap: nowrap; justify-content: flex-start; }
.quick-grid th > div { justify-content: flex-start !important; text-align: left !important; }
.quick-grid tbody td { text-align: left !important; }
.quick-grid tbody td.cell-number { font-variant-numeric: tabular-nums; }
.quick-grid .cell-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quick-grid td.cell-status .muted { max-width: 220px; margin-right: 0; margin-left: 0; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .52rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #55625f;
    background: #eef2f0;
    font-size: .67rem;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}
.status-pill::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-Active, .status-Approved, .status-Done { color: #26704c; background: #e4f4eb; border-color: #d0eadb; }
.status-Submitted, .status-InProgress, .status-Planned { color: #35668f; background: #eaf2fa; border-color: #d8e6f3; }
.status-Returned, .status-Critical, .overdue { color: #a33642; background: #fbe9eb; border-color: #f3d6da; }
.status-OnHold, .status-Blocked, .status-High { color: #9a601f; background: #fff2e1; border-color: #f5e0bf; }
.status-Inactive, .status-Archived, .status-Low { color: #68736f; background: #eff2f1; border-color: #e0e6e3; }
.quick-grid td .project-code { color: var(--ink); font-weight: 780; letter-spacing: .015em; }
.quick-grid td.cell-reference {
    color: var(--brand-deep);
    font-size: .75rem;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    letter-spacing: .035em;
    white-space: nowrap;
}
.quick-grid th button.col-title {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.quick-grid th button.col-title:hover,
.quick-grid th button.col-title:active {
    background-color: transparent !important;
}
.quick-grid th button.col-title:focus-visible {
    border-radius: 5px;
    outline: 2px solid rgba(15,102,88,.32);
    outline-offset: 3px;
}
.quick-grid .sort-indicator {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin-left: .12rem;
    flex: 0 0 1.35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
    box-shadow: none;
    opacity: 0 !important;
}
.quick-grid .col-sort-asc .sort-indicator {
    border-color: #cfe1da;
    background-color: #eaf4f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f6658' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15V5m0 0L2.5 7.5M5 5l2.5 2.5M10 6h7M10 10h5M10 14h3'/%3E%3C/svg%3E") !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72);
    opacity: 1 !important;
    transform: none !important;
}
.quick-grid .col-sort-desc .sort-indicator {
    border-color: #cfe1da;
    background-color: #eaf4f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f6658' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5v10m0 0l-2.5-2.5M5 15l2.5-2.5M10 6h3M10 10h5M10 14h7'/%3E%3C/svg%3E") !important;
    box-shadow: inset 0 1px rgba(255,255,255,.72);
    opacity: 1 !important;
    transform: none !important;
}
.quick-grid th:not(.col-sort-asc):not(.col-sort-desc) button.col-title:hover .sort-indicator {
    border-color: #b8d4ca;
    background-color: #dfeee8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2361726d' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v12m0-12L3.5 6.5M6 4l2.5 2.5M14 16V4m0 12l-2.5-2.5M14 16l2.5-2.5'/%3E%3C/svg%3E") !important;
    opacity: .72 !important;
}
.quick-grid .col-sort-asc button.col-title:hover .sort-indicator,
.quick-grid .col-sort-desc button.col-title:hover .sort-indicator {
    border-color: #b8d4ca;
    background-color: #dfeee8;
}
.interactive-grid tbody tr { cursor: pointer; }
.interactive-grid tbody tr:focus-within { background: #f5faf8; }
.quick-grid td.cell-select, .quick-grid th.cell-select { width: 44px; padding-right: .25rem !important; text-align: center !important; }
.cell-select input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.cell-select input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .38; }
.row-open-target { min-height: 58px; display: flex; align-items: center; margin: -.9rem -.85rem; padding: .9rem .85rem; }
.row-open-stack { min-width: 120px; align-items: flex-start; flex-direction: column; justify-content: center; }
.row-open-stack .bar-track { width: 100%; }
.selection-toolbar { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; padding: .62rem .72rem; border: 1px solid #cfe1da; border-radius: 10px; background: var(--brand-soft); }
.selection-toolbar strong { margin-right: auto; color: var(--brand-dark); font-size: .78rem; }
.entity-detail { display: grid; gap: 1rem; }
.entity-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.entity-detail-heading h2 { margin: .25rem 0 .12rem; color: var(--ink); font-size: 1.3rem; }
.entity-detail-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.entity-detail-heading .cell-reference { color: var(--brand-deep); font-size: .72rem; font-weight: 780; letter-spacing: .045em; }
.modal-entity-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.modal-entity-actions > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal-form-actions { margin-top: 1rem; }
.modal-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.modal-fieldset:disabled { opacity: .78; }

.audit-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 25px;
    padding: .3rem .58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}
.audit-badge::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; opacity: .82; }
.audit-tone-success { color: #26704c; background: #e4f4eb; border-color: #d0eadb; }
.audit-tone-danger { color: #a33642; background: #fbe9eb; border-color: #f3d6da; }
.audit-tone-info { color: #35668f; background: #eaf2fa; border-color: #d8e6f3; }
.audit-tone-warning { color: #9a601f; background: #fff2e1; border-color: #f5e0bf; }
.audit-tone-violet { color: #72569b; background: #f1ecf8; border-color: #e4d9f1; }
.audit-tone-teal { color: #1f6d61; background: #e5f4f0; border-color: #d0e9e2; }
.audit-tone-neutral { color: #5f6c68; background: #eff2f1; border-color: #e0e6e3; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: .85rem; }
.metric-card { display: flex; align-items: center; gap: .9rem; min-height: 118px; padding: 1rem; }
.metric-card > div { min-width: 0; }
.metric-card strong { display: block; margin: .05rem 0; color: var(--ink); font-size: 1.85rem; font-weight: 730; line-height: 1.1; letter-spacing: -.04em; }
.metric-card small { display: block; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.metric-card strong.metric-period { font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.metric-label { display: block; color: var(--muted); font-size: .7rem; font-weight: 650; }
.metric-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; }
.metric-icon .portal-icon { width: 20px; height: 20px; }
.metric-icon-green { color: var(--brand); background: var(--brand-soft); }
.metric-icon-blue { color: var(--blue); background: #eaf2fb; }
.metric-icon-amber { color: #a3671e; background: var(--accent-soft); }
.metric-icon-violet { color: var(--violet); background: #f1ecf8; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: stretch; gap: .85rem; }
.dashboard-grid > * { min-width: 0; }
.dashboard-wide { grid-column: 1 / -1; }
.bar-list { display: grid; gap: .85rem; padding-top: .2rem; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 52px; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .76rem; }
.bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e8eeeb; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #47a38f); }
.hours-overview { display: grid; gap: .8rem; }
.hours-panel { display: flex; flex-direction: column; }
.hours-total-card { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid #dce8e4; border-radius: 11px; background: linear-gradient(135deg, #f1f8f5, #f8fbfa); }
.hours-total-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: var(--brand); border-radius: 11px; background: #dff1eb; }
.hours-total-icon .portal-icon { width: 20px; height: 20px; }
.hours-total-card > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .08rem .65rem; }
.hours-total-card span { grid-column: 1; color: var(--muted); font-size: .68rem; font-weight: 650; }
.hours-total-card strong { grid-column: 1; color: var(--ink); font-size: 1.65rem; font-weight: 740; line-height: 1.08; letter-spacing: -.04em; }
.hours-total-card small { grid-column: 2; grid-row: 2; color: var(--muted); font-size: .68rem; }
.hours-project-list { display: grid; gap: .55rem; }
.project-hours-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem .8rem; padding: .72rem .8rem; border: 1px solid #e5ebe8; border-radius: 10px; background: #fff; }
.project-hours-copy { min-width: 0; display: grid; }
.project-hours-copy strong { overflow: hidden; color: var(--ink-soft); font-size: .76rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.project-hours-copy small { margin-top: .1rem; color: var(--muted); font-size: .63rem; }
.project-hours-value { color: var(--ink); font-size: .78rem; font-weight: 730; font-variant-numeric: tabular-nums; }
.project-hours-card .bar-track { grid-column: 1 / -1; height: 6px; }
.hours-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .72rem; color: var(--muted); border-top: 1px solid #edf1ef; font-size: .65rem; }
.hours-panel-foot .text-link { flex: 0 0 auto; font-size: .68rem; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; align-items: center; gap: .65rem; padding: .67rem 0; border-bottom: 1px solid #edf1ef; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list li > span:last-child { min-width: 0; display: grid; }
.activity-list strong { display: block; color: var(--ink-soft); font-size: .76rem; font-weight: 650; }
.activity-list small { display: block; margin-top: .12rem; color: var(--muted); font-size: .67rem; }
.workflow-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; color: #dcece8; background: linear-gradient(135deg, #0d3a32, #0a2c27); border-color: #16483f; box-shadow: var(--shadow-sm); }
.workflow-card h2 { color: #fff; }
.workflow-card p:not(.eyebrow) { max-width: 680px; margin: .25rem 0 0; color: #a9c5be; font-size: .78rem; }
.workflow-card .eyebrow { color: #efb965; }
.workflow-card .btn-primary { color: #213027; background: #f0b75f; border-color: #f0b75f; box-shadow: none; }
.workflow-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #f0b75f; background: rgba(255,255,255,.08); }
.workflow-card-compact { width: min(420px, 42vw); min-height: 88px; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; padding: .8rem .9rem; }
.workflow-card-compact > div { min-width: 0; }
.workflow-card-compact .workflow-icon { width: 36px; height: 36px; border-radius: 10px; }
.workflow-card-compact .workflow-icon .portal-icon { width: 17px; height: 17px; }
.workflow-card-compact .eyebrow { margin-bottom: .15rem; font-size: .58rem; }
.workflow-card-compact h2 { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.workflow-card-compact p:not(.eyebrow) { overflow: hidden; margin-top: .12rem; font-size: .67rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.workflow-card-compact .btn { flex: 0 0 auto; white-space: nowrap; }

.pager-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .72rem; }
.pager-row strong { color: var(--ink-soft); }
.pager-summary { display: flex; align-items: center; gap: 1rem; }
.pager-page-size { display: flex; align-items: center; gap: .45rem; }
.pager-page-size > span { font-size: .68rem; white-space: nowrap; }
.pager-page-size .portal-picker { width: 72px; }
.pager-page-size .portal-picker-trigger { min-height: 34px; padding: .36rem .55rem; border-radius: 8px; font-size: .7rem; }
.pager-page-size .portal-picker-menu { min-width: 88px; }
.pager-controls { flex-wrap: nowrap; }
.pager-button { width: 32px; padding: 0; font-size: .9rem; }

.field { display: grid; gap: .32rem; margin-bottom: .85rem; }
.field label, .form-label { color: var(--ink-soft); font-size: .73rem; font-weight: 680; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1rem; }
.field-grid .wide { grid-column: 1 / -1; }
.filter-bar > .field { min-width: 145px; margin-bottom: 0; }
.filter-bar > .field .form-control, .filter-bar > .field .form-select { min-width: 145px; }
.form-card { margin-bottom: 1rem; padding: 1.25rem; }
.validation-message, .text-danger { color: var(--danger) !important; font-size: .72rem; }
.check-line { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; color: var(--ink-soft); font-size: .78rem; }
.check-line input { width: 16px; height: 16px; accent-color: var(--brand); }

.portal-modal-layer { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 1rem; background: rgba(7,25,21,.58); backdrop-filter: blur(6px); animation: modal-fade .15s ease-out; }
.portal-modal-card { width: min(720px, 100%); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 30px 80px rgba(4,25,20,.28); animation: modal-rise .18s ease-out; }
.portal-modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.portal-modal-header h2 { min-width: 0; margin-right: auto; font-size: 1.05rem; }
.portal-modal-back { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: #f6f8f7; }
.portal-modal-back:hover { border-color: #b8cac3; color: var(--brand-dark); background: var(--brand-soft); }
.portal-modal-back:focus-visible { outline: 0; border-color: #4b9a8b; box-shadow: 0 0 0 3px rgba(18,112,95,.12); }
.portal-modal-back .portal-icon { width: 17px; height: 17px; }
.portal-modal-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.portal-modal-header-actions .btn { min-height: 34px; padding: .46rem .68rem; font-size: .66rem; }
.portal-modal-body { padding: 1.2rem; }
.portal-modal-body > p { color: var(--muted); font-size: .83rem; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }

.time-entry-detail { display: grid; gap: 1.15rem; }
.time-entry-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.time-entry-head-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; }
.time-entry-owner { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.time-entry-owner > div { min-width: 0; display: grid; }
.time-entry-owner span { color: var(--muted); font-size: .62rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.time-entry-owner strong { margin-top: .08rem; overflow: hidden; color: var(--ink); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.time-entry-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.time-entry-summary-grid > div { min-width: 0; display: grid; gap: .18rem; padding: .8rem; border-right: 1px solid var(--line); }
.time-entry-summary-grid > div:last-child { border-right: 0; }
.time-entry-summary-grid span, .time-entry-description > span { color: var(--muted); font-size: .59rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.time-entry-summary-grid strong { overflow: hidden; color: var(--ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.time-entry-summary-grid.is-two-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.time-entry-summary-grid.is-two-row > div:nth-child(2) { border-right: 0; }
.time-entry-summary-grid.is-two-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.time-entry-edit-grid > .field:nth-child(1), .time-entry-edit-grid > .field:nth-child(2) { min-width: 0; }
.time-entry-description { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.time-entry-description p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.6; white-space: pre-wrap; }
.history-readonly-note { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; border: 1px solid #d4e6df; border-radius: 11px; color: var(--brand-dark); background: #eff7f4; }
.history-readonly-note > .portal-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .05rem; }
.history-readonly-note > div { display: grid; gap: .12rem; }
.history-readonly-note strong { font-size: .72rem; }
.history-readonly-note span { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.workflow-section { margin-top: .5rem; padding-top: .15rem; }
.workflow-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.workflow-section-head .eyebrow { margin-bottom: .15rem; }
.workflow-section-head h3 { margin: 0; font-size: .98rem; }
.workflow-section-head > span { color: var(--muted); font-size: .63rem; }
.workflow-timeline { margin: 0; padding: 0; list-style: none; }
.workflow-event { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; padding-bottom: 1rem; }
.workflow-event:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 0; left: 16px; width: 1px; background: #dbe5e1; }
.workflow-avatar { position: relative; z-index: 1; padding-top: .05rem; }
.workflow-event-body { min-width: 0; padding: .72rem .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-subtle); }
.workflow-event-title { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.workflow-event-title > span { min-width: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.workflow-event-title strong { color: var(--ink); font-weight: 720; }
.workflow-event-title time { flex: 0 0 auto; color: var(--muted); font-size: .59rem; white-space: nowrap; }
.workflow-recipient { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; color: var(--muted); font-size: .62rem; }
.workflow-recipient .portal-icon { width: 12px; height: 12px; }
.workflow-status-change { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; }
.workflow-status-change > .portal-icon { width: 13px; height: 13px; color: #8ba19b; }
.workflow-status-change .status-pill { min-height: 21px; padding: .16rem .42rem; font-size: .54rem; }
.workflow-comment { margin-top: .6rem; padding: .65rem .72rem; border-left: 3px solid #a7cfc3; border-radius: 0 8px 8px 0; color: var(--ink-soft); background: #fff; font-size: .7rem; line-height: 1.55; white-space: pre-wrap; }
.workflow-empty { padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .7rem; text-align: center; }
.workflow-composer { overflow: hidden; padding: 1rem; border: 1px solid #d5e5df; border-radius: 13px; background: #f4f9f7; box-shadow: inset 0 1px rgba(255,255,255,.75); }
.workflow-composer-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.workflow-composer-head > div { display: grid; gap: .08rem; }
.workflow-composer-head strong { color: var(--ink); font-size: .78rem; }
.workflow-composer-head span { color: var(--muted); font-size: .64rem; }
.workflow-composer-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; color: var(--brand); background: #deeee8; }
.workflow-composer-icon .portal-icon { width: 16px; height: 16px; }
.workflow-composer .field { margin-bottom: .65rem; }
.workflow-composer textarea { min-height: 88px; resize: vertical; background: #fff; }
.workflow-comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.workflow-comment-actions > span { color: var(--muted); font-size: .61rem; }
.workflow-comment-actions .btn { display: inline-flex; align-items: center; gap: .38rem; }
.workflow-comment-actions .btn .portal-icon { width: 14px; height: 14px; }
.workflow-return-action { margin: 1rem -1rem -1rem; border-top: 1px solid #d5e5df; background: rgba(255,255,255,.62); }
.workflow-return-toggle { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: .68rem; padding: .78rem 1rem; color: var(--ink-soft); border: 0; background: transparent; text-align: left; cursor: pointer; transition: background .14s ease; }
.workflow-return-toggle:hover { background: #eef5f2; }
.workflow-return-toggle > span:nth-child(2) { display: grid; min-width: 0; gap: .06rem; }
.workflow-return-toggle strong { color: var(--ink); font-size: .7rem; }
.workflow-return-toggle small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.workflow-return-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #986022; background: #fff1df; }
.workflow-return-icon .portal-icon { width: 16px; height: 16px; }
.workflow-return-chevron { width: 15px; height: 15px; color: #80908b; transition: transform .16s ease; }
.workflow-return-action.is-open .workflow-return-chevron { transform: rotate(180deg); }
.workflow-return-panel { padding: .9rem 1rem 1rem; border-top: 1px solid #e1e9e6; background: #fff; }
.workflow-return-panel .field-grid { grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr); }
.workflow-return-panel textarea { min-height: 78px; }
.workflow-return-locked { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: .65rem; margin: 1rem -1rem -1rem; padding: .72rem 1rem; color: #7b8783; border-top: 1px solid #dce6e2; background: rgba(255,255,255,.52); }
.workflow-return-locked > .portal-icon { width: 17px; height: 17px; color: #8c9a95; }
.workflow-return-locked > span { display: grid; gap: .05rem; }
.workflow-return-locked strong { font-size: .65rem; font-weight: 700; }
.workflow-return-locked small { color: var(--muted); font-size: .59rem; line-height: 1.4; }
.workflow-awaiting-reply { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border: 1px solid #d7e4df; border-radius: 12px; background: #f4f8f6; }
.workflow-awaiting-reply > div { display: grid; gap: .1rem; }
.workflow-awaiting-reply strong { color: var(--ink); font-size: .72rem; }
.workflow-awaiting-reply span { color: var(--muted); font-size: .63rem; line-height: 1.45; }

.empty-state { display: grid; justify-items: center; padding: 2.7rem 1rem; color: var(--muted); text-align: center; }
.empty-state-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: .75rem; border-radius: 12px; color: #72958c; background: #edf4f1; }
.empty-state-icon .portal-icon { width: 20px; height: 20px; }
.empty-state strong { display: block; margin-bottom: .25rem; color: var(--ink); font-size: .95rem; }
.empty-state > span:last-child { max-width: 420px; font-size: .76rem; }

.login-shell { width: min(930px, 100%); min-height: calc(100vh - 9rem); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.login-brand-lockup { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.15rem .15rem; }
.login-brand-lockup > span:last-child { display: grid; }
.login-brand-lockup strong { color: var(--ink); font-size: 1.35rem; font-weight: 760; letter-spacing: -.03em; }
.login-brand-lockup small { margin-top: .08rem; color: var(--muted); font-size: .72rem; font-weight: 620; letter-spacing: .02em; }
.login-layout { width: min(440px, 100%); margin: 0 auto; }
.login-layout.has-demo { width: 100%; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: stretch; gap: 1rem; }
.login-card { min-width: 0; padding: clamp(1.55rem, 3vw, 2.1rem); border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 24px 64px rgba(20,46,38,.1); }
.login-heading { margin-bottom: 1.35rem; }
.login-heading h1 { max-width: 330px; margin: .24rem 0 .4rem; font-size: clamp(1.55rem, 3vw, 1.85rem); line-height: 1.12; letter-spacing: -.035em; }
.login-heading .muted { margin: 0; font-size: .78rem; }
.login-form .field { margin-bottom: 1rem; }
.login-form .form-control { min-height: 46px; }
.login-form .check-line { margin: .2rem 0 1.15rem; }
.login-support { margin: 1.15rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; text-align: center; }
.demo-access-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: clamp(1.55rem, 3vw, 2.1rem); border: 1px solid #d8e6e1; border-radius: 18px; color: var(--ink); background: linear-gradient(150deg, rgba(247,251,249,.98), rgba(236,245,242,.98)); box-shadow: 0 20px 52px rgba(20,46,38,.08); }
.demo-access-card::before { content: ""; position: absolute; z-index: -1; width: 270px; height: 270px; top: -155px; right: -95px; border: 1px solid rgba(32,138,117,.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(32,138,117,.025), 0 0 0 78px rgba(32,138,117,.018); }
.demo-access-copy { max-width: 390px; }
.demo-kicker { display: inline-flex; align-items: center; min-height: 25px; padding: .28rem .55rem; border: 1px solid #cfe4dd; border-radius: 999px; color: var(--brand-dark); background: rgba(255,255,255,.72); font-size: .61rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.demo-access-copy h2 { max-width: 350px; margin: .8rem 0 .42rem; color: var(--ink); font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.15; letter-spacing: -.03em; }
.demo-access-copy p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.demo-role-list { display: grid; gap: .55rem; margin-top: 1.25rem; }
.demo-role-button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .65rem .72rem; border: 1px solid #d8e5e1; border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.8); text-align: left; box-shadow: 0 3px 10px rgba(25,62,52,.025); transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.demo-role-button:hover { transform: translateY(-1px); border-color: #b9d8cf; background: #fff; box-shadow: 0 7px 18px rgba(25,62,52,.07); }
.demo-role-button:focus-visible { outline: 3px solid rgba(32,138,117,.2); outline-offset: 2px; }
.demo-role-button > span:nth-child(2) { min-width: 0; display: grid; }
.demo-role-button strong { color: var(--ink); font-size: .75rem; font-weight: 720; }
.demo-role-button small { margin-top: .15rem; overflow: hidden; color: var(--muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-role-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; font-size: .7rem; font-weight: 780; }
.demo-role-mark.manager { color: #113b32; background: #86d3bf; }
.demo-role-mark.employee { color: #233758; background: #a9c8ee; }
.demo-role-arrow { color: var(--brand); font-size: 1.05rem; transition: transform .16s ease; }
.demo-role-button:hover .demo-role-arrow { transform: translateX(2px); }
.demo-disclosure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .6rem; margin-top: auto; padding-top: 1.1rem; color: var(--muted); font-size: .61rem; line-height: 1.45; }
.demo-disclosure::before { content: "✓"; grid-row: 1 / span 2; width: 22px; height: 22px; display: inline-grid; place-items: center; margin-top: .05rem; border-radius: 50%; color: var(--brand-dark); background: #dcefe9; font-size: .65rem; font-weight: 800; }
.demo-disclosure strong { color: var(--ink-soft); font-size: .64rem; }

.center-card { max-width: 620px; margin: 8vh auto; padding: 1.6rem; }
.public-shell { min-height: 100vh; background: radial-gradient(circle at 15% 5%, rgba(32,138,117,.08), transparent 32rem), var(--canvas); }
.public-content { width: min(1180px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem); }
.demo-account-lock-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #d7e4df; border-radius: 13px; color: var(--ink-soft); background: linear-gradient(135deg, #f3f8f6, #fafcfa); box-shadow: 0 8px 24px rgba(28,65,55,.045); }
.demo-account-lock-icon { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--brand-dark); border-radius: 10px; background: #deeee9; }
.demo-account-lock-icon .portal-icon { width: 19px; height: 19px; }
.demo-account-lock-banner > div { min-width: 0; }
.demo-account-lock-banner strong { display: block; color: var(--ink); font-size: .77rem; }
.demo-account-lock-banner p { max-width: 780px; margin: .2rem 0 0; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.demo-account-lock-badge { padding: .3rem .55rem; border: 1px solid #cce1da; border-radius: 999px; color: var(--brand-dark); background: #edf6f3; font-size: .57rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.account-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; gap: 1rem; }
.account-nav-card { position: sticky; top: 86px; overflow: hidden; padding: .65rem; }
.account-nav-intro { display: flex; align-items: center; gap: .7rem; margin: -.1rem -.1rem .55rem; padding: .55rem .55rem .75rem; border-bottom: 1px solid var(--line); }
.account-nav-intro-icon { display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; color: var(--brand); border-radius: 10px; background: var(--brand-soft); }
.account-nav-intro-icon .portal-icon { width: 18px; height: 18px; }
.account-nav-intro > div { min-width: 0; display: grid; }
.account-nav-intro strong { color: var(--ink); font-size: .78rem; font-weight: 720; }
.account-nav-intro small { margin-top: .08rem; color: var(--muted); font-size: .63rem; }
.account-nav-card .nav { gap: .2rem; }
.account-nav-card .nav-link { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .58rem .65rem; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: .76rem; font-weight: 650; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.account-nav-card .nav-link:hover { color: var(--ink); background: #f3f6f5; }
.account-nav-card .nav-link.active { color: var(--brand-dark); border-color: #d6e9e3; background: var(--brand-soft); }
.account-nav-icon { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #71817c; background: #f1f5f3; }
.account-nav-icon .portal-icon { width: 14px; height: 14px; }
.account-nav-card .nav-link.active .account-nav-icon { color: var(--brand); background: #d8eee7; }
.account-content { min-width: 0; min-height: 420px; padding: 1.35rem; }
.account-settings-fieldset, .demo-account-locked { min-width: 0; margin: 0; padding: 0; border: 0; }
.demo-account-locked :is(input, textarea, select, button, .btn, .avatar-file-field) { opacity: .58; cursor: not-allowed !important; filter: saturate(.72); }
.demo-account-locked :is(a, label, button, input, textarea, select) { pointer-events: none; }
.demo-account-locked .profile-photo-card, .demo-account-locked .profile-details-card, .demo-account-locked .personal-data-card { background: #f7f9f8; }
.account-content > h3:first-child, .account-content > h2:first-child, .account-content > h1:first-child { margin-top: 0; }
.account-content hr { border-color: var(--line); opacity: 1; }
.account-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.account-section-head h3 { margin: 0; font-size: 1.25rem; }
.account-section-head p:not(.eyebrow) { margin: .3rem 0 0; color: var(--muted); font-size: .78rem; }
.personal-data-card { max-width: 760px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); }
.personal-data-card-head { display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem; }
.personal-data-icon { display: inline-grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: var(--brand); border-radius: 11px; background: var(--brand-soft); }
.personal-data-icon .portal-icon { width: 20px; height: 20px; }
.personal-data-card-head > div { min-width: 0; }
.personal-data-card h4 { margin: 0; color: var(--ink); font-size: .94rem; }
.personal-data-card-head p { max-width: 590px; margin: .28rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.personal-data-warning { display: flex; align-items: flex-start; gap: .7rem; margin: 0 1.1rem; padding: .78rem .85rem; color: #7f3f24; border: 1px solid #efd9ca; border-radius: 10px; background: #fff8f2; }
.personal-data-warning > span { display: inline-grid; flex: 0 0 auto; margin-top: .05rem; }
.personal-data-warning .portal-icon { width: 17px; height: 17px; }
.personal-data-warning > div { min-width: 0; }
.personal-data-warning strong { display: block; color: #71351f; font-size: .75rem; }
.personal-data-warning p { margin: .18rem 0 0; color: #9a6650; font-size: .68rem; line-height: 1.45; }
.personal-data-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .55rem; margin-top: 1.1rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line); background: #fff; }
.personal-data-actions form { margin: 0; }
.personal-data-actions .portal-icon { width: 16px; height: 16px; }
.profile-settings-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); gap: 1rem; }
.profile-photo-card, .profile-details-card { min-width: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-subtle); }
.profile-photo-preview { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-photo-preview > div { min-width: 0; display: grid; }
.profile-photo-preview strong { overflow: hidden; font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-photo-preview > div span { margin-top: .2rem; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.avatar-upload-form { display: grid; gap: .7rem; margin-bottom: .65rem; }
.avatar-file-field { position: relative; display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px dashed #b9cbc5; border-radius: 10px; color: var(--ink-soft); background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.avatar-file-field:hover { border-color: var(--brand); background: #f4faf8; }
.avatar-file-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.avatar-file-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; color: var(--brand); border-radius: 9px; background: var(--brand-soft); }
.avatar-file-field > span:last-of-type { display: grid; }
.avatar-file-field strong { font-size: .74rem; }
.avatar-file-field small { margin-top: .15rem; color: var(--muted); font-size: .64rem; }
.profile-details-card h4 { margin: 0; color: var(--ink); font-size: .95rem; }
.profile-details-card > p { margin: .25rem 0 1rem; font-size: .7rem; }

.loading { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 160px; padding: 2rem; color: var(--muted); font-size: .78rem; }
.spinner { width: 19px; height: 19px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#blazor-error-ui { display: none; position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 2000; padding: .85rem 1rem; border: 1px solid #efd5a3; border-radius: 10px; background: #fff7e7; box-shadow: var(--shadow-md); }

@media (max-width: 1180px) {
    .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .workflow-card-compact { width: min(390px, 42vw); }
}

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; padding: .8rem 1rem; }
    .brand { min-height: 46px; padding: 0; }
    .brand-logo { width: 36px; height: 36px; }
    .nav-toggle-label { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; gap: 4px; width: 38px; height: 36px; place-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.07); cursor: pointer; }
    .nav-toggle-label span { display: block; width: 17px; height: 1.5px; background: #c9ddd8; }
    .portal-nav { display: none; padding-top: .75rem; }
    .nav-toggle:checked ~ .portal-nav { display: flex; }
    .nav-section-label { padding-top: .65rem; }
    .sidebar-foot { display: none; }
    .topbar { position: relative; }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .dashboard-wide { grid-column: auto; }
    .login-shell { min-height: calc(100vh - 2.5rem); }
    .login-layout.has-demo { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
    .demo-disclosure { margin-top: 1rem; }
    .public-content { padding: 1.25rem; }
    .account-layout { grid-template-columns: 1fr; }
    .account-nav-card { position: static; }
    .account-nav-intro { display: none; }
    .profile-settings-grid { grid-template-columns: 1fr; }
    .account-nav-card .nav { flex-direction: row !important; flex-wrap: wrap; }
    .account-nav-card .nav-link { white-space: nowrap; }
}

@media (max-width: 680px) {
    .topbar { min-height: 62px; }
    .topbar-label, .profile-trigger .identity-copy, .profile-caret { display: none; }
    .profile-trigger { min-height: 42px; padding: .28rem; }
    .profile-dropdown { width: min(270px, calc(100vw - 2rem)); }
    .topbar-user-actions { gap: .15rem; }
    .notification-dropdown { position: fixed; top: 8.7rem; right: 1rem; width: calc(100vw - 2rem); max-height: calc(100vh - 10rem); }
    .notification-list { max-height: calc(100vh - 18rem); }
    .toast-region { top: 72px; right: 1rem; }
    .demo-account-lock-banner { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .demo-account-lock-badge { grid-column: 2; justify-self: start; }
    .time-entry-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .time-entry-detail-head { align-items: flex-start; flex-direction: column; }
    .time-entry-head-controls { width: 100%; justify-content: flex-start; }
    .time-entry-summary-grid > div:nth-child(2) { border-right: 0; }
    .time-entry-summary-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .workflow-event-title { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .workflow-comment-actions { align-items: stretch; flex-direction: column; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .page-head > .page-actions { width: 100%; }
    .metrics, .field-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 102px; }
    .workflow-card { grid-template-columns: auto 1fr; }
    .workflow-card .btn { grid-column: 1 / -1; }
    .workflow-card-compact { width: 100%; }
    .bar-row { grid-template-columns: minmax(90px, 1fr) 1.5fr 42px; gap: .5rem; }
    .content { padding-top: 1.4rem; }
    .panel { padding: .9rem; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .filter-bar { align-items: stretch; }
    .filter-bar > * { flex: 1 1 100%; }
    .toolbar > .filter-bar { flex-wrap: wrap; }
    .toolbar > .filter-bar > .form-control { width: 100%; }
    .quick-grid th { padding: .7rem .65rem !important; }
    .quick-grid td { height: 56px; padding: .8rem .65rem !important; }
    .pager-row { align-items: flex-start; flex-direction: column; }
    .pager-summary { width: 100%; justify-content: space-between; }
    .portal-modal-layer { align-items: end; padding: .5rem; }
    .portal-modal-card { max-height: calc(100vh - 1rem); border-radius: 15px; }
}

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