/* ==========================================================================
   ATLAS — a Stripe-shaped skin.

   Not a recolour of the others: Stripe's look comes from density, hairlines
   and restraint, not from its purple. The moves that actually carry it —
   * a cool near-white ground with pure white surfaces,
   * navy ink instead of black,
   * hairline borders doing the work shadows usually do,
   * small radii (6px, not 16px),
   * medium weights rather than bold,
   * pastel status pills with saturated text,
   * icons demoted to small muted marks.

   Verified against /design-preview.php before shipping.
   ========================================================================== */

html[data-skin="stripe"] {
    /* Stripe's ground is faintly blue, and its surfaces are pure white. That
       one-step separation is what makes cards read without heavy shadow. */
    --pv-bg:          #f6f9fc;
    --pv-surface:     #ffffff;
    --pv-surface-2:   #f7fafc;

    /* Navy, never black — softer on a white ground and unmistakably theirs. */
    --pv-text:        #0a2540;
    --pv-text-muted:  #697386;
    --pv-border:      #e3e8ee;

    --pv-accent:      #635bff;
    --pv-accent-600:  #5147e0;
    --pv-accent-soft: rgba(99,91,255,.08);
    --pv-brand-ink:   #0a2540;

    --pv-sidebar-bg:     #ffffff;
    --pv-sidebar-raise:  #f7fafc;
    --pv-sidebar-fg:     #697386;
    --pv-sidebar-active: rgba(99,91,255,.08);
    --pv-beacon:         #24b47e;

    /* Stripe's status colours: pale field, saturated ink. */
    --pv-success:      #0e6245;  --pv-success-soft: #cbf4c9;
    --pv-warning:      #983705;  --pv-warning-soft: #f8e5b9;
    --pv-danger:       #b3093c;  --pv-danger-soft:  #fde2dd;
    --pv-info:         #3d4eac;  --pv-info-soft:    #d6ecff;

    /* Small radii. This is one of the loudest signals that it is not the
       same app — 16px corners read consumer, 6px reads instrument. */
    --pv-r-sm: 4px;
    --pv-r-md: 6px;
    --pv-r-lg: 8px;
    --pv-r-xl: 12px;

    /* Stripe's elevation is mostly a 1px ring plus a whisper of shadow. */
    --pv-shadow-xs: 0 0 0 1px rgba(50,50,93,.05);
    --pv-shadow-sm: 0 0 0 1px rgba(50,50,93,.05), 0 1px 1px rgba(0,0,0,.04);
    --pv-shadow-md: 0 0 0 1px rgba(50,50,93,.05), 0 2px 5px rgba(50,50,93,.07), 0 1px 1.5px rgba(0,0,0,.05);
    --pv-shadow-lg: 0 15px 35px rgba(50,50,93,.10), 0 5px 15px rgba(0,0,0,.07);
    --pv-ring:      0 0 0 3px rgba(99,91,255,.25);

    --pv-grad-brand: linear-gradient(180deg, #7a73ff 0%, #635bff 100%);

    --pv-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pv-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-skin="stripe"][data-theme="dark"] {
    --pv-bg:          #0a2540;
    --pv-surface:     #0e2f4f;
    --pv-surface-2:   #123a60;
    --pv-text:        #f6f9fc;
    --pv-text-muted:  #a3acb9;
    --pv-border:      rgba(255,255,255,.10);
    --pv-accent:      #8b85ff;
    --pv-accent-600:  #7a73ff;
    --pv-accent-soft: rgba(139,133,255,.16);
    --pv-brand-ink:   #f6f9fc;
    --pv-sidebar-bg:     #0a2540;
    --pv-sidebar-raise:  #0e2f4f;
    --pv-sidebar-fg:     #a3acb9;
    --pv-sidebar-active: rgba(139,133,255,.16);
    --pv-shadow-md: 0 0 0 1px rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.3);
    --pv-shadow-lg: 0 15px 35px rgba(0,0,0,.45);
}

/* ---- Type: compact, medium-weight, slightly tightened ------------------- */

html[data-skin="stripe"] body,
html[data-skin="stripe"] .pv-content {
    font-family: var(--pv-font-sans);
    font-size: .875rem;                /* denser baseline than the other skins */
    letter-spacing: -.003em;           /* Stripe tightens even body copy */
    -webkit-font-smoothing: antialiased;
}

html[data-skin="stripe"] .pv-page-title,
html[data-skin="stripe"] .pv-content h1 {
    font-weight: 600;                  /* 700 reads shouty in this system */
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -.021em;
}
html[data-skin="stripe"] .pv-content h2 { font-weight: 600; letter-spacing: -.014em; }
html[data-skin="stripe"] .pv-content h3,
html[data-skin="stripe"] .pv-card-title {
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: -.008em;
}
html[data-skin="stripe"] .pv-brand { font-weight: 600; letter-spacing: -.017em; }
html[data-skin="stripe"] .pv-page-title::after { display: none; }

