/* CKZU V10.2 - Shymkent ERP visual layer. Business behavior is unchanged. */
:root {
  --erp-primary: #0b8f6a;
  --erp-primary-dark: #087757;
  --erp-success: #14a879;
  --erp-warning: #df8b22;
  --erp-danger: #e25555;
  --erp-cyan: #168b9f;
  --erp-sidebar: #082f2a;
  --erp-bg: #f4f7f5;
  --erp-surface: #ffffff;
  --erp-text: #18312d;
  --erp-muted: #71837f;
  --erp-border: #dfe8e4;
  --erp-radius: 8px;
  --erp-shadow: 0 1px 2px rgba(19, 57, 49, 0.03), 0 8px 24px rgba(19, 57, 49, 0.045);
  --shymkent-sidebar-active: #154b41;
  --shymkent-sidebar-line: rgba(154, 211, 196, 0.19);
  --shymkent-mint: #edf8f3;
  --shymkent-mint-strong: #dff3eb;
  --shymkent-line: #dfe8e4;
}

body,
body:has(#appView:not(.hidden)),
.content {
  background: var(--erp-bg);
}

.app-view {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  padding: 0 18px 18px;
  background: var(--erp-sidebar);
}

.sidebar-brand {
  min-height: 82px;
  margin: 0 -18px;
  padding: 0 24px;
  border-bottom: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 8px;
  background: #35caa0;
  box-shadow: none;
  font-size: 21px;
}

.sidebar-brand strong {
  font-size: 18px;
}

.sidebar-brand span {
  margin-top: 3px;
  color: #8eaaa3;
  font-size: 12px;
}

.sidebar-user {
  margin: 14px 0;
  padding: 13px;
  border-color: var(--shymkent-sidebar-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.user-avatar {
  background: #184b42;
}

.sidebar-user .eyebrow {
  color: #78978f;
}

.sidebar-user h2 {
  color: #f4fbf8;
}

.sidebar-user .hint {
  color: #9ab0aa;
}

.sidebar nav {
  gap: 6px;
  padding-top: 2px;
}

.nav-button {
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 8px;
  color: #a7bbb6;
  font-size: 14px;
  font-weight: 650;
}

.nav-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  transform: none;
}

.nav-button.active {
  color: #ffffff;
  background: var(--shymkent-sidebar-active);
  box-shadow: none;
}

.nav-button.active::after {
  display: none;
}

.nav-button svg {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--shymkent-sidebar-line);
}

.system-state {
  color: #90aaa3;
}

#logoutButton {
  color: #bdd0cb;
  border-color: var(--shymkent-sidebar-line);
  background: rgba(255, 255, 255, 0.035);
}

#logoutButton:hover {
  color: #ffffff;
  border-color: rgba(154, 211, 196, 0.3);
  background: var(--shymkent-sidebar-active);
}

.content {
  padding: 0 28px 32px;
}

.content-header {
  min-height: 82px;
  margin: 0 -28px 22px;
  padding: 0 28px;
  border-bottom-color: #e3ebe7;
  background: rgba(250, 252, 251, 0.96);
}

.content-header .eyebrow {
  color: #78908a;
}

.content-header h2 {
  color: #17322d;
  font-size: 23px;
  font-weight: 760;
}

.topbar-meta {
  color: #70857f;
}

button {
  border-radius: 7px;
  background: var(--erp-primary);
}

button:hover {
  background: var(--erp-primary-dark);
  box-shadow: 0 5px 14px rgba(11, 143, 106, 0.17);
}

button.ghost {
  color: #49635c;
  border-color: #d7e3de;
  background: #ffffff;
}

button.ghost:hover {
  color: var(--erp-primary-dark);
  border-color: #a8d8c7;
  background: var(--shymkent-mint);
}

input,
select {
  border-color: #d7e2de;
  border-radius: 7px;
}

input:focus,
select:focus {
  border-color: var(--erp-primary);
  box-shadow: 0 0 0 3px rgba(11, 143, 106, 0.11);
}

.toolbar,
.table,
.card,
.role-card,
.picking-form,
.delivery-form,
.scan-panel,
.product-form,
.inline-form,
.form.narrow,
#ordersPage .order-form {
  border-color: var(--shymkent-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--erp-shadow);
}

.toolbar {
  min-height: 64px;
  margin-bottom: 16px;
  padding: 11px 14px;
}

.toolbar h3 {
  color: #1d3933;
  font-size: 16px;
}

