@font-face { font-family: "Pretendard"; src: url("/ui/PretendardVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --primary: var(--selo-primary);
  --action: var(--selo-primary);
  --action-depth: color-mix(in srgb,var(--selo-primary) 74%,var(--selo-dark));
  --dark: var(--selo-dark);
  --accent: color-mix(in srgb,var(--selo-accent) 50%,var(--selo-dark));
  --light-gray: var(--selo-light-gray);
  --line-subtle: color-mix(in srgb,var(--selo-light-gray) 65%,var(--selo-white));
  --surface: var(--selo-white);
  --canvas: color-mix(in srgb,var(--selo-primary) 5%,var(--selo-white));
  --muted: #596981;
  --soft-blue: color-mix(in srgb,var(--selo-primary) 8%,var(--selo-white));
  --soft-teal: color-mix(in srgb,var(--selo-accent) 9%,var(--selo-white));
  --danger: #b42337;
  --danger-bg: #fff0f2;
  --nav-surface: var(--selo-dark);
  --nav-ink: #c6d4e8;
  --nav-active: #142f50;
  --shadow: 0 4px 18px color-mix(in srgb,var(--selo-dark) 5%,transparent);
  --shadow-raised: 0 8px 24px color-mix(in srgb,var(--selo-dark) 8%,transparent);
  --dialog-shadow: 0 24px 80px color-mix(in srgb,var(--selo-dark) 24%,transparent);
  --focus-ring: color-mix(in srgb,var(--primary) 22%,transparent);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 12px;
  --radius-control: 8px;
  --radius-inset: 10px;
  --radius-dialog: 16px;
  --field-border: color-mix(in srgb,var(--muted) 65%,var(--light-gray));
  --field-hover: var(--primary);
  --field-fill: var(--surface);
  --control-height: 44px;
  --table-cell-y: 12px;
  --table-cell-x: 14px;
  --motion-fast: 150ms;
  color-scheme: light;
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  color: var(--dark);
  font-size: 15px;
  line-height: 1.6;
  background: var(--canvas);
  font-synthesis: none;
}
:root[data-theme="dark"] {
  --primary: #93b8ff;
  --action: var(--selo-primary);
  --dark: #e7effa;
  --accent: #53d6c5;
  --light-gray: #35465e;
  --line-subtle: #293a50;
  --surface: #15243a;
  --canvas: #0c1626;
  --muted: #aebed2;
  --soft-blue: #223b60;
  --soft-teal: #163d3b;
  --danger: #ffacb8;
  --danger-bg: #402735;
  --nav-surface: #0c1b30;
  --nav-ink: #bdcde3;
  --nav-active: #213b5d;
  --shadow: 0 4px 18px #0000001a;
  --shadow-raised: 0 8px 24px #00000030;
  --dialog-shadow: 0 24px 80px #00000055;
  --focus-ring: #93b8ff38;
  color-scheme: dark;
}
:root[data-density="compact"] { --table-cell-y: 8px; --table-cell-x: 12px; --control-height: 40px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; text-rendering: optimizeLegibility; color: var(--dark); -webkit-text-fill-color: currentColor; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
button:not(:disabled):active { transform: translateY(1px); }
button[aria-busy="true"], [aria-busy="true"] button { cursor: progress; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid var(--focus-ring); outline-offset: 1px; }
button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
details > summary { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; min-height: 44px; padding: 10px 15px; border: 1px solid var(--light-gray); border-radius: 10px; color: var(--dark); background: linear-gradient(180deg,var(--surface),var(--canvas)); box-shadow: 0 2px 5px #18356808; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast) ease; }
details > summary:hover { border-color: var(--primary); background: var(--soft-blue); box-shadow: 0 4px 12px #18356812; transform: translateY(-1px); }
details[open] > summary { border-color: var(--primary); background: var(--soft-blue); color: var(--primary); }
details[open] > summary::before { transform: rotate(45deg); }
.auth-shell { display: grid; grid-template-columns: .9fr 1.1fr; max-width: 1080px; min-height: 650px; margin: max(32px, calc((100vh - 780px) / 2)) auto 32px; background: var(--surface); border: 1px solid var(--light-gray); border-radius: 20px; overflow: hidden; box-shadow: 0 16px 48px #0f172a08; }
.brand-panel { background: radial-gradient(ellipse at 0 100%, #14b8a625, transparent 60%), var(--selo-dark); color: white; display: flex; flex-direction: column; padding: 38px; }
.wordmark { display: block; flex-shrink: 0; width: 320px; max-width: 100%; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-copy { margin: 65px 0 34px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.brand-copy .eyebrow { color: var(--accent); letter-spacing: 1px; margin-bottom: 15px; }
.brand-copy h1 { font-size: 34px; line-height: 1.5; letter-spacing: -1.5px; }
.brand-description { margin-top: 18px; color: #aebbd0; font-size: 14px; line-height: 1.9; }
.brand-points { display: grid; gap: 18px; }
.brand-points > div { display: flex; gap: 13px; align-items: start; }
.point-number { color: var(--accent); font-size: 12px; font-weight: 700; padding-top: 4px; }
.brand-points strong { display: block; font-size: 13px; font-weight: 600; }
.brand-points p > span { color: #94a3b8; font-size: 12px; display: block; margin-top: 3px; }
.brand-bottom { margin-top: auto; padding-top: 40px; color: #94a3b8; font-size: 12px; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.brand-bottom > span:last-child { letter-spacing: 0; }
.brand-rule { display: block; width: 22px; height: 2px; background: var(--accent); }
.auth-content { padding: 35px 44px 24px; display: flex; flex-direction: column; }
.auth-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.auth-topline .eyebrow { color: var(--primary); letter-spacing: 0; }
.version-tag { color: var(--muted); font-size: 12px; letter-spacing: 1.3px; border: 1px solid var(--light-gray); border-radius: 4px; padding: 2px 6px; }
.form-heading { margin-bottom: 22px; }
h2 { font-size: 23px; letter-spacing: -.7px; line-height: 1.5; }
.form-heading p { color: var(--muted); font-size: 13px; margin-top: 5px; }
label { display: block; margin: 14px 0 7px; font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; min-width: 0; height: var(--control-height); border: 1px solid var(--field-border); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--field-fill); color: var(--dark); -webkit-text-fill-color: currentColor; color-scheme: inherit; font-size: 14px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast); }
input::placeholder, textarea::placeholder { color: var(--muted); font-size: 13px; opacity: .8; }
textarea { min-height: 88px; height: auto; padding: 10px 12px; resize: vertical; }
fieldset { min-width: 0; border-color: var(--light-gray); border-radius: 12px; }
.section-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.section-label span { font-size: 12px; color: var(--primary); }
.second-section { margin-top: 20px; border-top: 1px solid var(--light-gray); padding-top: 14px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.7; }
.password-field { position: relative; }
.password-field input { padding-right: 58px; }
.password-field button { display: grid; place-items: center; position: absolute; right: 6px; top: 5px; height: 33px; border: 0; background: transparent; color: var(--muted); padding: 0 8px; font-size: 12px; border-radius: 4px; }
.password-field button:hover { background: var(--canvas); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 14px; font-weight: 600; line-height: 1.4; -webkit-text-fill-color: currentColor; }
.button.primary { background: linear-gradient(180deg,color-mix(in srgb,var(--action) 97%,var(--selo-white)),var(--action)); background-color: var(--action); color: var(--selo-white); border-color: var(--action); border-bottom-color: var(--action-depth); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--selo-white) 24%,transparent), 0 3px 0 var(--action-depth), 0 6px 12px color-mix(in srgb,var(--action) 18%,transparent); }
.button.primary:not(:disabled):is(:hover,:focus-visible):not(:active) { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--selo-white) 24%,transparent), 0 4px 0 var(--action-depth), 0 8px 16px color-mix(in srgb,var(--action) 22%,transparent); }
.button.primary:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--selo-white) 16%,transparent), 0 1px 0 var(--action-depth), 0 2px 4px color-mix(in srgb,var(--action) 16%,transparent); }
.button.primary:disabled { transform: none; background-image: none; box-shadow: none; border-bottom-color: var(--action); }
.button.secondary { border-color: var(--light-gray); background: var(--surface); color: var(--dark); box-shadow: var(--shadow); }
.button.secondary:not(:disabled):hover { background: var(--soft-blue); border-color: var(--primary); }
.button.wide { width: 100%; margin-top: 21px; justify-content: space-between; }
.form-footnote { font-size: 12px; color: var(--muted); text-align: center; margin-top: 11px; }
.auth-footer { padding-top: 25px; margin-top: auto; text-align: center; font-size: 12px; color: #94a3b8; }
.company-banner { display: flex; gap: 12px; align-items: center; background: var(--soft-blue); padding: 15px; border-radius: 9px; margin: 25px 0; }
.company-icon { color: var(--primary); font-size: 22px; }
.company-banner div > span { display: block; font-size: 12px; color: var(--muted); }
.company-banner strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.company-banner .status-dot { margin-left: auto; }
#login-section { padding-top: 38px; }
#login-form > label { margin-top: 19px; }
#login-form .button { margin-top: 27px; }
.login-options { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 17px; }
.login-options label { display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-size: 12px; }
.login-options input { width: 17px; height: 17px; padding: 0; accent-color: var(--action); }
.login-help { font-size: 12px; color: var(--muted); margin-top: 27px; line-height: 1.9; text-align: center; }
.login-help strong { font-weight: 500; color: var(--dark); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
/* Shared contextual explanations and readable audit records. */
.content-heading { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.content-heading > :not(.content-icon):not(.context-help-button) { min-width: 0; overflow-wrap: anywhere; }
.content-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; }
.context-help-button { --help-circle-border:var(--light-gray); --help-circle-background:var(--surface); position:relative; isolation:isolate; display:inline-grid; place-items:center; flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:11px; font-weight:650; line-height:1; }
.context-help-button::after { content:""; position:absolute; top:50%; left:50%; z-index:-1; width:18px; height:18px; border:1px solid var(--help-circle-border); border-radius:50%; background:var(--help-circle-background); transform:translate(-50%,-50%); }
.context-help-button:is(:hover,[aria-expanded="true"]) { --help-circle-border:var(--primary); --help-circle-background:var(--soft-blue); color:var(--dark); }
.context-help-button:focus-visible { outline:none; }
.context-help-button:focus-visible::after { outline:2px solid var(--primary); outline-offset:2px; }
.context-help-popover { position: fixed; inset: auto; box-sizing: border-box; width: min(300px,calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 14px; overflow: visible; border: 1px solid var(--light-gray); border-radius: 12px; background: var(--surface); color: var(--dark); box-shadow: var(--shadow-raised); font-size: 12px; font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; text-align: left; }
.context-help-popover::before { content: ""; position: absolute; top: -6px; left: var(--context-help-arrow-x,24px); width: 10px; height: 10px; border-top: 1px solid var(--light-gray); border-left: 1px solid var(--light-gray); background: var(--surface); transform: translateX(-50%) rotate(45deg); }
.context-help-popover[data-placement="above"]::before { top: auto; bottom: -6px; border-top: 0; border-left: 0; border-bottom: 1px solid var(--light-gray); border-right: 1px solid var(--light-gray); }
.context-help-content { max-height: calc(100dvh - 54px); overflow: auto; }
.context-help-title { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; }
.context-help-popover p { margin: 0; }
.context-help-popover p + p { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--light-gray); color: var(--muted); }
.record-card { min-width: 0; padding: var(--space-4); border: 1px solid var(--light-gray); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.record-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--dark); }
.record-card-top h3 { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.5; }
.record-card-top .content-icon { box-sizing: content-box; padding: var(--space-2); border-radius: var(--radius-control); color: var(--primary); background: var(--soft-blue); }
.record-card-change { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--soft-blue); }
.record-card-change > div { min-width: 0; }
.record-card-change > .content-icon { width: 20px; height: 20px; color: var(--muted); }
.record-card-change span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.record-card-change strong { display: block; font-size: 18px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.record-card-before strong { color: var(--muted); }
.record-card-after strong { color: var(--primary); }
.record-card-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.record-card-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.record-card-stats > div { min-width: 0; padding: var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--canvas); }
.record-card-stats .content-heading { color: var(--muted); font-size: 11px; font-weight: 500; }
.record-card-stats strong { display: block; margin-top: 5px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.record-card-reason { margin-top: var(--space-3); padding: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--line-subtle); border-radius: 0; background: transparent; }
.record-card-reason > .content-heading { color: var(--muted); font-size: 11px; font-weight: 500; }
.record-card-reason p { margin: 5px 0 0; color: var(--dark); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.evidence-card { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--light-gray); border-radius: var(--radius-inset); background: var(--canvas); }
.evidence-card > .content-heading { color: var(--muted); font-size: 12px; }
.evidence-card > .content-heading > .context-help-button { margin-left: auto; }
@media(max-width:550px) {
  .record-card { padding: 13px; }
  .record-card-change { gap: 7px; padding: 10px; }
  .record-card-change strong { font-size: 16px; }
  .record-card-stats { gap: 8px; }
  .record-card-stats > div { padding: 9px 10px; }
}
@media(pointer:coarse) {
  .context-help-button { flex-basis:32px; width:32px; height:32px; min-height:32px; }
}
@media(forced-colors:active) {
  .context-help-button::after { border-color:ButtonText; }
  .context-help-button:focus-visible::after { outline-color:Highlight; }
  .context-help-popover,.record-card,.evidence-card,.record-card-stats > div,.record-card-reason { border-color: CanvasText; }
  .record-card-change { border: 1px solid CanvasText; }
}
.form-message { margin-top: 13px; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--dark); background: var(--soft-blue); border-left: 3px solid var(--primary); overflow-wrap: anywhere; animation: message-enter var(--motion-fast) ease-out; }
@keyframes message-enter { from { opacity: 0; } to { opacity: 1; } }
.form-message[data-kind="error"] { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.form-message[data-kind="success"] { border-color: var(--accent); background: var(--soft-teal); }
#unavailable p { margin: 14px 0 24px; }
.portal-header { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--nav-surface); color: white; }
.portal-header .wordmark { width: 150px; }
.portal-account { margin-left: auto; }
.portal-header + .workspace-body { max-width: 1400px; margin: auto; padding-top: 28px; }
.app-header { min-height: 52px; margin-bottom: 30px; display: flex; align-items: center; gap: 24px; }
.workspace-sidebar > .wordmark { width: 180px; margin: 4px auto 38px; }

.header-company { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.header-preview { color: #94a3b8; font-size: 12px; }
.account-menu { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; font-size: 12px; }
.account-menu > span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button.header-button { border-color: #ffffff26; color: #cbd5e1; background: transparent; font-size: 12px; min-height: 32px; padding: 7px 10px; }
/* Shared shell: the brand and account stay together in the navigation rail. */
.sidebar-bottom { margin: auto 14px 0; padding-top: 28px; color: #d5dfef; }
.sidebar-company { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #ffffff15; }
.sidebar-company > div { min-width: 0; }
.sidebar-company strong, .sidebar-company #header-user { display: block; overflow-wrap: anywhere; }
.sidebar-company #header-user { font-size: 12px; color: #b6c5da; margin-top: 3px; }
.sidebar-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #ffffff14; flex: 0 0 42px; }
.sidebar-avatar svg { width: 24px; height: 24px; }
.workspace-search-trigger { display: flex; align-items: center; gap: 14px; width: min(880px,100%); min-width: 0; height: 50px; border: 1px solid var(--light-gray); border-radius: 14px; padding: 0 17px; background: var(--surface); color: var(--muted); text-align: left; font-size: 14px; }
.workspace-search-trigger:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.workspace-search-trigger svg { width: 22px; height: 22px; flex-shrink: 0; }
.workspace-search-trigger kbd { margin-left: auto; white-space: nowrap; border: 1px solid var(--light-gray); border-radius: 6px; padding: 2px 7px; font: inherit; font-size: 12px; }
:root[data-theme="dark"] .workspace-body { background: var(--canvas); }
.workspace-body { width: 100%; min-width: 0; padding: 18px 32px 24px; background: radial-gradient(ellipse 65% 220px at 48% 0,#e5f4ff85,transparent), radial-gradient(ellipse 40% 170px at 90% 0,#e8fff980,transparent), var(--canvas); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading .eyebrow { color: var(--primary); font-size: 12px; letter-spacing: 1.5px; margin-bottom: 5px; }
.workspace[data-page="home"] .page-heading h1 { font-size: 42px; white-space: nowrap; }
.page-heading h1 { font-size: 32px; line-height: 1.35; letter-spacing: -1.2px; font-weight: 750; }
.page-heading p:not(.eyebrow) { font-size: 12px; color: var(--muted); margin-top: 6px; }
.connected { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--light-gray); background: var(--surface); padding: 6px 11px; font-size: 12px; border-radius: 20px; white-space: nowrap; }
.tabs { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tabs button { display: flex; align-items: center; gap: 18px; min-height: 60px; padding: 16px 22px; border: 0; border-radius: 10px; color: var(--nav-ink); background: transparent; text-align: left; font-size: 18px; font-weight: 500; white-space: nowrap; }
.tabs button[data-nav-group]::after { content: ""; width: 8px; height: 8px; flex: 0 0 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast) ease, color var(--motion-fast) ease; opacity: .7; }
.tabs button[data-nav-group][aria-expanded="true"]::after { transform: rotate(45deg); opacity: 1; }
.tabs button.active { color: #f4f8ff; background: linear-gradient(105deg,#18395c,var(--nav-active)); box-shadow: inset 4px 0 #12d1bf; font-weight: 650; }
.tabs button.active .nav-icon { color: #2590ff; }
.company-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel { border: 1px solid var(--light-gray); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); min-width: 0; }
.panel-heading > :first-child { margin-right: auto; }
.panel-heading { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.panel-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.panel h2 { font-size: 18px; letter-spacing: -.5px; }
.soft-badge { color: var(--primary); background: var(--soft-blue); padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.company-identity { display: flex; align-items: center; gap: 15px; padding-bottom: 24px; }
.company-avatar { width: 55px; height: 55px; background: var(--soft-blue); color: var(--primary); display: grid; place-items: center; border-radius: 11px; font-size: 26px; flex-shrink: 0; }
.company-identity h3 { font-size: 21px; overflow-wrap: anywhere; line-height: 1.5; margin-top: 3px; }
.detail-list { margin: 0; }
.detail-list > div { border-top: 1px solid var(--line-subtle); padding: 12px 0; display: grid; grid-template-columns: 110px minmax(0,1fr); }
.detail-list dt { color: var(--muted); font-size: 12px; }
.detail-list dd { margin: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.next-panel { display: flex; flex-direction: column; align-items: start; }
.panel-kicker { color: var(--primary); font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.next-panel h2 { font-size: 22px; }
.next-panel > p { color: var(--muted); font-size: 12px; margin: 11px 0 23px; }
.scope-note { margin-top: auto; padding-top: 35px; display: flex; gap: 9px; align-items: start; width: 100%; }
.scope-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 7px; }
.scope-note p { font-size: 12px; color: var(--muted); line-height: 1.9; }
.staff-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; align-items: start; }
.title-with-count { display: flex; align-items: center; gap: 9px; }
.count-badge { background: var(--soft-blue); color: var(--primary); min-width: 25px; text-align: center; font-size: 12px; border-radius: 6px; padding: 1px 7px; }
.text-button { background: transparent; border: 0; padding: 4px; color: var(--muted); font-size: 12px; }
.table-scroll { border-radius: 10px; width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
th { color: var(--muted); background: var(--canvas); font-size: 12px; font-weight: 600; padding: var(--table-cell-y) var(--table-cell-x); border-bottom: 1px solid var(--light-gray); }
td { border-bottom: 1px solid var(--line-subtle); font-size: 14px; padding: var(--table-cell-y) var(--table-cell-x); overflow-wrap: anywhere; }
tbody tr { transition: background-color var(--motion-fast); }
tbody tr:hover { background: var(--soft-blue); }
td[colspan]:only-child { color: var(--muted); text-align: center; padding-block: 30px; }
.staff-list th:nth-child(1) { width: 35%; } .staff-list th:nth-child(2) { width: 35%; } .staff-list th:nth-child(3) { width: 30%; }
.role-badge { display: inline-block; font-size: 12px; padding: 2px 7px; border-radius: 4px; background: var(--canvas); white-space: nowrap; }
.role-badge[data-role="ADMIN"] { background: var(--soft-blue); color: var(--primary); }
.me-tag { color: var(--muted); font-size: 12px; margin-left: 6px; }
.table-note { color: var(--muted); font-size: 12px; margin-top: 16px; }
.staff-add .panel-heading { margin-bottom: 8px; }
.staff-add label { margin-top: 13px; }
.workspace-footer { border-top: 1px solid var(--light-gray); margin-top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #94a3b8; padding-top: 15px; }
.workspace-footer strong { letter-spacing: 1px; color: var(--muted); }
.backup-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
.backup-description { color: var(--muted); font-size: 12px; line-height: 1.9; }
.backup-scope { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 14px 0; margin-top: 12px; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); font-size: 12px; }
.backup-scope > span:not(.status-dot) { color: var(--muted); }
.backup-scope strong { font-weight: 500; }
.backup-note { margin-top: 13px; }
.recovery-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--light-gray); }
.recovery-section h3 { font-size: 13px; margin-bottom: 8px; }
.recovery-section .button { margin-top: 13px; font-size: 12px; }
.file-picker { display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 8px; border: 1px solid var(--light-gray); border-radius: 7px; }
.file-picker button { flex-shrink: 0; background: var(--soft-blue); color: var(--primary); border: 0; border-radius: 4px; padding: 7px 9px; font-size: 12px; }
.file-picker > span { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.restore-preview { margin-top: 23px; }
.preview-heading { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; margin-bottom: 13px; }
.restore-notice { padding: 12px; background: var(--canvas); border-left: 3px solid var(--dark); font-size: 12px; line-height: 1.8; margin: 13px 0 18px; }

.workspace-frame { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100dvh - var(--selo-window-inset, 0px)); }
.workspace-sidebar { position: sticky; top: var(--selo-window-inset, 0px); height: calc(100dvh - var(--selo-window-inset, 0px)); overflow-y: auto; background: radial-gradient(ellipse at 0 0,#21344a66,transparent 55%),var(--nav-surface); border-right: 1px solid #ffffff12; padding: 18px 10px 22px; display: flex; flex-direction: column; }
.nav-label { color: #90a8c8; font-size: 12px; font-weight: 600; padding: 0 12px; }
.tabs button:not(:disabled):hover { background: #ffffff0c; color: #ffffff; }
.tabs button.active:hover { background: var(--nav-active); color: #ffffff; }
.section-tabs { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; margin-bottom: 24px; background: var(--line-subtle); border: 1px solid var(--line-subtle); border-radius: 11px; }
.section-tabs button { border: 0; border-radius: 8px; padding: 11px 17px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.section-tabs button:hover { background: var(--canvas); color: var(--dark); }
.section-tabs button.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 5px #1d407c0b; }
.section-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.section-tabs button:disabled { opacity: .5; cursor: wait; }
.nav-icon { width: 26px; height: 26px; flex-shrink: 0; }
.sidebar-note { display: flex; gap: 6px; align-items: center; padding-top: 18px; font-size: 11px; color: #91a8c5; }
#workspace-message { margin-bottom: 16px; }
.summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-5); border: 0; border-radius: 0; background: transparent; overflow: visible; }
.summary-grid article, .summary-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--light-gray); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.summary-grid article { overflow: hidden; }
.summary-grid article:last-child { border-right: 1px solid var(--light-gray); }




.metric-icon { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; padding: 7px; color: var(--primary); background: var(--soft-blue); border-radius: 10px; }
.summary-grid span { padding-right: 35px; display: block; font-size: 12px; color: var(--muted); }
.summary-grid strong { display: block; font-size: clamp(20px,1.9vw,26px); letter-spacing: -.7px; margin: var(--space-4) 0 var(--space-1); color: var(--dark); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-grid small { font-size: 12px; color: var(--muted); }
.business-list { padding: 24px; }
.list-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; padding: var(--space-4); margin-bottom: var(--space-5); border: 1px solid var(--line-subtle); background: var(--canvas); border-radius: var(--radius-inset); }
.list-toolbar label { margin: 0 0 5px; font-size: 12px; }
.list-toolbar input, .list-toolbar select { height: var(--control-height); }
.list-toolbar .button { min-height: var(--control-height); padding: 9px 15px; white-space: nowrap; }
.list-toolbar > div { min-width: 120px; }
.list-toolbar .search-control { flex: 1; min-width: 160px; max-width: 470px; }
#driver-create { margin-left: auto; }
.list-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 12px; }
.list-caption h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.business-table { table-layout: auto; color: var(--dark); -webkit-text-fill-color: currentColor; }
.business-table:not(.driver-table) { min-width: 780px; }
.business-table.table-fit, table.table-fit { min-width: 0; width: 100%; }
.business-table th { font-size: 12px; font-weight: 600; white-space: nowrap; }
.business-table td { font-size: 14px; line-height: 1.6; }
.driver-table td { white-space: nowrap; }
.driver-table th:first-child { width: 17%; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vehicle-link { background: none; border: 0; padding: 2px 0; color: var(--primary); font: inherit; font-weight: 600; text-align: left; }
.vehicle-link:hover { text-decoration: underline; }
.retired-badge { background: var(--canvas); color: var(--muted); border: 1px solid var(--light-gray); border-radius: 4px; padding: 1px 4px; margin-left: 5px; font-size: 12px; }
.business-table .empty-state { text-align: center; color: var(--muted); padding: 45px 14px; white-space: normal; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; font-size: 12px; color: var(--muted); }
.pagination > div { display: flex; gap: 6px; }
.pagination .button { min-height: 31px; padding: 6px 11px; font-size: 12px; }
:is(.finance-totals,.workflow-totals) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
:is(.finance-totals,.workflow-totals) > div { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
:is(.finance-totals,.workflow-totals) > div > span { min-height: 24px; padding-right: 36px; font-size: 12px; color: var(--muted); }
:is(.finance-totals,.workflow-totals) strong { display: block; margin-top: var(--space-3); font-size: clamp(20px,2vw,26px); font-weight: 700; color: var(--dark); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
:is(.finance-section,.workflow-section) { min-width: 0; margin-top: var(--space-5); }
:is(.finance-section,.workflow-section) + :is(.finance-section,.workflow-section) { border-top: 1px solid var(--line-subtle); padding-top: var(--space-5); }
:is(.finance-section-heading,.workflow-section-heading) { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: 15px; font-weight: 650; color: var(--dark); }
:is(.finance-section-heading,.workflow-section-heading) h3 { font: inherit; }
:is(.finance-section-heading,.workflow-section-heading) .content-icon { box-sizing: content-box; width: 18px; height: 18px; padding: var(--space-2); border-radius: var(--radius-control); background: var(--soft-blue); color: var(--primary); }
:is(.finance-section,.workflow-section) .business-form-grid > div:not(.checkbox-field) { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
:is(.finance-section,.workflow-section) .business-form-grid label { margin: 0; }
:is(.finance-section,.workflow-section) .detail-list { margin-bottom: var(--space-4); }
:is(.finance-section,.workflow-section) :is(.evidence-card,.record-card) { margin-top: var(--space-3); }
:is(.finance-section,.workflow-section) :is(.finance-totals,.workflow-totals) { margin-block: var(--space-4); }
.workflow-state { display: inline-block; max-width: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--soft-blue); color: var(--primary); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.settings-form { max-width: 920px; }
.business-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 23px; row-gap: 12px; }
.business-form-grid > div { display: grid; grid-template-columns: 115px minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; }
.business-form-grid label { margin: 0; font-size: 13px; }
.business-form-grid input, .business-form-grid select { height: var(--control-height); font-size: 14px; padding: 0 12px; }
.business-form-grid .field-wide { grid-column: 1 / -1; }
.business-form-grid textarea { min-height: 72px; height: auto; padding: 9px 10px; resize: vertical; font-size: 14px; }
.business-form-grid .checkbox-field { display: flex; padding-top: 6px; }
.checkbox-field input { width: 17px; height: 17px; accent-color: var(--primary); }
input:disabled, select:disabled, textarea:disabled { color: var(--dark); opacity: 1; background: var(--canvas); }
.form-actions { display: flex; align-items: center; justify-content: end; gap: 10px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--light-gray); }
.form-actions > span { margin-right: auto; }
form > .button.primary:not(.wide) { display: flex; margin-left: auto; margin-top: 20px; }
.driver-dialog { width: min(760px,calc(100% - 32px)); max-height: calc(100dvh - 48px); border: 1px solid var(--light-gray); border-radius: var(--radius-dialog); padding: var(--space-5); color: var(--dark); background: var(--surface); box-shadow: var(--dialog-shadow); }
.driver-dialog.dialog-size-wide { width: min(940px,calc(100vw - 32px)); }
.driver-dialog.dialog-size-compact,
#payment-dialog, #refund-dialog, #receipt-detail-dialog, #receipt-allocate-dialog, #receipt-reversal-dialog,
#contract-detail-dialog, #insurance-detail-dialog, #document-detail-dialog { width: min(560px,calc(100vw - 32px)); }
#invoice-dialog { width: min(760px,calc(100vw - 32px)); }
#invoice-create-dialog { width: min(690px,calc(100% - 32px)); padding: 24px; overflow: visible; }
#invoice-create-dialog .dialog-heading { margin-bottom: 17px; padding-bottom: 14px; }
#invoice-create-dialog .dialog-heading h2 { font-size: 20px; }
.invoice-create-fields { display: grid; grid-template-columns: minmax(0,2fr) minmax(190px,.9fr); align-items: start; gap: 18px; }
.invoice-create-fields label { margin: 0 0 6px; font-size: 13px; }
.invoice-driver-picker-wrap { position: relative; }
.invoice-driver-picker-wrap > input { height: var(--control-height); }
.invoice-driver-options { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; right: 0; max-height: min(280px,45dvh); overflow: auto; padding: 5px; border: 1px solid var(--light-gray); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 28px #0a1c3830; }
.invoice-driver-option { padding: 9px 11px; border-radius: 7px; color: var(--dark); font-size: 14px; line-height: 1.4; cursor: pointer; }
.invoice-driver-option:hover, .invoice-driver-option[data-active="true"] { background: var(--soft-blue); color: var(--primary); }
.invoice-driver-empty { padding: 10px 11px; color: var(--muted); font-size: 13px; }
.invoice-search-note { min-height: 18px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.invoice-create-hint { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
#invoice-create-dialog .form-actions { margin-top: 17px; padding-top: 13px; }
#invoice-create-dialog .form-actions .button { min-height: 40px; }
dialog::backdrop { background: #07172e80; backdrop-filter: blur(3px); }
dialog { --control-height: 40px; box-shadow: var(--dialog-shadow); overscroll-behavior: contain; }
.compact-form { --control-height: 36px; --form-field-gap: var(--space-2); --form-section-gap: var(--space-4); --form-padding: var(--space-4); }
.compact-form .button { padding: 7px 12px; }
dialog label { margin: 10px 0 5px; font-size: 12px; }
dialog .business-form-grid { column-gap: 18px; row-gap: 10px; }
dialog .business-form-grid > div { grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 4px; }
dialog .business-form-grid label { margin: 0; }
dialog .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
dialog .form-grid > label { margin: 0; }
dialog .form-grid input, dialog .form-grid select { margin-top: 4px; }
dialog .form-actions { margin-top: 16px; padding-top: 12px; }
dialog form > .button.primary:not(.wide) { margin-top: 14px; }
dialog.workspace-dialog { width: min(680px,calc(100vw - 32px)); max-height: min(840px,calc(100dvh - 40px)); overflow: auto; margin: auto; padding: 20px; border: 1px solid var(--light-gray); border-radius: 18px; color: var(--dark); background: var(--surface); }
dialog.workspace-dialog-wide { width: min(980px,calc(100vw - 32px)); }
#home-favorite-editor, #bank-account-area { width: min(620px,calc(100vw - 32px)); }
#notification-settings-dialog { width: min(720px,calc(100vw - 32px)); }
#notification-template-dialog { width: min(760px,calc(100vw - 32px)); }
#workspace-search-dialog { width: min(820px,calc(100vw - 32px)); }
#invoice-batch-dialog, #contract-documents-dialog, #tax-doc-dialog, #installments-dialog { width: min(940px,calc(100vw - 32px)); }
#receipt-dialog, #bank-detail-dialog, #forms-template-dialog, #forms-draft-dialog { width: min(840px,calc(100vw - 32px)); }
dialog[open] { animation: dialog-enter var(--motion-fast) ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.dialog-heading > .button:last-child, .workflow-dialog-header > .button:last-child, .profile-header > .button:last-child, .workspace-search-heading > .button:last-child { margin-left: auto; align-self: flex-start; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-subtle); }
.dialog-heading h2 { font-size: 21px; overflow-wrap: anywhere; }
.dialog-heading .panel-kicker { display: block; margin-bottom: 3px; }
.dialog-heading .button { flex-shrink: 0; min-height: 34px; font-size: 12px; padding: 7px 11px; }
#driver-history { border-top: 1px solid var(--light-gray); margin-top: 24px; padding-top: 18px; }
#driver-history h3 { font-size: 13px; margin: 0 0 10px; }
#driver-history h3:not(:first-child) { margin-top: 20px; }
#driver-history .business-table { min-width: 470px; }
.history-line { display: flex; gap: 20px; padding: 7px 0; border-bottom: 1px solid var(--light-gray); font-size: 12px; }
.history-line span { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.theme-control { display: inline-flex; align-items: center; gap: 7px; }
.theme-control label { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.theme-control select { width: auto; min-width: 94px; height: 32px; padding: 0 7px; font-size: 12px; border-radius: 8px; }
.workspace-sidebar .theme-control label { display: none; }
.workspace-sidebar .theme-control select { background: #1c2a40; color: #e8eef8; border-color: #42516a; color-scheme: dark; }
.batch-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--action); }
.batch-table th:first-child { width: 40px; }
#batch-results .table-scroll { max-height: min(48vh, 400px); overflow: auto; }
.batch-table th { position: sticky; top: 0; z-index: 1; }
.period-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.period-toolbar > div { flex: 1; min-width: 150px; }
.period-toolbar label { margin-top: 0; }
.period-history { margin-top: 18px; }
/* Cashbook entry: visible, repeatable rows above the ledger. */
.cash-composer { container: cash-entry / inline-size; padding: var(--space-5); margin-bottom: var(--space-5); border: 1px solid var(--light-gray); border-radius: var(--radius); background: var(--canvas); }
.cash-composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cash-composer-heading h2 { margin: 2px 0 6px; font-size: 20px; }
.cash-composer-heading p:not(.panel-kicker) { margin: 0; color: var(--muted); font-size: 13px; }
.cash-composer-heading .button { white-space: nowrap; }
.cash-composer-heading #cash-entry-extras { display: inline-flex; align-items: center; gap: 10px; }
.cash-composer-heading #cash-entry-extras::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast) ease; }
.cash-composer-heading #cash-entry-extras[aria-expanded="true"]::after { transform: rotate(225deg); }
.cash-grid-head, .cash-row-core { display: grid; grid-template-columns: 138px 84px minmax(150px,1fr) 180px 112px 32px; align-items: center; gap: 10px; }
.cash-grid-head { padding: 0 10px 7px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cash-entry-row { position: relative; padding: 10px; border: 1px solid var(--line-subtle); border-radius: 10px; margin-bottom: 8px; background: var(--surface); transition: border-color var(--motion-fast), background var(--motion-fast); }
.cash-entry-row:focus-within { border-color: var(--primary); }
.cash-entry-row[data-state="saved"] { background: var(--soft-teal); }
.cash-entry-row[data-state="error"] { border-color: var(--danger); }
.cash-field { display: block; min-width: 0; margin: 0; }
.cash-field>span { display: none; }
.cash-field input, .cash-field select { width: 100%; min-width: 0; height: 42px; padding: 8px 10px; font-size: 14px; }
.cash-field-amount input { text-align: right; font-variant-numeric: tabular-nums; }
.cash-row-remove { border: 0; border-radius: 8px; width: 32px; height: 36px; padding: 0; background: transparent; color: var(--muted); font-size: 23px; cursor: pointer; }
.cash-row-remove:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.cash-row-extra { display: grid; grid-template-columns: minmax(130px,1fr) minmax(200px,2fr); gap: 12px; padding-top: 12px; }
.cash-row-extra[hidden] { display: none; }
.cash-row-extra .cash-field>span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.cash-row-status { margin: 8px 0 0; font-size: 12px; color: var(--accent); }
.cash-entry-row[data-state="error"] .cash-row-status { color: var(--danger); }
.cash-composer-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cash-composer-bottom .button { white-space: nowrap; }
.cash-key-hint { flex: 1; color: var(--muted); font-size: 11px; margin: 0; }
.cash-key-hint kbd { font: inherit; border: 1px solid var(--light-gray); border-radius: 4px; padding: 2px 4px; background: var(--surface); }
#cash-entry-summary { color: var(--dark); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#cash-entry-save { min-height: 44px; padding-inline: 20px; }
.cash-composer-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.cash-record-audit { margin-top: 20px; margin-bottom: 20px; }
.cash-audit-toggle { cursor: pointer; font-weight: 650; padding: 8px 0; color: var(--dark); }
.cash-audit-toggle span { font-size: 12px; font-weight: 400; margin-left: 10px; color: var(--muted); }
.cash-record-audit details[open] .cash-audit-toggle { margin-bottom: 18px; }
@container cash-entry (max-width: 780px) {
 .cash-grid-head { display: none; }
 .cash-row-core { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .cash-row-core .cash-field>span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
 .cash-field-description { grid-column: 1 / -1; }
 .cash-field-direction { padding-right: 32px; }
 .cash-row-remove { position: absolute; right: 8px; top: 32px; }
 .cash-row-extra { grid-template-columns: minmax(0,1fr); }
 .cash-composer-heading { align-items: start; flex-wrap: wrap; }
 .cash-key-hint { display: none; }
 #cash-entry-summary { flex-basis: 100%; order: 2; }
 #cash-entry-save { margin-left: auto; }
}
@container cash-entry (max-width: 520px) {
 .cash-row-core { grid-template-columns: minmax(0,1fr); }
 .cash-field-date { padding-right: 40px; }
 .cash-field-direction { padding-right: 0; }
}
.period-card { margin-bottom: 20px; }
.period-status { display: inline-flex; align-items: center; gap: 7px; border-radius: 20px; background: var(--soft-teal); color: var(--dark); padding: 4px 11px; font-size: 12px; }
.period-status[data-closed="true"] { background: var(--soft-blue); color: var(--primary); }
@media (max-width: 480px) {
  .workspace-sidebar .theme-control label { display: none; }
  .account-menu { gap: 7px; }

  .summary-grid strong { font-size: 20px; }
  .metric-icon { top: 12px; right: 12px; width: 28px; height: 28px; padding: 6px; }
}
@media (max-width: 1100px) {
  .auth-shell { margin: 25px; }
  .brand-panel { padding: 30px; }
  .auth-content { padding: 30px; }
  .brand-copy h1 { font-size: 29px; }
  .staff-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 16px; }
  .workspace-frame { grid-template-columns: 208px minmax(0,1fr); }
  .tabs button { padding: 14px; gap: 12px; font-size: 14px; }
  .workspace-body { padding: 24px 20px; }
  .summary-grid { gap: 10px; }
  .summary-grid article { padding-left: 12px; padding-right: 12px; }
  .business-form-grid { column-gap: 15px; }
  .business-form-grid > div { grid-template-columns: 100px minmax(0,1fr); }
  .app-header { gap: 16px; }
}
@media (max-width: 720px) {
  .portal-header { padding: 14px; gap: 12px; flex-wrap: wrap; }
  .portal-header .wordmark { width: 120px; }
  .portal-header .header-company { width: auto; order: initial; }
  .auth-shell { display: block; margin: 14px; min-height: auto; border-radius: 13px; }
  .brand-panel { padding: 20px 23px; }
  .brand-panel .wordmark { width: 240px; }

  .brand-copy { margin: 20px 0 0; }
  .brand-copy .eyebrow { font-size: 12px; margin-bottom: 8px; }
  .brand-copy h1 { font-size: 22px; line-height: 1.4; letter-spacing: -.7px; }
  .brand-copy h1 br { display: none; }
  .brand-description, .brand-points, .brand-bottom { display: none; }
  .auth-content { padding: 23px; }
  .auth-topline { margin-bottom: 20px; }
  .form-heading h2 { font-size: 21px; }
  .form-heading p { font-size: 12px; }
  #login-section { padding-top: 0; }
  .auth-footer { padding-top: 25px; }
  .app-header { gap: 10px; margin-bottom: 20px; min-height: 44px; }
  .header-preview, .header-divider, .account-menu > span { display: none; }
  .header-company { order: 3; width: 100%; font-size: 12px; }
  .account-menu { margin-left: auto; }
  .workspace-body { padding: 20px 14px; }
  .workspace-frame { display: block; }
  .workspace-sidebar { position: static; height: auto; overflow: visible; padding: 14px 12px 8px; border-right: 0; border-bottom: 1px solid var(--light-gray); }
  .workspace-sidebar > .wordmark { width: 132px; margin: 0 0 14px; }
  .sidebar-bottom { margin-top: 12px; padding: 0; border: 0; }
  .sidebar-company { display: none; }
  .sidebar-bottom .account-menu { margin-top: 0; }
  .sidebar-bottom .sidebar-note { display: none; }
  .workspace-search-trigger kbd { display: none; }
  .nav-label, .sidebar-note { display: none; }
  .page-heading { display: block; }
  .page-heading h1, .workspace[data-page="home"] .page-heading h1 { font-size: 26px; }
  .page-heading p:not(.eyebrow) { font-size: 12px; }
  .connected { display: none; }
  .tabs { flex-direction: row; overflow-x: auto; gap: 4px; margin: 0; }
  .tabs button { min-height: 42px; padding: 9px 11px; font-size: 12px; flex-shrink: 0; }
  .nav-icon { width: 16px; height: 16px; }
  .company-layout, .staff-layout, .backup-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .panel { padding: 18px; }
  .scope-note { padding-top: 25px; }
  .detail-list > div { grid-template-columns: 90px minmax(0,1fr); }
  .next-panel h2 { font-size: 19px; }
  td, th { padding-left: 7px; padding-right: 7px; }
  .form-pair { gap: 9px; }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 15px; }
  .summary-grid strong { font-size: 21px; }
  .business-list { padding: 14px; }
  .list-toolbar { flex-wrap: wrap; gap: 8px; }
  .list-toolbar .search-control { flex-basis: 100%; max-width: none; }
  .list-toolbar > div { min-width: 105px; }
  .list-caption { align-items: start; flex-direction: column; gap: 4px; }
  :is(.finance-totals,.workflow-totals) > div { padding: var(--space-4); }
  :is(.finance-totals,.workflow-totals) strong { font-size: 22px; }
  .business-form-grid { grid-template-columns: minmax(0,1fr); }
  .business-form-grid > div { grid-template-columns: 107px minmax(0,1fr); }
  .panel-heading-actions { width: 100%; justify-content: flex-start; }
  .panel-heading-actions .button { flex: 1 1 auto; }
  dialog.workspace-dialog, dialog.workspace-dialog-wide { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); padding: 17px; }
  .driver-dialog { width: calc(100% - 20px); padding: 17px; max-height: calc(100dvh - 24px); }
  #invoice-create-dialog { width: calc(100% - 20px); padding: 17px; }
  .invoice-create-fields { grid-template-columns: minmax(0,1fr); gap: 11px; }
  #invoice-create-dialog .dialog-heading h2 { font-size: 18px; }
  .dialog-heading h2 { font-size: 18px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > span { flex-basis: 100%; }
  .settings-form .panel-heading { align-items: start; }
  .panel-heading .soft-badge { flex-shrink: 0; }
  .history-line { flex-wrap: wrap; gap: 4px 14px; }

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

.bank-mapping { margin-top: 16px; }
.bank-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.bank-totals { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px; background: var(--soft-blue); border-radius: 10px; margin: 16px 0; }
.bank-totals strong { margin-left: 8px; }
.bank-confirm-area { border: 1px solid var(--light-gray); border-radius: 10px; padding: 16px; margin: 16px 0; }
.bank-check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.bank-check input { width: 17px; height: 17px; flex-shrink: 0; margin: 0; accent-color: var(--primary); }

.tax-service-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--light-gray); border-radius: 10px; color: var(--muted); margin-bottom: 20px; }
.tax-item-row { display: grid; grid-template-columns: minmax(140px,2fr) minmax(100px,1fr) minmax(100px,1fr) auto; align-items: end; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--light-gray); }
.tax-item-row input { min-width: 0; }
.tax-totals { background: var(--soft-blue); color: var(--dark); padding: 16px; border-radius: 10px; font-weight: 600; }
@media (max-width: 640px) { .tax-item-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .tax-item-row > div:first-child { grid-column: 1 / -1; } }

.forms-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.forms-template-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--light-gray); }
.forms-template-row.record-card { padding: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.forms-template-row > div { min-width: 0; overflow-wrap: anywhere; }
.forms-template-row .record-card-top { margin-bottom: var(--space-2); justify-content: flex-start; }
.forms-field-row { display: grid; grid-template-columns: minmax(80px,1fr) minmax(100px,1.2fr) minmax(120px,1.4fr); gap: 8px 12px; align-items: end; padding: 16px 0; border-bottom: 1px solid var(--light-gray); }
.forms-field-row select { min-width: 0; }
.forms-field-actions { display: flex; gap: 8px; grid-column: 2 / -1; justify-content: flex-end; }
.forms-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.forms-check input { width: 17px; height: 17px; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.forms-source-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.forms-source-heading > div { flex: 1; min-width: 160px; }
.forms-driver-results { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-rendered { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.8; background: var(--canvas); color: var(--dark); border: 1px solid var(--light-gray); border-radius: 12px; padding: 22px; min-height: 100px; }
@media (max-width: 640px) { .forms-field-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .forms-field-row select { grid-column: 1 / -1; } .forms-field-actions { grid-column: 1 / -1; } }

/* Optional transport workspace */
.transport-module {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:var(--soft-blue);border:1px solid var(--light-gray);border-radius:12px;margin:12px 0 24px;}
.transport-module p {margin:4px 0 0;}
.transport-view-bar {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.transport-dialog {width:min(800px,calc(100vw - 24px));max-height:90dvh;overflow:auto;border:1px solid var(--light-gray);border-radius:var(--radius-dialog);padding:var(--space-5);color:var(--dark);background:var(--surface);box-shadow:var(--dialog-shadow);}
.transport-dialog.settlement-dialog {width:min(960px,calc(100vw - 24px));}
.transport-dialog fieldset {border:0;padding:0;margin:0 0 20px;min-width:0;}
.transport-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.transport-wide {grid-column:1/-1;}
.transport-check {display:flex;align-items:center;gap:10px;}
.transport-check input {width:auto;}
.transport-driver-search {display:flex;gap:8px;}
.transport-driver-search input {min-width:0;flex:1;}
.transport-driver-results {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.transport-history {padding-left:24px;color:var(--muted);}
.transport-history:has(> .record-card) { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.transport-history .record-card-top { margin-bottom: var(--space-2); justify-content: flex-start; }
.transport-history .record-card-meta { margin: 0; }
.transport-history .record-card-reason { overflow-wrap: anywhere; white-space: pre-wrap; color: var(--dark); }
.transport-dialog section {border-top:1px solid var(--light-gray);margin-top:24px;padding-top:12px;}
.transport-state {display:inline-block;border-radius:6px;padding:3px 8px;background:var(--soft-blue);color:var(--primary);white-space:nowrap;}
.transport-route {display:block;color:var(--muted);font-size:12px;margin-top:4px;}
@media(max-width:600px) {.transport-grid{grid-template-columns:1fr;}.transport-dialog{padding:17px;}.transport-module{align-items:flex-start;flex-direction:column;}.transport-driver-search{flex-wrap:wrap;}.transport-driver-search input{flex-basis:100%;}}

/* Company-wide optional navigation */
.menu-settings-panel {margin-top:20px;}
.menu-settings-panel fieldset {border:0;padding:0;margin:20px 0;min-width:0;}
.menu-settings-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.menu-setting-group {background:var(--canvas);border:1px solid var(--light-gray);border-radius:12px;padding:16px;}
.menu-setting-group h3 {margin:0 0 12px;font-size:14px;}
.menu-setting-option {display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;color:var(--dark);}
.menu-setting-option input {width:18px;height:18px;flex:0 0 18px;accent-color:var(--action);margin:0;}
.menu-access-recovery {margin-bottom:16px;padding:16px;border:1px solid var(--light-gray);border-radius:12px;background:var(--surface);}
@media(max-width:1100px){.menu-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:500px){.menu-settings-grid{grid-template-columns:1fr;}}

/* Transport settlement work area */
.settlement-intro h3 {margin-bottom:4px;}
.settlement-report-area {margin-top:24px;border-top:1px solid var(--light-gray);padding-top:20px;}
.settlement-money-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.settlement-money-grid section {border:1px solid var(--light-gray);border-radius:12px;padding:16px;background:var(--canvas);margin:0;}
.settlement-money-grid section h3 {margin:0 0 14px;}
.settlement-money-grid section>div {margin-bottom:12px;}
.settlement-calculated {display:block;margin-top:16px;color:var(--primary);font-size:17px;}
.settlement-totals {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;}
.settlement-totals>div {background:var(--soft-blue);border-radius:10px;padding:14px;min-width:0;}
.settlement-totals span {display:block;color:var(--muted);font-size:12px;}
.settlement-totals strong {display:block;overflow-wrap:anywhere;}
.settlement-order-info {padding:14px;border-radius:10px;background:var(--canvas);white-space:pre-line;}
.settlement-payment-row {display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--light-gray);padding:12px 0;}
.settlement-payment-row.record-card { padding: var(--space-4); margin-bottom: var(--space-3); }
.settlement-payment-row > div { min-width: 0; overflow-wrap: anywhere; }
.settlement-payment-row .button { flex-shrink: 0; }
.settlement-payment-row p {margin:0;color:var(--muted);}
@media(max-width:600px){.settlement-money-grid{grid-template-columns:1fr;}.settlement-totals{grid-template-columns:repeat(2,minmax(0,1fr));}.settlement-payment-row{align-items:flex-start;flex-direction:column;}}

/* Vehicle operation records */
.operations-report {border-top:1px solid var(--light-gray);padding-top:20px;margin-top:24px;}
.operations-totals {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0;}
.operations-totals>div {background:var(--soft-blue);padding:14px;border-radius:10px;min-width:0;}
.operations-totals span {display:block;color:var(--muted);font-size:12px;}
.operations-totals strong {display:block;overflow-wrap:anywhere;}
.operations-distance {font-weight:600;color:var(--primary);}
#operations-optional {padding:12px 0;}
#operations-optional summary {margin-bottom:16px;}
@media(max-width:900px){.operations-totals{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:600px){.operations-totals{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Input forms: visible edges and widths matched to the information entered. */
dialog fieldset { min-width: 0; }
#driver-fields .driver-field-group { border: 0; padding: 0; margin: 0 0 var(--space-5); }
#driver-fields .driver-field-group legend { width: 100%; padding: 0 0 var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--line-subtle); color: var(--dark); font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
#driver-fields .driver-field-group legend::before { content: ''; display: inline-block; width: 3px; height: 12px; margin-right: var(--space-2); border-radius: 2px; background: var(--primary); }
#driver-fields .driver-notes-fields { grid-template-columns: minmax(0,1fr); }
#driver-fields textarea { min-height: 64px; height: 64px; }
#tax-doc-fields, #tax-profile-fields, #journal-fields { border: 0; padding: 0; }
#tax-doc-fields > legend { padding: 0; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
#tax-doc-fields > h3 { margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--line-subtle); font-size: 14px; }
@media (min-width: 900px) {
  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])), select, textarea {
    border-color: var(--field-border); background: var(--field-fill); border-radius: 8px;
    box-shadow: inset 0 1px 2px #152d4c05;
  }
  input:hover:where(:not(:disabled):not([readonly])), select:hover:where(:not(:disabled)), textarea:hover:where(:not(:disabled):not([readonly])) { border-color: var(--field-hover); }
  input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface); }
  input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] { background: var(--canvas); border-color: var(--light-gray); box-shadow: none; }
  input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
  input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
  dialog .business-form-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
  dialog .business-form-grid > div { flex: 1 1 calc(50% - 6px); }
  dialog .business-form-grid > .field-wide { flex-basis: 100%; }
  dialog .business-form-grid > div:has(> input[type="date"], > .selo-date-field) { flex: 0 1 166px; }
  dialog .business-form-grid > div:has(> input[type="number"]) { flex: 0 1 184px; }
  dialog .business-form-grid > div:has(> input[type="month"]) { flex: 0 1 170px; }
  dialog .business-form-grid > div:has(> input[type="tel"]) { flex: 0 1 192px; }
  dialog .business-form-grid > div:has(> #contract-contract-number, > #insurance-policy-number) { flex: 1 1 240px; }
  dialog .business-form-grid > div:has(> #contract-warning-days, > #invoice-rule-day) { flex: 0 1 130px; }
  dialog .business-form-grid > div:has(> #invoice-rule-month, > #journal-kind) { flex: 0 1 160px; }
  dialog .business-form-grid > div:has(> #receipt-method, > #payment-method, > #refund-method) { flex: 0 1 138px; }
  dialog .business-form-grid > div:has(> #receipt-memo, > #refund-memo, > #journal-location) { flex: 1 1 100%; }
  #payment-entry-fields, #refund-entry { gap: 12px 10px; }
  #payment-entry-fields > div:has(> .selo-date-field, > input[type="date"]), #refund-entry > div:has(> .selo-date-field, > input[type="date"]) { flex-basis: 154px; }
  #payment-entry-fields > div:has(> input[type="number"]), #refund-entry > div:has(> input[type="number"]) { flex-basis: 176px; }
  #payment-entry-fields > div:has(> select), #refund-entry > div:has(> select) { flex-basis: 118px; flex-grow: 1; }
  #driver-fields .business-form-grid { display: grid; gap: 10px 12px; }
  #driver-fields [data-group="contact"] .business-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #driver-fields [data-group="vehicle"] .business-form-grid { grid-template-columns: 150px minmax(0,1fr) minmax(0,1.15fr); }
  #driver-fields [data-group="dates"] .business-form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #driver-fields [data-group="billing"] .business-form-grid { grid-template-columns: 184px 130px 100px; }
  #driver-fields .business-form-grid > div { min-width: 0; }
  #contract-entry-fields .business-form-grid > div:has(> #contract-type), #insurance-entry-fields .business-form-grid > div:has(> #insurance-type) { flex: 0 1 180px; }
  :is(#contract-picker, #insurance-picker) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5px 16px; padding: 14px; margin-bottom: 16px; border: 1px solid var(--light-gray); border-radius: 10px; background: var(--canvas); }
  :is(#contract-picker, #insurance-picker) > .list-toolbar { grid-column: 1; grid-row: 1 / span 2; align-items: end; margin: 0; padding: 0; border: 0; background: transparent; }
  :is(#contract-picker, #insurance-picker) .search-control { min-width: 0; max-width: none; }
  :is(#contract-picker, #insurance-picker) > label { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  :is(#contract-picker, #insurance-picker) > select { grid-column: 2; grid-row: 2; }
  :is(#contract-picker, #insurance-picker) > .pagination { grid-column: 1 / -1; margin: 0; min-height: 18px; font-size: 11px; }
  :is(#contract-picker, #insurance-picker) .pagination > div:has(> button:first-child:disabled):has(> button:last-child:disabled) { display: none; }
  #tax-doc-fields > .business-form-grid > div:has(> #tax-title) { flex-basis: calc(100% - 178px); }
  #tax-doc-fields > .business-form-grid > div:has(> select) { flex: 0 1 184px; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-businessNumber"]) { flex: 0 1 184px; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-representative"]) { flex: 0 1 172px; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-name"]) { flex: 1 1 250px; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-address"]) { flex: 1 1 100%; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-businessType"], > input[id$="-businessItem"]) { flex: 0 1 184px; }
  :is(#tax-profile-fields, #tax-supplier-fields, #tax-customer-fields) > div:has(> input[id$="-email"]) { flex: 1 1 240px; }
  #operations-fields .transport-grid { display: flex; flex-wrap: wrap; gap: 12px; }
  #operations-fields .transport-grid > div { flex: 0 1 184px; }
  #operations-fields .transport-grid > .transport-wide { flex: 1 1 100%; }
  #operations-fields .transport-grid > div:has(> #operations-kind, > #operations-method) { flex-basis: 140px; }
  #operations-fields .transport-grid > div:has(> .selo-date-field, > input[type="date"]) { flex-basis: 166px; }
  #operations-fields .transport-grid > div:has(> #operations-driverId) { flex: 1 1 230px; }
  #transport-customer-fields > div:has(> #transport-address, > #transport-paymentTerms) { grid-column: 1 / -1; }
  .calendar-form-row:has(#calendar-start-date, #calendar-start-time) { grid-template-columns: repeat(2,166px); gap: 12px; }
  #calendar-dialog textarea { min-height: 72px; height: 72px; }
}
@media (min-width: 601px) and (max-width: 899px) {
  #driver-fields .business-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #driver-fields .driver-notes-fields { grid-template-columns: minmax(0,1fr); }
}

/* Historical receivable review is compact and uses theme-aware controls. */
#opening-dialog { width: min(800px,calc(100vw - 24px)); padding: 20px 22px; overflow-y: auto; overflow-x: hidden; }
#opening-dialog .dialog-heading { margin-bottom: 10px; padding-bottom: 10px; }
#opening-dialog .opening-intro { margin: 0 0 12px; }
#opening-dialog label { margin: 0 0 5px; }
#opening-dialog input:not([type="checkbox"]), #opening-dialog select, #opening-dialog textarea { color: var(--dark); background: var(--surface); border-color: var(--field-border); }
#opening-dialog input::placeholder, #opening-dialog textarea::placeholder { color: var(--muted); opacity: .8; }
#opening-dialog input:disabled, #opening-dialog select:disabled, #opening-dialog textarea:disabled { background: var(--canvas); }
#opening-dialog .button.secondary { color: var(--dark); background: var(--canvas); border-color: var(--field-border); }
#opening-dialog .opening-search-controls { display: flex; align-items: center; gap: 8px; }
#opening-dialog .opening-search-controls input { min-width: 0; flex: 1; }
#opening-dialog #opening-search-note { margin: 3px 0 9px; min-height: 16px; }
#opening-dialog .opening-selection-row { display: grid; grid-template-columns: minmax(0,1fr) 164px auto; gap: 10px; align-items: end; }
#opening-dialog .opening-selection-row > div, #opening-dialog .opening-review-row > div { min-width: 0; }
#opening-dialog .opening-selection-row .button { min-height: var(--control-height); }
#opening-dialog .opening-date-hint { margin: 5px 0 12px; }
#opening-dialog #opening-preview-section { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--light-gray); border-radius: 10px; background: var(--canvas); }
#opening-dialog .opening-source-heading { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#opening-dialog .opening-source-heading h3 { margin: 0; font-size: 13px; }
#opening-dialog .opening-source-heading p { margin: 0; font-size: 12px; color: var(--muted); }
#opening-dialog #opening-source { margin: 6px 0 3px; font-size: 16px; font-weight: 650; }
#opening-dialog #opening-preview-section .field-hint { margin: 3px 0 0; }
#opening-dialog .opening-review-row { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px; align-items: start; }
#opening-dialog :is(.opening-selection-row,.opening-review-row) > div > .content-heading { min-height: 24px; margin-bottom: 5px; }
#opening-dialog :is(.opening-selection-row,.opening-review-row) > div > .content-heading label { margin: 0; }
#opening-dialog .opening-excluded-section { margin-bottom: 14px; }
#opening-dialog .opening-cutoff-heading h3 { margin: 0; font-size: 13px; }
#opening-dialog .opening-excluded-list { display: grid; gap: 10px; margin-top: 9px; }
#opening-dialog .opening-excluded-card h4 { margin: 0; font-size: 13px; }
#opening-dialog .opening-excluded-card .field-hint { margin: 6px 0 10px; }
#opening-dialog #opening-reason { min-height: 64px; height: 64px; resize: vertical; padding: 9px 11px; }
#opening-dialog .opening-reviewed { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
#opening-dialog .opening-reviewed input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; }
#opening-dialog .opening-reviewed label { margin: 0; line-height: 1.5; }
#opening-dialog .opening-footer { margin-top: 12px; padding-top: 12px; gap: 10px; }
#opening-dialog .opening-footer p { margin: 0 auto 0 0; }
#opening-dialog .opening-footer > .content-heading { margin-right: auto; }
#opening-dialog .button { flex-shrink: 0; white-space: nowrap; }
#opening-source-reference, #opening-source-driver, #opening-source, #invoice-opening-note { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  #opening-dialog { padding: 16px; }
  #opening-dialog .opening-selection-row { grid-template-columns: minmax(0,1fr) 150px; }
  #opening-dialog .opening-selection-row > .button { grid-column: 1 / -1; min-height: 36px; }
  #opening-dialog .opening-review-row { grid-template-columns: minmax(0,1fr); gap: 9px; }
  #opening-dialog .opening-footer { flex-wrap: wrap; }
  #opening-dialog .opening-footer p { flex: 1 0 100%; }
  #opening-dialog .opening-footer > .content-heading { flex: 1 0 100%; }
  #opening-dialog .opening-footer .button { flex: 1 1 auto; }
}

/* Monthly cashbook balances and a compact, explicit opening-balance review. */
.cashbook-balance-panel { margin: 0 0 18px; padding: 16px; border: 1px solid var(--light-gray); border-radius: 12px; background: var(--canvas); }
.cashbook-balance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cashbook-balance-heading h3 { margin: 0; font-size: 15px; }
.cashbook-balance-heading p { margin: 3px 0 0; }
.cashbook-balance-cards { margin-block: var(--space-4); }
.cashbook-balance-cards > div:last-child { background: var(--soft-blue); }
.cashbook-balance-panel > .field-hint { margin: 7px 0 0; }
.cashbook-balance-details { margin-top: 8px; }
.cashbook-balance-details > summary { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 12px; color: var(--muted); }
#cashbook-opening-dialog { width: min(620px,calc(100vw - 24px)); padding: 20px; overflow: auto; }
#cashbook-opening-dialog .dialog-heading { margin-bottom: 10px; padding-bottom: 10px; }
#cashbook-opening-dialog label { margin: 0 0 5px; }
#cashbook-opening-dialog .cashbook-opening-intro { margin: 0 0 10px; }
#cashbook-opening-dialog .cashbook-opening-current { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--canvas); overflow-wrap: anywhere; }
#cashbook-opening-dialog input:not([type="checkbox"]), #cashbook-opening-dialog select, #cashbook-opening-dialog textarea { color: var(--dark); background: var(--surface); border-color: var(--field-border); }
#cashbook-opening-dialog input::placeholder, #cashbook-opening-dialog textarea::placeholder { color: var(--muted); opacity: .8; }
#cashbook-opening-dialog .button.secondary { color: var(--dark); background: var(--canvas); border-color: var(--field-border); }
#cashbook-opening-dialog input:disabled, #cashbook-opening-dialog select:disabled, #cashbook-opening-dialog textarea:disabled { background: var(--canvas); }
#cashbook-opening-dialog .cashbook-opening-source-row > p { margin: 5px 0 10px; }
#cashbook-opening-dialog .cashbook-opening-values { display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 14px; margin-bottom: 12px; }
#cashbook-opening-dialog .cashbook-opening-values > div { min-width: 0; }
#cashbook-opening-dialog #cashbook-opening-amount { text-align: right; font-variant-numeric: tabular-nums; }
#cashbook-opening-dialog textarea { padding: 9px 11px; min-height: 64px; height: 64px; }
#cashbook-opening-dialog .cashbook-opening-reviewed { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 8px; }
#cashbook-opening-dialog .cashbook-opening-reviewed input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; }
#cashbook-opening-dialog .cashbook-opening-reviewed label { margin: 0; line-height: 1.5; }
#cashbook-opening-dialog .form-actions { margin-top: 12px; padding-top: 12px; }
#cashbook-opening-dialog .button { white-space: nowrap; }
@media(max-width:600px) {
 .cashbook-balance-panel { padding: 12px; }
 #cashbook-opening-dialog { padding: 16px; }
 #cashbook-opening-dialog .cashbook-opening-values { grid-template-columns: minmax(0,1fr); gap: 10px; }
 #cashbook-opening-dialog .form-actions .button { flex: 1 1 auto; }
}

/* Shared insurance/fine charge review, with the source and whole invoice kept distinct. */
#driver-charge-dialog { width: min(680px,calc(100vw - 24px)); padding: 20px; overflow: auto; }
#driver-charge-dialog .dialog-heading { margin-bottom: 12px; padding-bottom: 10px; }
#driver-charge-dialog .driver-charge-source-card { padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--light-gray); border-radius: 10px; background: var(--canvas); }
#driver-charge-dialog .driver-charge-source-card p { margin: 0; overflow-wrap: anywhere; }
#driver-charge-dialog .driver-charge-source-card .field-hint { margin-top: 5px; }
#driver-charge-dialog .driver-charge-values { display: grid; grid-template-columns: 155px minmax(0,1fr) auto; gap: 10px; align-items: end; }
#driver-charge-dialog .driver-charge-values > div { min-width: 0; }
#driver-charge-dialog label { margin: 0 0 5px; }
#driver-charge-dialog input:not([type="checkbox"]), #driver-charge-dialog textarea { background: var(--surface); color: var(--dark); border-color: var(--field-border); }
#driver-charge-dialog input:disabled, #driver-charge-dialog textarea:disabled { background: var(--canvas); }
#driver-charge-dialog input::placeholder, #driver-charge-dialog textarea::placeholder { color: var(--muted); opacity: .8; }
#driver-charge-dialog .button.secondary { background: var(--canvas); color: var(--dark); border-color: var(--field-border); }
#driver-charge-dialog .driver-charge-total { margin: 9px 0; padding: 10px 12px; border-radius: 8px; background: var(--soft-blue); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
#driver-charge-dialog #driver-charge-invoice { margin: 7px 0 0; }
#driver-charge-dialog #driver-charge-settlement { margin: 0 0 10px; }
#driver-charge-dialog #driver-charge-settlement:empty { display: none; }
#driver-charge-dialog textarea { min-height: 64px; height: 64px; padding: 9px 11px; }
#driver-charge-dialog .driver-charge-review { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 8px; }
#driver-charge-dialog .driver-charge-review input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; }
#driver-charge-dialog .driver-charge-review label { margin: 0; line-height: 1.5; }
#driver-charge-dialog .driver-charge-hint { margin: 8px 0 0; }
#driver-charge-dialog .form-actions { margin-top: 12px; padding-top: 12px; flex-wrap: wrap; }
#driver-charge-dialog .button { white-space: nowrap; }
.installment-charge-button { margin: 4px 0 4px 6px; }
#journal-charge-open { margin: 0 0 12px; }
@media(max-width:600px) {
 #driver-charge-dialog { padding: 16px; }
 #driver-charge-dialog .driver-charge-values { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 #driver-charge-dialog .driver-charge-values > .button { grid-column: 1 / -1; }
 #driver-charge-dialog .form-actions .button { flex: 1 1 auto; }
 .installment-charge-button { margin-left: 0; }
}

.invoice-charge-summary { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--light-gray); border-radius: 10px; background: var(--canvas); }
.invoice-charge-summary > strong { display: block; font-size: 13px; color: var(--dark); }
.invoice-charge-summary > p { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.invoice-charge-summary > small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.5; }

/* Dated vehicle evidence uses shared theme cards and contextual help. */
.driver-vehicle-number-block { min-width: 0; margin-bottom: 0; }
.driver-vehicle-number-block.is-changing { grid-column: 1 / -1; }
.driver-vehicle-numbers { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.driver-vehicle-number-block.is-changing .driver-vehicle-numbers { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 200px; align-items: start; }
.driver-vehicle-numbers > div { min-width: 0; }
.driver-previous-vehicle-label { display: flex; align-items: center; min-height: 24px; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.driver-vehicle-numbers [data-field="vehicleNumber"] > label { margin: 0 0 6px; font-size: 12px; }
.driver-vehicle-number-block.is-changing [data-field="vehicleNumber"] > label { display: flex; align-items: center; min-height: 24px; margin-bottom: 8px; }
.driver-previous-vehicle strong { display: flex; align-items: center; min-height: var(--control-height); padding: 6px 12px; border: 1px solid var(--light-gray); border-radius: var(--radius-control); background: var(--surface); color: var(--dark); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.driver-vehicle-number-block.is-changing [data-field="vehicleNumber"] > label { color: var(--primary); }
.driver-vehicle-change { min-width: 0; }
.driver-vehicle-change > input, .driver-vehicle-change > .selo-date-field.selo-date-field { width: min(100%, 220px); margin-top: 8px; }
.driver-vehicle-change .content-heading label { margin: 0; }
@media (max-width: 700px) {
  .driver-vehicle-number-block.is-changing .driver-vehicle-numbers { grid-template-columns: minmax(0,1fr); }
}
.operations-assignment-card { margin: 0 0 16px; }
.operations-assignment-card > strong { display: block; margin-top: 8px; color: var(--primary); font-size: 16px; overflow-wrap: anywhere; }
.operations-assignment-card .field-hint { margin: 5px 0 0; }
.operations-assignment-card > .button { margin-top: 8px; }

/* The same vehicle dialogs become a detail column without duplicating their fields. */
.driver-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); align-items: start; }
.driver-workspace-detail { min-width: 0; container-type: inline-size; container-name: driver-detail; }
#driver-dialog { container-type: inline-size; container-name: driver-editor; }
.driver-table tr.is-selected td { background: var(--soft-blue); }
.driver-table tr.is-selected td:first-child { box-shadow: inset 3px 0 var(--primary); }
.driver-table tr.is-selected .vehicle-link { font-weight: 700; }

@media (min-width:1280px) {
  .driver-workspace.is-detail-open { grid-template-columns: minmax(320px,.9fr) minmax(520px,1.15fr); }
  .driver-workspace.is-detail-open .business-list { padding: var(--space-4); }
  .driver-workspace.is-detail-open .business-list > .panel-heading { align-items: flex-start; gap: var(--space-4); }
  .driver-workspace.is-detail-open .business-list .workspace-tools { flex-wrap: wrap; }
  .driver-workspace.is-detail-open #driver-search-form { padding: var(--space-3); }
  .driver-workspace.is-detail-open #driver-search-form .search-control { flex-basis: 100%; max-width: none; }
  .driver-workspace.is-detail-open .list-caption { flex-wrap: wrap; }
  .driver-workspace-detail { position: sticky; top: var(--space-4); }
  .driver-workspace-detail > dialog[open][data-driver-presentation="inline"] { position: relative; inset: auto; width: 100%; max-width: 100%; max-height: calc(100dvh - 150px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-block: var(--space-4); margin: 0; border: 1px solid var(--light-gray); border-radius: var(--radius); box-shadow: var(--shadow-raised); }
  .driver-workspace-detail > #driver-dialog[open] { --editor-max-height: calc(100dvh - 150px); }
  .driver-workspace-detail > #driver-profile-dialog[open] { background: var(--canvas); }
  .driver-workspace-detail .dialog-heading { flex-wrap: wrap; align-items: flex-start; }
  .driver-workspace-detail .dialog-heading h2 { font-size: 21px; }
  .driver-workspace-detail .dialog-heading .button { margin-left: auto; }
}

/* Keep scrolled fields inside the body; the save row never covers or reveals them. */
#driver-dialog { --editor-max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; max-height: var(--editor-max-height); }
#driver-form { display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-height: calc(var(--editor-max-height) - 2px); }
#driver-form > .dialog-heading { margin: 0; padding: var(--form-padding); padding-bottom: var(--space-3); }
.driver-form-body { min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--space-3); padding: var(--space-3) var(--form-padding); }
#driver-form > .form-actions { position: static; margin: 0; padding: var(--space-3) var(--form-padding); gap: var(--space-3); flex-wrap: wrap; background: var(--surface); }
#driver-form > .form-actions > span { flex: 1 1 200px; min-width: 0; }
#driver-fields .driver-field-group { margin-bottom: var(--form-section-gap); }
#driver-fields .driver-field-group legend { padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
#driver-fields .driver-field-group .business-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--form-field-gap) var(--space-3); }
#driver-fields .driver-field-group .business-form-grid > div,
#driver-fields .driver-notes-fields > div { display: block; min-width: 0; }
#driver-fields .business-form-grid > div > label,
#driver-fields .driver-vehicle-numbers [data-field="vehicleNumber"] > label { display: block; margin: 0 0 var(--space-1); }
#driver-fields .driver-notes-fields { gap: var(--form-field-gap); }
#driver-fields textarea { min-height: 56px; height: 56px; }
#driver-fields [data-group="billing"] .business-form-grid { grid-template-columns: minmax(130px,184px) minmax(110px,130px) 82px; }
#driver-fields .driver-previous-vehicle-label { margin-bottom: var(--space-1); }
#driver-fields .driver-vehicle-change > input,
#driver-fields .driver-vehicle-change > .selo-date-field.selo-date-field { margin-top: var(--space-1); }

@container driver-editor (min-width:480px) {
  #driver-fields [data-group="contact"] .business-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container driver-editor (min-width:680px) {
  #driver-fields [data-group="vehicle"] .business-form-grid { grid-template-columns: minmax(150px,.8fr) minmax(0,1fr) minmax(0,1.1fr) minmax(170px,1.1fr); }
  #driver-fields [data-group="dates"] .business-form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@container driver-editor (max-width:600px) {
  .driver-vehicle-number-block.is-changing .driver-vehicle-numbers { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .driver-vehicle-change { grid-column: 1/-1; }
  .driver-vehicle-change > .selo-date-field.selo-date-field { width: min(100%,220px); }
}
@container driver-editor (max-width:400px) {
  #driver-fields .driver-field-group .business-form-grid { grid-template-columns: minmax(0,1fr); }
  #driver-fields [data-group="billing"] .business-form-grid { grid-template-columns: minmax(0,1fr) 82px; }
  #driver-fields [data-field="monthlyFee"] { grid-column: 1 / -1; }
  #driver-fields [data-field="dueDay"] { width: 82px; }
  #driver-fields .driver-vehicle-number-block:not(.is-changing) { max-width: 220px; }
  .driver-vehicle-number-block.is-changing .driver-vehicle-numbers { grid-template-columns: minmax(0,1fr); }
}
@media (pointer:coarse) {
  .compact-form { --control-height: 44px; }
  .compact-form .dialog-heading .button { min-height: var(--control-height); }
  .driver-previous-vehicle-label,
  .driver-vehicle-number-block.is-changing [data-field="vehicleNumber"] > label { min-height: 32px; }
}