:root {
    color-scheme: light;
    --ink: #182522;
    --muted: #65736f;
    --line: #dfe7e3;
    --canvas: #f4f7f5;
    --surface: #fff;
    --green-950: #102c25;
    --green-900: #173f35;
    --green-800: #205547;
    --green-700: #27705d;
    --green-100: #e2f1eb;
    --green-50: #f0f8f5;
    --blue: #2868a9;
    --amber: #aa6817;
    --red: #b33a3a;
    --violet: #7152a7;
    --shadow: 0 8px 30px rgba(20, 46, 39, .07);
    --radius: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-size: 15px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-900); }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { margin-bottom: .25rem; font-size: 1.18rem; letter-spacing: -.015em; }
h3 { font-size: 1rem; }
:focus-visible { outline: 3px solid rgba(39, 112, 93, .3); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.muted { color: var(--muted); }
.centered { text-align: center; }
.eyebrow { display: block; margin-bottom: .35rem; color: var(--green-700); font-size: .71rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Loading and application-level failures */
.app-loading, .state-panel { min-height: 280px; display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); }
.spinner { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; border: 3px solid #d5e1dc; border-top-color: var(--green-700); border-radius: 50%; animation: spin .75s linear infinite; }
.spinner.small { width: 17px; height: 17px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-progress { position: absolute; display: block; width: 7rem; height: 7rem; inset: 25vh 0 auto; margin: auto; }
.loading-progress circle { fill: none; stroke: #d8e4df; stroke-width: .55rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--green-700); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s; }
.loading-progress-text { position: absolute; inset: calc(25vh + 2.8rem) 0 auto; text-align: center; font-size: .8rem; font-weight: 800; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Laden …"); }
#blazor-error-ui { display: none; position: fixed; z-index: 3000; right: 1rem; bottom: 1rem; left: 1rem; max-width: 700px; margin: auto; padding: .9rem 3rem .9rem 1rem; color: #fff; background: #7d2828; border-radius: 10px; box-shadow: var(--shadow); }
#blazor-error-ui a { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: 1rem; cursor: pointer; }
.blazor-error-boundary { padding: 1rem; color: #fff; background: #8c3030; border-radius: 10px; }
.blazor-error-boundary::after { content: "Ein unerwarteter Fehler ist aufgetreten."; }

/* Shell and navigation */
.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 100; inset: 0 auto 0 0; width: 250px; display: flex; flex-direction: column; padding: 1.25rem .8rem 1rem; color: #e5f0ec; background: linear-gradient(165deg, var(--green-950), #163c33 65%, #19483c); }
.brand { height: 62px; display: flex; align-items: center; gap: .8rem; padding: 0 .65rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { color: #fff; font-size: 1.12rem; letter-spacing: .04em; }
.brand small { margin-top: .25rem; color: #a9c6bc; font-size: .72rem; letter-spacing: .06em; }
.brand-mark { width: 38px; height: 38px; position: relative; display: inline-block; flex: 0 0 auto; overflow: hidden; background: #fff; border-radius: 10px; transform: rotate(45deg); }
.brand-mark i { position: absolute; display: block; width: 13px; height: 43px; top: -3px; transform: rotate(-45deg); }
.brand-mark i:nth-child(1) { left: 0; background: #e5b739; }
.brand-mark i:nth-child(2) { left: 13px; background: #4e9b7d; }
.brand-mark i:nth-child(3) { left: 26px; background: #4882b5; }
.brand-mark.large { width: 48px; height: 48px; }
.nav-list { flex: 1; padding-top: 1rem; overflow-y: auto; }
.nav-heading { display: block; padding: .3rem .85rem .45rem; color: #7fa99b; font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-heading.section { margin-top: 1.1rem; }
.nav-list a, .sidebar-footer a, .sidebar-footer button { width: 100%; min-height: 43px; display: flex; align-items: center; gap: .75rem; margin: .15rem 0; padding: .62rem .75rem; color: #bfd4cc; background: transparent; border: 0; border-radius: 9px; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.nav-list a:hover, .sidebar-footer a:hover, .sidebar-footer button:hover { color: #fff; background: rgba(255,255,255,.075); }
.nav-list a.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 #e6bd55; }
.nav-icon { width: 21px; display: inline-grid; place-items: center; color: #9fc0b5; font-size: 1.15rem; }
.sidebar-footer { padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer button:disabled { opacity: .65; }
.sidebar-footer small { display: block; padding: .8rem .75rem 0; color: #769a8f; font-size: .64rem; }
.app-main { min-width: 0; flex: 1; margin-left: 250px; }
.topbar { height: 70px; position: sticky; z-index: 50; top: 0; display: flex; align-items: center; padding: 0 clamp(1rem, 3vw, 2rem); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; background: transparent; border: 0; border-radius: 8px; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: var(--ink); border-radius: 2px; }
.topbar-context { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .75rem; }
.context-dot { width: 8px; height: 8px; background: #34a074; border-radius: 50%; box-shadow: 0 0 0 4px #e7f5ef; }
.topbar-user { margin-left: auto; }
.user-link { display: flex; align-items: center; color: var(--ink); }
.avatar { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--green-900); background: var(--green-100); border: 1px solid #c9e1d7; border-radius: 50%; font-size: .72rem; font-weight: 800; }
.user-copy { display: flex; flex-direction: column; margin-left: .65rem; line-height: 1.2; }
.user-copy strong { font-size: .82rem; }
.user-copy small { margin-top: .2rem; color: var(--muted); font-size: .68rem; }
.page-content { width: 100%; max-width: 1580px; margin: auto; padding: clamp(1.25rem, 3vw, 2.25rem); }
.security-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .65rem 1rem; color: #6b410a; background: #fff2d5; border-bottom: 1px solid #ebce93; font-size: .82rem; }
.security-banner a { color: #70450e; font-weight: 800; text-decoration: underline; }

/* Shared cards, headers, controls */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.page-header p { margin-bottom: 0; color: var(--muted); }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.date-chip { padding: .55rem .8rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-size: .76rem; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .9rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; font-weight: 700; font-size: .82rem; cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s; }
.button:hover:not(:disabled) { color: var(--ink); box-shadow: 0 4px 15px rgba(20,46,39,.1); transform: translateY(-1px); }
.button:disabled { opacity: .58; cursor: not-allowed; }
.button.primary { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.button.primary:hover:not(:disabled) { color: #fff; background: var(--green-800); }
.button.secondary { background: #fff; }
.button.danger { color: #fff; background: var(--red); border-color: var(--red); }
.button.danger-outline { color: var(--red); background: #fff; border-color: #dca8a8; }
.button.danger-ghost { color: var(--red); border-color: transparent; background: transparent; }
.button.wide { width: 100%; }
.small-button { min-height: 34px; padding: .4rem .7rem; font-size: .74rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.compact { box-shadow: none; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.card-heading h2 { margin: 0; }
.text-link, .text-action, .text-link { padding: 0; color: var(--green-700); background: none; border: 0; font-weight: 700; font-size: .78rem; cursor: pointer; }
.breadcrumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--muted); font-size: .75rem; }
.breadcrumbs a { font-weight: 700; }
.badge, .health-pill { width: fit-content; display: inline-flex; align-items: center; padding: .24rem .5rem; color: #53615d; background: #edf1ef; border: 1px solid transparent; border-radius: 99px; font-size: .66rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.badge.success, .health-pill.success { color: #176044; background: #e2f3eb; border-color: #c3e4d5; }
.badge.info, .health-pill.info { color: #245d91; background: #e7f1fa; border-color: #cadef0; }
.badge.warning, .health-pill.warning { color: #825312; background: #fff1d7; border-color: #edd39e; }
.badge.danger, .health-pill.danger { color: #922f2f; background: #fce7e7; border-color: #edc7c7; }
.badge.locked { color: #5e4a77; background: #f0ebf7; border-color: #dcd0eb; }
.success { color: #247654 !important; }
.info { color: var(--blue) !important; }
.warning { color: var(--amber) !important; }
.danger { color: var(--red) !important; }
.neutral { color: var(--muted) !important; }
.alert { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid; border-radius: 10px; font-size: .82rem; }
.alert > span:first-child { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 900; }
.alert-danger { color: #772828; background: #fff0f0; border-color: #edc4c4; }
.alert-warning { color: #70490f; background: #fff5df; border-color: #ecd29d; }
.alert-success { color: #185b41; background: #eaf7f1; border-color: #c5e5d7; }
.alert.prominent { padding: 1rem 1.2rem; }
.alert .icon-button { margin-left: auto; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 1.35rem; cursor: pointer; }
.empty-state { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.empty-state .empty-icon { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 1rem; color: var(--green-700); background: var(--green-50); border: 1px solid #d6e9e1; border-radius: 50%; font-size: 1.8rem; }
.empty-state h2 { margin-bottom: .35rem; }
.empty-state p { max-width: 460px; margin-bottom: 0; color: var(--muted); }
.empty-actions { display: flex; gap: .6rem; margin-top: 1rem; }

/* Forms */
.field { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.field label, .field > span:first-child { color: #34433f; font-size: .76rem; font-weight: 800; }
.field label small { color: var(--muted); font-weight: 500; }
input:not([type=checkbox]):not([type=radio]), textarea, select, output { width: 100%; min-height: 42px; padding: .58rem .7rem; color: var(--ink); background: #fff; border: 1px solid #cfdad6; border-radius: 8px; transition: border .15s, box-shadow .15s; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green-700); outline: 0; box-shadow: 0 0 0 3px rgba(39,112,93,.12); }
input:disabled, textarea:disabled, select:disabled { color: #77827f; background: #f2f5f3; cursor: not-allowed; }
.field small { color: var(--muted); font-size: .69rem; }
.valid.modified:not([type=checkbox]) { border-color: #55a383; }
.invalid { border-color: var(--red) !important; }
.validation-message { color: var(--red); font-size: .69rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .separator { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.check-row { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink); cursor: pointer; }
.check-row.inline { align-items: center; }
.check-row input, .choice-card input, .permission-list input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green-700); }
.check-row span { display: flex; flex-direction: column; }
.check-row small { color: var(--muted); font-size: .7rem; }
.password-field { position: relative; }
.password-field input { padding-right: 5.5rem !important; }
.password-field button { position: absolute; inset: 4px 4px 4px auto; padding: 0 .6rem; color: var(--green-700); background: #f0f6f3; border: 0; border-radius: 6px; font-size: .68rem; font-weight: 800; cursor: pointer; }
.calculated output { display: flex; align-items: center; color: var(--green-800); background: var(--green-50); font-weight: 800; }

/* Dashboard */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { min-height: 118px; display: flex; align-items: center; gap: .9rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card > div { min-width: 0; display: flex; flex-direction: column; }
.metric-card span:not(.metric-icon) { color: var(--muted); font-size: .7rem; font-weight: 700; }
.metric-card strong { margin: .1rem 0; font-size: 1.65rem; line-height: 1.15; }
.metric-card small { color: var(--muted); font-size: .66rem; }
.metric-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: 1.2rem; }
.metric-icon.green { color: #237158; background: #e3f2ec; }
.metric-icon.amber { color: #a0671a; background: #fff0d9; }
.metric-icon.blue { color: #346eaa; background: #e7f0fa; }
.metric-icon.violet { color: #7653a6; background: #f0ebf8; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr); gap: 1rem; }
.projects-panel, .activity-panel { padding: 1.1rem; }
.project-rows { margin: 0 -.35rem; }
.project-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto 20px; align-items: center; gap: .8rem; padding: .85rem .4rem; color: var(--ink); border-top: 1px solid #edf1ef; border-radius: 7px; }
.project-row:hover { color: var(--ink); background: var(--green-50); }
.project-color { align-self: stretch; min-height: 50px; background: #a9b2af; border-radius: 4px; }
.project-color.success { background: #3b9a73; }.project-color.info { background: #4c84b8; }.project-color.warning { background: #d3973e; }.project-color.danger { background: #c85858; }
.project-main { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.project-title { display: flex; align-items: center; gap: .45rem; }
.project-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-main > span { overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.mini-progress { width: 100%; height: 4px; overflow: hidden; margin-top: .15rem; background: #e9eeeb; border-radius: 9px; }
.mini-progress i { display: block; height: 100%; background: var(--green-700); border-radius: inherit; }
.project-progress { min-width: 100px; display: flex; flex-direction: column; align-items: flex-end; }
.project-progress strong { font-size: 1rem; }
.health-text { font-size: .67rem; font-weight: 800; }
.row-arrow { color: #8c9995; font-size: 1.4rem; }
.activity-list { margin: 0; padding: 0; list-style: none; }
.activity-list li { position: relative; display: flex; gap: .7rem; padding: 0 0 1rem; }
.activity-list li:not(:last-child)::before { content: ""; position: absolute; top: 13px; bottom: 0; left: 5px; width: 1px; background: var(--line); }
.activity-dot { z-index: 1; width: 11px; height: 11px; flex: 0 0 auto; margin-top: 4px; background: #97a39f; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #cfd8d4; }
.activity-dot.green { background: #3c9a73; }.activity-dot.blue { background: #5089bd; }.activity-dot.violet { background: #7959a8; }
.activity-list strong { display: block; font-size: .76rem; }
.activity-list p { margin: .1rem 0; color: var(--muted); font-size: .69rem; }
.activity-list time { color: #899590; font-size: .63rem; }

/* Project catalogue and progress */
.toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .75rem; }
.search-field { min-width: 220px; position: relative; flex: 1; }
.search-field span { position: absolute; top: 50%; left: .7rem; color: #84918d; transform: translateY(-50%); }
.search-field input { padding-left: 2rem !important; }
.filter-field { display: flex; align-items: center; gap: .5rem; }
.filter-field label { color: var(--muted); font-size: .7rem; font-weight: 700; }
.filter-field select { min-width: 150px; }
.result-count { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.project-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.project-card { min-width: 0; display: flex; flex-direction: column; padding: 1rem; color: var(--ink); transition: transform .15s, box-shadow .15s, border .15s; }
.project-card:hover { color: var(--ink); border-color: #bcd4ca; box-shadow: 0 12px 36px rgba(20,46,39,.12); transform: translateY(-2px); }
.project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.project-card h2 { margin: .2rem 0 0; }
.project-number { color: var(--green-700); font-size: .67rem; font-weight: 800; letter-spacing: .07em; }
.project-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .85rem 0; color: var(--muted); font-size: .7rem; }
.project-meta span { display: flex; align-items: center; gap: .3rem; }
.project-meta i { color: #87a098; font-style: normal; }
.locked-note, .read-only-note { display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem; padding: .45rem .6rem; color: #634e79; background: #f3eff8; border: 1px solid #e1d7ed; border-radius: 8px; font-size: .67rem; font-weight: 700; }
.progress-overview { margin-top: auto; }
.progress-labels { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.progress-labels > div { display: flex; align-items: baseline; gap: .35rem; }
.progress-labels strong { font-size: 1.1rem; }.progress-labels span:not(.health-pill) { color: var(--muted); font-size: .65rem; }
.progress-track { height: 9px; position: relative; overflow: visible; background: #e8eeeb; border-radius: 99px; }
.progress-fill { height: 100%; display: block; background: #879791; border-radius: inherit; }
.progress-fill.success { background: #399872; }.progress-fill.info { background: #4f87b9; }.progress-fill.warning { background: #d1963c; }.progress-fill.danger { background: #c55252; }
.expected-marker { width: 2px; height: 15px; position: absolute; top: -3px; background: var(--ink); border-radius: 2px; transform: translateX(-1px); }
.progress-caption { display: flex; justify-content: space-between; margin-top: .3rem; color: #87928f; font-size: .58rem; }
.progress-message { margin: .55rem 0 0; color: var(--muted); font-size: .69rem; }
.project-card-footer { display: flex; justify-content: space-between; margin-top: .8rem; padding-top: .7rem; color: var(--muted); border-top: 1px solid #edf1ef; font-size: .68rem; }
.project-card-footer strong { color: var(--green-700); }

/* Project detail */
.title-badges { display: flex; gap: .4rem; margin-bottom: .5rem; }
.immutable-banner, .confidential-note { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; padding: .8rem 1rem; color: #58416f; background: #f4f0f8; border: 1px solid #ded2e9; border-radius: 10px; }
.immutable-banner > span, .confidential-note > span { margin-top: .1rem; }
.immutable-banner p, .confidential-note p { margin: .1rem 0 0; font-size: .72rem; }
.confidential-note { color: #5f4a1e; background: #fff8e9; border-color: #ecdcb7; }
.detail-tabs { display: flex; gap: .2rem; overflow-x: auto; margin-bottom: 1rem; padding: .35rem; background: #e9eeeb; border-radius: 11px; scrollbar-width: thin; }
.detail-tabs button { min-width: max-content; display: flex; align-items: center; justify-content: center; gap: .4rem; flex: 1; padding: .58rem .7rem; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: .75rem; font-weight: 800; cursor: pointer; }
.detail-tabs button.active { color: var(--green-900); background: #fff; box-shadow: 0 2px 8px rgba(20,46,39,.08); }
.tab-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; }
.tab-toolbar p { margin: 0; color: var(--muted); }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.overview-grid > .card { padding: 1.1rem; }
.progress-card .progress-overview { margin-top: 1.2rem; }
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.2rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.stat-strip > div { display: flex; flex-direction: column; }
.stat-strip span { color: var(--muted); font-size: .65rem; }
.stat-strip strong { font-size: .95rem; }
.date-range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin: 1.3rem 0; }
.date-range > div { display: flex; flex-direction: column; }
.date-range span { color: var(--muted); font-size: .65rem; }
.date-range strong { font-size: .82rem; }
.range-line { height: 2px; position: relative; background: #cfdbd6; }
.range-line::before, .range-line::after { content: ""; width: 7px; height: 7px; position: absolute; top: -3px; background: var(--green-700); border-radius: 50%; }.range-line::after { right: 0; }
.schedule-message { margin: 0; padding: .55rem; background: #f1f5f3; border-radius: 7px; font-size: .72rem; font-weight: 700; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; margin: .9rem 0 0; }
.detail-list > div { min-width: 0; display: flex; flex-direction: column; padding-bottom: .55rem; border-bottom: 1px solid #edf1ef; }.detail-list .full { grid-column: 1 / -1; }
.detail-list dt { color: var(--muted); font-size: .66rem; }.detail-list dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .8rem; font-weight: 700; }
.quick-actions { display: grid; gap: .6rem; margin-top: .8rem; }
.quick-actions button { display: flex; align-items: center; gap: .7rem; padding: .65rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: left; cursor: pointer; }
.quick-actions button:hover { background: var(--green-50); }.quick-actions button div { display: flex; flex: 1; flex-direction: column; }.quick-actions small { color: var(--muted); font-size: .67rem; }.quick-actions i { color: var(--green-700); font-style: normal; }

/* Tables and tab summaries */
.summary-strip, .team-summary, .preview-stats { display: flex; align-items: center; gap: 0; margin-bottom: .8rem; padding: .65rem 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.summary-strip > div { min-width: 150px; display: flex; flex-direction: column; padding: 0 1rem; border-right: 1px solid var(--line); }.summary-strip > div:last-child { border-right: 0; }
.summary-strip span { color: var(--muted); font-size: .65rem; }.summary-strip strong { font-size: .95rem; }
.data-table-wrap { max-width: 100%; overflow-x: auto; box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.data-table th { padding: .7rem .75rem; color: #687570; background: #f5f8f6; border-bottom: 1px solid var(--line); font-size: .64rem; letter-spacing: .035em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { max-width: 360px; padding: .72rem .75rem; border-bottom: 1px solid #edf1ef; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #f9fbfa; }
.data-table tfoot td { color: var(--green-900); background: var(--green-50); border-top: 1px solid #cfe1da; font-weight: 800; }
.actions-col { width: 90px; text-align: right !important; }
.description-cell { min-width: 180px; overflow-wrap: anywhere; }
.cell-subtitle { display: block; margin-top: .15rem; color: var(--muted); font-size: .65rem; }
.hours-pill, .quantity-pill { display: inline-block; padding: .25rem .48rem; color: #285c8b; background: #eaf2f9; border-radius: 6px; font-weight: 800; white-space: nowrap; }
.quantity-pill { color: #5d4b75; background: #f1ecf7; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions button { min-width: 30px; height: 30px; padding: 0 .35rem; color: var(--green-700); background: transparent; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }.row-actions button:hover { background: var(--green-50); }
.row-actions .danger-text { color: var(--red); font-size: 1.15rem; }
.read-only-note { margin: 0 0 .8rem; }
.earned-preview { margin-top: .8rem; padding: .65rem; color: var(--green-800); background: var(--green-50); border-radius: 8px; font-size: .7rem; }

/* Team */
.team-summary { width: fit-content; gap: .9rem; padding: .55rem 1rem; color: var(--muted); font-size: .7rem; }
.team-summary span + span { padding-left: .9rem; border-left: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.team-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: 1rem; box-shadow: none; }
.large-avatar { width: 46px; height: 46px; }
.team-card h3 { margin: 0; }.team-card p { margin: .05rem 0 .35rem; color: var(--muted); font-size: .68rem; }
.team-actions { position: absolute; top: .55rem; right: .55rem; }.team-actions button { width: 28px; height: 28px; color: var(--green-700); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }.team-actions .danger-text { color: var(--red); font-size: 1.1rem; }
.assigned-date { grid-column: 1 / -1; padding-top: .5rem; color: var(--muted); border-top: 1px solid #edf1ef; font-size: .62rem; }

/* Modal */
.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(8,24,20,.58); backdrop-filter: blur(3px); animation: fade .12s ease-out; }
.modal-card { width: min(100%, 560px); max-height: calc(100vh - 2rem); overflow: hidden; background: #fff; border-radius: 15px; box-shadow: 0 25px 80px rgba(0,0,0,.25); animation: rise .16s ease-out; }
.modal-card.large { width: min(100%, 820px); }
.modal-card > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }.modal-card header h2 { margin: 0; font-size: 1.25rem; }
.modal-body { max-height: calc(100vh - 102px); overflow-y: auto; padding: 1.2rem; }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.danger-callout { padding: .8rem; color: #792c2c; background: #fff0f0; border: 1px solid #edc5c5; border-radius: 9px; }.danger-callout p { margin: .25rem 0 0; font-size: .75rem; }

/* Authentication and profile */
.auth-layout { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 2rem 1rem 4rem; background: linear-gradient(150deg, #ecf4f1, #f8faf9 58%, #e7f0ec); }
.auth-layout footer { position: absolute; bottom: 1.1rem; color: #76847f; font-size: .65rem; }
.auth-decoration { position: absolute; inset: 0; pointer-events: none; }.auth-decoration span { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .5; }.auth-decoration span:nth-child(1) { width: 450px; height: 450px; top: -230px; right: -100px; background: #b9d7cb; }.auth-decoration span:nth-child(2) { width: 300px; height: 300px; bottom: -170px; left: -80px; background: #c7dbe7; }.auth-decoration span:nth-child(3) { width: 140px; height: 140px; top: 25%; left: 12%; background: #f2dfa9; opacity: .2; }
.login-card { z-index: 1; width: min(100%, 430px); padding: 1.6rem; background: rgba(255,255,255,.97); border: 1px solid #d8e4df; border-radius: 18px; box-shadow: 0 22px 60px rgba(19,54,44,.14); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1.6rem; }.login-brand > div { display: flex; flex-direction: column; line-height: 1; }.login-brand strong { font-size: 1.3rem; letter-spacing: .06em; }.login-brand div span { margin-top: .3rem; color: var(--green-700); font-size: .75rem; letter-spacing: .08em; }
.login-heading { margin-bottom: 1.2rem; text-align: center; }.login-heading h1 { font-size: 1.65rem; }.login-heading p { color: var(--muted); font-size: .78rem; }
.login-card form { display: grid; gap: .9rem; }
.login-card .check-row { font-size: .72rem; }
.login-security { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.2rem; padding: .7rem; color: #5f6f69; background: #f3f7f5; border-radius: 9px; }.login-security > span { color: var(--green-700); }.login-security p { margin: 0; font-size: .66rem; }
.profile-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.5fr); gap: 1rem; }.profile-grid > .card { padding: 1.2rem; }
.profile-card { display: flex; align-items: center; flex-direction: column; text-align: center; }.profile-avatar { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: .8rem; color: var(--green-900); background: var(--green-100); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #bedbce; font-size: 1.25rem; font-weight: 800; }.profile-card h2 { margin: 0; }.profile-card > p { color: var(--muted); font-size: .72rem; }.profile-card .detail-list { width: 100%; margin-top: 1.2rem; text-align: left; }

/* Import */
.import-steps { max-width: 620px; display: flex; align-items: center; margin: 0 auto 1.2rem; }.import-steps span { display: flex; align-items: center; gap: .4rem; color: #8b9793; font-size: .7rem; font-weight: 800; white-space: nowrap; }.import-steps span.active { color: var(--green-800); }.import-steps i { width: 26px; height: 26px; display: grid; place-items: center; color: #71807b; background: #e6ece9; border-radius: 50%; font-style: normal; }.import-steps .active i { color: #fff; background: var(--green-700); }.import-steps b { height: 1px; flex: 1; margin: 0 .5rem; background: #cfd9d5; }
.upload-card { min-height: 330px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 2rem; text-align: center; }.upload-icon { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 1rem; color: var(--green-700); background: var(--green-50); border: 1px dashed #95beae; border-radius: 17px; font-size: 2rem; }.upload-card p { color: var(--muted); }.file-picker { position: relative; margin: .5rem; }.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-card > small { color: var(--muted); }.upload-progress { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }.upload-progress p { margin: 0; font-size: .72rem; }
.import-help { margin-top: 1rem; padding: 1rem; }.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }.format-grid div { display: flex; flex-direction: column; padding: .7rem; background: #f6f8f7; border-radius: 8px; }.format-grid strong { font-size: .75rem; }.format-grid span { margin-top: .2rem; color: var(--muted); font-size: .67rem; }
.preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; padding: .8rem 1rem; box-shadow: none; }.preview-header > div { display: flex; align-items: center; gap: .7rem; }.preview-header h2, .preview-header p { margin: 0; }.preview-header p { color: var(--muted); font-size: .68rem; }.file-type { padding: .45rem; color: #fff; background: var(--green-700); border-radius: 6px; font-size: .65rem; font-weight: 900; }
.preview-stats { width: fit-content; gap: 1rem; padding: .55rem 1rem; font-size: .7rem; }.preview-stats span + span { padding-left: 1rem; border-left: 1px solid var(--line); }.preview-stats strong { margin-right: .2rem; }
.invalid-row { background: #fff8f8 !important; }.row-errors { margin: .35rem 0 0; padding-left: 1rem; color: var(--red); font-size: .65rem; }
.sticky-actions { position: sticky; z-index: 20; bottom: .5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 9px 30px rgba(20,46,39,.15); backdrop-filter: blur(8px); }.sticky-actions > div { display: flex; flex-direction: column; }.sticky-actions span { color: var(--muted); font-size: .68rem; }.blocked-hint { color: var(--red); font-size: .7rem; text-align: right; }.import-success { max-width: 620px; margin: 2rem auto; padding: 2rem; text-align: center; }.success-check { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; background: #399872; border-radius: 50%; font-size: 2rem; }.warning-list { margin: 1rem 0; padding: .8rem; background: #fff8e8; border-radius: 8px; text-align: left; }

/* Administration */
.admin-security-note, .admin-security-note { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; padding: .7rem .9rem; color: #5d4c24; background: #fff8e9; border: 1px solid #eadbb6; border-radius: 9px; }.admin-security-note p, .admin-security-note p { margin: 0; font-size: .72rem; }
.user-cell { display: flex; align-items: center; gap: .6rem; }.user-cell > div { min-width: 0; display: flex; flex-direction: column; }.user-cell small { color: var(--muted); }.tag-list { display: flex; flex-wrap: wrap; gap: .25rem; }.tag { display: inline-block; padding: .18rem .4rem; color: #4b6059; background: #edf2ef; border-radius: 5px; font-size: .62rem; }.muted-row { opacity: .65; }.protected-label { color: var(--muted); font-size: .65rem; }.admin-actions .text-action { margin-left: .5rem; }
.access-assignment, .permission-picker { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }.assignment-heading h3 { margin: 0; }.assignment-heading p { margin: .15rem 0 .7rem; color: var(--muted); font-size: .7rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.choice-card { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem; background: #f7f9f8; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }.choice-card > span, .permission-list label > span { display: flex; flex-direction: column; }.choice-card strong, .permission-list strong { font-size: .74rem; }.choice-card small, .permission-list small { color: var(--muted); font-size: .64rem; }
.direct-permissions { margin-top: .8rem; border: 1px solid var(--line); border-radius: 9px; }.direct-permissions summary { display: flex; justify-content: space-between; padding: .65rem .75rem; font-size: .74rem; font-weight: 800; cursor: pointer; }.direct-permissions summary span { color: var(--muted); font-size: .65rem; }.direct-permissions > p { padding: 0 .75rem; color: var(--muted); font-size: .67rem; }
.permission-group { padding: .5rem .75rem .75rem; }.permission-group h4 { margin: 0 0 .4rem; color: var(--green-700); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }.permission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }.permission-list label { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem; background: #f7f9f8; border-radius: 7px; cursor: pointer; }.permission-list code { color: #82908b; font-size: .58rem; }.permission-tools { display: flex; justify-content: flex-end; gap: .8rem; margin: -.5rem 0 .5rem; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.role-card { display: flex; flex-direction: column; padding: 1rem; }.role-card-heading { display: flex; align-items: center; gap: .7rem; }.role-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--green-700); background: var(--green-50); border-radius: 10px; }.role-card-heading h2 { margin: 0; }.role-card-heading div span { color: var(--muted); font-size: .64rem; }.role-card > p { min-height: 42px; margin: .8rem 0; color: var(--muted); font-size: .72rem; }.role-stats { display: flex; gap: 1rem; padding: .55rem 0; border-block: 1px solid #edf1ef; font-size: .68rem; }.role-permission-preview { min-height: 64px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: .25rem; padding: .65rem 0; }.role-card footer { display: flex; justify-content: flex-end; gap: .4rem; margin-top: auto; }
.not-found { min-height: 60vh; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; }.not-found > span { color: #c5d3ce; font-size: 5rem; font-weight: 900; line-height: 1; }.not-found p { color: var(--muted); }

/* Breakpoints */
@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .project-card-grid, .team-grid, .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .activity-panel { max-height: none; }
}

@media (max-width: 840px) {
    .sidebar { width: min(84vw, 280px); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 15px 0 40px rgba(0,0,0,.18); }.sidebar.open { transform: translateX(0); }
    .sidebar-scrim { position: fixed; z-index: 90; inset: 0; background: rgba(5,20,16,.42); border: 0; }
    .app-main { margin-left: 0; }.menu-button { display: block; margin-right: .75rem; }.topbar { height: 62px; }
    .page-content { padding: 1.2rem 1rem 2rem; }.page-header { align-items: flex-start; flex-direction: column; }.page-header .header-actions { justify-content: flex-start; }
    .overview-grid, .profile-grid { grid-template-columns: 1fr; }
    .toolbar { align-items: stretch; flex-wrap: wrap; }.search-field { flex-basis: 100%; }.result-count { margin-left: auto; }
    .form-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }.format-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    body { font-size: 14px; }.topbar-context { display: none; }.user-copy { display: none; }.topbar-user { margin-left: auto; }
    .security-banner { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .metric-grid, .project-card-grid, .team-grid, .role-grid, .form-grid.two, .form-grid.three, .choice-grid, .permission-list { grid-template-columns: 1fr; }
    .metric-card { min-height: 100px; }.dashboard-header .date-chip { display: none; }
    .project-progress { min-width: 80px; }.project-row { grid-template-columns: 4px minmax(0,1fr) auto; }.project-row .row-arrow { display: none; }.project-title .badge { display: none; }
    .filter-field { flex: 1; }.filter-field select { min-width: 0; }.result-count { width: 100%; text-align: right; }
    .detail-tabs button { flex: 0 0 auto; }.tab-toolbar { align-items: flex-start; flex-direction: column; }.tab-toolbar .header-actions { justify-content: flex-start; }
    .stat-strip { grid-template-columns: 1fr; }.stat-strip > div { align-items: center; flex-direction: row; justify-content: space-between; padding: .3rem 0; }.date-range { grid-template-columns: 1fr; }.range-line { display: none; }
    .summary-strip { display: grid; grid-template-columns: repeat(2,1fr); }.summary-strip > div { min-width: 0; border-right: 0; }.summary-strip > div + div { border-left: 1px solid var(--line); }
    .data-table-wrap { overflow: visible; background: transparent; border: 0; }
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }.data-table tbody { display: grid; gap: .7rem; }.data-table tbody tr { padding: .65rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 3px 12px rgba(20,46,39,.04); }.data-table td { max-width: none; display: grid; grid-template-columns: 105px minmax(0,1fr); gap: .6rem; padding: .4rem .3rem; border-bottom: 1px solid #edf1ef; }.data-table td::before { content: attr(data-label); color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.data-table .row-actions { display: flex; justify-content: flex-end; border-bottom: 0; }.data-table .row-actions::before { display: none; }.data-table tfoot { display: none; }
    .team-summary { width: 100%; overflow-x: auto; white-space: nowrap; }.modal-backdrop { align-items: end; padding: 0; }.modal-card, .modal-card.large { max-height: 92vh; border-radius: 16px 16px 0 0; }.modal-body { padding: 1rem; }.form-actions { position: sticky; bottom: -1rem; margin-inline: -1rem; padding: .8rem 1rem 0; background: #fff; }
    .login-card { padding: 1.25rem; }.auth-layout { align-items: start; padding-top: 1rem; }.profile-grid .detail-list { grid-template-columns: 1fr; }
    .import-steps span { font-size: 0; }.import-steps span i { font-size: .7rem; }.preview-header, .sticky-actions { align-items: flex-start; flex-direction: column; }.sticky-actions .button { width: 100%; }.preview-stats { width: 100%; overflow-x: auto; }
}

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

.secret-code { display: block; margin-top: .35rem; padding: .75rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #f4f7f5; font-size: .82rem; letter-spacing: .04em; user-select: all; }
.secret-code.wrap { overflow-wrap: anywhere; white-space: normal; letter-spacing: 0; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.recovery-codes code { padding: .65rem; border: 1px solid var(--line); border-radius: 7px; background: #f4f7f5; text-align: center; user-select: all; }

@media (max-width: 620px) { .recovery-codes { grid-template-columns: 1fr; } }