/* ============================================================
   SERVIQ DARK THEME — COMPLETE APPLICATION LAYER
   Loaded after all page-specific styles.
============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d100e;
  --panel: #151916;
  --panel-soft: #191e1a;
  --text: #edf2ee;
  --muted: #9aa49d;
  --muted-2: #78827b;
  --line: #2a332d;

  --nav: #0b0e0c;
  --nav-2: #131713;
  --nav-text: #cdd4cf;

  --accent: #2aae91;
  --accent-dark: #19836d;
  --accent-soft: #183129;

  --green-soft: #183226;
  --blue-soft: #192844;
  --violet-soft: #2a2441;
  --amber-soft: #392d18;
  --danger-soft: #391e1e;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .full-main {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .sidebar {
  background: #0a0d0b;
  border-right-color: #1c231f;
}

html[data-theme="dark"] .topbar {
  border-color: var(--line);
  background: rgba(13, 16, 14, .96);
}

html[data-theme="dark"] :is(
  h1, h2, h3, h4, strong, b
) {
  color: var(--text);
}

html[data-theme="dark"] :is(
  .breadcrumb,
  .breadcrumb a,
  .page-subtitle,
  .topbar-context,
  .muted,
  .settings-card p
) {
  color: var(--muted);
}

/* ------------------------------------------------------------
   Shared white surfaces
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .metric-card,
  .flow-card,
  .recent-orders,
  .order-summary-card,
  .orders-workspace-panel,
  .orders-table-shell,
  .table-summary-card,
  .tables-workspace-panel,
  .restaurant-table-card,
  .menu-summary-card,
  .menu-management-card,
  .service-task-card,
  .service-empty,
  .team-stat-card,
  .team-invitations-panel,
  .team-directory-panel,
  .team-form-section,
  .analytics-kpis,
  .analytics-panel,
  .analytics-filter,
  .analytics-workspace-pill,
  .payments-panel,
  .payments-summary-grid article,
  .payments-export-button,
  .settings-card,
  .settings-tabs,
  .settings-savebar,
  .notification-popover,
  .secondary-button,
  .segmented button.selected,
  .preview-food-card,
  .customer-order-card,
  .order-status-card,
  .order-summary-card,
  .cancellation-record,
  .table-menu-button,
  .table-dropdown,
  .table-action-button,
  .table-action-icon,
  .serviq-modal-card,
  .modal-close-button,
  .modifier-option,
  .customer-modifier-group,
  .menu-v3-option-row,
  .menu-v3-no-options,
  .menu-v3-preview-card,
  .menu-v3-preview-option,
  .menu-v3-preview-control,
  .team-role-radio,
  .team-branch-check,
  .team-accept-card,
  .team-existing-account-note
) {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text);
}

/* ------------------------------------------------------------
   Inputs / selects / controls
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  input,
  select,
  textarea
) {
  color-scheme: dark;
}

html[data-theme="dark"] :is(
  .orders-filter-form select,
  .orders-filter-form input,
  .payment-confirm-form select,
  .payment-confirm-form input,
  .order-danger-zone textarea,
  .tables-filter-form select,
  .tables-filter-form input,
  .serviq-form input,
  .serviq-form select,
  .serviq-form textarea,
  .menu-filter-form input,
  .menu-filter-form select,
  .menu-edit-form input,
  .menu-edit-form textarea,
  .menu-edit-form select,
  .menu-v3-field input,
  .menu-v3-field textarea,
  .menu-v3-field select,
  .menu-v3-new-group input,
  .menu-v3-option-form input,
  .service-assign-form select,
  .team-filter-form select,
  .team-filter-form button,
  .team-search,
  .team-form-section input[type="text"],
  .team-form-section input[type="email"],
  .team-accept-form input,
  .payments-filter-form input,
  .payments-filter-form select,
  .analytics-custom-range input,
  .settings-field input,
  .settings-field select,
  .settings-field textarea
) {
  border-color: #323b35 !important;
  background: #111512 !important;
  color: var(--text) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #68736b;
}

/* ------------------------------------------------------------
   Topbar buttons
------------------------------------------------------------ */

