:root {
  --app-blue: #0b4d99;
  --sidebar-blue: #08346c;
  --primary: #1175ef;
  --text: #172a46;
  --muted: #647b9c;
  --border: #dce7f5;
  --surface: #ffffff;
  --surface-soft: #f5f8fc;
  --header-height: 74px;
  --sidebar-width: 241px;
  --radius: 14px;
  --gap: 14px;
  --stage-new: #64c9f4;
  --stage-responded: #23d4df;
  --stage-working: #ffda68;
  --stage-submitted: #87dfa6;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  background: var(--app-blue);
  font-family: Arial, Helvetica, sans-serif;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.6; }
:focus-visible { outline: 3px solid #72c1ff; outline-offset: 3px; }

.app-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-height); z-index: 40;
}
.app-sidebar {
  position: fixed; inset: var(--header-height) auto 0 0;
  width: var(--sidebar-width); background: var(--sidebar-blue); z-index: 30;
}
.app-main {
  min-width: 0; margin-left: var(--sidebar-width);
  padding: calc(var(--header-height) + 12px) 18px 24px 8px;
}
.surface {
  min-width: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
.kpi-card { min-width: 0; min-height: 78px; padding: 16px 18px; }
.analytics-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap); align-items: stretch;
}
.analytics-grid > .surface { min-width: 0; min-height: 280px; padding: 18px; }
.kanban-board {
  display: flex; gap: var(--gap); overflow-x: auto;
  align-items: stretch; padding-bottom: 12px;
}
.kanban-column { flex: 1 0 280px; min-width: 0; }
.kanban-column[data-stage="new"] .column-heading { background: var(--stage-new); }
.kanban-column[data-stage="responded"] .column-heading { background: var(--stage-responded); }
.kanban-column[data-stage="in_progress"] .column-heading { background: var(--stage-working); }
.kanban-column[data-stage="submitted"] .column-heading { background: var(--stage-submitted); }
.order-card.is-rework { border: 1px solid #ff838a; }
.order-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  white-space: nowrap; scrollbar-width: thin;
}
.order-tabs > button { flex: 0 0 auto; min-height: 44px; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 42px; }
.order-dialog {
  width: min(1290px, calc(100vw - 40px));
  height: min(790px, calc(100dvh - 40px));
  padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  color: var(--text); background: var(--surface);
}
.order-dialog::backdrop { background: rgb(3 20 49 / 54%); }
.order-dialog__layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.order-dialog__header, .order-dialog__footer {
  flex: 0 0 auto; background: var(--surface); padding: 18px 30px;
}
.order-dialog__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 22px 30px; background: #fafcff;
}
.order-dialog__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid var(--border);
}
.mobile-stage-picker, .mobile-menu-button { display: none; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --header-height: 60px; --gap: 10px; }
  .app-main { margin-left: 0; padding: calc(var(--header-height) + 12px) 12px 20px; }
  .app-sidebar {
    width: min(280px, 86vw); transform: translateX(-100%);
    transition: transform 160ms ease;
  }
  body.menu-open .app-sidebar { transform: translateX(0); }
  .mobile-menu-button, .mobile-stage-picker { display: block; }
  .mobile-stage-picker { width: 100%; min-height: 44px; margin-bottom: 12px; }
  .desktop-search { display: none; }
  .kpi-card { min-height: 82px; padding: 12px; }
  .kanban-board { display: block; overflow: visible; }
  .kanban-column { width: 100%; }
  .kanban-column:not([data-mobile-active="true"]) { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .order-dialog {
    inset: 0; margin: 0; width: 100vw; max-width: none;
    height: 100dvh; max-height: none; border-radius: 0;
  }
  .order-dialog__header, .order-dialog__body { padding: 14px; }
  .order-dialog__footer {
    flex-wrap: wrap; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .order-dialog__footer button { min-height: 44px; flex: 1 1 140px; }
  input, select, textarea { font-size: 16px; }
  .analytics-grid > .surface { min-height: auto; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important; transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}