:root {
  --surface: #fff;
  --surface-muted: #f4f6fa;
  --surface-accent: #edf1f6;
  --accent-text: #8a410e;
  --label: #4d5b70;
  --subtle-border: #eef1f5;
  --mobile-nav: #15253d;
}
body { overflow-wrap: anywhere; }
label { color: var(--label); }
button, .btn { max-width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere; }
input, select, textarea { min-width: 0; max-width: 100%; border-color: var(--line); }
input[type="checkbox"] { flex: none; accent-color: var(--orange); }
[hidden] { display: none !important; }

.sidebar {
  overflow: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}
.sidebar > nav, .sidebar-bottom { flex: none; }
.sidebar-brand { margin: 0 0 0.75rem; padding: 0.3rem 0.25rem 1.1rem; border-bottom: 1px solid #314158; }
.company-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.company-mark img {
  width: 48px;
  height: 40px;
  object-fit: contain;
  flex: none;
}
.company-mark img:not([src="/favicon.svg"]) {
  background: #fff;
  padding: 3px;
  border: 1px solid #e5eaf0;
  border-radius: 0.4rem;
}
.company-wordmark { display: block; min-width: 0; }
.company-wordmark b, .company-wordmark small { display: block; line-height: 1.3; }
.company-wordmark b { font-size: 1.07rem; }
.company-wordmark small { font-size: 0.72rem; margin-top: 0.18rem; }
.sidebar .company-wordmark small, .mobile-brand .company-wordmark small { color: #b5c5da; }
.sidebar .nav-item { text-align: left; }
.profile > div:last-child { min-width: 0; }
.topbar {
  min-height: 72px;
  height: auto;
  padding-block: 0.65rem;
  flex-wrap: wrap;
}
.breadcrumb { flex: 1 1 9rem; min-width: 0; }
.top-tools { flex: 0 1 auto; min-width: 0; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.server-clock {
  display: inline-block;
  color: var(--ink);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.top-tools .server-clock { padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--bg); }

.page-heading, .panel-head, .update-progress-head, .section-footer { flex-wrap: wrap; }
.page-heading > *, .panel-head > *, .stat, .kanban-col, .order-card, .product-cell > *, .mobile-record-field,
.update-layout > *, .form-grid > *, .detail-grid > *, .filterbar > *, .mobile-more nav button { min-width: 0; }
.amount { white-space: normal; }
.product-cell img { flex: none; }
.stat-icon { flex: none; margin-inline-start: 0.25rem; }
.form-grid, .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.update-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.update-history-row { grid-template-columns: minmax(3rem, auto) minmax(0, 1fr) auto; }
.update-history-row > * { min-width: 0; }
.update-timeline li > span { flex: none; }
table { max-width: 100%; }
:root[data-fit-tables="true"] body:not(.mobile-view) .table-scroll table { table-layout: fixed; }
:root[data-fit-tables="true"] body:not(.mobile-view) .table-scroll :is(th,td) { padding-inline: 0.55rem; }
:root[data-fit-tables="true"] body:not(.mobile-view) .table-scroll .product-cell { min-width: 0; flex-wrap: wrap; }
:root[data-fit-tables="true"] body:not(.mobile-view) .table-scroll td button { padding-inline: 0.4rem; }
:root[data-compact="true"] .table-scroll :is(th,td) { padding-block: 0.48rem; }
:root[data-compact="true"] .stat { padding: 0.75rem; }
:root[data-compact="true"] .order-card, :root[data-compact="true"] .mobile-record { padding: 0.7rem; }
:root[data-compact="true"] .mobile-records { gap: 0.55rem; }

.mobile-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  padding: max(9px, env(safe-area-inset-top)) 14px 9px;
  background: var(--mobile-nav);
}
.mobile-brand { min-width: 0; }
.mobile-brand .company-mark img { width: 48px; height: 34px; }
.mobile-tools {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.mobile-tools .server-clock { color: #e4edf8; min-width: 0; }
.mobile-top .mobile-tools button {
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  background: #233a56;
  border-color: #405872;
  color: #fff;
}
.mobile-bottom span { overflow-wrap: anywhere; }
.mobile-view :is(.form-grid, .detail-grid, .update-layout) { grid-template-columns: minmax(0, 1fr); }
.mobile-view .mobile-more nav, .mobile-view .stats, .mobile-view .order-line, .mobile-record {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-record .badge { max-width: 100%; }
.mobile-view #modal:not([open]) { display: none; }

.company-settings-entry {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.company-settings-entry p { margin-bottom: 0.5rem; }
.presentation-form label.check { margin-block: 0.7rem; }
.presentation-form p.error:empty, .presentation-form p[role="status"]:empty { margin: 0; }
.logo-preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  margin: 1rem 0;
  background: var(--surface-muted);
  color: var(--muted);
}
.logo-preview p { margin: 0; padding: 0.65rem; }
.logo-preview img {
  display: block;
  width: min(100%, 260px);
  height: 110px;
  padding: 8px;
  object-fit: contain;
  background: #fff;
}
.logo-hint { margin: 0.5rem 0 0.9rem; }
.report-preview-heading .company-mark { margin-bottom: 0.55rem; }
.report-preview-heading .company-wordmark b { color: var(--accent-text); font-size: 0.85rem; }
.print-order-brand { display: none; }

@media (max-width: 1000px) {
  .update-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 430px) {
  .mobile-top { position: static; }
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101822;
    --surface: #182435;
    --surface-muted: #1d2c40;
    --surface-accent: #22334a;
    --navy: #2b4364;
    --mobile-nav: #141f2e;
    --ink: #edf3fc;
    --muted: #b6c4d8;
    --label: #c4d2e6;
    --line: #34465f;
    --subtle-border: #2c3c52;
    --green: #7ce0b9;
    --orange: #f29a5b;
    --orange-pale: #422c23;
    --accent-text: #ffd1af;
    --shadow: 0 4px 18px #0003;
  }
  [data-theme="dark"] .sidebar, [data-theme="dark"] .login-story { background: #141f2e; }
  [data-theme="dark"] :is(.number,.stock-low,.source.online) { color: #accdff; }
  [data-theme="dark"] :is(.help-list,.mobile-bottom button,.filterbar span) { color: var(--muted); }
  [data-theme="dark"] :is(.mobile-bottom button.active, button.soft) { color: var(--accent-text); }
  [data-theme="dark"] :is(button.primary,.btn.primary) { color: #24180f; }
  [data-theme="dark"] :is(th,.section-footer,.total-box,.pipeline-icon,.integration-logo,.login-note,.kanban-col,.stat-icon) {
    background: var(--surface-muted);
    color: var(--muted);
  }
  [data-theme="dark"] :is(.stat-icon.orange,.stat-icon.green) { color: var(--ink); }
  [data-theme="dark"] :is(td,th) { border-color: var(--subtle-border); }
  [data-theme="dark"] tbody tr:hover { background: var(--surface-accent); }
  [data-theme="dark"] dialog { background: var(--surface); }
  [data-theme="dark"] .error { color: #ff9d9d; }
  [data-theme="dark"] .toast.error { color: #fff; }
}
@media print {
  :root { color-scheme: light; background: white; font-size: 14px !important; }
  #modal[open] { position: static; margin: 0; width: 100%; height: auto; max-height: none; overflow: visible; }
  .modal-header { position: static; }
  body, dialog { color: #172537; background: #fff; }
  .print-order-brand { display: block; margin-bottom: 0.8rem; }
  .print-order-brand .company-mark img { width: 27mm; height: 10mm; }
}