html[data-theme="dark"] .topbar-button,
html[data-theme="dark"] .round-button {
  border-color: #303a33;
  background: #141915;
  color: #e3eae5;
}

html[data-theme="dark"] .topbar-button:hover,
html[data-theme="dark"] .round-button:hover {
  border-color: #425047;
  background: #1c231e;
}

/* ------------------------------------------------------------
   Dashboard
------------------------------------------------------------ */

html[data-theme="dark"] .flow-ring {
  background: conic-gradient(var(--accent) var(--progress, 0%), #28312b 0);
}

html[data-theme="dark"] .flow-ring::after {
  background: var(--panel) !important;
}

html[data-theme="dark"] :is(
  .recent-orders-head,
  .recent-order-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .recent-orders-head {
  background: #191e1a !important;
}

/* ------------------------------------------------------------
   Service board
------------------------------------------------------------ */

html[data-theme="dark"] .service-board-stats > span {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text);
}

html[data-theme="dark"] .service-empty {
  min-height: 260px;
  background:
    linear-gradient(180deg, #151a16 0%, #121613 100%) !important;
}

html[data-theme="dark"] .service-empty :is(h2, p) {
  color: var(--text);
}

html[data-theme="dark"] .service-empty p {
  color: var(--muted);
}

/* ------------------------------------------------------------
   Orders
------------------------------------------------------------ */

html[data-theme="dark"] .orders-table-head {
  border-color: var(--line);
  background: #191e1a !important;
  color: #89948d;
}

html[data-theme="dark"] .order-row {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .order-row:hover {
  background: #181d19 !important;
}

html[data-theme="dark"] .row-actions button {
  border-color: #344039;
  background: #111512 !important;
  color: #dfe7e1;
}

/* ------------------------------------------------------------
   Tables & QR
------------------------------------------------------------ */

html[data-theme="dark"] .restaurant-table-card {
  background: #151a16 !important;
}

html[data-theme="dark"] :is(
  .table-stat-cell,
  .table-qr-panel
) {
  border-color: #29332c !important;
  background: #111512 !important;
}

html[data-theme="dark"] .table-dropdown {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

/* ------------------------------------------------------------
   Menu
------------------------------------------------------------ */

html[data-theme="dark"] .menu-management-card {
  background: #151a16 !important;
}

html[data-theme="dark"] .menu-card-actions :is(a, button),
html[data-theme="dark"] .menu-v3-option-form button {
  border-color: #364139 !important;
  background: #111512 !important;
  color: #e0e7e2 !important;
}

html[data-theme="dark"] :is(
  .menu-card-meta,
  .modifier-option,
  .menu-v3-option-row,
  .menu-v3-no-options,
  .menu-v3-preview-option,
  .menu-v3-preview-control
) {
  border-color: var(--line) !important;
  background: #111512 !important;
}

html[data-theme="dark"] :is(
  .upload-button,
  .premium-upload-button,
  .menu-v3-upload-button
) {
  border-color: #354038 !important;
  background: #161b17 !important;
  color: #e0e7e2 !important;
}

/* ------------------------------------------------------------
   Team
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .team-invite-row,
  .team-directory-head,
  .team-directory-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .team-directory-head {
  background: #191e1a !important;
}

html[data-theme="dark"] :is(
  .team-role-radio,
  .team-branch-check
) {
  background: #111512 !important;
}

html[data-theme="dark"] :is(
  .team-invite-actions button,
  .team-copy-link
) {
  border-color: #354038 !important;
  background: #111512 !important;
  color: #dfe7e1 !important;
}

/* ------------------------------------------------------------
   Analytics
------------------------------------------------------------ */

html[data-theme="dark"] .analytics-presets {
  background: #111512;
}

html[data-theme="dark"] .analytics-presets button {
  color: #919b94;
}

html[data-theme="dark"] .analytics-presets button.active {
  background: #232a25 !important;
  color: #f0f4f1;
  box-shadow: none;
}

html[data-theme="dark"] .analytics-gridline {
  stroke: #29322c;
}

html[data-theme="dark"] .analytics-revenue-dot {
  fill: var(--panel);
}

html[data-theme="dark"] :is(
  .analytics-progress,
  .analytics-hour-bar,
  .analytics-branch-bar
) {
  background: #29322c;
}

html[data-theme="dark"] .analytics-table th {
  border-color: var(--line);
  background: #191e1a !important;
  color: #8d9790;
}

html[data-theme="dark"] :is(
  .analytics-table td,
  .analytics-branch-row
) {
  border-color: var(--line);
}

html[data-theme="dark"] .analytics-ops-grid > div {
  border-color: var(--line);
  background: #111512 !important;
}

/* ------------------------------------------------------------
   Payments
------------------------------------------------------------ */

html[data-theme="dark"] .payments-policy-strip {
  border-color: #29463b;
  background: #14261f !important;
}

html[data-theme="dark"] .payments-summary-grid article.attention {
  border-color: #51462f !important;
  background: #211c13 !important;
}

html[data-theme="dark"] .payments-period-tabs {
  border-color: var(--line);
  background: #111512;
}

html[data-theme="dark"] .payments-period-tabs a.active {
  background: #232a25 !important;
  box-shadow: none;
}

html[data-theme="dark"] :is(
  .payments-ledger,
  .payments-ledger-row,
  .payments-pagination
) {
  border-color: var(--line);
}

html[data-theme="dark"] .payments-ledger-head {
  background: #191e1a !important;
  color: #8d9790;
}

html[data-theme="dark"] .payments-ledger-row a {
  color: #dce5df;
}

html[data-theme="dark"] .payments-method-chip {
  background: #252d27;
  color: #bec8c1;
}

html[data-theme="dark"] .payments-method-bar {
  background: #29322c;
}

/* ------------------------------------------------------------
   Settings
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .settings-scope-badge,
  .settings-count-pill,
  .settings-secondary-button
) {
  border-color: var(--line);
  background: var(--panel-soft) !important;
  color: #bbc4bd;
}

html[data-theme="dark"] :is(
  .settings-toggle-row,
  .settings-payment-preview,
  .settings-inherit-note
) {
  border-color: var(--line);
  background: #111512 !important;
}

/* ------------------------------------------------------------
   Search command palette
------------------------------------------------------------ */

body.command-open {
  overflow: hidden;
}

.serviq-command[hidden] {
  display: none !important;
}

.serviq-command {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: start center;
  padding-top: min(13vh, 118px);
}

.serviq-command-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 6, 5, .62);
  backdrop-filter: blur(6px);
  cursor: default;
}

.serviq-command-panel {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .34);
}

.serviq-command-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.serviq-command-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.serviq-command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 14px;
}