/* Column heads and field labels: small, muted, medium — not caps. */
html[data-skin="stripe"] .pv-label,
html[data-skin="stripe"] .pv-table thead th {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--pv-text-muted);
}

html[data-skin="stripe"] .pv-kpi-value {
    font-weight: 600;
    letter-spacing: -.022em;
    font-variant-numeric: tabular-nums lining-nums;
}
html[data-skin="stripe"] .pv-kpi-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--pv-text-muted);
}

/* ---- Surfaces: the ring is the edge, the shadow is a whisper ------------ */

html[data-skin="stripe"] .pv-card,
html[data-skin="stripe"] .pv-kpi,
html[data-skin="stripe"] .pv-chart-card {
    background: var(--pv-surface);
    border: none;                      /* the ring in the shadow is the border */
    border-radius: var(--pv-r-lg);
    box-shadow: var(--pv-shadow-md);
}
html[data-skin="stripe"] .pv-card-pad { padding: 1.25rem 1.35rem; }
html[data-skin="stripe"] .pv-content  { padding: 1.85rem 2rem; }

/* ---- Controls ----------------------------------------------------------- */

html[data-skin="stripe"] .pv-btn {
    border-radius: var(--pv-r-md);
    font-weight: 600;
    font-size: .82rem;
    padding: .45rem .8rem;
    letter-spacing: -.002em;
}
html[data-skin="stripe"] .pv-btn-primary {
    background: var(--pv-grad-brand);
    color: #fff;
    border: none;
    /* The inner top highlight is the detail that makes their buttons look
       moulded rather than filled. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 1px rgba(10,37,64,.14);
}
html[data-skin="stripe"] .pv-btn-primary:hover { filter: brightness(1.06); }

html[data-skin="stripe"] .pv-btn-subtle {
    background: #fff;
    color: var(--pv-text);
    border: none;
    box-shadow: var(--pv-shadow-sm);
}
html[data-skin="stripe"] .pv-btn-subtle:hover { background: var(--pv-surface-2); }

html[data-skin="stripe"] .pv-btn-danger {
    background: linear-gradient(180deg,#e25563,#df1b41);
    color: #fff; border: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(10,37,64,.14);
}

html[data-skin="stripe"] .pv-input,
html[data-skin="stripe"] select.pv-input,
html[data-skin="stripe"] textarea.pv-input {
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-md);
    font-size: .85rem;
    padding: .45rem .65rem;
    box-shadow: 0 1px 1px rgba(0,0,0,.02);
}
html[data-skin="stripe"] .pv-input:focus {
    border-color: var(--pv-accent);
    box-shadow: var(--pv-ring);
    outline: none;
}

/* ---- Status pills: pale field, saturated ink ---------------------------- */

html[data-skin="stripe"] .pv-badge {
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    padding: .12rem .5rem;
    letter-spacing: 0;
    border: none;
}
html[data-skin="stripe"] .pv-badge-success { background: var(--pv-success-soft); color: var(--pv-success); }
html[data-skin="stripe"] .pv-badge-warning { background: var(--pv-warning-soft); color: var(--pv-warning); }
html[data-skin="stripe"] .pv-badge-danger  { background: var(--pv-danger-soft);  color: var(--pv-danger); }
html[data-skin="stripe"] .pv-badge-info    { background: var(--pv-info-soft);    color: var(--pv-info); }

/* ---- Navigation: compact, muted, icons demoted -------------------------- */

html[data-skin="stripe"] .pv-sidebar { border-right: 1px solid var(--pv-border); }
html[data-skin="stripe"] .pv-nav-link {
    border-radius: var(--pv-r-md);
    padding: .38rem .6rem;
    margin: 1px .55rem;
    font-size: .845rem;
    font-weight: 500;
    color: var(--pv-sidebar-fg);
    box-shadow: none !important;
}
html[data-skin="stripe"] .pv-nav-link:hover { background: var(--pv-surface-2); color: var(--pv-text); }
html[data-skin="stripe"] .pv-nav-link.active {
    background: var(--pv-accent-soft) !important;
    color: var(--pv-accent) !important;
    font-weight: 600;
}
/* Coloured icon chips are the single most off-brand element here. Strip the
   chip, shrink the glyph, mute it, and let it inherit the row's colour. */
html[data-skin="stripe"] .pv-nav-link i {
    background: none !important;
    border-radius: 0;
    width: 16px; height: auto;
    font-size: .78rem;
    color: inherit !important;
    opacity: .72;
    margin-right: .5rem;
}
html[data-skin="stripe"] .pv-nav-link.active i { opacity: 1; }
html[data-skin="stripe"] .pv-nav-label,
html[data-skin="stripe"] .pv-nav-section {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #8792a2;
}

/* ---- Chrome ------------------------------------------------------------- */

html[data-skin="stripe"] .pv-topbar {
    background: #fff;
    border-bottom: 1px solid var(--pv-border);
    box-shadow: none;
    backdrop-filter: none;
}
html[data-skin="stripe"] .pv-topbar::after { display: none; }

/* ---- Tabs: a thin underline, nothing else ------------------------------- */

html[data-skin="stripe"] .pv-tabs { border-bottom: 1px solid var(--pv-border); gap: 1.25rem; }
html[data-skin="stripe"] .pv-tab {
    background: none !important;
    border-radius: 0;
    padding: .55rem 0;
    font-size: .845rem;
    font-weight: 500;
    color: var(--pv-text-muted);
}
html[data-skin="stripe"] .pv-tab i { font-size: .78rem; opacity: .7; }
html[data-skin="stripe"] .pv-tab.active {
    color: var(--pv-accent);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--pv-accent);
}