.dashboard-summary,
.sales-daily-summary {
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-summary div,
.sales-daily-summary div {
  min-height: 116px;
  padding: 20px;
  border-color: var(--shymkent-line);
  border-top: 1px solid var(--shymkent-line) !important;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--erp-shadow);
}

.dashboard-summary span,
.sales-daily-summary span {
  color: #778a85;
  font-size: 13px;
}

.dashboard-summary strong,
.sales-daily-summary strong,
.erp-number {
  margin-top: 13px;
  color: #17322d;
  font-size: 27px;
}

.table {
  overflow: auto;
}

.table > .row.header,
.table .table > .row.header {
  top: 0;
}

.row {
  min-height: 50px;
  padding: 10px 14px;
  border-bottom-color: #e9efec;
  color: #314c46;
}

.row.header {
  min-height: 44px;
  color: #6f847e;
  background: #f7faf8;
}

.row:not(.header):hover {
  background: #f3faf7;
  box-shadow: inset 3px 0 0 var(--erp-primary);
}

.status-badge {
  border-radius: 999px;
}

.status-pending,
.status-review {
  color: #9a5c0c;
  background: #fff3dd;
}

.status-picking,
.status-delivery {
  color: #206b88;
  background: #e8f5fa;
}

.status-picked,
.status-complete {
  color: #087a59;
  background: var(--shymkent-mint-strong);
}

.status-error,
.status-danger {
  color: #b43e42;
  background: #fdeaea;
}

.sales-order-create-head {
  color: #173d34;
  border-bottom-color: #cae3d9;
  background: var(--shymkent-mint);
}

.sales-order-create-head strong,
.sales-order-create-head span {
  color: inherit;
}

.sales-order-create-head span {
  color: #658078;
}

.sales-product-search {
  border-color: #cce4da;
  background: var(--shymkent-mint);
}

.sales-product-card {
  border-color: var(--shymkent-line);
}

.sales-product-card:hover {
  border-color: #8fcdb7;
  box-shadow: 0 10px 24px rgba(19, 85, 67, 0.1);
}

.sales-product-price {
  color: #c84b4f;
}

.sales-add-button,
#orderSubmitButton,
#adminSalesRefreshButton,
#warehouseSearchButton {
  background: var(--erp-primary);
}

.order-total-row,
.sales-order-amount {
  color: #087a59;
  border-color: #bcdccd;
  background: var(--shymkent-mint);
}

.sales-order-tabs {
  border-color: var(--shymkent-line);
  background: #ffffff;
}

.sales-order-tabs button.active {
  color: #ffffff;
  background: var(--erp-primary);
}

.sales-order-tabs button:hover {
  color: var(--erp-primary-dark);
  background: var(--shymkent-mint);
}

.warehouse-flow,
.warehouse-scan-dock {
  border-color: #cae2d8;
  background: #ffffff;
}

.warehouse-flow span.active,
.warehouse-flow span.complete {
  color: #087a59;
  background: var(--shymkent-mint-strong);
}

.order-scan-form,
.scan-form {
  border-color: #bcdccd;
  background: var(--shymkent-mint);
}

.order-scan-form input,
.scan-form input {
  border-color: #75c4a6;
  background: #ffffff;
}

.order-scan-form input:focus,
.scan-form input:focus {
  border-color: var(--erp-primary);
  box-shadow: 0 0 0 4px rgba(11, 143, 106, 0.13);
}

.order-scan-result {
  border-color: #aad5c4;
  background: var(--shymkent-mint);
}

.scan-row-complete {
  background: #e9f8f1;
}

.scan-alert {
  border-radius: 8px;
}

.admin-order-group {
  border-top-color: var(--shymkent-line);
}

.admin-order-group-head strong {
  color: #087a59;
  background: var(--shymkent-mint-strong);
}

.message:not(:empty) {
  border-left-color: var(--erp-primary);
  background: #102f2a;
}

body:has(#loginView:not(.hidden)) .brand-panel {
  background: var(--erp-sidebar);
}

body:has(#loginView:not(.hidden)) .login-panel {
  border-color: var(--shymkent-line);
}

button:focus-visible,
.nav-button:focus-visible {
  outline: 3px solid rgba(53, 202, 160, 0.34);
  outline-offset: 2px;
}