.serviq-command-search kbd {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-family: inherit;
  font-size: 8px;
}

.serviq-command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 7px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.serviq-command-results {
  display: grid;
  gap: 3px;
  max-height: min(58vh, 460px);
  overflow: auto;
  padding: 4px 8px 10px;
}

.serviq-command-results a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
}

.serviq-command-results a:hover,
.serviq-command-results a:focus {
  outline: 0;
  background: var(--accent-soft);
}

.serviq-command-results a[hidden] {
  display: none;
}

.serviq-command-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.serviq-command-results strong,
.serviq-command-results small {
  display: block;
}

.serviq-command-results strong {
  font-size: 11px;
}

.serviq-command-results small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.serviq-command-empty {
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

@media (max-width: 700px) {
  .serviq-command {
    padding-top: 70px;
  }
}

/* ============================================================
   V3 DARK REFINEMENT
   Dark mode should be tonal, not "black page + white islands".
   Remove bright panel fills and high-contrast separators while
   preserving QR readability and useful status colours.
============================================================ */

html[data-theme="dark"] {
  --dark-surface-0: #0d100e;
  --dark-surface-1: #121613;
  --dark-surface-2: #161b17;
  --dark-surface-3: #1b211d;
  --dark-line: rgba(236, 244, 239, 0.075);
  --dark-line-soft: rgba(236, 244, 239, 0.045);
  --dark-text-soft: #a0aaa3;
}

/* ---------- Remove stark white KPI / table surfaces ---------- */

html[data-theme="dark"] :is(
  .signal-strip,
  .order-summary-card,
  .orders-workspace-panel,
  .table-summary-card,
  .tables-workspace-panel,
  .menu-summary-card,
  .team-stat-card,
  .team-invitations-panel,
  .team-directory-panel,
  .analytics-kpis,
  .analytics-panel,
  .analytics-filter,
  .payments-panel,
  .payments-summary-grid article
) {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
  box-shadow: none !important;
}

/* Dashboard KPI dividers */
html[data-theme="dark"] .signal-item:not(:last-child)::after {
  background: var(--dark-line) !important;
}

/* Selected segmented controls should never turn white */
html[data-theme="dark"] .segmented button.selected {
  background: var(--dark-surface-3) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* Dashboard ring centre */
html[data-theme="dark"] .flow-ring::after {
  background: var(--dark-surface-1) !important;
}

/* ---------- Dashboard recent orders ---------- */

html[data-theme="dark"] :is(
  .recent-orders-head,
  .orders-master-head,
  .team-directory-head,
  .payments-ledger-head,
  .analytics-table th
) {
  background: var(--dark-surface-2) !important;
  color: #87928a !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .recent-order-row,
  .orders-master-row,
  .team-directory-row,
  .team-invite-row,
  .payments-ledger-row,
  .analytics-table td,
  .analytics-branch-row
) {
  border-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] :is(
  .recent-order-row,
  .orders-master-row,
  .team-directory-row,
  .team-invite-row,
  .payments-ledger-row
):hover {
  background: var(--dark-surface-2) !important;
}

/* ---------- Buttons that were rendered as white blocks ---------- */

html[data-theme="dark"] :is(
  .secondary-button,
  .row-more,
  .orders-filter-button,
  .tables-filter-button,
  .menu-filter-button,
  .team-filter-form button,
  .payments-export-button,
  .settings-secondary-button,
  .table-card-actions a,
  .table-card-actions button,
  .menu-card-actions a,
  .menu-card-actions button,
  .team-invite-actions button,
  .team-copy-link
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #cbd4ce !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .secondary-button,
  .row-more,
  .orders-filter-button,
  .tables-filter-button,
  .menu-filter-button,
  .team-filter-form button,
  .payments-export-button,
  .settings-secondary-button,
  .table-card-actions a,
  .table-card-actions button,
  .menu-card-actions a,
  .menu-card-actions button,
  .team-invite-actions button,
  .team-copy-link
):hover {
  background: var(--dark-surface-3) !important;
  border-color: rgba(236, 244, 239, 0.12) !important;
}

/* ---------- Form controls ---------- */

html[data-theme="dark"] :is(
  .orders-filter-form input,
  .orders-filter-form select,
  .tables-filter-form input,
  .tables-filter-form select,
  .menu-filter-form input,
  .menu-filter-form select,
  .team-filter-form select,
  .team-search,
  .payments-filter-form input,
  .payments-filter-form select,
  .analytics-custom-range input,
  .settings-field input,
  .settings-field select,
  .settings-field textarea
) {
  background: #101411 !important;
  border-color: var(--dark-line) !important;
  color: #dce4df !important;
  box-shadow: none !important;
}

/* ---------- Tables & QR ---------- */

html[data-theme="dark"] .restaurant-table-card {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .table-stat-cell,
  .table-card-meta > span
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line-soft) !important;
  color: #d7dfda !important;
}

/*
QR itself remains black-on-white for reliable scanning.
Only its container is darkened.
*/
html[data-theme="dark"] .table-qr-preview {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .table-card-menu,
  .table-action-button,
  .table-action-icon
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #cdd6d0 !important;
}

/* ---------- Menu ---------- */

html[data-theme="dark"] .menu-management-card {
  background: var(--dark-surface-1) !important;
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] .menu-card-image {
  background: var(--dark-surface-3) !important;
}

html[data-theme="dark"] .menu-card-image > span:not(.menu-availability-pill) {
  background: #222a24 !important;
  color: #aeb8b1 !important;
}

html[data-theme="dark"] .menu-card-meta > span {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] :is(
  .menu-edit-form input,
  .menu-edit-form textarea,
  .menu-edit-form select,
  .serviq-form textarea,
  .menu-v3-field input,
  .menu-v3-field textarea,
  .menu-v3-field select,
  .menu-v3-new-group input,
  .menu-v3-option-form input
) {
  background: #101411 !important;
  border-color: var(--dark-line) !important;
  color: #dce4df !important;
}

/* ---------- Team ---------- */

html[data-theme="dark"] :is(
  .team-role-radio,
  .team-branch-check
) {
  background: var(--dark-surface-2) !important;
  border-color: rgba(236, 244, 239, 0.18) !important;
}

html[data-theme="dark"] .team-directory-head {
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .team-member-avatar,
  .team-invite-avatar
) {
  background: #202720 !important;
  color: #cbd4ce !important;
}

/* ---------- Analytics ---------- */

html[data-theme="dark"] :is(
  .analytics-soft-pill,
  .analytics-workspace-pill
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: #bdc7c0 !important;
}

html[data-theme="dark"] .analytics-kpi:not(:last-child)::after {
  background: var(--dark-line) !important;
}

html[data-theme="dark"] :is(
  .analytics-progress,
  .analytics-hour-bar,
  .analytics-branch-bar
) {
  background: #232b25 !important;
}

html[data-theme="dark"] .analytics-gridline {
  stroke: rgba(236, 244, 239, 0.075) !important;
}

html[data-theme="dark"] .analytics-ops-grid > div {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/*
Some analytics builds include inline period-summary boxes.
Make every direct summary-like child tonal instead of white.
*/
html[data-theme="dark"] .analytics-trend-panel :is(
  .analytics-trend-summary,
  .analytics-period-summary,
  .analytics-chart-summary,
  .analytics-summary-card
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: var(--text) !important;
}

/* ---------- Payments ---------- */

html[data-theme="dark"] .payments-policy-strip {
  background: #12221c !important;
  border-color: rgba(42, 174, 145, 0.16) !important;
}

html[data-theme="dark"] .payments-summary-grid article.attention {
  background: #201b12 !important;
  border-color: rgba(201, 135, 32, 0.2) !important;
}

html[data-theme="dark"] :is(
  .payments-method-chip,
  .payments-period-tabs
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Settings ---------- */

html[data-theme="dark"] :is(
  .settings-toggle-row,
  .settings-payment-preview,
  .settings-inherit-note
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Status pills ---------- */

html[data-theme="dark"] :is(
  .status-badge,
  .order-status-pill,
  .table-state-pill,
  .menu-availability-pill,
  .team-role-badge,
  .team-invite-status,
  .payments-method-chip,
  .payments-reconciled,
  .payments-unreconciled
) {
  box-shadow: none !important;
}

/* Avoid white completed/neutral pills */
html[data-theme="dark"] :is(
  .status-completed,
  .order-status-completed,
  .status-neutral
) {
  background: #222923 !important;
  color: #cbd4ce !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Global separator softening ---------- */

html[data-theme="dark"] .main :is(
  hr,
  .divider,
  .section-divider
) {
  border-color: var(--dark-line) !important;
  background: var(--dark-line) !important;
}

/* Remove glow/shadow language from dark mode */
html[data-theme="dark"] .main :is(
  .signal-strip,
  .flow-card,
  .recent-orders,
  .orders-workspace-panel,
  .orders-table-shell,
  .tables-workspace-panel,
  .restaurant-table-card,
  .menu-management-card,
  .team-invitations-panel,
  .team-directory-panel,
  .analytics-panel,
  .payments-panel,
  .settings-card
) {
  box-shadow: none !important;
}

/* Search palette stays deliberately layered, but not outlined brightly */
html[data-theme="dark"] .serviq-command-panel {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, 0.1) !important;
}

html[data-theme="dark"] .serviq-command-search {
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] .serviq-command-results a:hover,
html[data-theme="dark"] .serviq-command-results a:focus {
  background: #1a2a24 !important;
}
/* ============================================================
   V4 — EXACT INNER-SURFACE OVERRIDES
   These selectors target the remaining light-mode components
   that live inside app.css / page CSS rather than only the
   outer panels.
============================================================ */

/* ------------------------------------------------------------
   DASHBOARD — recent orders / QR quick list
------------------------------------------------------------ */

html[data-theme="dark"] .orders-table {
  color: var(--text);
}

html[data-theme="dark"] .orders-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .orders-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
  color: #dce4df;
}

html[data-theme="dark"] .orders-table tbody tr:hover td {
  background: #171c18 !important;
}

html[data-theme="dark"] .qr-mini-row {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .table-cube {
  background: #202720 !important;
  color: #dbe4de !important;
  border-color: rgba(236, 244, 239, .08) !important;
}

html[data-theme="dark"] .text-button {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
  color: #a9b3ac !important;
}


/* ------------------------------------------------------------
   ORDER DETAIL
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .order-detail-panel,
  .order-side-card
) {
  background: #121613 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .order-line-item {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] :is(
  .order-line-quantity,
  .order-item-count
) {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .order-total-breakdown {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .order-total-breakdown > div {
  border-color: rgba(236, 244, 239, .045) !important;
}

html[data-theme="dark"] .payment-summary {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .payment-summary > div {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .payment-summary :is(span, small) {
  color: #8f9a92 !important;
}

html[data-theme="dark"] .payment-summary strong {
  color: #edf3ef !important;
}

html[data-theme="dark"] .payment-confirm-form :is(select, input) {
  background: #0f1310 !important;
  border-color: rgba(236, 244, 239, .09) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .customer-order-note {
  background: #171c18 !important;
  border-color: rgba(42, 174, 145, .22) !important;
  color: #d7e0da !important;
}

html[data-theme="dark"] .cancellation-meta span {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .07) !important;
}


/* ------------------------------------------------------------
   TABLES & QR — metadata cards were explicitly white in app.css
------------------------------------------------------------ */

html[data-theme="dark"] .table-meta-grid > div {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .065) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .table-meta-grid small {
  color: #7f8a82 !important;
}

html[data-theme="dark"] .table-meta-grid strong {
  color: #dce4df !important;
}

html[data-theme="dark"] .table-number-mark {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .table-qr-preview {
  background: #151a16 !important;
  border-color: rgba(236, 244, 239, .07) !important;
}

/* Keep only the actual QR graphic high contrast for scanning. */
html[data-theme="dark"] .mini-qr {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, .94) !important;
}

html[data-theme="dark"] .mini-qr svg {
  color: #111412 !important;
  fill: #111412 !important;
}


/* ------------------------------------------------------------
   TEAM DIRECTORY — exact table selectors
------------------------------------------------------------ */

html[data-theme="dark"] .team-table {
  color: var(--text);
}

html[data-theme="dark"] .team-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .team-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .055) !important;
  color: #dce4df !important;
}

html[data-theme="dark"] .team-table tbody tr:hover td {
  background: #171c18 !important;
}

html[data-theme="dark"] .team-branch-list > span {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .08) !important;
  color: #cbd5ce !important;
}

html[data-theme="dark"] .team-all-branches {
  background: #202720 !important;
  color: #cbd5ce !important;
}


/* ------------------------------------------------------------
   ANALYTICS — remaining inner metric cards
------------------------------------------------------------ */

/*
The current analytics build has an extra metric strip inside the
trend panel in some template versions. Target its direct inner
cards without affecting the chart container.
*/
html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .065) !important;
  color: #dce4df !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div :is(small, span, p) {
  color: #87928a !important;
}

