:root { color-scheme: light; --ink: #183b36; --muted: #61716c; --teal: #12695e; }
* { box-sizing: border-box; }
html { font-size: 16px; background: #f4f6f2; }
body { margin: 0; color: var(--ink); font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.3; font-weight: 750; letter-spacing: -.04em; }
h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
h3 { font-size: 1.12rem; font-weight: 700; }
a { color: var(--teal); }
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.app-header { min-height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1240px, calc(100% - 64px)); margin: auto; border-bottom: 1px solid #dce4dd; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--teal); color: white; font-weight: 800; font-size: 1.25rem; box-shadow: 0 6px 16px #12695e1c; }
.brand strong { display: block; font-size: 1.4rem; line-height: 1.4; }
.brand small { font-size: .78rem; color: var(--muted); }
.header-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.main-content { flex: 1; width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 44px 0; min-width: 0; }
.app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: min(1240px, calc(100% - 64px)); margin: auto; padding: 22px 0; border-top: 1px solid #dce4dd; font-size: .85rem; color: var(--muted); }
.welcome-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; min-height: 67vh; }
.welcome-story { padding: 20px 0; }
.eyebrow,.section-kicker { display: block; color: var(--teal); font-weight: 650; font-size: .9rem; margin-bottom: 16px; }
.welcome-story h1 { margin-bottom: 22px; }
.welcome-story h1 span { color: var(--teal); }
.lead { color: var(--muted); font-size: 1.1rem; line-height: 1.9; max-width: 480px; }
.feature-list { display: grid; gap: 24px; margin-top: 32px; }
.feature-list > div { display: flex; align-items: center; gap: 16px; }
.feature-list .mud-icon-root { color: var(--teal); background: #e5eee6; padding: 11px; width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; }
.feature-list strong,.feature-list small { display: block; }
.feature-list strong { font-size: 1rem; margin-bottom: 3px; }
.feature-list small { color: var(--muted); font-size: .9rem; }
.welcome-caption { display: flex; align-items: center; gap: 9px; margin-top: 38px; color: var(--muted); font-size: .85rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #368a68; }
.login-card { padding: 38px; border-color: #dce4dd !important; border-radius: 24px !important; box-shadow: 0 18px 55px #183b3608 !important; }
.login-card .mud-input-control { margin-top: 20px; }
.login-card h2 { margin-bottom: 8px; }
.muted { color: var(--muted); line-height: 1.8; }
.availability-message { margin: 24px 0 8px; }
.login-submit { margin-top: 28px; min-height: 48px; }
.preview-link { text-align: center; margin-top: 24px; font-size: .9rem; }
.mud-button-root { min-height: 44px; }
.page-heading { margin-bottom: 30px; }
.page-heading h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 8px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.empty-state { text-align: center; padding: 64px 24px; border-radius: 20px !important; }
.empty-state h2 { margin: 18px 0 12px; }
.preview-banner { margin-bottom: 26px; }
.preview-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; align-items: start; }
.preview-panel { padding: 28px; border-radius: 20px !important; min-width: 0; }
.preview-panel .mud-input-control { margin-bottom: 22px; }
.preview-panel h2 { font-size: 1.3rem; margin-bottom: 24px; }
.summary-list { margin: 0; }
.summary-list > div { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 18px 0; border-bottom: 1px solid #e6ebe5; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.preview-result { margin-top: 20px; }
.dialog-summary { min-width: 0; padding: 12px 0; }
.dialog-summary p { overflow-wrap: anywhere; line-height: 1.9; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 10000; padding: 16px; background: #fff0df; color: #543411; text-align: center; }
#blazor-error-ui a { margin-inline-start: 12px; text-decoration: underline; }
:focus-visible { outline: 3px solid #c08647; outline-offset: 3px; }
@media (max-width: 1000px) {
  .welcome-layout { gap: 32px; }
  .login-card { padding: 28px; }
  .app-header { padding: 20px 0; }
}
@media (max-width: 800px) {
  .app-header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .header-links { width: 100%; }
  .welcome-layout { grid-template-columns: 1fr; gap: 24px; }
  .welcome-story { padding: 0; }
  .welcome-story h1 { font-size: 2.7rem; }
  .feature-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
  .feature-list > div { align-items: flex-start; flex-direction: column; gap: 10px; }
  .feature-list small { font-size: .78rem; }
  .welcome-caption { margin-top: 24px; }
  .main-content { padding: 30px 0; }
  .preview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .app-header,.app-footer,.main-content { width: calc(100% - 32px); }
  .header-links { gap: 4px; }
  .header-links .mud-button-root { font-size: .8rem; padding-inline: 10px; }
  .brand-symbol { width: 44px; height: 44px; border-radius: 13px; }
  .login-card,.preview-panel { padding: 22px; }
  .welcome-story h1 { font-size: 2.3rem; }
  .feature-list { grid-template-columns: 1fr; gap: 16px; }
  .feature-list > div { flex-direction: row; align-items: center; }
  .feature-list small { font-size: .85rem; }
  .preview-actions .mud-button-root { flex: 1 1 100%; }
}
.company-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 24px; } .company-card { padding: 28px; border-radius: 20px !important; } .company-card h2 { margin: 20px 0 8px; font-size: 1.35rem; } .company-heading { padding: 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .company-heading h2,.company-heading p { margin: 0; } .metric-value { font-size: 2.6rem; color: var(--teal); } .identity-field { display: grid; gap: 8px; margin-top: 20px; } .identity-field input { min-height: 52px; border: 1px solid #aebcb5; border-radius: 12px; padding: 12px 16px; font: inherit; background: white; width: 100%; } .identity-field input:disabled { background: #f0f3f0; } .identity-submit { width: 100%; border: 0; border-radius: 12px; background: var(--teal); color: white; padding: 14px; font: inherit; font-weight: 650; margin-top: 24px; cursor: pointer; } .identity-submit:disabled { background: #d6dfd9; color: #6a7972; cursor: default; } .identity-error { margin-top: 20px; padding: 14px; border-radius: 10px; color: #a33131; background: #fff1f1; }
h1[tabindex="-1"]:focus { outline: none; }

.dashboard-filter { padding: 1.3rem; margin: 1rem 0; }
.dashboard-filter form { display:flex; flex-wrap:wrap; gap:1rem; align-items:end; margin:1rem 0; }
.dashboard-filter label { display:flex; flex-direction:column; gap:.4rem; flex:1 1 160px; }
.dashboard-filter input { font:inherit; padding:.7rem; border:1px solid #b7c9be; border-radius:8px; min-width:0; width:100%; background:var(--mud-palette-surface); color:inherit; }
.money-pair { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }

.password-field { position: relative; }
.identity-field .password-field input { padding-left: 62px; }
.password-toggle { position:absolute; left:4px; top:4px; bottom:4px; width:44px; min-height:44px; display:grid; place-items:center; border:0; border-radius:9px; color:var(--teal); background:transparent; cursor:pointer; }
.password-toggle:hover { background:#edf5f1; }
.password-toggle .password-hide, .password-toggle[aria-pressed="true"] .password-show { display:none; }
.password-toggle[aria-pressed="true"] .password-hide { display:inline-flex; }
.password-toggle .password-show { display:inline-flex; }
.password-toggle:disabled { opacity:.5; cursor:default; }

.item-search-option { padding:.4rem 0; display:grid; gap:.3rem; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.item-search-option small { color:var(--mud-palette-text-secondary); }
.item-selection { display:grid; gap:1rem; margin-top:2rem; }
.item-selection div { display:flex; gap:1rem; flex-wrap:wrap; }
.item-selection dt { color:var(--mud-palette-text-secondary); }
.item-selection dd { margin:0; overflow-wrap:anywhere; }

.report-actions,.report-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin:1rem 0; }
.report-pagination { justify-content:center; }
.report-item-filter { flex:1 1 280px; min-width:0; }
.report-paper { border-radius:16px!important; overflow:hidden; }
.table-scroll { overflow-x:auto; max-width:100%; }
.ledger-table { border-collapse:collapse; width:100%; font-size:.95rem; text-align:right; }
.ledger-table th,.ledger-table td { padding:1rem; border-bottom:1px solid #e2e9e4; vertical-align:top; }
.ledger-table th { background:#edf4ef; color:#174b41; font-weight:650; white-space:nowrap; }
.ledger-table td { min-width:95px; }
.ledger-table tbody tr:hover { background:#f5f9f6; }
.line-barcode { display:block; color:#61716c; margin-top:.3rem; }
.invoice-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:1rem; }
.invoice-totals { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem 3rem; }
.invoice-totals p { display:flex; gap:1rem; flex-wrap:wrap; }
.invoice-note { white-space:pre-wrap; overflow-wrap:anywhere; }
@media print {
    @page { size:A4 landscape; margin:12mm; }
    .app-header,.app-footer,.no-print,#blazor-error-ui { display:none!important; }
    body,.app-shell,.main-content { background:white!important; color:black!important; margin:0!important; padding:0!important; max-width:none!important; }
    .mud-paper { box-shadow:none!important; border:0!important; }
    .table-scroll { overflow:visible; }
    .ledger-table { font-size:10pt; }
    .ledger-table th,.ledger-table td { padding:6px; min-width:0; }
    .ledger-table thead { display:table-header-group; }
    .ledger-table tr { break-inside:avoid; }
    .page-heading { margin:0 0 1rem; }
}

.movement-note { max-width:24rem; overflow-wrap:anywhere; white-space:pre-wrap; }

.sale-editor { border:0; padding:0; margin:0; min-width:0; }
.sale-line { padding:1.5rem; margin-top:1rem; border-radius:16px!important; }
.sale-line h2 { font-size:1.2rem; margin:0 0 .35rem; overflow-wrap:anywhere; }
.sale-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1rem; margin:1rem 0; align-items:start; }
.sale-fields label,.sale-note { display:flex; flex-direction:column; gap:.5rem; }
.sale-fields input,.sale-fields select,.sale-note textarea { width:100%; min-width:0; padding:.8rem; border:1px solid #aebcb5; border-radius:10px; font:inherit; color:inherit; background:white; }
.sale-fields input[type=number] { direction:ltr; }
.sale-note { margin-top:1.5rem; }
.sale-editor:disabled { opacity:.8; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.company-switch { display:grid; gap:3px; max-width:100%; min-width:0; }
.company-switch label { font-size:.75rem; color:var(--muted); }
.company-switch select { font:inherit; color:var(--ink); background:white; border:1px solid #aebcb5; border-radius:10px; padding:8px 12px; min-height:44px; max-width:min(260px,100%); }
.nav-company-name { font-size:.9rem; color:var(--teal); overflow-wrap:anywhere; max-width:230px; }
.nav-greeting { font-size:.9rem; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:600px) { .header-links { width:100%; } .company-switch { flex:1 1 100%; } .company-switch select { width:100%; max-width:100%; } }

.manager-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.manager-heading h2 { margin:0; font-size:1.35rem; }
.manager-period { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.manager-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px; margin:20px 0; }
.manager-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.manager-search { display:grid; gap:16px; }
.manager-list-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid #e2e9e4; }
.manager-list-row>div { min-width:0; } .manager-list-row a { overflow-wrap:anywhere; font-weight:600; }
.manager-list-row small { display:block; color:var(--muted); padding-top:5px; }
.manager-amounts { display:grid; gap:4px; text-align:left; flex-shrink:0; font-size:.9rem; }
.manager-caption { margin-top:24px; } .metric-card h2 a { text-decoration:none; }
@media(max-width:760px){ .manager-panels { grid-template-columns:minmax(0,1fr); } .manager-list-row { gap:10px; } }

/* Keep long account names and barcodes within report cards on narrow screens. */
.company-card { min-width:0; overflow-wrap:anywhere; }
.manager-heading h2 { overflow-wrap:anywhere; }

/* Sign-in is the main action, including on phones, without a marketing section above it. */
.login-hero { width:min(100%,460px); margin:8px auto 24px; }
.login-hero .login-card { padding:32px; }
.login-hero h1 { font-size:clamp(1.8rem,4vw,2.2rem); margin:0 0 8px; line-height:1.4; }
.login-hero p { margin:0 0 24px; }
@media(max-width:480px) { .login-hero { margin:0 auto 16px; } .login-hero .login-card { padding:24px; } }

.dashboard-filter select { font:inherit; padding:.7rem; min-height:44px; min-width:0; width:100%; border:1px solid #b7c9be; border-radius:8px; background:white; color:inherit; }

@media(max-width:600px){ .inventory-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .inventory-metrics .company-card { padding:12px; } .inventory-metrics h2 { font-size:.9rem; margin:0 0 8px; } .inventory-metrics .metric-value { font-size:1.7rem; } }