@media (min-width: 861px) {
  #warehousePage .warehouse-list-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(360px, 460px);
    gap: 16px;
    align-items: center;
  }

  #warehousePage .warehouse-list-toolbar .search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  #warehousePage .warehouse-list-toolbar .search input {
    width: 100%;
    min-width: 0;
  }

  #ordersPage > .toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(360px, 460px);
    gap: 16px;
    align-items: center;
  }

  #ordersPage > .toolbar .search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  #ordersPage > .toolbar .search input {
    width: 100%;
    min-width: 0;
  }

  #ordersPage .sales-daily-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #adminOrdersPage .toolbar {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  #adminOrdersPage .toolbar .search {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 150px 160px auto auto;
    gap: 8px;
  }

  #adminOrdersPage .toolbar .search input,
  #adminOrdersPage .toolbar .search select {
    width: 100%;
    min-width: 0;
  }

  .row.admin-order-row {
    column-gap: 8px;
    grid-template-columns:
      minmax(120px, 1.2fr)
      minmax(80px, 0.8fr)
      minmax(100px, 0.9fr)
      minmax(105px, 1fr)
      minmax(66px, 0.6fr)
      minmax(70px, 0.65fr)
      minmax(78px, 0.75fr)
      minmax(150px, 1.15fr);
  }
}

#adminSalesDashboard .toolbar {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 16px;
}

#adminSalesDashboard .toolbar .search {
  display: grid;
  grid-template-columns: 180px 190px auto;
  gap: 8px;
}

.dashboard-summary > div:nth-child(4) strong {
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .app-view {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 12px;
  }
}

@media (max-width: 860px) {
  #adminSalesDashboard .toolbar,
  #adminSalesDashboard .toolbar .search {
    grid-template-columns: 1fr;
  }

  .app-view {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 0 10px 10px;
  }

  .sidebar-brand {
    min-height: 60px;
    margin: 0 -10px;
    padding: 0 14px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 16px;
  }

  .nav-button {
    min-height: 38px;
    padding: 8px 11px;
  }

  .content {
    padding: 0 12px 24px;
  }

  .content-header {
    min-height: 64px;
    margin: 0 -12px 14px;
    padding: 0 12px;
  }

  .content-header h2 {
    font-size: 19px;
  }

  .dashboard-summary div,
  .sales-daily-summary div {
    min-height: 88px;
    padding: 13px;
  }

  .dashboard-summary strong,
  .sales-daily-summary strong,
  .erp-number {
    margin-top: 8px;
    font-size: 21px;
  }

  .warehouse-scan-dock {
    border-top: 3px solid var(--erp-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sales-product-card:hover {
    transform: none;
  }
}
.warehouse-revision-form {
  display: grid;
  gap: 18px;
}

.warehouse-revision-heading,
.warehouse-revision-actions,
.warehouse-product-search,
.warehouse-revision-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.warehouse-revision-heading h3 {
  margin: 4px 0 0;
}

.warehouse-final-badge {
  color: #067a5c;
  background: #e7f7f1;
  border: 1px solid #b9e7d7;
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 700;
}

.warehouse-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.warehouse-customer-grid label {
  display: grid;
  gap: 6px;
  color: #61706b;
  font-size: 13px;
}

.warehouse-customer-grid label.wide {
  grid-column: 1 / -1;
}

.warehouse-customer-grid input,
.warehouse-product-search input,
.warehouse-revision-row input {
  width: 100%;
}

.warehouse-product-picker {
  padding: 14px;
  border: 1px solid #dce6e1;
  background: #f7faf8;
  border-radius: 8px;
}

.warehouse-product-search input {
  min-width: 0;
  flex: 1;
}

.warehouse-product-results {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
}

.warehouse-product-result {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) 100px auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e3ebe7;
  border-radius: 6px;
}

.warehouse-product-result > span:first-child {
  display: grid;
  gap: 2px;
}

.warehouse-revision-row {
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.5fr) 100px 130px 90px;
}

.warehouse-revision-total {
  padding: 14px 4px 2px;
  color: #52625d;
}

.warehouse-revision-total strong {
  color: #08775b;
  font-size: 18px;
}

.warehouse-revision-actions {
  justify-content: flex-end;
}

.warehouse-revision-actions .scan-action {
  background: #0891b2;
}

@media (max-width: 760px) {
  .warehouse-revision-heading,
  .warehouse-revision-actions,
  .warehouse-product-search {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-customer-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-customer-grid label.wide {
    grid-column: auto;
  }

  .warehouse-product-result {
    grid-template-columns: 1fr auto;
  }

  .warehouse-product-result > span:nth-child(2),
  .warehouse-product-result > span:nth-child(3) {
    font-size: 12px;
  }
}