html[data-theme="dark"] .analytics-trend-panel
  > div:not(.analytics-panel-head):not(.analytics-chart-shell)
  > div strong {
  color: #e9f0eb !important;
}

html[data-theme="dark"] .analytics-soft-pill {
  background: #1a201c !important;
  border-color: rgba(236, 244, 239, .075) !important;
  color: #c4cec7 !important;
}

html[data-theme="dark"] .analytics-table thead th {
  background: #171c18 !important;
  color: #87928a !important;
}

html[data-theme="dark"] .analytics-table tbody td {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .05) !important;
}


/* ------------------------------------------------------------
   PAYMENTS — inner ledger surfaces
------------------------------------------------------------ */

html[data-theme="dark"] .payments-ledger-head {
  background: #171c18 !important;
  color: #87928a !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .payments-ledger-row {
  background: transparent !important;
  border-color: rgba(236, 244, 239, .05) !important;
}

html[data-theme="dark"] .payments-ledger-row:hover {
  background: #171c18 !important;
}

html[data-theme="dark"] .payments-method-chip {
  background: #202720 !important;
  color: #c5cfc8 !important;
}


/* ------------------------------------------------------------
   GLOBAL DARK-MODE SEPARATOR TUNING
------------------------------------------------------------ */

html[data-theme="dark"] .main :is(
  .panel,
  .signal-strip,
  .order-summary-card,
  .table-summary-card,
  .menu-summary-card,
  .team-stat-card,
  .analytics-kpis,
  .analytics-panel,
  .payments-panel,
  .settings-card
) {
  border-color: rgba(236, 244, 239, .075) !important;
}

