/* ============================================================================
   NarraPay surfaces layer — the calm work-surface theme (2026 redesign).
   Layered on top of app.css (which holds the structural/component styles).

   This file replaces the former app-wide glassmorphism. The rule now:
     • WORK SURFACES (everything you read numbers on) are opaque, flat-ground,
       hairline-bordered and calm. No backdrop-filter, no gradient behind data.
     • COLOUR MEANS SOMETHING: indigo = interactive, green = within budget,
       amber = needs attention, red = destructive / over budget. Nothing is
       tinted for decoration.
     • The ONE atmospheric surface is the login screen (an entry surface).

   The legacy --glass-* variables are kept (pages/components still reference
   them) but now resolve to opaque values, so anything not yet migrated goes
   solid rather than see-through. See docs/redesign/DESIGN-GUIDANCE.md §2.
   ========================================================================== */

:root {
  --glass-fill: #ffffff;
  --glass-fill-strong: #ffffff;
  --glass-border: var(--ps-border);
  --glass-radius: var(--ps-radius);
  --glass-blur: none;
  --glass-shadow: var(--ps-shadow);
  --glass-positive: 31, 157, 107;   /* matches --ps-positive */
  --glass-negative: 216, 69, 59;    /* matches --ps-negative */
}

/* ----- Flat page ground --------------------------------------------------- */
body { background: var(--ps-bg); }
.ps-app { background: transparent; }
.ps-main { background: transparent; }

/* ----- Shared surface treatment for every panel / card -------------------- */
.ps-kpi,
.ps-spend,
.ps-card,
.ps-tablecard,
.ps-snap-card,
.ps-pool {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
}

/* Semantic budget tint: green within budget, red over. Half the strength of the
   old glass theme — enough to read at a glance, quiet enough to sit beside data. */
.ps-kpi:has(.ps-kpi-value.pos) {
  background:
    linear-gradient(135deg, rgba(var(--glass-positive), 0.10),
                    rgba(var(--glass-positive), 0.02) 70%), #fff;
  border-color: rgba(var(--glass-positive), 0.22);
}
.ps-kpi:has(.ps-kpi-value.neg) {
  background:
    linear-gradient(135deg, rgba(var(--glass-negative), 0.10),
                    rgba(var(--glass-negative), 0.02) 70%), #fff;
  border-color: rgba(var(--glass-negative), 0.22);
}

/* ============================================================================
   AG Grid — opaque white data surface, flat neutral header, faint zebra.
   ========================================================================== */
.ag-theme-quartz.ps-grid {
  --ag-background-color: #ffffff;
  --ag-odd-row-background-color: #fbfbfd;      /* faint zebra for row tracking */
  --ag-header-background-color: #fafbfc;
  --ag-row-hover-color: var(--ps-row-hover);
  --ag-selected-row-background-color: var(--ps-primary-soft);
  --ag-border-color: var(--ps-border);
  --ag-row-border-color: var(--ps-row-border);
  background: #ffffff;
}
.ag-theme-quartz.ps-grid .ag-header {
  background: #fafbfc;
  border-bottom: 1px solid var(--ps-border);
}
/* Numbers line up down every column. */
.ag-theme-quartz.ps-grid .ag-cell,
.ag-theme-quartz.ps-grid .ag-paging-panel { font-variant-numeric: tabular-nums; }

/* A grid inside a table card: the CARD owns the border/radius/shadow, the grid
   sits flush inside it (so the toolbar above the grid is part of the same card). */
.ps-tablecard .ag-theme-quartz.ps-grid {
  border-radius: 0; box-shadow: none; border: none;
}

/* ----- Coloured comp groups → soft inset pills ---------------------------
   Current / Proposed / Change stay visually grouped (a scanning aid), at about
   half the old tint strength so the numbers lead and the colour supports. */
