:root {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #263d34;
    background: #f4f6f4;
    --green: #215d48;
    --border: #dae4dd;
    --muted: #6b7e73;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--green); }
.topbar {
    height: 80px;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(24px, calc((100vw - 1250px) / 2));
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 27px; color: #233e31; text-decoration: none; letter-spacing: -1px; }
.brand-icon { display: grid; place-items: center; background: var(--green); color: white; width: 34px; height: 36px; border-radius: 9px; font-size: 22px; }
.brand-dot { color: #70a386; margin-left: -9px; }
.identity { display: flex; gap: 16px; align-items: center; font-size: 14px; }
.identity > span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1250px; padding: 0 24px; margin: 36px auto; min-height: 70vh; }
h1 { font-size: 32px; letter-spacing: -1px; margin: 8px 0; }
h2 { font-size: 20px; margin: 0 0 18px; }
p { line-height: 1.6; }
.subtitle { color: var(--muted); margin: 8px 0 28px; }
.eyebrow { font-size: 11px; letter-spacing: 1.8px; font-weight: 750; text-transform: uppercase; color: var(--green); }
.panel { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 3px 10px #1a402704; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat strong { display: block; font-size: 30px; letter-spacing: -1px; margin: 16px 0 6px; }
.stat small { font-size: 15px; color: var(--muted); }
.stat .status { font-size: 25px; color: var(--green); }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-menu { display: flex; flex-direction: column; gap: 8px; padding: 16px; position: sticky; top: 20px; }
.admin-menu .eyebrow { margin: 4px 0 12px; }
.admin-menu-item { text-align: left; border-color: transparent; }
.admin-menu-item.selected { background: #eaf2ec; border-color: var(--border); color: var(--green); font-weight: 700; }
.admin-content { min-width: 0; }
.report-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.report-content { min-width: 0; }
.report-weeks { padding: 16px; position: sticky; top: 20px; }
.week-list { display: flex; flex-direction: column; gap: 8px; max-height: min(716px, 65vh); overflow-y: auto; padding: 2px; scrollbar-gutter: stable; }
.week-list .record-item { flex-shrink: 0; height: 40px; margin: 0; padding: 9px 8px; line-height: 20px; white-space: nowrap; }
.admin-records { display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); gap: 20px; align-items: start; }
.record-list { min-width: 0; padding: 16px; }
.record-list h2 { margin: 0; }
.record-list > .row { margin-bottom: 16px; }
.record-item { display: block; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.record-item strong, .record-item small { display: block; }
.record-item small { color: var(--muted); margin-top: 5px; }
.record-item.selected { background: #eaf2ec; border-color: var(--green); box-shadow: inset 3px 0 var(--green); }
.user-card-heading { display: flex; align-items: center; gap: 8px; }
.user-role-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); }
.record-item.inactive-user { background: #eee; border-color: #d1d1d1; color: #737373; }
.record-item.inactive-user small, .record-item.inactive-user .user-role-icon { color: #737373; }
.record-item.inactive-user:hover { background: #e4e4e4; }
.record-item.inactive-user.selected { border-color: #8a8a8a; box-shadow: inset 3px 0 #8a8a8a; }
.user-list-filter { border-top: 1px solid var(--border); margin: 16px 0 0; padding-top: 16px; }
.record-details { min-width: 0; }
.record-details h2 { overflow-wrap: anywhere; }
.subproject-records { grid-template-columns: minmax(150px, 36%) minmax(0, 1fr); gap: 16px; }
.subproject-records .panel { padding: 16px; }
.record-details .project-list { grid-template-columns: 1fr; }
.admin-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 24px; color: #263d34; box-shadow: 0 20px 60px #10271f40; }
.admin-dialog::backdrop { background: #142c2466; }
.admin-dialog h2 { margin: 0; }
.admin-dialog > .row { margin-bottom: 24px; }
.auth { max-width: 470px; margin: 50px auto; }
.auth .profile-grid { display: block; }
.auth .profile-grid .panel { padding: 0; border: none; box-shadow: none; }
.tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--border); margin-bottom: 26px; overflow-x: auto; }
.tab { background: none; border: none; border-radius: 0; padding: 14px 18px; color: var(--muted); white-space: nowrap; }
.tab.selected { color: var(--green); border-bottom: 3px solid var(--green); font-weight: 700; }
button, a.button { font: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: 7px; color: #284b3b; background: white; cursor: pointer; padding: 10px 16px; }
button:hover, a.button:hover { background: #edf4ed; }
button.primary, a.button.primary { background: var(--green); color: white; border-color: var(--green); }
button.primary:hover, a.button.primary:hover { background: #164b38; }
button:disabled { opacity: .5; cursor: not-allowed; }
a.button { display: inline-block; text-decoration: none; }
input, select, textarea { font: inherit; color: #253d33; background: white; border: 1px solid #cad7ce; padding: 10px 12px; border-radius: 6px; min-width: 0; }
input:disabled { background: #f3f6f4; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid #75ab89; outline-offset: 2px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
label input, label select, label textarea { display: block; margin-top: 7px; width: 100%; }
label.check { display: flex; gap: 9px; align-items: center; font-weight: 400; }
label.check input { width: auto; margin: 0; }
fieldset { padding: 0; margin: 0; border: none; min-width: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.row label { flex: 1; min-width: 140px; }
.actions { margin-top: 24px; }
.help { font-size: 12px; color: var(--muted); line-height: 1.6; }
.empty { text-align: center; padding: 25px 10px; color: var(--muted); }
.notice, .warning, .info { padding: 14px 18px; border-radius: 8px; margin: 16px 0; line-height: 1.6; overflow-wrap: anywhere; }
.notice { border: 1px solid #c0d7c6; background: #ebf4ed; }
.warning { background: #fff6e6; color: #85570f; border: 1px solid #eed7a6; }
.info { background: #edf4ef; color: #366249; }
.info input { width: 100%; font-size: 12px; }
.error { color: #963a2d; }
.badge { display: inline-block; font-size: 11px; font-weight: 650; padding: 5px 9px; border-radius: 5px; background: #eaf2ec; color: #3a684a; white-space: nowrap; }
.badge.amber { background: #fff0d5; color: #865b16; }
.table-wrap { overflow: auto; margin-top: 18px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { color: #728376; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; background: #f7f9f7; text-align: left; }
th, td { padding: 14px 12px; border-bottom: 1px solid #e4ebe5; }
th small { display: block; font-weight: 400; text-transform: none; margin-top: 5px; }
.time-grid { min-width: 860px; }
.time-grid td:first-child { min-width: 180px; }
.time-grid .project-summary { background: #edf4ef; font-weight: 700; }
.time-grid td:first-child small { display: block; margin-top: 6px; }
.time-grid th:not(:first-child), .time-grid td:not(:first-child) { text-align: center; }
.time-grid input { width: 72px; padding: 10px 5px; text-align: center; }
tfoot, .subtotal { background: #f4f8f4; font-weight: 700; }
.over-limit { color: #9a421f; background: #fff2e8; }
.project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.project-list label { border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin: 0; }
.card-row { padding: 16px 0; border-bottom: 1px solid var(--border); }
.card-row:last-child { border-bottom: none; }
.card-row p { margin: 5px 0; overflow-wrap: anywhere; }
.wide { width: 100%; }
.secondary { margin-top: 18px; }
/* Buttons side by side, wrapping on a phone; the row carries the spacing above them. */
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.button-row > button { margin-top: 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
footer { max-width: 1250px; margin: 40px auto 24px; padding: 0 24px; font-size: 12px; color: #859188; display: flex; justify-content: space-between; }
.loading { padding: 60px; text-align: center; }
#blazor-error-ui { display: none; background: #fff1db; padding: 15px; position: fixed; bottom: 0; width: 100%; z-index: 100; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.scroll-hint { display: none; }

/* Below this width the weekly grid no longer fits, so it scrolls inside its card.
   The label and Total columns stay pinned so each row stays identifiable and its total stays visible. */
@media (max-width: 900px) {
    .time-grid-wrap { scroll-snap-type: x proximity; scroll-padding: 0 56px 0 116px; }
    .time-grid { min-width: 100%; width: max-content; }
    .time-grid th:first-child, .time-grid td:first-child { position: sticky; left: 0; z-index: 1; width: 116px; min-width: 116px; max-width: 116px; padding-left: 10px; padding-right: 6px; font-size: 12px; overflow-wrap: anywhere; box-shadow: inset -1px 0 var(--border); }
    .time-grid th:last-child, .time-grid td:last-child { position: sticky; right: 0; z-index: 1; min-width: 56px; box-shadow: inset 1px 0 var(--border); }
    .time-grid th:not(:first-child):not(:last-child) { scroll-snap-align: start; }
    .time-grid tbody td:first-child, .time-grid tbody td:last-child { background: white; }
    .time-grid tbody .project-summary td:first-child, .time-grid tbody .project-summary td:last-child { background: #edf4ef; }
    .time-grid tfoot td:first-child, .time-grid tfoot td:last-child { background: #f4f8f4; }
    .time-grid th, .time-grid td { padding: 8px 4px; }
    .time-grid input { width: 54px; padding: 10px 2px; }
    .scroll-hint { display: block; margin: 12px 0 0; }
}

/* Touch-sized controls on phones and on any touch-first device. 16px text keeps iOS from zooming on focus. */
@media (max-width: 760px), (pointer: coarse) {
    button { min-height: 44px; }
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
    input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
    input[type=checkbox], label.check input[type=checkbox] { width: 20px; height: 20px; }
    label.check { min-height: 44px; }
    .week-list .record-item { height: 44px; padding: 11px 8px; }
}

@media (max-width: 760px) {
    .report-layout { grid-template-columns: 1fr; gap: 0; }
    .report-weeks { position: static; }
    .week-list { max-height: 200px; }
    .admin-records, .subproject-records { grid-template-columns: 1fr; }
    .admin-layout { grid-template-columns: 1fr; gap: 0; }
    /* The section menu becomes a wrapping row of buttons above the content instead of a tall sidebar. */
    .admin-menu { position: static; flex-direction: row; flex-wrap: wrap; padding: 12px; }
    .admin-menu .eyebrow { display: none; }
    .admin-menu button { flex: 1 1 auto; text-align: center; padding: 10px 12px; }
    .admin-menu-item { border-color: var(--border); }
    .topbar { height: auto; min-height: 70px; padding: 10px 16px; gap: 12px; }
    .brand { font-size: 21px; line-height: 1.1; letter-spacing: -.5px; min-width: 0; }
    .brand-icon { flex-shrink: 0; width: 32px; height: 34px; font-size: 20px; }
    .identity { font-size: 12px; gap: 8px; flex-shrink: 0; }
    .identity > span { max-width: 125px; }
    .identity button { white-space: nowrap; }
    main { padding: 0 16px; margin-top: 24px; }
    h1 { font-size: 24px; letter-spacing: -.5px; }
    .subtitle { margin-bottom: 20px; }
    .stats, .profile-grid { grid-template-columns: 1fr; }
    .stats { gap: 8px; margin-bottom: 16px; }
    .stats .panel { margin-bottom: 0; }
    /* Each summary card shrinks to one line so the timecard grid is reachable without long scrolling. */
    .stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; padding: 12px 16px; }
    .stat strong { grid-column: 2; grid-row: 1; margin: 0; font-size: 20px; letter-spacing: -.5px; }
    .stat .status { font-size: 20px; }
    .stat small { font-size: 13px; }
    .stat .help { grid-column: 1 / -1; }
    .panel { padding: 18px; }
    /* Let the timecard table use the full card width on a phone. */
    .panel .time-grid-wrap { margin-left: -18px; margin-right: -18px; }
    .tabs { gap: 0; margin-bottom: 20px; }
    .tab { flex: 1 1 auto; padding: 12px 8px; font-size: 13px; }
    .row { gap: 8px; }
    .filters { display: block; }
    .project-list { grid-template-columns: 1fr; }
    /* Week picker gets its own full-width line, with Previous and Next side by side below it. */
    .week-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .week-nav input { grid-column: 1 / -1; grid-row: 1; width: 100%; }
    .actions > .row { flex: 1 1 100%; }
    .actions > .row button { flex: 1 1 auto; }
    .card-row > .row { width: 100%; }
    .card-row > .row button { flex: 1 1 auto; }
    footer { padding: 0 16px; }
    footer span { display: none; }
}

/* Report rows become labeled cards on a phone, so no columns are hidden off to the side. */
@media (max-width: 600px) {
    .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
    .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .stack-table tr { padding: 8px 0; border-bottom: 1px solid #e4ebe5; }
    .stack-table td { display: flex; justify-content: space-between; gap: 16px; padding: 5px 12px; border: none; text-align: right; overflow-wrap: anywhere; }
    .stack-table td::before { content: attr(data-label); flex-shrink: 0; color: #56685d; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; text-align: left; padding-top: 2px; }
    .stack-table td:empty::after { content: "\2014"; color: var(--muted); }
}

/* On the narrowest phones the name already appears above the page title, so the header keeps only Sign out. */
@media (max-width: 480px) {
    .identity > span { display: none; }
    .brand { font-size: 19px; }
}

/* Sign in with Microsoft */
.microsoft-sign-in { display: flex; align-items: center; justify-content: center; gap: 10px; }
.microsoft-sign-in svg { width: 18px; height: 18px; flex: none; }
.info .link-button { margin: 4px 8px 0 0; padding: 4px 10px; }