html[data-theme="dark"] .main table :is(th, td) {
  border-color: rgba(236, 244, 239, .05);
}

html[data-theme="dark"] .main :is(
  .panel-head,
  .tables-toolbar,
  .team-directory-head,
  .payments-panel-head
) {
  border-color: rgba(236, 244, 239, .055) !important;
}

/* World-class dark mode should not use bright white outlines. */
html[data-theme="dark"] .main * {
  --shadow: none;
}
/* ============================================================
   V5 — FINAL DARK SURFACE CLEANUP
============================================================ */

/* Team invite: role and branch selectors */
html[data-theme="dark"] :is(
  .team-role-option,
  .team-branch-option
) {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] :is(
  .team-role-option,
  .team-branch-option
):hover {
  background: #181e19 !important;
  border-color: rgba(42, 174, 145, .22) !important;
}

html[data-theme="dark"] .team-role-option:has(input:checked),
html[data-theme="dark"] .team-branch-option:has(input:checked) {
  background: #17241f !important;
  border-color: rgba(42, 174, 145, .42) !important;
}

html[data-theme="dark"] :is(
  .team-role-radio,
  .team-branch-check
) {
  background: #0f1310 !important;
  border-color: #566159 !important;
}

html[data-theme="dark"] .team-role-option input:checked + .team-role-radio {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 4px #17241f !important;
}

