:root{
  --bg:#eef3f8;
  --surface:#ffffff;
  --surface-2:#f7fafc;
  --border:#d8e1ea;
  --text:#17212b;
  --muted:#66798b;
  --brand:#234f6d;
  --brand-2:#365f7c;
  --ok:#1f7a44;
  --warn:#b2640a;
  --danger:#9f3131;
  --shadow:0 12px 30px rgba(20,34,47,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
}

.app-header{
  position:sticky;
  top:0;
  z-index:10;
  background:#f6f9fc;
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  display:grid;
  grid-template-columns:auto minmax(420px, 1fr) auto;
  gap:12px;
  align-items:center;
}

.content{
  padding:16px;
  display:grid;
  align-content:start;
  gap:14px;
}

.header-controls{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) 150px 190px 190px auto;
  gap:8px;
  align-items:end;
}

.compact-field{
  min-width:0;
}

.compact-field span{
  font-size:12px;
}

.auth-topbar{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.filters-bar{
  display:grid;
  grid-template-columns:220px minmax(220px, 1fr);
  gap:14px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}

.brand-button{
  padding:0;
  background:transparent;
  border:0;
  border-radius:16px;
}

.brand-button:hover{
  transform:none;
  opacity:.92;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.06em;
}

.brand h1{
  margin:0;
  font-size:16px;
}

.brand p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}

.version-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eaf0f5;
  border:1px solid var(--border);
  color:var(--brand);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}

.auth-compact{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:8px 10px;
  box-shadow:var(--shadow);
}

.icon-button{
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:18px;
}

.auth-compact-copy{
  display:grid;
  gap:2px;
}

.auth-compact-name{
  font-weight:800;
}

.auth-compact-meta{
  color:var(--muted);
  font-size:12px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:16px;
}

.order-focus-card{
  border-color:#9dc0db;
  box-shadow:0 16px 34px rgba(35,79,109,.12);
}

