* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--page-bg);
    color:var(--text);
    font-size:var(--body-size);
    line-height:1.5
}
a {
    color:var(--action);
    text-underline-offset:4px
}
h1 {
    font-size:var(--heading-size);
    line-height:1.2;
    margin:0 0 16px;
    letter-spacing:-.035em
}
h2 {
    font-size:var(--subheading-size);
    margin:0 0 12px
}
p {
    margin:0 0 24px;
    overflow-wrap:anywhere
}
button,input,select,textarea {
    font:inherit
}
button,.button {
    min-height:var(--control-height);
    padding:var(--control-padding);
    border:1px solid transparent;
    border-radius:var(--radius-control);
    background:var(--action);
    color:var(--action-text);
    cursor:pointer;
    font-weight:600
}
button:hover {
    filter:brightness(.92)
}
button:disabled {
    cursor:wait;
    opacity:.65
}
.secondary {
    background:var(--surface);
    color:var(--text);
    border-color:var(--control-border)
}
:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px
}
h1[tabindex="-1"]:focus {
    outline:none
}
input {
    display:block;
    width:100%;
    min-width:0;
    min-height:var(--control-height);
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--control-border);
    border-radius:var(--radius-control);
    padding:var(--control-padding)
}
input:autofill {
    box-shadow:0 0 0 1000px var(--surface-muted) inset;
    -webkit-text-fill-color:var(--text)
}
input.invalid {
    border:2px solid var(--danger)
}
label {
    font-weight:600
}
form {
    display:grid;
    gap:8px;
    min-width:0
}
form>button {
    margin-top:16px
}
form+p {
    margin-top:24px;
    margin-bottom:0
}
.field-help {
    font-size:14px;
    color:var(--text-muted);
    margin:4px 0 12px
}
.validation-message,.validation-errors,[role=alert] {
    color:var(--danger);
    overflow-wrap:anywhere
}
.validation-message {
    font-size:14px
}
.validation-errors {
    padding-left:20px
}
.validation-errors:empty {
    display:none
}
.brand-plate {
    display:inline-flex;
    background:#fff;
    border-radius:10px;
    padding:8px 12px;
    flex-shrink:0
}
.brand-plate img {
    width:165px;
    height:50px;
    object-fit:contain;
    max-width:100%
}
.public-header {
    max-width:1184px;
    margin:auto;
    padding:24px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}
.auth-layout {
    max-width:1120px;
    margin:48px auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,448px);
    gap:64px;
    padding:0 32px;
    align-items:center
}
.auth-card,.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    padding:var(--panel-padding);
    min-width:0
}
.auth-card>p {
    color:var(--text-muted)
}
.eyebrow {
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    font-weight:700;
    margin-bottom:16px
}
.intro-title {
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    letter-spacing:-.04em;
    font-weight:650
}
.auth-intro {
    border-left:4px solid var(--brand-accent);
    padding-left:32px
}
.auth-intro>p:last-child,.page-lead {
    color:var(--text-muted)
}
.public-footer {
    text-align:center;
    padding:24px 16px;
    color:var(--text-muted);
    font-size:13px
}
body {
    min-height:100dvh
}
.workspace-shell {
    display:grid;
    grid-template-columns:248px minmax(0,1fr);
    min-height:100dvh
}
.sidebar {
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:32px 24px
}
.sidebar .eyebrow {
    margin-top:24px
}
nav {
    display:grid;
    gap:8px
}
nav a {
    display:block;
    padding:12px 16px;
    min-height:48px;
    border-radius:10px;
    text-decoration:none;
    color:var(--text)
}
nav a.active {
    background:var(--surface-muted);
    color:var(--action);
    font-weight:650
}
nav a:hover {
    background:var(--surface-muted)
}
.nav-caption {
    display:block;
    font-size:12px;
    color:var(--text-muted)
}
.workspace-body {
    min-width:0
}
.workspace-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 32px;
    border-bottom:1px solid var(--border);
    background:var(--surface);
    flex-wrap:wrap
}
.header-context {
    margin-right:auto;
    color:var(--text-muted)
}
.workspace-header form>button {
    margin:0
}
.workspace-content {
    max-width:1184px;
    padding:32px;
    margin:auto;
    scroll-margin-top:24px
}
.card {
    margin-top:32px
}
.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:24px 0
}
.result {
    background:var(--surface-muted);
    padding:16px;
    border-radius:10px;
    margin:0;
    overflow-wrap:anywhere
}
.operation-id {
    font-family:ui-monospace,monospace;
    overflow-wrap:anywhere;
    font-size:14px
}
.card details {
    border-top:1px solid var(--border);
    margin-top:24px;
    padding-top:16px
}
.card summary {
    cursor:pointer;
    min-height:44px;
    font-weight:600
}
.dev-controls {
    display:grid;
    gap:12px;
    margin-top:16px
}
.mobile-menu {
    display:none
}
.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    transform:translateY(-200%);
    z-index:100;
    background:var(--surface);
    padding:12px
}
.skip-link:focus {
    transform:none
}
dialog {
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    max-width:calc(100% - 32px);
    max-height:calc(100dvh - 32px);
    padding:24px
}
dialog::backdrop {
    background:#071b22aa
}
.drawer-header {
    display:flex;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:24px
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    background:var(--surface);
    border-top:2px solid var(--danger);
    width:100%;
    padding:16px;
    z-index:50
}
::selection {
    background:var(--action);
    color:var(--action-text)
}

