/* Phase 82.7.6.38.5.8.1.26 · Unified Admin Components & List Template
   Visual/component layer only. Builds on .1.24 UI Foundation + .1.25 Responsive Foundation.
   Scope: tenant admin SPA pages. Customer ordering, POS and legacy KDS remain isolated. */

:root {
  --ui-control-h:44px;
  --ui-row-h:58px;
  --ui-panel-pad:20px;
  --ui-gap:16px;
  --ui-gap-lg:24px;
  --ui-table-head:#F8FAFC;
  --ui-hover:#F8FAFC;
}

html:not(.legacy-kds-view) .admin-shell .page-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:0;
}
html:not(.legacy-kds-view) .admin-shell .page-heading > div:first-child { min-width:0; }
html:not(.legacy-kds-view) .admin-shell .page-heading h1 { color:var(--ui-text); font-weight:780; }
html:not(.legacy-kds-view) .admin-shell .page-heading .eyebrow { margin-bottom:5px; }
html:not(.legacy-kds-view) .admin-shell .heading-actions { display:flex; align-items:center; gap:10px; }

/* Shared panels */
html:not(.legacy-kds-view) .admin-shell .panel,
html:not(.legacy-kds-view) .admin-shell .panel-card,
html:not(.legacy-kds-view) .admin-shell .scheduled-menu-card,
html:not(.legacy-kds-view) .admin-shell .branch-admin-card,
html:not(.legacy-kds-view) .admin-shell .operation-card {
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
  background:var(--ui-surface);
  box-shadow:var(--ui-shadow-card);
}
html:not(.legacy-kds-view) .admin-shell .panel-heading,
html:not(.legacy-kds-view) .admin-shell .panel-head,
html:not(.legacy-kds-view) .admin-shell .section-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--ui-border);
  padding:16px 20px;
}
html:not(.legacy-kds-view) .admin-shell .panel-heading h2,
html:not(.legacy-kds-view) .admin-shell .panel-head h2,
html:not(.legacy-kds-view) .admin-shell .section-actions h2 { margin:0; }

/* Standard tabs */
html:not(.legacy-kds-view) .admin-shell .inventory-tabs,
html:not(.legacy-kds-view) .admin-shell .settings-tabs,
html:not(.legacy-kds-view) .admin-shell .operations-tabs {
  display:flex;
  gap:6px;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  padding:5px;
  margin-bottom:18px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:#fff;
}
html:not(.legacy-kds-view) .admin-shell .inventory-tabs::-webkit-scrollbar,
html:not(.legacy-kds-view) .admin-shell .settings-tabs::-webkit-scrollbar,
html:not(.legacy-kds-view) .admin-shell .operations-tabs::-webkit-scrollbar { display:none; }
html:not(.legacy-kds-view) .admin-shell .inventory-tabs button,
html:not(.legacy-kds-view) .admin-shell .settings-tabs button,
html:not(.legacy-kds-view) .admin-shell .operations-tabs button {
  min-height:38px;
  white-space:nowrap;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  color:var(--ui-muted);
  background:transparent;
  font-weight:700;
}
html:not(.legacy-kds-view) .admin-shell .inventory-tabs button.active,
html:not(.legacy-kds-view) .admin-shell .settings-tabs button.active,
html:not(.legacy-kds-view) .admin-shell .operations-tabs button.active {
  color:var(--ui-primary);
  background:var(--ui-primary-soft);
}

/* Toolbars and filters */
html:not(.legacy-kds-view) .admin-shell .data-toolbar,
html:not(.legacy-kds-view) .admin-shell .date-filters,
html:not(.legacy-kds-view) .admin-shell .filter-row {
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
}
html:not(.legacy-kds-view) .admin-shell .data-toolbar { padding:16px 20px; }
html:not(.legacy-kds-view) .admin-shell .date-filters label,
html:not(.legacy-kds-view) .admin-shell .data-toolbar label { display:grid; gap:6px; color:var(--ui-muted); font-size:12px; font-weight:700; }

