/**
 * HYDRA — Unified visual grammar + route personality (use-new-ui).
 * No business logic; CSS only. Transitions 120–160ms, subtle shadows, no loud gradients.
 */

@layer pages {
  /* ---------------------------------------------------------------------------
     Phase 1 — Design tokens (scoped)
     --------------------------------------------------------------------------- */
  body.use-new-ui {
    --hydra-ops-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --hydra-ops-dur: 140ms;
    --hydra-section-gap: 16px;
    --hydra-section-title-gap: 10px;
    --hydra-card-grid-gap: 12px;
    --hydra-toolbar-h: 36px;
    --hydra-kpi-pad-y: 12px;
    --hydra-kpi-pad-x: 14px;
    --hydra-kpi-title: var(--type-kpi-label, 15px);
    --hydra-kpi-value: var(--type-kpi-value, 40px);
    --hydra-table-row-min: 42px;
  }

  /* ---------------------------------------------------------------------------
     Phase 1 — Section system (opt-in classes)
     --------------------------------------------------------------------------- */
  body.use-new-ui .section-block {
    margin-bottom: var(--hydra-section-gap);
  }

  body.use-new-ui .section-block:last-child {
    margin-bottom: 0;
  }

  body.use-new-ui .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--hydra-section-title-gap);
    min-width: 0;
  }

  body.use-new-ui .section-title {
    margin: 0;
    font-size: var(--type-section-title, var(--fs-2xl));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--lh-tight, 1.2);
    color: #0f172a;
  }

  body.use-new-ui .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
  }

  body.use-new-ui .section-body {
    min-width: 0;
  }

  body.dark.use-new-ui .section-title {
    color: #f1f5f9;
  }

  /* ---------------------------------------------------------------------------
     Phase 1 — KPI card system (shared surfaces)
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui .cards > .card:not(.skeleton-card),
    body.use-new-ui .dashboard-kpi-grid .premium-kpi-card,
    body.use-new-ui .finance-kpi-card,
    body.use-new-ui .orders-summary-cards .orders-card,
    body.use-new-ui .cod-kpi-cards > .card,
    body.use-new-ui .data-check-page > .cards > .card {
      min-height: 104px;
      box-sizing: border-box;
      padding: var(--hydra-kpi-pad-y) var(--hydra-kpi-pad-x);
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #fff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: transform var(--hydra-ops-dur) var(--hydra-ops-ease), box-shadow var(--hydra-ops-dur) var(--hydra-ops-ease);
    }

    body.use-new-ui .cards > .card:not(.skeleton-card):hover,
    body.use-new-ui .dashboard-kpi-grid .premium-kpi-card:hover,
    body.use-new-ui .finance-kpi-card:hover,
    body.use-new-ui .orders-summary-cards .orders-card:hover,
    body.use-new-ui .cod-kpi-cards > .card:hover,
    body.use-new-ui .data-check-page > .cards > .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07);
    }

    body.use-new-ui .cards > .card .card-title,
    body.use-new-ui .data-check-page > .cards > .card .card-title,
    body.use-new-ui .finance-kpi-label {
      font-size: var(--hydra-kpi-title);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 6px;
      line-height: 1.25;
    }

    body.use-new-ui .cards > .card .card-value,
    body.use-new-ui .data-check-page > .cards > .card .card-value,
    body.use-new-ui .finance-kpi-value {
      font-size: var(--hydra-kpi-value);
      font-weight: 780;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
      line-height: 1.15;
      color: #0f172a;
    }

    body.use-new-ui .premium-kpi-card .card-title {
      margin-bottom: 4px;
    }

    body.use-new-ui .premium-kpi-foot,
    body.use-new-ui .cards > .card .card-title + small {
      margin-top: 4px;
      font-size: var(--type-kpi-meta, 16px);
      color: #64748b;
    }

    body.dark.use-new-ui .cards > .card:not(.skeleton-card),
    body.dark.use-new-ui .dashboard-kpi-grid .premium-kpi-card,
    body.dark.use-new-ui .finance-kpi-card,
    body.dark.use-new-ui .orders-summary-cards .orders-card,
    body.dark.use-new-ui .cod-kpi-cards > .card,
    body.dark.use-new-ui .data-check-page > .cards > .card {
      background: rgba(15, 23, 42, 0.72);
      border-color: rgba(51, 65, 85, 0.55);
    }

    body.dark.use-new-ui .cards > .card .card-value,
    body.dark.use-new-ui .data-check-page > .cards > .card .card-value,
    body.dark.use-new-ui .finance-kpi-value {
      color: #f1f5f9;
    }

    body.dark.use-new-ui .cards > .card .card-title,
    body.dark.use-new-ui .finance-kpi-label {
      color: #94a3b8;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 1 — Empty state + finance empty (align family)
     --------------------------------------------------------------------------- */
  body.use-new-ui .empty-state,
  body.use-new-ui .finance-empty-state {
    text-align: center;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(248, 250, 252, 0.85);
  }

  body.use-new-ui .empty-state-icon,
  body.use-new-ui .finance-empty-state-icon {
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 6px;
    opacity: 0.78;
  }

  body.use-new-ui .empty-state-title,
  body.use-new-ui .finance-empty-state-title {
    font-size: 14px;
    font-weight: 750;
    margin: 0 0 4px;
    color: #0f172a;
  }

  body.use-new-ui .empty-state-desc,
  body.use-new-ui .finance-empty-state-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
    margin: 0;
  }

  /* Inline / table-cell empty — same family, tighter padding */
  body.use-new-ui .empty-state.empty-state--table-cell {
    padding: 12px 14px;
    text-align: center;
    border-style: solid;
    border-color: rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.72);
  }

  body.use-new-ui .empty-state.empty-state--compact {
    padding: 12px 14px;
    text-align: center;
  }

  body.use-new-ui td .empty-state {
    margin-left: auto;
    margin-right: auto;
    max-width: 440px;
  }

  body.dark.use-new-ui .empty-state,
  body.dark.use-new-ui .finance-empty-state {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(71, 85, 105, 0.5);
  }

  body.dark.use-new-ui .empty-state.empty-state--table-cell {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(71, 85, 105, 0.55);
  }

  body.dark.use-new-ui .empty-state-title,
  body.dark.use-new-ui .finance-empty-state-title {
    color: #e2e8f0;
  }

  /* ---------------------------------------------------------------------------
     Phase 1 — Action bar / toolbar rhythm
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui .route-page:not([hidden]) .toolbar.compact-toolbar,
    body.use-new-ui .route-page:not([hidden]) .toolbar.customers-toolbar,
    body.use-new-ui .route-page:not([hidden]) .toolbar.cod-toolbar,
    body.use-new-ui .route-page:not([hidden]) .finance-toolbar.expense-toolbar,
    body.use-new-ui .route-page:not([hidden]) .toolbar.data-check-toolbar,
    body.use-new-ui .route-page:not([hidden]) .toolbar.owner-toolbar,
    body.use-new-ui .reports-page .toolbar.compact-toolbar {
      min-height: var(--hydra-toolbar-h);
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 6px 2px;
      margin-bottom: 10px;
    }

    body.use-new-ui .route-page:not([hidden]) .toolbar.compact-toolbar .btn,
    body.use-new-ui .route-page:not([hidden]) .toolbar.compact-toolbar input,
    body.use-new-ui .route-page:not([hidden]) .toolbar.compact-toolbar select,
    body.use-new-ui .route-page:not([hidden]) .finance-toolbar.expense-toolbar .btn,
    body.use-new-ui .route-page:not([hidden]) .finance-toolbar.expense-toolbar input,
    body.use-new-ui .route-page:not([hidden]) .customers-toolbar .btn,
    body.use-new-ui .route-page:not([hidden]) .customers-toolbar input,
    body.use-new-ui .route-page:not([hidden]) .customers-toolbar select,
    body.use-new-ui .route-page:not([hidden]) .toolbar.owner-toolbar .btn,
    body.use-new-ui .route-page:not([hidden]) .toolbar.owner-toolbar input,
    body.use-new-ui .route-page:not([hidden]) .toolbar.owner-toolbar select,
    body.use-new-ui .reports-page .toolbar.compact-toolbar .btn,
    body.use-new-ui .reports-page .toolbar.compact-toolbar input,
    body.use-new-ui .reports-page .toolbar.compact-toolbar select {
      min-height: var(--hydra-toolbar-h);
      box-sizing: border-box;
    }

    body.use-new-ui .reports-tools-page .reports-tools-tabbar {
      min-height: var(--hydra-toolbar-h);
      align-items: center;
      margin-bottom: 10px;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2A — Dashboard executive shell
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-dashboard .dashboard-hero {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: var(--hydra-section-gap);
    }

    body.use-new-ui.route-dashboard .dashboard-insight-strip {
      border-radius: 12px;
    }

    body.use-new-ui.route-dashboard .dashboard-kpi-grid--hero-primary .premium-kpi-card.kpi-tone-revenue,
    body.use-new-ui.route-dashboard .dashboard-kpi-grid--hero-primary .premium-kpi-card.kpi-tone-profit {
      position: relative;
      border-color: rgba(59, 130, 246, 0.22);
    }

    body.use-new-ui.route-dashboard .dashboard-kpi-grid--hero-primary .premium-kpi-card.kpi-tone-revenue .card-value,
    body.use-new-ui.route-dashboard .dashboard-kpi-grid--hero-primary .premium-kpi-card.kpi-tone-profit .card-value {
      font-size: var(--type-kpi-value, 48px);
    }

    body.use-new-ui.route-dashboard .dashboard-health {
      margin-bottom: var(--hydra-section-gap);
    }

    body.use-new-ui.route-dashboard .premium-inventory-alerts,
    body.use-new-ui.route-dashboard .owner-warning-panel {
      border-color: rgba(251, 191, 36, 0.35);
    }

    body.use-new-ui.route-dashboard .premium-activity-panel.activity-panel--dense .activity-item {
      padding: 5px 0;
    }

    body.use-new-ui.route-dashboard .premium-activity-panel.activity-panel--dense .activity-icon {
      font-size: 15px;
    }

    body.use-new-ui.route-dashboard .premium-activity-panel.activity-panel--dense .activity-text small {
      font-size: 11px;
    }

    body.use-new-ui.route-dashboard .dashboard-source-panel .chart-wrapper--compact {
      margin-top: 4px;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2B — Orders operations (sticky desk toolbar)
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-orders .orders-page .orders-desk-top {
      position: sticky;
      top: 0;
      z-index: 13;
      padding-bottom: 6px;
      margin-bottom: 4px;
      background: linear-gradient(180deg, rgba(243, 246, 251, 0.98) 0%, rgba(243, 246, 251, 0.92) 85%, transparent 100%);
    }

    body.dark.use-new-ui.route-orders .orders-page .orders-desk-top {
      background: linear-gradient(180deg, rgba(11, 18, 32, 0.97) 0%, rgba(11, 18, 32, 0.88) 85%, transparent 100%);
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2C — Inventory intelligence (desktop; complements inventory-intel sheet)
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-inventory .inventory-health-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
      gap: var(--hydra-card-grid-gap);
      margin-bottom: var(--hydra-section-gap);
    }

    body.use-new-ui.route-inventory .inventory-risk-card {
      border-radius: 11px;
      border: 1px solid #e2e8f0;
      background: rgba(255, 255, 255, 0.92);
      padding: 10px 12px;
      min-height: 88px;
      box-sizing: border-box;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: transform var(--hydra-ops-dur) var(--hydra-ops-ease), box-shadow var(--hydra-ops-dur) var(--hydra-ops-ease);
    }

    body.use-new-ui.route-inventory .inventory-risk-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
    }

    body.use-new-ui.route-inventory .inventory-risk-card--ok {
      border-color: rgba(187, 247, 208, 0.55);
      background: rgba(240, 253, 244, 0.45);
    }

    body.use-new-ui.route-inventory .inventory-risk-card--warn {
      border-color: rgba(253, 230, 138, 0.65);
      background: rgba(254, 252, 232, 0.55);
    }

    body.use-new-ui.route-inventory .inventory-risk-card--bad {
      border-color: rgba(252, 165, 165, 0.55);
      background: rgba(254, 242, 242, 0.5);
    }

    body.use-new-ui.route-inventory .inventory-risk-k {
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #64748b;
    }

    body.use-new-ui.route-inventory .inventory-risk-v {
      margin-top: 4px;
      font-size: 20px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #0f172a;
    }

    body.use-new-ui.route-inventory .inventory-risk-sub {
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.35;
    }

    body.dark.use-new-ui.route-inventory .inventory-risk-card {
      background: rgba(15, 23, 42, 0.55);
      border-color: rgba(51, 65, 85, 0.55);
    }

    body.dark.use-new-ui.route-inventory .inventory-risk-v {
      color: #f1f5f9;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2D — Customers CRM intelligence
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-customers .customers-intelligence {
      display: flex;
      flex-direction: column;
      gap: var(--hydra-section-gap);
    }

    body.use-new-ui.route-customers .customers-intelligence .customer-analytics-grid {
      gap: var(--hydra-card-grid-gap);
    }

    body.use-new-ui.route-customers .customers-intelligence .customer-tier-badge.tier-vip {
      box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.35);
    }

    body.use-new-ui.route-customers .customers-intelligence .customer-tier-badge.tier-dormant {
      opacity: 0.92;
      border-style: dashed;
    }

    body.use-new-ui.route-customers .customers-intelligence .customer-crm-table tbody tr:hover td {
      background: rgba(248, 250, 252, 0.95);
    }

    body.dark.use-new-ui.route-customers .customers-intelligence .customer-crm-table tbody tr:hover td {
      background: rgba(30, 41, 59, 0.55);
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2E — Finance / expenses center
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-expenses .finance-page.finance-grid {
      min-width: 0;
    }

    body.use-new-ui.route-expenses .finance-summary.finance-kpi-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: var(--hydra-section-gap);
    }

    body.use-new-ui.route-expenses .finance-health .finance-kpi-card--hero-negative {
      border-color: rgba(185, 28, 28, 0.35);
      background: rgba(254, 242, 242, 0.55);
    }

    body.use-new-ui.route-expenses .finance-health .finance-kpi-card--hero-negative .finance-kpi-value {
      color: #9f1239;
    }

    body.use-new-ui.route-expenses .finance-split-grid {
      gap: var(--hydra-card-grid-gap);
    }

    body.dark.use-new-ui.route-expenses .finance-health .finance-kpi-card--hero-negative {
      background: rgba(69, 10, 10, 0.28);
      border-color: rgba(248, 113, 113, 0.25);
    }

    body.dark.use-new-ui.route-expenses .finance-health .finance-kpi-card--hero-negative .finance-kpi-value {
      color: #fecdd3;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2F — COD recovery
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-cod .cod-recovery-page {
      display: flex;
      flex-direction: column;
      gap: var(--hydra-section-title-gap);
    }

    body.use-new-ui.route-cod .cod-recovery-page tbody tr[data-cod-sla="overdue"] td {
      background: rgba(254, 242, 242, 0.35);
    }

    body.use-new-ui.route-cod .cod-recovery-page tbody tr[data-cod-sla="warning"] td {
      background: rgba(254, 252, 232, 0.4);
    }

    body.use-new-ui.route-cod .cod-recovery-empty-hint {
      margin: 4px 0 8px;
      max-width: 520px;
    }

    body.use-new-ui.route-cod .cod-filter-empty-card {
      padding: 24px 20px;
      text-align: center;
      border-radius: 14px;
      border: 1px dashed var(--hydra-border-soft);
      background: #fff;
    }

    body.use-new-ui.route-cod .cod-filter-empty-title {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 700;
    }

    body.use-new-ui.route-cod .cod-filter-empty-desc {
      margin: 0 0 12px;
      font-size: 13px;
      line-height: 1.45;
    }

    body.dark.use-new-ui.route-cod .cod-recovery-empty-hint {
      background: rgba(15, 23, 42, 0.5);
      border-color: rgba(71, 85, 105, 0.5);
    }

    body.dark.use-new-ui.route-cod .cod-recovery-page tbody tr[data-cod-sla="overdue"] td {
      background: rgba(69, 10, 10, 0.22);
    }

    body.dark.use-new-ui.route-cod .cod-recovery-page tbody tr[data-cod-sla="warning"] td {
      background: rgba(69, 26, 3, 0.2);
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 2G — Data check diagnostics
     --------------------------------------------------------------------------- */
  @media (min-width: 769px) {
    body.use-new-ui.route-data-check .data-check-diagnostics {
      display: flex;
      flex-direction: column;
      gap: var(--hydra-section-gap);
    }

    body.use-new-ui.route-data-check .data-check-diagnostics > .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--hydra-card-grid-gap);
    }

    body.use-new-ui.route-data-check .data-check-panel {
      border-radius: 12px;
    }

    body.use-new-ui.route-data-check .data-check-panel h3 {
      font-size: 13px;
      font-weight: 750;
      margin: 0 0 8px;
    }

    body.use-new-ui.route-data-check .data-check-panel .card-value.profit-bad {
      color: #b45309;
    }
  }

  /* ---------------------------------------------------------------------------
     Phase 3 — Focus + nav active (subtle)
     --------------------------------------------------------------------------- */
  body.use-new-ui .sidebar #menu .menu-item:focus-visible,
  body.use-new-ui .btn:focus-visible,
  body.use-new-ui .segment-btn:focus-visible,
  body.use-new-ui .link-like:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
  }

  @media (min-width: 769px) {
    body.use-new-ui .sidebar #menu .menu-item.active {
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
    }
  }
}