@media(max-width:959px) {
    .sidebar,.auth-intro {
    display:none
}
.workspace-shell {
    display:block
}
.mobile-menu {
    display:block
}
.public-header {
    padding:16px
}
.auth-layout {
    display:block;
    margin:24px auto;
    padding:0 16px;
    max-width:480px
}
.auth-card {
    padding:24px
}
.workspace-header {
    padding:16px;
    gap:8px
}
.header-context {
    display:none
}
.theme-toggle {
    margin-left:auto
}
.workspace-content {
    padding:24px 16px
}
.card {
    padding:24px
}
.actions {
    display:grid
}
.actions button {
    width:100%
}
.public-footer {
    margin-top:32px
}

}

@media(max-width:359px) {
    .brand-plate img {
    width:132px;
    height:40px
}
.public-header {
    gap:8px
}
.public-header .theme-toggle {
    padding:10px
}
.auth-card,.card {
    padding:16px
}
.workspace-header button {
    padding:10px 12px
}

}

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

}


/* Billing master forms extend the accepted responsive shell and theme tokens. */
.master-nav { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 24px; min-width:0 }
.master-nav a { padding:8px 0; min-height:44px }
.master-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0 }
.master-field { display:flex; flex-direction:column; gap:6px; min-width:0; margin:8px 0 }
.master-editor fieldset { border:1px solid var(--control-border); border-radius:var(--radius-control); padding:16px; min-width:0; margin:12px 0 }
.master-editor legend { font-weight:600; padding:0 8px }
.master-editor select,.master-editor textarea { width:100%; min-width:0; min-height:48px; padding:10px 12px; font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:var(--radius-control) }
.master-editor textarea { min-height:180px; resize:vertical }
.master-check { display:flex; align-items:start; gap:12px }
.master-check input { width:24px; min-height:24px; flex-shrink:0 }
.master-text { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit }
.master-editor hr { border:0; border-top:1px solid var(--control-border); margin:32px 0 }
@media(max-width:959px) { .master-grid { grid-template-columns:minmax(0,1fr) } }