html[data-theme="dark"] .team-branch-option input:checked + .team-branch-check {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 4px #17241f !important;
}

html[data-theme="dark"] :is(
  .team-role-option small,
  .team-branch-option small
) {
  color: #8e9991 !important;
}

/* Payments export menu */
html[data-theme="dark"] .payments-export-popover {
  background: #151a16 !important;
  border: 1px solid rgba(236, 244, 239, .08) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .38) !important;
}

html[data-theme="dark"] .payments-export-popover a {
  color: #dce5df !important;
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .payments-export-popover a:hover {
  background: #1a211c !important;
}

html[data-theme="dark"] .payments-export-popover small {
  color: #89948c !important;
}

/* Modal information / helper strips */
html[data-theme="dark"] .serviq-form-note {
  background: #17241f !important;
  border-color: rgba(42, 174, 145, .20) !important;
  color: #b8c7bf !important;
}

html[data-theme="dark"] .serviq-form-note p {
  color: #9eaaa2 !important;
}

/* Branch-locked field for manager menu creation */
.serviq-locked-field {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.serviq-locked-field-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
}

.serviq-locked-field strong,
.serviq-locked-field small {
  display: block;
}

.serviq-locked-field strong {
  font-size: 10px;
}

.serviq-locked-field small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

html[data-theme="dark"] .serviq-locked-field {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, .075) !important;
}