/* Metrics */
html:not(.legacy-kds-view) .admin-shell .compact-metrics,
html:not(.legacy-kds-view) .admin-shell .report-metrics,
html:not(.legacy-kds-view) .admin-shell .media-storage-metrics,
html:not(.legacy-kds-view) .admin-shell .availability-status-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
html:not(.legacy-kds-view) .admin-shell .compact-metrics > *,
html:not(.legacy-kds-view) .admin-shell .report-metrics > *,
html:not(.legacy-kds-view) .admin-shell .media-storage-metrics > *,
html:not(.legacy-kds-view) .admin-shell .availability-status-grid > * {
  min-height:104px;
  padding:16px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:#fff;
}
html:not(.legacy-kds-view) .admin-shell .compact-metrics strong,
html:not(.legacy-kds-view) .admin-shell .report-metrics strong,
html:not(.legacy-kds-view) .admin-shell .media-storage-metrics strong { color:var(--ui-text); font-size:1.55rem; line-height:1.15; }
html:not(.legacy-kds-view) .admin-shell .compact-metrics span,
html:not(.legacy-kds-view) .admin-shell .report-metrics span,
html:not(.legacy-kds-view) .admin-shell .media-storage-metrics span { color:var(--ui-muted); }

/* Empty/loading/message states */
html:not(.legacy-kds-view) .admin-shell .empty-state,
html:not(.legacy-kds-view) .admin-shell .mini-empty,
html:not(.legacy-kds-view) .admin-shell .loading-panel {
  display:grid;
  place-items:center;
  min-height:150px;
  padding:28px 20px;
  color:var(--ui-muted);
  text-align:center;
}
html:not(.legacy-kds-view) .admin-shell .form-error,
html:not(.legacy-kds-view) .admin-shell .form-success,
html:not(.legacy-kds-view) .admin-shell .inline-message,
html:not(.legacy-kds-view) .admin-shell .report-notice,
html:not(.legacy-kds-view) .admin-shell .inventory-notice {
  border-radius:12px;
  padding:11px 14px;
  margin:0 0 16px;
}
html:not(.legacy-kds-view) .admin-shell .form-error { background:var(--ui-danger-soft); border:1px solid #FECACA; color:#B91C1C; }
html:not(.legacy-kds-view) .admin-shell .form-success,
html:not(.legacy-kds-view) .admin-shell .inline-message { background:var(--ui-success-soft); border:1px solid #BBF7D0; color:#166534; }
html:not(.legacy-kds-view) .admin-shell .inventory-notice.warning { background:var(--ui-warning-soft); border:1px solid #FED7AA; color:#9A3412; }

/* List/table language */
html:not(.legacy-kds-view) .admin-shell .table-head {
  min-height:42px;
  padding:10px 16px;
  background:var(--ui-table-head);
  color:var(--ui-muted);
  border-bottom:1px solid var(--ui-border);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
html:not(.legacy-kds-view) .admin-shell .table-row,
html:not(.legacy-kds-view) .admin-shell .member-row,
html:not(.legacy-kds-view) .admin-shell .dish-row,
html:not(.legacy-kds-view) .admin-shell .expense-row,
html:not(.legacy-kds-view) .admin-shell .delivery-row,
html:not(.legacy-kds-view) .admin-shell .service-card {
  min-height:var(--ui-row-h);
  border-bottom:1px solid var(--ui-border);
  transition:background .15s ease;
}
html:not(.legacy-kds-view) .admin-shell .table-row:hover,
html:not(.legacy-kds-view) .admin-shell .member-row:hover,
html:not(.legacy-kds-view) .admin-shell .dish-row:hover,
html:not(.legacy-kds-view) .admin-shell .expense-row:hover,
html:not(.legacy-kds-view) .admin-shell .delivery-row:hover { background:var(--ui-hover); }
html:not(.legacy-kds-view) .admin-shell .row-actions { display:flex; justify-content:flex-end; align-items:center; gap:6px; flex-wrap:wrap; }
html:not(.legacy-kds-view) .admin-shell .row-actions button,
html:not(.legacy-kds-view) .admin-shell .text-button,
html:not(.legacy-kds-view) .admin-shell .icon-button {
  min-height:36px;
  border-radius:9px;
  color:var(--ui-text-soft);
  font-weight:700;
}
html:not(.legacy-kds-view) .admin-shell .row-actions button:hover,
html:not(.legacy-kds-view) .admin-shell .text-button:hover { background:var(--ui-surface-soft); color:var(--ui-text); }
html:not(.legacy-kds-view) .admin-shell .row-actions .danger,
html:not(.legacy-kds-view) .admin-shell .text-button.danger,
html:not(.legacy-kds-view) .admin-shell .icon-button.danger { color:var(--ui-danger); }
html:not(.legacy-kds-view) .admin-shell .danger-soft { color:#B91C1C; background:var(--ui-danger-soft); }

/* Pills and chips */
html:not(.legacy-kds-view) .admin-shell .status-chip,
html:not(.legacy-kds-view) .admin-shell .role-pill,
html:not(.legacy-kds-view) .admin-shell .availability,
html:not(.legacy-kds-view) .admin-shell .menu-live-state,
html:not(.legacy-kds-view) .admin-shell .store-toggle,
html:not(.legacy-kds-view) .admin-shell .branch-order-state {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:800;
}
html:not(.legacy-kds-view) .admin-shell .status-chip.completed,
html:not(.legacy-kds-view) .admin-shell .menu-live-state.live,
html:not(.legacy-kds-view) .admin-shell .store-toggle.open,
html:not(.legacy-kds-view) .admin-shell .branch-order-state.open { background:var(--ui-success-soft); color:#15803D; }
html:not(.legacy-kds-view) .admin-shell .status-chip.cancelled { background:var(--ui-danger-soft); color:#B91C1C; }
html:not(.legacy-kds-view) .admin-shell .role-pill { background:var(--ui-info-soft); color:#1D4ED8; }

/* Modal language */
html:not(.legacy-kds-view) .admin-shell .modal-backdrop {
  background:rgba(2,6,23,.46);
  backdrop-filter:blur(2px);
  padding:16px;
}
html:not(.legacy-kds-view) .admin-shell .modal-card {
  width:min(100%,640px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  border:1px solid var(--ui-border);
  border-radius:18px;
  box-shadow:var(--ui-shadow-modal);
}
html:not(.legacy-kds-view) .admin-shell .modal-card.compact { width:min(100%,520px); }
html:not(.legacy-kds-view) .admin-shell .modal-card.large { width:min(100%,860px); }
html:not(.legacy-kds-view) .admin-shell .modal-card.extra-large { width:min(100%,1120px); }
html:not(.legacy-kds-view) .admin-shell .modal-card > header,
html:not(.legacy-kds-view) .admin-shell .modal-card > footer { padding:16px 20px; }
html:not(.legacy-kds-view) .admin-shell .modal-card > header { border-bottom:1px solid var(--ui-border); }
html:not(.legacy-kds-view) .admin-shell .modal-card > footer { border-top:1px solid var(--ui-border); }

/* Form group language */
html:not(.legacy-kds-view) .admin-shell .form-grid { gap:14px; }
html:not(.legacy-kds-view) .admin-shell .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
html:not(.legacy-kds-view) .admin-shell .form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
html:not(.legacy-kds-view) .admin-shell .form-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
html:not(.legacy-kds-view) .admin-shell label { color:var(--ui-text-soft); }
html:not(.legacy-kds-view) .admin-shell label > small,
html:not(.legacy-kds-view) .admin-shell .form-help { color:var(--ui-muted); }
html:not(.legacy-kds-view) .admin-shell .switch-label,
html:not(.legacy-kds-view) .admin-shell .check-row,
html:not(.legacy-kds-view) .admin-shell .checkbox-label {
  border-radius:12px;
  min-height:44px;
}

/* Standard page layouts */
html:not(.legacy-kds-view) .admin-shell .catalog-layout,
html:not(.legacy-kds-view) .admin-shell .expense-layout,
html:not(.legacy-kds-view) .admin-shell .settings-grid,
html:not(.legacy-kds-view) .admin-shell .report-grid,
html:not(.legacy-kds-view) .admin-shell .branding-layout,
html:not(.legacy-kds-view) .admin-shell .subscription-layout {
  gap:18px;
}
html:not(.legacy-kds-view) .admin-shell .operations-grid,
html:not(.legacy-kds-view) .admin-shell .branch-admin-grid,
html:not(.legacy-kds-view) .admin-shell .supplier-grid,
html:not(.legacy-kds-view) .admin-shell .recipe-grid,
html:not(.legacy-kds-view) .admin-shell .online-channel-grid {
  gap:14px;
}

/* Employee account page: standard list-management sample */
html:not(.legacy-kds-view) .admin-shell .employee-account-layout {
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:18px;
  align-items:start;
}
html:not(.legacy-kds-view) .admin-shell .employee-account-layout > .panel { overflow:hidden; }
html:not(.legacy-kds-view) .admin-shell .employee-member-row {
  display:grid;
  grid-template-columns:42px minmax(220px,1fr) auto auto minmax(240px,auto);
  align-items:center;
  gap:12px;
  padding:13px 16px;
}
html:not(.legacy-kds-view) .admin-shell .employee-main-info { display:grid; gap:2px; min-width:0; }
html:not(.legacy-kds-view) .admin-shell .employee-main-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:not(.legacy-kds-view) .admin-shell .employee-main-info small { color:var(--ui-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:not(.legacy-kds-view) .admin-shell .employee-login-meta { margin-top:4px; font-size:11.5px; }
html:not(.legacy-kds-view) .admin-shell .employee-actions button { padding:7px 9px; }
html:not(.legacy-kds-view) .admin-shell .role-panel > article {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--ui-border);
}
html:not(.legacy-kds-view) .admin-shell .role-panel > article .row-actions { grid-column:1 / -1; justify-content:flex-start; }

/* Inventory, expenses, reports, settings and business hours retain their logic but share visual rhythm. */
html:not(.legacy-kds-view) .admin-shell .inventory-panel,
html:not(.legacy-kds-view) .admin-shell .settings-form,
html:not(.legacy-kds-view) .admin-shell .branding-form,
html:not(.legacy-kds-view) .admin-shell .hours-rules-panel,
html:not(.legacy-kds-view) .admin-shell .weekly-hours-panel,
html:not(.legacy-kds-view) .admin-shell .closure-panel { overflow:hidden; }
html:not(.legacy-kds-view) .admin-shell .purchase-list,
html:not(.legacy-kds-view) .admin-shell .movement-list,
html:not(.legacy-kds-view) .admin-shell .advanced-stock-list,
html:not(.legacy-kds-view) .admin-shell .report-list,
html:not(.legacy-kds-view) .admin-shell .delivery-zone-list,
html:not(.legacy-kds-view) .admin-shell .closure-list { padding:6px 0; }
html:not(.legacy-kds-view) .admin-shell .purchase-list > *,
html:not(.legacy-kds-view) .admin-shell .movement-list > *,
html:not(.legacy-kds-view) .admin-shell .advanced-stock-list > *,
html:not(.legacy-kds-view) .admin-shell .report-list > *,
html:not(.legacy-kds-view) .admin-shell .delivery-zone-list > *,
html:not(.legacy-kds-view) .admin-shell .closure-list > * { border-bottom:1px solid var(--ui-border); }

/* Responsive component behavior; .1.25 owns shell breakpoints. */
@media (max-width:1180px) {
  html:not(.legacy-kds-view) .admin-shell .employee-account-layout { grid-template-columns:1fr; }
  html:not(.legacy-kds-view) .admin-shell .compact-metrics,
  html:not(.legacy-kds-view) .admin-shell .report-metrics,
  html:not(.legacy-kds-view) .admin-shell .media-storage-metrics,
  html:not(.legacy-kds-view) .admin-shell .availability-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:not(.legacy-kds-view) .admin-shell .employee-member-row {
    grid-template-columns:42px minmax(180px,1fr) auto auto;
  }
  html:not(.legacy-kds-view) .admin-shell .employee-actions { grid-column:2 / -1; justify-content:flex-start; }
}

@media (max-width:767px) {
  html:not(.legacy-kds-view) .admin-shell .page-heading { align-items:flex-start; margin-bottom:16px; }
  html:not(.legacy-kds-view) .admin-shell .page-heading .heading-actions { flex:0 0 auto; }
  html:not(.legacy-kds-view) .admin-shell .page-heading .heading-actions .secondary-button { display:none; }
  html:not(.legacy-kds-view) .admin-shell .page-heading .heading-actions .primary-button {
    width:44px;
    min-width:44px;
    padding:0;
    font-size:0;
  }
  html:not(.legacy-kds-view) .admin-shell .page-heading .heading-actions .primary-button::after { content:'+'; font-size:22px; line-height:1; }

  html:not(.legacy-kds-view) .admin-shell .compact-metrics,
  html:not(.legacy-kds-view) .admin-shell .report-metrics,
  html:not(.legacy-kds-view) .admin-shell .media-storage-metrics,
  html:not(.legacy-kds-view) .admin-shell .availability-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  html:not(.legacy-kds-view) .admin-shell .compact-metrics > *,
  html:not(.legacy-kds-view) .admin-shell .report-metrics > *,
  html:not(.legacy-kds-view) .admin-shell .media-storage-metrics > *,
  html:not(.legacy-kds-view) .admin-shell .availability-status-grid > * { min-height:90px; padding:13px; }

  html:not(.legacy-kds-view) .admin-shell .form-grid.two,
  html:not(.legacy-kds-view) .admin-shell .form-grid.three,
  html:not(.legacy-kds-view) .admin-shell .form-grid.four { grid-template-columns:1fr; }

  html:not(.legacy-kds-view) .admin-shell .employee-member-row {
    margin:10px 12px;
    padding:14px;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    border:1px solid var(--ui-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
  }
  html:not(.legacy-kds-view) .admin-shell .employee-member-row:hover { background:#fff; }
  html:not(.legacy-kds-view) .admin-shell .employee-member-row .employee-main-info { grid-column:2 / 4; }
  html:not(.legacy-kds-view) .admin-shell .employee-member-row .role-pill { grid-column:2; justify-self:start; }
  html:not(.legacy-kds-view) .admin-shell .employee-member-row .availability { grid-column:3; grid-row:2; justify-self:end; }
  html:not(.legacy-kds-view) .admin-shell .employee-actions {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding-top:10px;
    border-top:1px solid var(--ui-border);
  }
  html:not(.legacy-kds-view) .admin-shell .employee-actions button { min-height:44px; width:100%; }
  html:not(.legacy-kds-view) .admin-shell .employee-login-meta { white-space:normal!important; }
  html:not(.legacy-kds-view) .admin-shell .role-panel { margin-top:4px; }

  html:not(.legacy-kds-view) .admin-shell .inventory-tabs,
  html:not(.legacy-kds-view) .admin-shell .settings-tabs,
  html:not(.legacy-kds-view) .admin-shell .operations-tabs { margin-left:-2px; margin-right:-2px; }
  html:not(.legacy-kds-view) .admin-shell .modal-backdrop { align-items:flex-end; padding:0; }
  html:not(.legacy-kds-view) .admin-shell .modal-card,
  html:not(.legacy-kds-view) .admin-shell .modal-card.compact,
  html:not(.legacy-kds-view) .admin-shell .modal-card.large,
  html:not(.legacy-kds-view) .admin-shell .modal-card.extra-large {
    width:100%;
    max-height:92dvh;
    border-radius:18px 18px 0 0;
    border-bottom:0;
  }
  html:not(.legacy-kds-view) .admin-shell .modal-card > footer { position:sticky; bottom:0; background:#fff; z-index:2; }
}