/* Approved workspace shell: preference attributes are set before styles load. */
[hidden] { display:none!important }
.result:empty { display:none }
.master-grid-view { margin-top:var(--section-gap) }
.grid-heading,.grid-toolbar,.grid-pagination { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:12px 0 }
.grid-heading>span { color:var(--text-muted) }
.grid-toolbar { justify-content:flex-start; padding:12px; border:1px solid var(--border); border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--surface) }
.grid-search { flex:1 1 220px; max-width:360px }
.grid-toolbar select { min-height:var(--control-height); padding:var(--control-padding); font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:var(--radius-control); max-width:100% }
.data-table { max-width:100%; overflow:auto; border:1px solid var(--border); border-top:0; background:var(--surface) }
.data-table table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--body-size) }
.data-table tr { height:var(--table-row-height) }
.data-table th,.data-table td { padding:var(--cell-padding); border-bottom:1px solid var(--border); vertical-align:middle; overflow-wrap:anywhere }
.data-table thead { background:var(--surface-muted); color:var(--text-muted) }
.data-table tbody th { font-weight:600; min-width:140px }
.data-table tbody tr:last-child>* { border-bottom:0 }
.data-table td { min-width:100px; max-width:300px }
.data-table .row-actions-heading { width:90px }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:2px }
.row-actions .icon-button,.row-menu>summary { min-height:var(--row-action-size); width:30px; height:var(--row-action-size); min-width:30px; padding:4px }
.row-menu { position:relative; border:0!important; margin:0!important; padding:0!important }
.row-menu>summary { display:flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; border-radius:4px }
.row-menu>summary::-webkit-details-marker { display:none }
.row-menu>summary:hover { background:var(--surface-muted) }
.row-popover { position:fixed; z-index:60; width:180px; padding:4px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-control); box-shadow:0 4px 16px #0002 }
.row-popover button { width:100%; text-align:left; border:0; background:transparent; color:var(--text); font:inherit }
.row-popover button:hover { background:var(--surface-muted) }
.status-badge { display:inline-block; border-radius:4px; padding:1px 7px; font-size:12px; white-space:nowrap }
.status-badge.active { color:var(--success); background:color-mix(in srgb,var(--success) 12%,var(--surface)) }
.status-badge.archived { color:var(--text-muted); background:var(--surface-muted) }
.grid-pagination { color:var(--text-muted); font-size:var(--body-size); border:1px solid var(--border); border-top:0; padding:10px 12px; border-radius:0 0 var(--radius-card) var(--radius-card) }
.grid-pagination>div { display:flex; gap:8px; align-items:center }
.grid-empty { padding:20px; margin:0!important; color:var(--text-muted) }
.back-to-list { margin:var(--section-gap) 0 }
@media(max-width:959px),(pointer:coarse) {
    .row-actions .icon-button,.row-menu>summary { width:44px; min-width:44px; height:44px; min-height:44px }
    .grid-toolbar select { min-height:44px; font-size:16px }
    .row-popover button { min-height:44px }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:32px; min-width:32px; height:32px; min-height:32px; padding:6px; border:1px solid transparent; border-radius:var(--radius-control); background:transparent; color:var(--text); flex-shrink:0; font-weight:500 }