/* Native select surface. The OS/browser still controls some open-menu rendering. */
html[data-theme="dark"] select,
html[data-theme="dark"] select option {
  background-color: #111512 !important;
  color: #dce5df !important;
}

/* Modal separation */
html[data-theme="dark"] .serviq-modal-card {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, .09) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .serviq-modal-head {
  border-color: rgba(236, 244, 239, .06) !important;
}
/* ============================================================
   V6 — SETTINGS + NOTIFICATION DARK CLEANUP
   Exact selectors for the remaining light surfaces visible in
   Settings / Branches / Brand and the notification popover.
============================================================ */

/* ------------------------------------------------------------
   SETTINGS TABS
------------------------------------------------------------ */

html[data-theme="dark"] .settings-tabs {
  background: #121613 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .settings-tabs a {
  color: #89948c !important;
}

html[data-theme="dark"] .settings-tabs a:hover {
  background: #181e19 !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .settings-tabs a.active {
  background: #1a2a24 !important;
  color: #49bea4 !important;
  box-shadow: inset 0 0 0 1px rgba(42, 174, 145, .11) !important;
}

/* ------------------------------------------------------------
   BRANCH LIST
------------------------------------------------------------ */

html[data-theme="dark"] .branch-settings-row {
  border-color: rgba(236, 244, 239, .055) !important;
}