.ag-theme-quartz.ps-grid .ps-grp-current,
.ag-theme-quartz.ps-grid .ps-grp-current-loaded,
.ag-theme-quartz.ps-grid .ps-grp-proposed,
.ag-theme-quartz.ps-grid .ps-grp-proposed-loaded,
.ag-theme-quartz.ps-grid .ps-grp-change,
.ag-theme-quartz.ps-grid .ps-grp-mgr,
.ag-theme-quartz.ps-grid .ps-grp-mgr-loaded,
.ag-theme-quartz.ps-grid .ps-cell-unaccepted,
.ag-theme-quartz.ps-grid .ps-cell-queried {
  background: transparent !important;
}
.ag-theme-quartz.ps-grid .ps-grp-current .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-current .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-current-loaded .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-current-loaded .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-proposed .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-proposed .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-proposed-loaded .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-proposed-loaded .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-change .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-change .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-mgr .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-mgr .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-grp-mgr-loaded .ag-header-group-text,
.ag-theme-quartz.ps-grid .ps-grp-mgr-loaded .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-cell-unaccepted .ag-cell-value,
.ag-theme-quartz.ps-grid .ps-cell-queried .ag-cell-value {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-weight: 600; line-height: 1.3;
}
.ps-grp-current .ag-header-group-text,
.ps-grp-current .ag-cell-value        { background: rgba(20, 113, 90, 0.09); color: #0f5a47; }
.ps-grp-current-loaded .ag-header-group-text,
.ps-grp-current-loaded .ag-cell-value { background: rgba(15, 90, 71, 0.12); color: #0c4a3a; }
.ps-grp-proposed .ag-header-group-text,
.ps-grp-proposed .ag-cell-value       { background: rgba(27, 79, 160, 0.09); color: #1b4fa0; }
.ps-grp-proposed-loaded .ag-header-group-text,
.ps-grp-proposed-loaded .ag-cell-value{ background: rgba(22, 63, 128, 0.12); color: #163f80; }
.ps-grp-change .ag-header-group-text,
.ps-grp-change .ag-cell-value         { background: rgba(151, 96, 15, 0.10); color: #97600f; }
.ps-grp-mgr .ag-header-group-text,
.ps-grp-mgr .ag-cell-value            { background: rgba(91, 59, 165, 0.09); color: #5b3ba5; }
.ps-grp-mgr-loaded .ag-header-group-text,
.ps-grp-mgr-loaded .ag-cell-value     { background: rgba(74, 46, 140, 0.12); color: #4a2e8c; }
/* Attention states keep a stronger tint — they are meant to be noticed. */
.ps-cell-unaccepted .ag-cell-value    { background: rgba(214, 158, 0, 0.20); color: #8a6400; }
.ps-cell-queried .ag-cell-value       { background: rgba(232, 62, 124, 0.18); color: #a51d51; }
/* Pay cut: proposed pay below current. Strong red — it must not be missed. */
.ag-theme-quartz.ps-grid .ps-cut      { background: #ffe0e0 !important; color: #c92a2a !important;
                                        font-weight: 800; }

/* ============================================================================
   Modals, popovers & menus — opaque, so text always reads over busy content.
   ========================================================================== */
.mantine-Modal-overlay { background: rgba(27, 35, 51, 0.30) !important; }
.mantine-Modal-content,
.mantine-Popover-dropdown,
.ps-mention-menu {
  background: #ffffff !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px -18px rgba(16, 24, 40, 0.28),
              0 4px 12px rgba(16, 24, 40, 0.08) !important;
}
/* Opaque like the modal it heads: the header is sticky, and a transparent one let a long
   modal's content scroll visibly underneath the title (the template picker, 2026-10-11). */
.mantine-Modal-header { background: #ffffff !important;
  border-bottom: 1px solid var(--ps-row-border); }
.mantine-Modal-close { border-radius: 8px !important; }

/* ----- Login — the one atmospheric surface -------------------------------- */
.ps-login-shell {
  background:
    radial-gradient(700px 480px at 12% 0%, rgba(85, 98, 234, 0.14), transparent 60%),
    radial-gradient(640px 480px at 100% 100%, rgba(18, 179, 166, 0.11), transparent 58%),
    linear-gradient(160deg, #eef1fb, #f6f8ff);
}
.ps-login {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
              0 24px 60px -20px rgba(27, 35, 51, 0.28) !important;
}

/* ============================================================================
   Page-level controls — flat fields, calm tabs/segments/accordions.
   ========================================================================== */
.ps-page .mantine-Input-input,
.ps-page .mantine-Textarea-input,
.ps-page textarea,
.ps-page .mantine-Select-input,
.ps-page .mantine-NumberInput-input,
.ps-page .ps-search-input {
  background: var(--ps-field-bg) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius-sm) !important;
}
.ps-page .mantine-Tabs-list {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 10px; padding: 4px; gap: 2px;
}
.ps-page .mantine-Tabs-tab[data-active] {
  background: var(--ps-primary-soft); color: var(--ps-primary); border-radius: 7px;
}
.mantine-SegmentedControl-root {
  background: var(--ps-surface) !important;
  border: 1px solid var(--ps-border);
}
.mantine-SegmentedControl-indicator { background: var(--ps-primary-soft) !important; }
.ps-page .mantine-Accordion-item {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border) !important;
  border-radius: 10px !important;
  margin-bottom: 8px; overflow: hidden;
}

/* Home tiles sit directly on the page ground — the wrapper has no card chrome of
   its own (the individual .ps-kpi tiles / .ps-pool bars carry it). */
.ps-tiles-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ----- Dropdown menus (dcc.Dropdown portals out — style globally) ---------- */
.dash-dropdown-trigger {
  background: var(--ps-field-bg) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius-sm) !important;
  box-shadow: none !important;
}
.dash-dropdown-content {
  background: #ffffff !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 48px -18px rgba(16, 24, 40, 0.28) !important;
  padding: 5px !important;
  overflow: hidden;
}
.dash-dropdown-content .dash-options-list-option {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  margin: 1px 0 !important;
}
.dash-dropdown-content .dash-options-list-option:hover,
.dash-dropdown-content .dash-options-list-option.selected {
  background: var(--ps-primary-soft) !important;
  border-color: transparent !important;
}
.dash-dropdown-content .dash-dropdown-search {
  background: var(--ps-field-bg) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 8px !important;
}

/* Indigo light/subtle buttons: readable indigo text rather than the old muted grey,
   so "this is interactive" is legible. Filled CTAs keep white-on-indigo. */
.mantine-Button-root[data-variant="light"],
.mantine-Button-root[data-variant="subtle"] { font-weight: 600 !important; }