.icon-button:hover { background:var(--surface-muted); filter:none }
.icon-button svg,.app-navigation svg { display:block; flex-shrink:0 }
.appearance-controls { display:flex; align-items:center; gap:4px; margin-left:auto }
.appearance-controls .theme-toggle { margin:0 }
.density-toggle span { font-size:14px; line-height:1 }
[data-density="cozy"] .density-toggle span { font-size:20px }
.theme-light-icon,.layout-stacked-icon { display:none }
[data-theme="light"] .theme-light-icon,[data-layout="stacked"] .layout-stacked-icon { display:inline }
[data-theme="light"] .theme-dark-icon,[data-layout="stacked"] .layout-sidebar-icon { display:none }
.workspace-shell { position:relative; grid-template-columns:var(--sidebar-width) minmax(0,1fr) }
.workspace-header { min-height:var(--header-height); padding:6px var(--content-gutter); gap:8px }
.header-brand { display:none }
.workspace-header .mobile-menu { display:none }
.header-context { font-size:var(--body-size); margin-right:0 }
.workspace-content { max-width:none; padding:var(--content-gutter); margin:0 }
.workspace-content>.eyebrow { margin-bottom:6px; font-size:11px; letter-spacing:.09em }
.workspace-content h1 { margin-bottom:12px }
.workspace-content p { margin-bottom:var(--section-gap) }
.workspace-content .result { margin:0 }
.card { margin-top:var(--section-gap); padding:var(--panel-padding) }
.actions { gap:8px; margin:var(--section-gap) 0 }
.master-nav { gap:8px; margin-bottom:var(--section-gap) }
.master-grid { column-gap:var(--section-gap); row-gap:var(--form-row-gap) }
.master-field { margin:0; gap:var(--form-field-gap) }
.master-field>.validation-message:empty,.master-field>.field-help:empty { display:none }
.master-editor .master-grid+.master-grid { margin-top:var(--form-row-gap) }
.master-editor fieldset { margin-block:6px }
.master-editor .field-help { margin-block:3px 6px }
.master-editor select,.master-editor textarea { min-height:var(--control-height); padding:var(--control-padding); font-size:inherit }
.master-editor textarea { min-height:140px }
.master-editor fieldset { padding:var(--panel-padding) }
.field-help,.validation-message { font-size:var(--body-size) }
.workspace-body { grid-column:2; grid-row:1 }
.sidebar { position:relative; grid-column:1; grid-row:1; width:var(--sidebar-width); padding:8px; z-index:20; background:var(--surface); border-right:1px solid var(--border) }
.sidebar-brand { min-height:var(--header-height); display:flex; align-items:center; padding:0 4px }
.sidebar .brand-plate,.header-brand .brand-plate { padding:4px 6px; border-radius:6px; max-width:100% }
.sidebar .brand-plate img,.header-brand .brand-plate img { width:144px; height:36px }
.rail-brand { display:none; object-fit:contain; background:white; border-radius:4px }
.sidebar-pin { margin:4px 0 8px auto; display:flex }
.sidebar-pin[aria-pressed="false"] svg { transform:rotate(35deg) }
.app-navigation { display:flex; flex-direction:column; gap:4px; min-width:0 }
.primary-navigation,.master-navigation,.time-navigation { display:flex; flex-direction:column; gap:2px; min-width:0 }
.app-navigation a { display:flex; align-items:center; gap:10px; min-height:var(--nav-height); padding:6px 10px; border-radius:5px; font-size:var(--body-size); min-width:0 }
.app-navigation a.active { box-shadow:inset 2px 0 var(--action) }
.nav-label { overflow-wrap:anywhere }
.jobs-navigation { margin-top:8px; padding-top:8px; border-top:1px solid var(--border) }
.sidebar .master-navigation,.sidebar .time-navigation { padding-left:10px }
.sidebar .master-navigation a,.sidebar .time-navigation a { font-size:var(--body-size) }
.stacked-navigation { display:none }
.company-menu { position:relative; flex-shrink:0 }
.company-menu>summary { display:flex; align-items:center; gap:8px; min-height:32px; padding:2px 6px; cursor:pointer; border-radius:var(--radius-control); list-style:none }
.company-menu>summary::-webkit-details-marker { display:none }
.company-menu>summary:hover,.company-menu[open]>summary { background:var(--surface-muted) }
.company-avatar { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--action); color:var(--action-text); font-size:12px }
.company-popover { position:absolute; right:0; top:calc(100% + 8px); width:260px; max-width:calc(100vw - 32px); z-index:40; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:6px; box-shadow:0 8px 24px #0002 }
.company-popover>a,.company-popover button { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:8px; border:0; background:transparent; color:var(--text); font:inherit; text-align:left; text-decoration:none; border-radius:4px }
.company-popover>a:hover,.company-popover button:hover { background:var(--surface-muted); filter:none }
.company-popover form { display:block; margin:0 }
.public-header { padding:16px var(--content-gutter) }
.public-header .appearance-controls { margin-left:0 }
.public-header .brand-plate { padding:6px 8px }
.public-header .brand-plate img { width:144px; height:40px }
.auth-layout { margin:var(--section-gap) auto; gap:32px }
.auth-card { padding:var(--panel-padding) }
.auth-card p { margin-bottom:var(--section-gap) }
@media(min-width:960px) {
    [data-layout="sidebar"][data-sidebar-pinned="false"] .workspace-shell { grid-template-columns:56px minmax(0,1fr) }
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) { width:56px }
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .expanded-brand,
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .master-navigation,
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .time-navigation { display:none }
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .rail-brand { display:block }
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .nav-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
    [data-layout="sidebar"][data-sidebar-pinned="false"] .sidebar:not(:hover):not(:focus-within) .app-navigation a { padding:8px 10px }
    [data-layout="stacked"] .workspace-shell { display:block }
    [data-layout="stacked"] .sidebar { display:none }
    [data-layout="stacked"] .header-brand { display:inline-flex }
    [data-layout="stacked"] .stacked-navigation { display:block; background:var(--surface); border-bottom:1px solid var(--border) }
    .stacked-navigation .primary-navigation,.stacked-navigation .master-navigation,.stacked-navigation .time-navigation { flex-direction:row; flex-wrap:wrap; gap:4px; padding:4px var(--content-gutter) }
    .stacked-navigation .master-navigation { display:none; border-top:1px solid var(--border) }
    .stacked-navigation .time-navigation { border-top:1px solid var(--border) }
    .stacked-navigation .master-context { display:flex }
    .stacked-navigation a.active { box-shadow:inset 0 -2px var(--action); border-radius:4px 4px 0 0 }
}
@media(max-width:959px) {
    .workspace-shell { display:block }
    .sidebar,.stacked-navigation { display:none }
    .workspace-header { padding:8px 16px; gap:4px }
    .header-brand { display:flex; width:100% }
    .header-context { display:none }
    .workspace-header .mobile-menu { display:inline-flex }
    .workspace-content { padding:16px }
    .company-name { display:none }
    .company-menu>summary { min-height:44px }
    .company-popover>a,.company-popover button { min-height:44px }
    .icon-button,.workspace-header .icon-button { min-width:44px; width:44px; min-height:44px; height:44px; padding:10px }
    .app-navigation a { min-height:44px }
    .master-editor select,.master-editor textarea,input,select,textarea { font-size:16px; min-height:44px }
    button,.button { min-height:44px }
    .master-check input { min-height:24px }
    .appearance-controls { gap:0 }
    .auth-layout { max-width:480px; padding:0 16px }
    .auth-card,.card { padding:var(--panel-padding) }
    .public-header { flex-wrap:wrap; gap:8px }
    .public-header .brand-plate img { width:132px; height:40px }
    #workspace-drawer { width:320px; padding:16px }
    #workspace-drawer .master-navigation,#workspace-drawer .time-navigation { padding-left:16px }
    .drawer-header { gap:8px; margin-bottom:16px }
}
@media(pointer:coarse) {
    button,.button,.icon-button,.workspace-header .icon-button,.app-navigation a,.company-menu>summary,.company-popover>a,.company-popover button { min-height:44px }
    .icon-button,.workspace-header .icon-button { min-width:44px; width:44px; height:44px }
    input,select,textarea,.master-editor select,.master-editor textarea { font-size:16px; min-height:44px }
    .master-check input { min-height:24px }
}

/* Shared sortable headers; action-only columns remain plain headings. */
.sort-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:var(--row-action-size); padding:0; border:0; border-radius:2px; background:transparent; color:inherit; font:inherit; font-weight:600; text-align:left; }
.sort-heading:hover { background:var(--surface-muted); filter:none; }
.sort-heading>span { flex-shrink:0; color:var(--text-muted); }
th[aria-sort="ascending"] .sort-heading,th[aria-sort="descending"] .sort-heading { color:var(--action); }
@media(pointer:coarse) { .sort-heading { min-height:44px; } }

.grid-pagination button:disabled { cursor:not-allowed; }

/* Keep date ranges and their shortcuts together in invoice and Summary forms. */
.period-controls { display:grid; gap:var(--form-row-gap); margin-bottom:var(--form-row-gap); min-width:0 }
.master-grid+.period-controls { margin-top:var(--form-row-gap) }
.period-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--section-gap); min-width:0 }
.period-row .master-field,.period-row input,.period-row select { min-width:0; width:100% }
.period-controls .period-presets { margin:0; flex-wrap:wrap; gap:8px }
.period-controls>.field-help { margin:0 }