html[data-theme="dark"] .branch-settings-row:hover {
  background: #171c18 !important;
}

html[data-theme="dark"] .branch-settings-stats > span {
  background: #171c18 !important;
  border: 1px solid rgba(236, 244, 239, .055) !important;
  color: #dce5df !important;
}

html[data-theme="dark"] .branch-settings-stats b {
  color: #dce5df !important;
}

html[data-theme="dark"] .branch-settings-stats small {
  color: #7f8a82 !important;
}

html[data-theme="dark"] .branch-settings-main small {
  color: #8f9a92 !important;
}

html[data-theme="dark"] .branch-settings-arrow {
  color: #6f7a72 !important;
}

html[data-theme="dark"] .branch-status.active {
  background: #173126 !important;
  color: #55c8aa !important;
}

html[data-theme="dark"] .branch-status.inactive {
  background: #202520 !important;
  color: #8d978f !important;
}

/* ------------------------------------------------------------
   SETTINGS BADGES
------------------------------------------------------------ */

html[data-theme="dark"] :is(
  .settings-scope-badge,
  .settings-count-pill
) {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  color: #b7c1ba !important;
}

html[data-theme="dark"] .settings-scope-badge.success {
  background: #173126 !important;
  border-color: rgba(42, 174, 145, .16) !important;
  color: #55c8aa !important;
}

/* ------------------------------------------------------------
   BRAND SETTINGS
------------------------------------------------------------ */

html[data-theme="dark"] .brand-logo-panel {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .065) !important;
}

html[data-theme="dark"] .brand-logo-preview {
  background: #202720 !important;
  border-color: rgba(236, 244, 239, .075) !important;
  color: #4cc0a5 !important;
}

html[data-theme="dark"] .brand-logo-details p,
html[data-theme="dark"] .brand-logo-details > small {
  color: #89948c !important;
}

html[data-theme="dark"] .brand-principle {
  background: #17241f !important;
  border-color: rgba(42, 174, 145, .16) !important;
  color: #d7e2db !important;
}

html[data-theme="dark"] .brand-principle p {
  color: #94a198 !important;
}

html[data-theme="dark"] .brand-colour-swatch {
  border-color: rgba(236, 244, 239, .09) !important;
}

/*
The phone preview intentionally stays light.
It represents the customer-facing mobile experience, which is separate
from the staff dashboard appearance preference.
*/
html[data-theme="dark"] .brand-phone-screen {
  color-scheme: light;
}

/* ------------------------------------------------------------
   NOTIFICATION POPOVER
------------------------------------------------------------ */

html[data-theme="dark"] .notification-popover {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, .085) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .notification-popover-head {
  background: #141915 !important;
  border-color: rgba(236, 244, 239, .06) !important;
}

html[data-theme="dark"] .notification-popover-list {
  background: #141915 !important;
}

html[data-theme="dark"] .notification-popover-foot {
  background: #171c18 !important;
  border-color: rgba(236, 244, 239, .06) !important;
}

html[data-theme="dark"] .notification-popover-foot a {
  color: #50c5aa !important;
}

html[data-theme="dark"] .notification-empty,
html[data-theme="dark"] .notification-empty-state {
  color: #7f8a82 !important;
  background: transparent !important;
}

html[data-theme="dark"] .notification-item {
  border-color: rgba(236, 244, 239, .055) !important;
  background: transparent !important;
}

html[data-theme="dark"] .notification-item:hover {
  background: #181e19 !important;
}

/* ------------------------------------------------------------
   SETTINGS CARD SEPARATORS
------------------------------------------------------------ */

html[data-theme="dark"] .settings-card-head {
  border-color: rgba(236, 244, 239, .045) !important;
}

html[data-theme="dark"] .settings-card {
  box-shadow: none !important;
}