/* ==== Shared engine vocabulary ==========================================
   portal-base.js is now ONE file shared by every portal built on this
   engine, so it speaks a neutral palette (--pb-*) rather than any one
   brand's. This block maps this portal's own tokens onto it.

   These are ALIASES, not new colours. CSS resolves them at use time, so
   when the light theme overrides --st-text above, --pb-text follows it
   automatically. Change the brand tokens; never edit these.
   ===================================================================== */
:root {
  --pb-red:       var(--st-red);
  --pb-bg:        var(--st-bg);
  --pb-border:    var(--st-border);
  --pb-card-hi:   var(--st-card-hi);
  --pb-modal-bg:  var(--st-modal-bg);
  --pb-muted:     var(--st-muted);
  --pb-text:      var(--st-text);
  --pb-text-dim:  var(--st-text-dim);
  /* the engine falls back if this is unset; the dark theme has no faint token */
  --pb-faint:      var(--st-muted);

  /* Brand accent washes used by the engine for highlight/pulse states.
     These were the donor portal's red written out as raw numbers, so they
     could not follow a client's brand however the tokens were set - the one
     kind of leftover that searching for the client's NAME never finds.
     Derived from the live brand colour instead, with that red kept only as
     the fallback for a browser without color-mix. */
  --pb-accent-10:  color-mix(in srgb, var(--st-red, #e9262a) 10%, transparent);
  --pb-accent-30:  color-mix(in srgb, var(--st-red, #e9262a) 30%, transparent);
  --pb-accent-70:  color-mix(in srgb, var(--st-red, #e9262a) 70%, transparent);

  /* Chart snapshots export onto WHITE whatever the live theme is, so
     this must be a fixed dark ink and NOT --pb-text (a dark theme's
     light text would disappear on the exported image). */
  --pb-snap-text:  #1c1c22;
}

/* =====================================================
   MagicCloud BI Portal — Shared Base Styles
   Override --brand-primary and --brand-accent per customer
   ===================================================== */

:root {
    /* Dark theme, overriding MagicCloud's light-purple defaults.
       The two brand tokens are set from the client's own branding at load
       (see template.html). These values are the fallback for the instant
       before that lands, and for a portal with no branding configured - so
       they are DELIBERATELY NEUTRAL. They used to be the donor portal's red
       and grey, which meant every unbranded clone wore another client's
       colours and looked, at a glance, like their portal. */
    --brand-primary: #3d4a5c;        /* neutral slate - overridden per client */
    --brand-accent: #8a94a3;         /* neutral grey - overridden per client */
    --bg-body: #0d0d0f;              /* near-black background */
    --bg-card: #1c1c22;              /* card surface */
    --bg-surface: #16161a;           /* aside / nav surface */
    --bg-card-hi: #232329;           /* hover surface */
    --text-primary: #e8e8ec;
    --text-secondary: #c8c8cc;
    --text-muted: #80828a;
    --border-light: #2a2a32;
    --bg-soft: #16161a;
    --green: #4caf50;
    --red: #e9262a;
    --amber: #f59e0b;
}

/* Light theme — applied when the user toggles via the header button.
   Brand red is unchanged across themes; only canvas + text invert.
   Both selectors so it matches whether the attr was pre-painted onto
   <html> (head-script, no flash) or set later onto <body>. */
:root[data-theme="light"],
body[data-theme="light"] {
    --bg-body:        #f6f7f9;
    --bg-card:        #ffffff;
    --bg-surface:     #ffffff;
    --bg-card-hi:     #f1f3f7;
    --bg-soft:        #f6f7f9;
    --text-primary:   #1c1c22;
    --text-secondary: #3a3a44;
    --text-muted:     #6b6e76;
    --border-light:   #e1e4ea;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-body);
    min-height: 100vh;
    padding: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* =====================================================
   EMBED MODE — when the portal is hosted inside another
   app's iframe (e.g. MagicProc procurement chat panel).
   Strips ONLY the chrome the parent app already provides
   (admin link, sign-out, user info, admin-only buttons).
   The branded header stays — it gives the embedded panel
   identity and context for the user.
   Activated by ?embed=1 in the URL (set via portal-base.js).
   ===================================================== */
body.embed-mode .nav-admin,
body.embed-mode .sign-out,
body.embed-mode .user-info,
body.embed-mode #saveQueryBtn {
    display: none !important;
}
body.embed-mode .container {
    padding: 0;
}

/* Header */
.header {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    height: 40px;
    width: auto;
}

.header-text h1 {
    color: var(--text-primary);
    font-size: 22px;
    margin-bottom: 4px;
}

.header-text p {
    color: var(--text-secondary);
    font-size: 12px;
}

.header-spacer {
    flex: 1;
}

.powered-by {
    color: var(--text-muted);
    font-size: 9px;
    text-align: right;
}

/* Stat Cards */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-card);
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card h3 {
    color: var(--brand-primary);
    font-size: 22px;
    margin-bottom: 4px;
}

.stat-card p {
    color: var(--text-secondary);
    font-size: 10px;
}

.stat-card--text .stat-label {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.stat-card--text .stat-text-body {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Query Section */
.query-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 16px;
}

.quick-queries {
    margin-bottom: 14px;
}

.quick-queries h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 11px;
}

.quick-query-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-query-btn {
    background: var(--bg-soft);
    border: 2px solid var(--border-light);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 10px;
    color: var(--text-primary);
    /* Mobile fixes: kill the 300ms tap delay so the button feels native;
       provide visible tap feedback (some Android skins make the default
       highlight invisible, which is why these buttons can look "dead"). */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.25);
    user-select: none;
}

.quick-query-btn:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.quick-query-btn:active {
    /* :active triggers on touch as well as click — guarantees feedback on
       devices where :hover never fires. */
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
    transform: scale(0.97);
}

.input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 12px;
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.btn-primary {
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.3s;
    font-weight: 600;
}

.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Loading */
.loading {
    text-align: center;
    padding: 14px;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 12px;
}

.loading-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loading-progress-bar {
    width: 100%;
    max-width: 360px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.loading-progress-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--brand-primary);
    border-radius: 3px;
    animation: loading-slide 1.2s ease-in-out infinite;
}

@keyframes loading-slide {
    0% { left: -40%; }
    100% { left: 100%; }
}

.loading-cancel-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.loading-cancel-btn:hover {
    background: var(--bg-card-hi);
    border-color: var(--brand-accent);
    color: var(--text-primary);
}

/* Slicer buttons — use a dedicated --slicer-active accent (sky blue) so
   the active state is clearly distinguishable from brand-primary, which
   is reserved for alerts / primary actions. */
:root { --slicer-active: #0ea5e9; --slicer-active-hover: #0284c7; }
:root[data-theme="light"],
body[data-theme="light"] { --slicer-active: #0284c7; --slicer-active-hover: #0369a1; }

.slicer-btn {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    line-height: 16px;
}

.slicer-btn:hover {
    border-color: var(--slicer-active);
    color: var(--slicer-active);
}

.slicer-btn.active {
    background: var(--slicer-active);
    border-color: var(--slicer-active);
    color: #fff;
}

/* Hide-this-slicer × button. Subtle by default, red on hover. */
.slicer-hide-btn {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    line-height: 13px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.slicer-hide-btn:hover {
    background: var(--red, #ef4444);
    color: #fff;
}

/* Bulk action buttons (All / None) — slightly different shape so they
   don't get mistaken for value buttons. */
.slicer-bulk-btn {
    display: inline-block;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px dashed var(--border-light);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    line-height: 14px;
    margin-right: 4px;
}
.slicer-bulk-btn:hover {
    border-style: solid;
    border-color: var(--slicer-active);
    color: var(--slicer-active);
}

.slicer-label {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
}

/* Results */
.results-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 16px;
}

.results-section h2 {
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 12px;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-soft);
    border-radius: 6px;
    font-size: 11px;
}

.results-meta span { color: var(--text-secondary); }
.results-meta .cost { color: var(--brand-primary); font-weight: 600; }

.sql-display {
    background: var(--bg-soft);
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid var(--brand-primary);
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    overflow-x: auto;
    white-space: pre-wrap;
}

.action-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.btn-secondary {
    background: var(--bg-soft);
    border: 2px solid var(--border-light);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.3s;
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.btn-success {
    background: var(--green);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: opacity 0.3s;
}

.btn-success:hover { opacity: 0.9; }

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 11px;
}

/* MEASURED. White on the brand #e9262a is 4.40:1, under the 4.5 an 11px
   header needs. The band is the same colour darkened to #e22428, which
   carries white at 4.65:1. Every other use of the brand is untouched.
   Run the numbers before changing this. */
thead { background: var(--brand-header, #e22428); color: #fff; }
thead th { color: #fff; }

th, td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

tbody tr:hover { background: var(--bg-soft); }

.no-results {
    text-align: center;
    padding: 28px;
    color: var(--text-muted);
    font-size: 11px;
}

.error {
    background: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid #dc2626;
    margin-top: 12px;
    font-size: 11px;
}

/* History */
.history-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 16px;
}

.history-section h2 {
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 12px;
}

.history-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 8px;
}

.history-item {
    background: var(--bg-soft);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.history-item:hover { background: #e9ecef; }
.history-query { flex: 1; color: var(--text-primary); font-size: 10px; }
.history-timestamp { color: var(--text-muted); font-size: 8px; margin-top: 2px; }

.history-buttons { display: flex; gap: 4px; }

.history-btn {
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 9px;
    transition: opacity 0.3s;
    color: white;
}

.history-btn.run { background: var(--brand-primary); }
.history-btn.edit { background: var(--amber); }
.history-btn.delete { background: var(--red); }
.history-btn:hover { opacity: 0.8; }

/* Login Overlay */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.login-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card .login-logo {
    height: 60px;
    margin-bottom: 16px;
}

.login-card h2 {
    color: var(--text-primary);
    font-size: 20px;
    margin-bottom: 4px;
}

.login-card .login-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 24px;
}

.login-card .form-group {
    margin-bottom: 14px;
    text-align: left;
}

.login-card label {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 600;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.login-card input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.login-card .btn-login {
    width: 100%;
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-top: 8px;
}

.login-card .btn-login:hover { opacity: 0.9; }
.login-card .btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
    background: #fee2e2;
    color: #dc2626;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 12px;
}

.login-powered {
    color: var(--text-muted);
    font-size: 9px;
    margin-top: 20px;
}

/* User info in header */
.user-info {
    color: var(--text-muted);
    font-size: 11px;
}

.btn-logout {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-logout:hover {
    border-color: var(--red);
    color: var(--red);
}

/* =====================================================
   RESULTS POPUP MODAL
   ===================================================== */
.results-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.results-modal {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: 95vw;
    max-width: 1400px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.results-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.results-modal-header h2 {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0;
}

.results-modal-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.results-modal-meta .cost {
    color: var(--brand-primary);
    font-weight: 600;
}

.results-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.results-modal-close:hover {
    color: var(--red);
}

.results-modal-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.results-modal-toolbar input {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    font-size: 12px;
    width: 250px;
}

.results-modal-toolbar input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.results-modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    min-height: 300px;
    position: relative;
}

.results-modal-body .ag-theme-alpine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Header text wrapping — don't break words */
.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.3;
    text-overflow: unset !important;
}

.results-modal-sql {
    padding: 10px 20px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    max-height: 120px;
    overflow-y: auto;
}

.results-modal-sql pre {
    background: var(--bg-soft);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--brand-primary);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: pre-wrap;
    margin: 0;
}

/* =====================================================
   RESPONSIVE — Tablet (768px and below)
   ===================================================== */
@media (max-width: 768px) {
    body { padding: 10px; }

    .header {
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }

    .header-logo { height: 35px; }

    .header-text h1 { font-size: 18px; }
    .header-text p { font-size: 11px; }

    .stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stat-card { padding: 10px; min-width: unset !important; }
    .stat-card h3 { font-size: 18px; }
    .stat-card p { font-size: 10px; }

    .header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px !important;
    }
    .header-text h1 { font-size: 16px !important; }
    .header-text p { font-size: 10px !important; }
    .powered-by { font-size: 9px !important; }
    .user-info { font-size: 12px !important; }
    .btn-logout { font-size: 10px !important; padding: 3px 8px !important; }

    .query-section,
    .results-section,
    .history-section {
        padding: 14px;
    }

    .quick-query-buttons { gap: 5px; }
    .quick-query-btn { font-size: 11px; padding: 6px 10px; }

    .input-group {
        flex-direction: column;
    }

    .input-group input[type="text"] {
        width: 100%;
    }

    .btn-primary {
        width: 100%;
        text-align: center;
    }

    table { font-size: 11px; }
    th, td { padding: 6px 8px; }

    .results-meta { flex-direction: column; gap: 4px; text-align: center; }

    .action-buttons { justify-content: center; }

    .login-card { padding: 24px; margin: 0 10px; }
}

/* =====================================================
   RESPONSIVE — Phone (480px and below)
   ===================================================== */
@media (max-width: 480px) {
    body { padding: 6px; }

    .container { max-width: 100%; }

    .header {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }

    .header-spacer { display: none; }

    .header-text h1 { font-size: 16px; }
    .header-text p { font-size: 10px; }

    .stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .stat-card h3 { font-size: 16px; }
    .stat-card { min-width: unset !important; }

    .quick-query-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .quick-query-btn {
        width: 100%;
        text-align: center;
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .history-buttons {
        align-self: flex-end;
    }

    /* Make results table horizontally scrollable */
    #resultsTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table { min-width: 500px; }

    .login-card {
        padding: 20px 16px;
        margin: 0 4px;
        border-radius: 8px;
    }

    .login-card h2 { font-size: 18px; }
}

/* =====================================================
   RESPONSIVE — Financial Reports panel (Excel builder)
   The plPanel uses inline grid-template-columns:1fr 320px which won't
   collapse on phones. These overrides use !important to win over the
   inline styles when the viewport is narrow.
   ===================================================== */
@media (max-width: 900px) {
    .pl-panel { padding: 14px !important; }

    .pl-grid {
        /* Stack the two columns on phones / narrow tablets */
        grid-template-columns: 1fr !important;
    }

    .pl-right {
        /* When stacked, the left border becomes a top divider */
        border-left: 0 !important;
        padding-left: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-top: 16px !important;
        margin-top: 8px;
    }

    /* Preview pane inner padding — tighter on phone */
    #plPreviewPane { padding: 12px !important; }

    /* The text input + Preview button row should stack so the input
       isn't squashed to ~80px wide. */
    #plRequest { font-size: 16px !important; /* avoid iOS auto-zoom on focus */ }
}

.hidden { display: none; }

/* =====================================================
   Dark-theme overrides — applied with !important
   because portal-base.js builds the results modal with inline
   styles that hardcode the MagicCloud light palette.
   ===================================================== */
#resultsModalBox {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}
#resultsModalBox > div {
    border-color: var(--border-light) !important;
}
#resultsModalBox h2 { color: var(--text-primary) !important; }
#resultsModalBox span,
#resultsModalBox label,
#resultsModalBox div { color: inherit; }
#resultsModalBox button {
    color: var(--text-secondary) !important;
}
#resultsModalBox button:hover { color: var(--text-primary) !important; }
#resultsModalSql {
    background: var(--bg-soft) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-light) !important;
}
#resultsModalSql pre {
    background: #0a0a0c !important;
    color: #b8c4d0 !important;
    border-color: var(--border-light) !important;
}
/* Slicer panel inside modal */
#resultsModalBox [id^="dimensionPanel"],
#resultsModalBox [id^="dimensionPanel"] * {
    color: var(--text-secondary) !important;
}
/* ag-Grid theme variables for alpine-dark */
.ag-theme-alpine-dark {
    --ag-background-color: var(--bg-card);
    --ag-header-background-color: var(--bg-surface);
    --ag-odd-row-background-color: var(--bg-card);
    --ag-row-hover-color: var(--bg-card-hi);
    --ag-border-color: var(--border-light);
    --ag-foreground-color: var(--text-primary);
    --ag-header-foreground-color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   The drill-down slide-in (shared/panel-drill.js) in THIS portal's theme.
   The module is shared with the BI portal and styles itself for light pages;
   inside it, the report tables use this portal's own text colours, so on a
   dark portal the rows came out faint grey on white - legible only under the
   mouse. These rules point it at the theme variables instead, which also
   keeps it right when someone switches to the light theme. `html body` wins
   over the module's own injected rules without editing the shared file.
   --------------------------------------------------------------------------- */
html body .pd-panel { background: var(--bg-card); color: var(--text-primary); }
html body .pd-head, html body .pd-foot { border-color: var(--border-light); }
html body .pd-title { color: var(--text-primary); }
html body .pd-crumb, html body .pd-hint, html body .pd-win, html body .pd-lbl,
html body .pd-found, html body .pd-said, html body .pd-crumb .sep { color: var(--text-muted); }
html body .pd-chip, html body .pd-crumb .pd-chip:hover {
    background: var(--bg-card-hi); border-color: var(--border-light); color: var(--text-secondary); }
html body .pd-btn, html body .pd-view button, html body .pd-flex .pd-dim,
html body .pd-flex select, html body .pd-find input, html body .pd-find .pd-clear,
html body .pd-refine input, html body .pd-refine button.mic {
    background: var(--bg-surface); border-color: var(--border-light); color: var(--text-primary); }
html body .pd-btn:hover { background: var(--bg-card-hi); }
html body .pd-view button.on, html body .pd-refine button {
    background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
html body #pdBody th { background: var(--bg-card); box-shadow: 0 1px 0 var(--border-light); }
html body .rp-tbl tbody tr.pd-can:hover { background: var(--bg-card-hi); }
html body #pdBody .rp-tbl th, html body #pdBody table th {
    background: var(--bg-card) !important; color: var(--text-secondary) !important; }
/* "Refine" asks the BI portal's own service to rewrite a drill in plain English.
   This portal has no such service yet; a box that can only fail is hidden. */
html body .pd-refine { display: none !important; }