/* ---- Tables: dense, hairline, hoverable --------------------------------- */

html[data-skin="stripe"] .pv-table th,
html[data-skin="stripe"] .pv-table td {
    border: none;
    border-bottom: 1px solid var(--pv-border);
    padding: .6rem .5rem;
    font-size: .845rem;
}
html[data-skin="stripe"] .pv-table tbody tr:hover td { background: var(--pv-surface-2); }
html[data-skin="stripe"] .pv-table tbody tr:last-child td { border-bottom: none; }

/* ---- Alerts: a tinted field with a saturated left edge ------------------ */

html[data-skin="stripe"] .pv-alert {
    border-radius: var(--pv-r-md);
    border: none;
    font-size: .845rem;
    padding: .7rem .9rem;
}
html[data-skin="stripe"] .pv-alert-warning { background: var(--pv-warning-soft); color: var(--pv-warning); box-shadow: inset 3px 0 0 var(--pv-warning); }
html[data-skin="stripe"] .pv-alert-danger  { background: var(--pv-danger-soft);  color: var(--pv-danger);  box-shadow: inset 3px 0 0 var(--pv-danger); }
html[data-skin="stripe"] .pv-alert-success { background: var(--pv-success-soft); color: var(--pv-success); box-shadow: inset 3px 0 0 var(--pv-success); }

/* ---- Stat icons: small, muted, no coloured tile ------------------------- */

html[data-skin="stripe"] .pv-stat-icon {
    background: none !important;
    color: var(--pv-text-muted) !important;
    font-size: .8rem;
    opacity: .6;
}

/* ==========================================================================
   Corrections found by looking at /design-preview.php rather than guessing.
   ========================================================================== */

/* The base components uppercase KPI labels and column heads. Stripe never
   shouts — sentence case with a muted grey does the same job. */
html[data-skin="stripe"] .pv-kpi-label,
html[data-skin="stripe"] .pv-table thead th,
html[data-skin="stripe"] .pv-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* KPI tiles ship with a coloured left border per metric. Four accent stripes
   across the top of the page is the loudest thing on screen and belongs to a
   different design language; the ring and the number carry it here. */
html[data-skin="stripe"] .pv-kpi {
    border-left: none !important;
    border-top: none !important;
}
html[data-skin="stripe"] .pv-kpi::before,
html[data-skin="stripe"] .pv-kpi::after { display: none !important; }

/* Trend reads as a quiet annotation, not a second badge competing with the
   status pills in the table below. */
html[data-skin="stripe"] .pv-kpi-foot .pv-trend {
    background: none !important;
    padding: 0 !important;
    font-size: .78rem;
    font-weight: 500;
}
html[data-skin="stripe"] .pv-trend-up   { color: #0e6245 !important; }
html[data-skin="stripe"] .pv-trend-down { color: #b3093c !important; }

/* Dark mode: the light theme hardcoded #fff on fields and secondary buttons,
   which left white blocks punched through a navy page. Surfaces must come from
   the token so both themes follow. */
html[data-skin="stripe"][data-theme="dark"] .pv-input,
html[data-skin="stripe"][data-theme="dark"] select.pv-input,
html[data-skin="stripe"][data-theme="dark"] textarea.pv-input,
html[data-skin="stripe"][data-theme="dark"] .pv-btn-subtle {
    background: var(--pv-surface-2) !important;
    color: var(--pv-text) !important;
    border-color: var(--pv-border) !important;
}
html[data-skin="stripe"][data-theme="dark"] .pv-btn-subtle:hover { background: var(--pv-surface) !important; }
html[data-skin="stripe"][data-theme="dark"] .pv-input::placeholder { color: var(--pv-text-muted); }