.order-focus-card.is-readonly{
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.order-focus-card.is-readonly input:disabled,
.order-focus-card.is-readonly select:disabled,
.order-focus-card.is-readonly textarea:disabled{
  background:#f7fafd;
  color:var(--text);
  opacity:1;
  cursor:default;
  border-color:#dce6ef;
}

.order-focus-card.is-readonly textarea:disabled{
  resize:none;
}

.hero{
  min-height:150px;
  display:grid;
  align-content:center;
  gap:10px;
}

.hero h2{
  margin:0;
  font-size:30px;
}

.muted{
  color:var(--muted);
}

.audit-trail{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

.audit-trail strong{
  color:var(--text);
}

.hidden{display:none !important}
.stack{display:grid}
.gap-sm{gap:10px}
.gap-md{gap:14px}
.gap-lg{gap:18px}

.banner{
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  background:#e7f4ed;
  color:var(--ok);
  border:1px solid #bfdcc8;
}

.banner.error{
  background:#f8e9e9;
  color:var(--danger);
  border-color:#e5c0c0;
}

.panel-head,.section-head{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}

.section-head h2,.section-head h3,.panel-head h2{
  margin:0;
}

.eyebrow{
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.summary-row{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.quick-order-actions{
  margin-top:10px;
}

.kanban-board{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(210px, 240px);
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
}

.kanban-column{
  min-height:180px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  display:grid;
  align-content:start;
  gap:10px;
}

.kanban-column-compact{
  width:170px;
  min-width:170px;
}

.kanban-column.drag-target{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(35,79,109,.15);
}

.kanban-column-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.kanban-column-title{
  font-size:14px;
  font-weight:800;
}

.kanban-list{
  display:grid;
  gap:8px;
}

.order-kanban-card{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--shadow);
  cursor:grab;
}

.order-kanban-card.active{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(35,79,109,.15);
}

.order-kanban-card.dragging{
  opacity:.55;
  transform:rotate(1deg);
}

.order-kanban-card strong{
  display:block;
  margin-bottom:3px;
  font-size:15px;
}

.order-kanban-meta{
  display:grid;
  gap:2px;
  color:var(--muted);
  font-size:12px;
}

.kanban-card-operator{
  font-weight:700;
  color:var(--brand);
}

.orders-table{
  display:grid;
  gap:8px;
}

.order-list-row{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:minmax(120px, 140px) minmax(200px, 1fr) minmax(130px, 180px) minmax(160px, 220px) auto auto;
  gap:12px;
  align-items:center;
}

.order-list-row.active{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(35,79,109,.15);
}

.order-list-status{
  justify-self:start;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  font-weight:800;
}

.status-order{
  color:#c71818;
  background:#ffd7d5;
}

.status-docs{
  color:#165fb8;
  background:#cde7ff;
}

.status-production{
  color:#9a4e21;
  background:#ffd9c8;
}

.status-install{
  color:#fff;
  background:#1a7a4b;
}

.status-settle{
  color:#6e4b00;
  background:#ffe29b;
}

.status-closed{
  color:#1d7b2e;
  background:#d8f2ba;
}

.status-cancelled{
  color:#333;
  background:#e6e7eb;
}

button{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
button:hover{transform:translateY(-1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}

.primary{
  background:var(--brand);
  color:#fff;
}

.ghost{
  background:#eaf0f5;
  color:var(--text);
}

.danger-button{
  background:#f8e9e9;
  color:var(--danger);
  border:1px solid #e5c0c0;
}

.field{
  display:grid;
  gap:7px;
}

.field span{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}

input, select, textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
  color:var(--text);
}

textarea{
  resize:vertical;
}

.grid{
  display:grid;
  gap:14px;
}

.grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.wide{
  grid-column:1 / -1;
}

.check{
  display:flex;
  gap:10px;
  align-items:center;
  min-height:48px;
}

.check input{
  width:18px;
  height:18px;
}

.order-list{
  display:grid;
  gap:10px;
  max-height:calc(100vh - 320px);
  overflow:auto;
  padding-right:4px;
}

.order-row{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:14px;
  display:grid;
  gap:4px;
  cursor:pointer;
}

.order-row.active{
  border-color:#92abc0;
  background:#f5f9fc;
}

.order-row strong{
  font-size:16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  background:#eef4f8;
  color:var(--brand);
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
}

.group-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
  overflow:hidden;
}

.group-head{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.group-list{
  display:grid;
}

.item-row{
  padding:12px 14px;
  display:grid;
  gap:7px;
  border-top:1px solid #e6edf3;
}

.item-row:first-child{border-top:0}

.item-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.item-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.item-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 1440px){
  .header-controls{
    grid-template-columns:minmax(180px, 1fr) 130px 160px 160px auto;
  }

  .version-badge{
    padding:6px 10px;
    font-size:11px;
  }

  .status-pill{
    padding:7px 12px;
    font-size:11px;
  }
}

@media (max-width: 1280px){
  .app-header{
    grid-template-columns:1fr;
  }

  .header-controls{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
  }

  .auth-topbar{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .order-list-row{
    grid-template-columns:1fr 1fr;
  }

  .admin-layout{
    grid-template-columns:1fr;
  }

  .admin-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 900px){
  .content{
    padding:16px;
  }

  .app-header{
    padding:14px 16px;
  }

  .header-controls{
    grid-template-columns:1fr;
  }

  .grid.two,
  .filters-bar,
  .order-list-row,
  .admin-status-grid,
  .admin-user-grid,
  .admin-visibility-grid{
    grid-template-columns:1fr;
  }
}

.context-hint{
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:14px;
  background:#f3f7fb;
  color:var(--brand);
  border:1px solid var(--border);
  font-size:14px;
  font-weight:600;
}

.pill{
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  background:#eef4f8;
  color:var(--brand);
}

.pill.warn{background:#fff1de;color:var(--warn)}
.pill.success{background:#e8f4ec;color:var(--ok)}
.pill.danger{background:#fae8e8;color:var(--danger)}

.modal{
  width:min(760px,calc(100vw - 24px));
  border:0;
  border-radius:24px;
  padding:0;
  box-shadow:0 22px 60px rgba(16,30,43,.2);
}

.modal::backdrop{
  background:rgba(10,22,34,.32);
}

.modal-body{
  padding:18px;
}

.modal-wide{
  width:min(1100px,calc(100vw - 32px));
}

.admin-modal-body{
  max-height:85vh;
  overflow:auto;
}

.admin-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
}

.admin-nav{
  display:grid;
  gap:8px;
  align-content:start;
}

.admin-tab{
  justify-content:flex-start;
  background:#f1f5f8;
  color:var(--text);
}

.admin-tab.active{
  background:var(--brand);
  color:#fff;
}

.admin-panels{
  display:grid;
  gap:14px;
}

.admin-card{
  padding:14px;
}

.admin-statuses-list,
.admin-users-list,
.admin-visibility-list{
  display:grid;
  gap:10px;
}

.admin-status-row,
.admin-user-row,
.admin-visibility-row{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
  padding:12px;
  display:grid;
  gap:10px;
}

.admin-status-grid{
  display:grid;
  grid-template-columns:160px minmax(0,1fr) 170px 150px;
  gap:10px;
  align-items:end;
}

.admin-user-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) 180px 150px 150px auto;
  gap:10px;
  align-items:end;
}

.admin-visibility-grid{
  display:grid;
  grid-template-columns:180px 180px 180px auto;
  gap:10px;
  align-items:end;
}

.admin-row-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.admin-note{
  font-size:12px;
  color:var(--muted);
}

.row-end{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

@media (max-width: 980px){
  .shell{
    grid-template-columns:1fr;
  }

  .sidebar{
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .content{
    padding:18px 14px 28px;
  }
}

@media (max-width: 700px){
  .grid.two{
    grid-template-columns:1fr;
  }

  .hero h2{
    font-size:28px;
  }

  .section-head,.panel-head{
    display:grid;
  }
}