:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --border: #d8dee5;
    --text: #1c2530;
    --text-muted: #5d6b7a;
    --accent: #1f6f43;
    --accent-dark: #175734;
    --danger: #b3261e;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(16, 24, 32, .08), 0 1px 2px rgba(16, 24, 32, .04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2 { margin: 0; font-weight: 600; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Login ---------- */

.login-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #1d5138;
    overflow: hidden;
}

/* Generated scene fills the viewport behind the card. */
.forest {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.login-content { position: relative; z-index: 1; width: 100%; display: grid; place-items: center; }

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
    padding: 32px;
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 4px;
}

.login-subtitle {
    margin: 4px 0 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }

.field-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
}

.field-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.login-error, .login-notice {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 14px;
}

.login-error { background: #fdecea; color: var(--danger); }
.login-notice { background: #e7f4ec; color: var(--accent-dark); }

.login-version {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-primary {
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.btn-link {
    border: none;
    background: none;
    padding: 0;
    color: var(--accent);
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn-link:hover { text-decoration: underline; }
.btn-link:disabled { opacity: .6; cursor: default; }

/* ---------- Home ---------- */

.home-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.search-box {
    flex: 1;
    max-width: 360px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
}

.port-progress { font-size: 13px; color: var(--text-muted); }

.page-status { color: var(--text-muted); padding: 24px 0; }
.page-status.error { color: var(--danger); }

.nav-group { margin-bottom: 28px; }

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 104px;
    padding: 16px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    text-align: center;
    text-decoration: none;
}

a.tile:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(16, 24, 32, .12);
}

.tile-icon { font-size: 26px; line-height: 1; }
.tile-title { font-size: 13px; font-weight: 500; }

.tile-pending { opacity: .55; cursor: not-allowed; }

.tile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text-muted);
}

/* ---------- Blazor infrastructure ---------- */

.loading-progress { position: relative; display: block; width: 8rem; margin: 20vh auto 1rem; }

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text { text-align: center; font-weight: 600; }

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 12px 20px;
    background: #ffe9c8;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 10px;
    right: 16px;
    cursor: pointer;
}

/* ---------- Page header ---------- */

.page-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
}

.page-head h1 { font-size: 22px; }

.back-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.back-link:hover { text-decoration: underline; }

/* ---------- Data table ---------- */

.table-scroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: #fafbfc;
    white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f7f9fa; }

.cell-description { min-width: 280px; color: var(--text-muted); }

/* Status colours mirror GetStatusColor in the WinForms form. */
.status { font-weight: 600; white-space: nowrap; }
.status-finished     { color: #008c3c; }
.status-started      { color: #0066cc; }
.status-testing      { color: #c88c00; }
.status-not-started  { color: #969696; }

/* ---------- Tracker grid ---------- */

.btn-compact { padding: 8px 14px; font-size: 14px; }

.grid-scroll { max-height: calc(100vh - 260px); overflow: auto; }

.grid-table { font-size: 13px; }

.grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

.col-lock { margin-left: 4px; opacity: .5; font-size: 11px; }

.grid-table td.cell {
    padding: 2px 4px;
    position: relative;
    min-width: 120px;
}

.cell-input {
    width: 100%;
    min-width: 110px;
    padding: 5px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    color: inherit;
}

.cell-input:hover { border-color: var(--border); }

.cell-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(31, 111, 67, .15);
}

.cell-number { text-align: right; }
.cell-textarea { resize: vertical; min-height: 32px; }
.cell-multi { min-height: 56px; }
.cell-checkbox { margin: 6px; width: 16px; height: 16px; }

.cell-readonly {
    display: block;
    padding: 5px 6px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

td.saving .cell-input { background: #fffbe6; }

td.cell-invalid .cell-input {
    border-color: var(--danger);
    background: #fdecea;
}

.cell-error {
    position: absolute;
    top: 2px;
    right: 4px;
    color: var(--danger);
    font-weight: 700;
    cursor: help;
}

/* ---------- Attachments ---------- */

.attachments { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 3px 0; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 190px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #f2f5f7;
    font-size: 12px;
}

.chip a {
    color: var(--accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip a:hover { text-decoration: underline; }

.chip-remove {
    border: none;
    background: none;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.chip-remove:hover { color: var(--danger); }

.chip-add { cursor: pointer; border-style: dashed; color: var(--text-muted); }
.chip-add:hover { border-color: var(--accent); color: var(--accent); }
.chip-disabled { opacity: .6; cursor: default; }

.col-actions { width: 36px; text-align: center; }

.row-delete {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.row-delete:hover { color: var(--danger); }

/* ---------- Resizable columns ---------- */

/* Fixed layout makes the <col> widths authoritative. */
.grid-table { table-layout: fixed; }

/* No overflow clipping here: the options popover is an absolutely positioned child
   sitting below the header, and overflow:hidden would hide it entirely.
   Long header text is truncated by .th-label instead. */
.grid-table thead th {
    position: relative;
}

/* Lift above sibling headers while its popover is open. */
.grid-table thead th.th-open { z-index: 30; }

.th-label {
    display: inline-block;
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.col-resizer:hover { background: var(--accent); opacity: .35; }

.col-actions-width { width: 36px; }

.grid-table td { overflow: hidden; }

/* ---------- Column options popover ---------- */

.th-menu {
    border: none;
    background: none;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
}

.th-menu:hover { color: var(--accent); }

.options-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 260px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 32, .18);
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    font-size: 13px;
    white-space: normal;
}

/* Right-hand columns open leftwards so the popover is not cut off by the
   horizontal scroll container. */
.options-popover.align-right { left: auto; right: 0; }

.options-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.options-list { list-style: none; margin: 0 0 8px; padding: 0; }

.options-list li {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.options-input { flex: 1; min-width: 0; padding: 4px 6px; font-size: 13px; }

.options-move {
    border: none;
    background: none;
    padding: 0 2px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
}

.options-move:disabled { opacity: .3; cursor: default; }
.options-move:not(:disabled):hover { color: var(--accent); }

.options-add { display: flex; gap: 6px; align-items: center; }
.options-empty { margin: 0 0 8px; color: var(--text-muted); }
.options-error { margin: 8px 0 0; color: var(--danger); }

.options-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
}

/* ---------- App shell (sidebar + topbar) ---------- */

:root {
    --sidebar-w: 218px;
    --sidebar-w-collapsed: 64px;
    --navy: #0d2440;
    --navy-deep: #091b30;
    --navy-hover: #16355a;
    --brand-blue: #1a73e8;
}

/* Flex rather than grid tracks: transitioning grid-template-columns does not
   interpolate here, which left the sidebar stuck at its expanded width.
   A width transition on a flex item animates reliably. */
.shell {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .18s ease;
}

.shell-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-brand {
    padding: 14px 12px;
    display: flex;
    justify-content: center;
}

/* The logo is navy-on-transparent, so it needs a light plate to read on the sidebar. */
.sidebar-brand img {
    width: 100%;
    max-width: 150px;
    height: auto;
    background: #fff;
    border-radius: 6px;
    padding: 7px 9px;
}

.shell-collapsed .sidebar-brand { padding: 12px 6px; }
.shell-collapsed .sidebar-brand img { max-width: 100%; padding: 4px; }

.sidebar-nav { display: flex; flex-direction: column; padding: 6px 0 20px; overflow-y: auto; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    color: #cdd9e6;
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
    border-left: 3px solid transparent;
}

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

a.nav-item:hover { background: var(--navy-hover); color: #fff; }

.nav-item.nav-active {
    background: var(--brand-blue);
    color: #fff;
    border-left-color: #7fb4ff;
    font-weight: 600;
}

/* Sections that exist in the design but have no page yet. */
.nav-soon { color: #7e93ab; cursor: default; }
.nav-soon:hover { color: #93a8c0; }

.shell-collapsed .nav-text { display: none; }
.shell-collapsed .nav-item { justify-content: center; padding: 11px 0; gap: 0; border-left-width: 0; }

/* ---- Top bar ---- */

.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.hamburger { flex: 0 0 auto; }

.greeting {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    white-space: nowrap;
}

.greeting-name { color: var(--brand-blue); font-weight: 700; }
.greeting-sep { color: var(--border); }
.greeting-when { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.icon-button:hover { background: #eef2f6; color: var(--text); }
.icon-button svg { width: 20px; height: 20px; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---- Content ---- */

.content { flex: 1; padding: 22px 24px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* Data-heavy pages use the full width; the tile grid keeps the reading cap. */
.content:has(.page-wide) { max-width: none; padding: 20px 16px; }

@media (max-width: 820px) {
    .shell .sidebar { width: var(--sidebar-w-collapsed); }
    .shell .nav-text { display: none; }
    .shell .nav-item { justify-content: center; padding: 11px 0; gap: 0; border-left-width: 0; }
    .greeting-when { display: none; }
}

/* ---------- Dashboard ---------- */

/* Empty for now; charts and graphs will be placed here. Reserves height so the
   content area does not collapse to nothing. */
.dashboard-canvas { min-height: 60vh; }