/* ============================================================================
   Webby Reach — PRD-013 design-system refinement layer.
   Loaded AFTER style.css. Restyles the existing class vocabulary (no markup or
   data-* hook changes) into a calmer, more spacious dark SaaS system inspired
   by modern products (Buffer/Notion/Linear/Stripe) — spacing, hierarchy, and
   clarity only; no copied colors, copy, layout, or assets.
   Reversible: remove the <link> to restore the prior look.
   ============================================================================ */

:root {
    /* PRD-020A — the Home (PRD-019) visual language is now the GLOBAL design
       system: one calm near-black palette with a cyan default accent. Every
       .brutal-*/.wr-* component below reads these tokens, so reconciling the
       values here reskins every page (Insights, Calendar, Reports, Account,
       Settings, admin) to match Home. Per-tenant --brand-accent still overrides
       the accent, so branded workspaces (e.g. Volkswagen Leases) are unchanged. */
    --brutal-bg: #0a0a0f;
    --brutal-panel: #14141b;
    --brutal-panel-2: #1b1b23;
    --brutal-line: #26262f;
    --brutal-muted: #8b8b97;
    --brutal-text: #e8e8ee;
    --brutal-lime: var(--brand-accent, #22d3ee);
    --brutal-orange: #fbbf24;
    --brutal-red: #f87171;

    /* Semantic tokens (shared with app-nav.css / home.css). */
    --wr-bg: #0a0a0f;
    --wr-surface: #14141b;
    --wr-surface-2: #1b1b23;
    --wr-surface-hover: #22222c;
    --wr-line: #26262f;
    --wr-line-soft: #20202a;
    --wr-text: #e8e8ee;
    --wr-text-2: #b6b6c2;
    --wr-muted: #8b8b97;
    --wr-accent: var(--brand-accent, #22d3ee);
    --wr-up: #34d399;
    --wr-down: #f87171;
    --wr-warn: #fbbf24;

    /* Spacing + shape scale. */
    --wr-radius: 14px;
    --wr-radius-sm: 10px;
    --wr-radius-pill: 999px;
    --wr-pad: 24px;
    --wr-gap: 20px;
    --wr-maxw: 1240px;
    --wr-shadow: 0 1px 2px rgba(0,0,0,.30);
    --wr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------- base -------------------------------------- */
body {
    background: var(--wr-bg);
    color: var(--wr-text);
    font-family: var(--wr-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--wr-accent) 40%, transparent); }

/* Calmer scrollbars in the dark shell. */
* { scrollbar-color: #333844 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c313b; border-radius: 999px; border: 2px solid var(--wr-bg); }

/* ------------------------------ app shell ---------------------------------- */
.app-shell {
    background: var(--wr-bg);
}

/* Content columns — comfortable width + breathing room. */
.brutal-dashboard,
.dashboard {
    max-width: var(--wr-maxw);
    padding: 28px 32px 72px;
    background: var(--wr-bg);
}
@media (max-width: 720px) {
    .brutal-dashboard, .dashboard { padding: 20px 16px 56px; }
}

/* --------------------------- sidebar / nav --------------------------------- */
.brutal-sidebar,
.sidebar {
    background: #101216;
    border-right: 1px solid var(--wr-line-soft);
    padding: 20px 14px;
    gap: 6px;
}
.brutal-brand { padding-bottom: 8px; }
.brutal-brand h1 { letter-spacing: -0.01em; }
.brutal-brand p { color: var(--wr-muted); letter-spacing: .12em; }

.brutal-nav { gap: 2px; margin-top: 6px; }
.brutal-nav-link {
    border-radius: var(--wr-radius-sm);
    padding: 10px 12px;
    color: var(--wr-text-2);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border: 0;
    transition: background .12s ease, color .12s ease;
}
.brutal-nav-link:hover { background: var(--wr-surface); color: var(--wr-text); }
.brutal-nav-link.is-active {
    background: var(--wr-surface-2);
    color: var(--wr-text);
    box-shadow: inset 3px 0 0 var(--wr-accent);
}
.brutal-nav-link span[aria-hidden] { opacity: .6; }

.brutal-period, .brutal-sync {
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-sm);
    background: var(--wr-surface);
    padding: 12px;
    margin-top: 8px;
}
.brutal-period span, .brutal-sync span { color: var(--wr-muted); letter-spacing: .1em; }

.brutal-account { border-top: 1px solid var(--wr-line-soft); padding-top: 14px; margin-top: 12px; }
.brutal-account-email { color: var(--wr-muted); }
.brutal-logout-button {
    border-radius: var(--wr-radius-sm);
    border-color: var(--wr-line);
    color: var(--wr-text-2);
}
.brutal-logout-button:hover, .brutal-logout-button:focus-visible {
    background: var(--wr-surface-2); color: var(--wr-text);
    border-color: var(--wr-line); outline-offset: 2px;
}

/* ------------------------------- topbars ----------------------------------- */
.brutal-topbar, .topbar {
    min-height: 44px;
    margin-bottom: 24px;
    gap: 16px;
}
.brutal-topbar h2, .topbar h2 {
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--wr-text);
}
.brutal-kicker, .topbar .eyebrow, .eyebrow, .brutal-topbar .brutal-kicker {
    color: var(--wr-muted);
    letter-spacing: .08em;
    font-size: 11px;
}
.topbar-subtitle { color: var(--wr-muted); }

/* Meta / toolbar controls become quiet pills. */
.brutal-meta { color: var(--wr-muted); font-family: var(--wr-font); font-size: 12px; gap: 10px; }
.brutal-meta span, .brutal-meta span strong { color: var(--wr-text-2); }
.brutal-meta [data-data-source] {
    background: var(--wr-surface-2);
    color: var(--wr-text);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-pill);
    padding: 5px 12px;
    font-weight: 700;
}
.brutal-meta button, .brutal-meta a,
.date-range-control select, .custom-date-fields input {
    min-height: 34px;
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-sm);
    background: var(--wr-surface);
    color: var(--wr-text-2);
    font-family: var(--wr-font);
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
}
.brutal-meta button:hover, .brutal-meta a:hover {
    border-color: var(--wr-line); background: var(--wr-surface-hover); color: var(--wr-text);
}
.date-range-control select:focus, .custom-date-fields input:focus {
    outline: 2px solid var(--wr-accent); outline-offset: 1px;
}

/* ------------------------------ KPI tiles ---------------------------------- */
.brutal-kpi-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--wr-gap);
    margin-bottom: var(--wr-gap);
}
@media (max-width: 900px) { .brutal-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .brutal-kpi-grid { grid-template-columns: 1fr; } }

.brutal-card {
    min-height: 104px;
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius);
    padding: 20px;
    background: var(--wr-surface);
    box-shadow: var(--wr-shadow);
    transition: border-color .12s ease;
}
.brutal-card:hover { border-color: #313743; }
.brutal-card span {
    color: var(--wr-muted);
    font-family: var(--wr-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}
.brutal-card strong {
    margin-top: 12px;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: -0.02em;
    color: var(--wr-text);
}

/* ------------------------- panels / cards ---------------------------------- */
.panel, .brutal-panel, .brutal-panel-2, .integration-card, .metric-card,
.integration-client-panel, .admin-panel {
    background: var(--wr-surface);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius);
    box-shadow: var(--wr-shadow);
    color: var(--wr-text);
}
.panel, .admin-panel, .integration-card, .metric-card { padding: var(--wr-pad); }
.panel + .panel, .admin-panel + .admin-panel { margin-top: var(--wr-gap); }

.panel h3, .brutal-panel h3, .admin-panel h3 {
    color: var(--wr-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.admin-copy, .panel p, .integration-card p { color: var(--wr-text-2); }

/* Grids get more air. */
.integration-settings-grid { gap: var(--wr-gap); }

/* Section headers used across pages. */
.brutal-section, .brutal-section-head { margin-top: 8px; }
.brutal-section-title, .panel .eyebrow, .section-eyebrow {
    color: var(--wr-muted); letter-spacing: .06em;
}

/* ------------------------------ tables ------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    color: var(--wr-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--wr-line);
}
.data-table td {
    padding: 14px 10px;
    border-top: 1px solid var(--wr-line-soft);
    color: var(--wr-text-2);
    vertical-align: middle;
}
.data-table tr:hover td { background: var(--wr-surface-2); }

/* ------------------------------ buttons ------------------------------------ */
.primary-button, .onboarding-btn-primary {
    background: var(--wr-accent);
    color: #101216;
    border: 0;
    border-radius: var(--wr-radius-sm);
    padding: 11px 18px;
    font-weight: 700;
}
.primary-button:hover { filter: brightness(1.05); }
.ghost-button {
    background: var(--wr-surface);
    color: var(--wr-text-2);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-sm);
    padding: 9px 14px;
    font-weight: 600;
}
.ghost-button:hover { background: var(--wr-surface-hover); color: var(--wr-text); border-color: #313743; }
button:focus-visible, a:focus-visible, .ghost-button:focus-visible, .primary-button:focus-visible {
    outline: 2px solid var(--wr-accent); outline-offset: 2px;
}

/* ------------------------------ status pills ------------------------------- */
.status-pill {
    background: var(--wr-surface-2);
    color: var(--wr-text-2);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-pill);
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 650;
}
.pill-warning { color: var(--wr-warn); border-color: color-mix(in srgb, var(--wr-warn) 45%, var(--wr-line)); }
.pill-muted { color: var(--wr-muted); }

/* ------------------------------ alerts ------------------------------------- */
.alert {
    border-radius: var(--wr-radius-sm);
    padding: 14px 16px;
    border: 1px solid var(--wr-line);
    background: var(--wr-surface-2);
    color: var(--wr-text);
}
.alert.success { background: color-mix(in srgb, var(--wr-up) 12%, var(--wr-surface)); border-color: color-mix(in srgb, var(--wr-up) 40%, var(--wr-line)); color: #cde7d3; }
.alert.error { background: color-mix(in srgb, var(--wr-down) 12%, var(--wr-surface)); border-color: color-mix(in srgb, var(--wr-down) 40%, var(--wr-line)); color: #ffd0d5; }
.alert.info { background: color-mix(in srgb, var(--wr-accent, #2563eb) 12%, var(--wr-surface)); border-color: color-mix(in srgb, var(--wr-accent, #2563eb) 40%, var(--wr-line)); color: var(--wr-text); }

/* ------------------------------ forms -------------------------------------- */
.integration-form input, .integration-form select, .admin-form input, .admin-form select,
input[type="text"], input[type="email"], input[type="url"], input[type="password"], select, textarea {
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius-sm);
    color: var(--wr-text);
    padding: 11px 12px;
    font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--wr-accent); outline-offset: 1px; border-color: transparent; }
label { color: var(--wr-text-2); }

/* --------------------- misc dark-mode legibility --------------------------- */
.admin-account, .admin-account-list > * { border-color: var(--wr-line-soft) !important; }
.admin-account strong { color: var(--wr-text); }
.admin-account span { color: var(--wr-muted); }
.client-meta span { color: var(--wr-muted); }

/* Print / reduced motion respect. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------- JS-injected dashboard content (dashboard.js) -------------- */
/* Recolored automatically via the --brutal-* token overrides above; these add
   the spacious/soft treatment to the injected cards, rows, and thumbnails. */
.brutal-table-row, .brutal-list-row {
    border-radius: var(--wr-radius-sm);
    padding: 14px 14px;
    border-color: var(--wr-line-soft);
}
.brutal-table-row:hover, .brutal-list-row:hover { background: var(--wr-surface-2); }
.brutal-table-head { color: var(--wr-muted); padding: 8px 14px; }

.social-profile-panel, .instagram-profile-panel {
    border-radius: var(--wr-radius);
    padding: 20px;
    border-color: var(--wr-line);
    background: var(--wr-surface);
}

.instagram-post-grid, .social-post-grid {
    gap: 16px;
}
.instagram-post-card, .social-post-card {
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--wr-line-soft);
    border-radius: var(--wr-radius-sm);
    background: var(--wr-surface-2);
}
.instagram-post-card:hover, .social-post-card:hover { border-color: #313743; }
.instagram-post-thumb, .social-post-thumb { border-radius: var(--wr-radius-sm); overflow: hidden; }
.instagram-post-thumb img, .social-post-thumb img { border-radius: var(--wr-radius-sm); }
.social-post-body, .instagram-post-body { gap: 6px; }
.social-permission-note, .instagram-permission-note {
    color: var(--wr-warn);
    background: color-mix(in srgb, var(--wr-warn) 10%, var(--wr-surface));
    border: 1px solid color-mix(in srgb, var(--wr-warn) 35%, var(--wr-line));
    border-radius: var(--wr-radius-sm);
    padding: 10px 12px;
}
.brutal-loading { color: var(--wr-muted); }

/* Charts container breathing room. */
canvas { max-width: 100%; }

/* ------------------------------ auth pages --------------------------------- */
.auth-page { background: var(--wr-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: 32px;
    max-width: 420px;
    width: 100%;
    color: var(--wr-text);
}
.auth-card h1 { color: var(--wr-text); font-size: 22px; letter-spacing: -0.01em; }
.auth-card .eyebrow { color: var(--wr-muted); }
.auth-mark { background: var(--wr-accent); color: #0e0f13; border-radius: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; color: var(--wr-text-2); font-weight: 600; font-size: 14px; }
.auth-note { color: var(--wr-muted); }
.auth-note a { color: var(--wr-text-2); }
.auth-note a:hover { color: var(--wr-text); }

/* Button-styled anchors should not show the text-link underline. */
a.primary-button, a.ghost-button, a.onboarding-btn, a.brutal-nav-link { text-decoration: none; }

/* ==========================================================================
   PRD-013 PHASE 2 — page-level UX foundation.
   Retires leftover "brutal" mono headings + lime body copy, and adds shared
   components (insight card, empty state, segmented sub-nav, KPI delta).
   ========================================================================== */

/* --- retire monospace on numbers, titles, labels (calm sans everywhere) --- */
.brutal-card strong,
.brutal-panel-label,
.brutal-section-head p:last-child,
.brutal-dot,
.hub-button, .hub-form-actions button {
    font-family: var(--wr-font) !important;
}
.brutal-card strong { letter-spacing: -0.02em; }

/* Descriptive copy inside cards → muted sans (was lime). */
.brutal-card em {
    color: var(--wr-text-2);
    font-style: normal;
    font-size: 13px;
    line-height: 1.5;
    display: block;
    margin-top: 8px;
}

/* Quiet section eyebrows + panel labels (were lime/mono uppercase). */
.brutal-dot { color: var(--wr-muted); font-weight: 650; letter-spacing: .06em; font-size: 11px; }
.brutal-dot.lime::before,
.brutal-dot::before { color: var(--wr-accent); }
.brutal-panel-label {
    color: var(--wr-muted);
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 600;
    text-transform: none;
}
.brutal-section-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brutal-section-head p:last-child { color: var(--wr-muted); font-size: 12px; }
.brutal-section { margin-bottom: 28px; }

/* --- shared component: insight / "takeaway" card ------------------------- */
.wr-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wr-gap); margin-bottom: var(--wr-gap); }
.wr-insight-card {
    background: var(--wr-surface-2);
    border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wr-insight-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--wr-accent) 20%, var(--wr-surface));
    color: var(--wr-text); font-size: 16px;
}
.wr-insight-card h4 { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--wr-text); }
.wr-insight-card p { margin: 0; color: var(--wr-text-2); font-size: 13px; line-height: 1.55; }
.wr-insight-card .wr-insight-action { margin-top: 6px; }

/* --- shared component: friendly empty state ------------------------------ */
.wr-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px;
    padding: 40px 24px;
    color: var(--wr-muted);
    min-height: 180px;
}
.wr-empty-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wr-surface-2); border: 1px solid var(--wr-line);
    font-size: 20px; color: var(--wr-text-2);
}
.wr-empty strong { color: var(--wr-text); font-weight: 650; font-size: 14px; }
.wr-empty span { font-size: 13px; max-width: 320px; }
.wr-empty .wr-empty-action { margin-top: 6px; }

/* --- shared component: segmented sub-nav / sticky tabs -------------------- */
.wr-subnav {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 4px; flex-wrap: wrap;
    background: color-mix(in srgb, var(--wr-bg) 90%, transparent);
    backdrop-filter: blur(6px);
    padding: 8px 0; margin-bottom: 20px;
    border-bottom: 1px solid var(--wr-line-soft);
}
.wr-subnav a, .wr-subnav button {
    border: 1px solid transparent; background: transparent; color: var(--wr-text-2);
    border-radius: var(--wr-radius-pill); padding: 7px 14px; font: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; text-decoration: none;
}
.wr-subnav a:hover, .wr-subnav button:hover { background: var(--wr-surface); color: var(--wr-text); }
.wr-subnav a.is-active, .wr-subnav button.is-active { background: var(--wr-surface-2); color: var(--wr-text); border-color: var(--wr-line); }

/* --- shared component: KPI tile with delta -------------------------------- */
.wr-kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; margin-top: 8px; }
.wr-kpi-delta.is-up { color: var(--wr-up); }
.wr-kpi-delta.is-down { color: var(--wr-down); }
.wr-kpi-delta.is-flat { color: var(--wr-muted); }

/* --- generic section header helper --------------------------------------- */
.wr-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--wr-text); margin: 0 0 4px; }
.wr-section-sub { color: var(--wr-muted); font-size: 13px; margin: 0 0 16px; }

/* Definition-list meta (account profile, integration cards, wizard summary). */
.integration-meta { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.integration-meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--wr-line-soft); }
.integration-meta > div:last-child { border-bottom: 0; }
.integration-meta dt { color: var(--wr-muted); font-size: 13px; }
.integration-meta dd { margin: 0; color: var(--wr-text); font-size: 13px; font-weight: 600; text-align: right; word-break: break-word; }

/* Dashboard platform tabs → sticky horizontal segmented sub-nav (hooks kept). */
.brutal-subnav {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
    background: color-mix(in srgb, var(--wr-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    padding: 10px 0; margin: 0 0 24px;
    border-bottom: 1px solid var(--wr-line-soft);
}
.brutal-subnav .brutal-nav-link {
    width: auto; border-radius: var(--wr-radius-pill); padding: 8px 16px;
    border: 1px solid transparent; box-shadow: none; color: var(--wr-text-2);
}
.brutal-subnav .brutal-nav-link:hover { background: var(--wr-surface); color: var(--wr-text); }
.brutal-subnav .brutal-nav-link.is-active { background: var(--wr-surface-2); color: var(--wr-text); border-color: var(--wr-line); box-shadow: none; }
.brutal-subnav .brutal-nav-link span[aria-hidden] { display: none; }

/* ============================ Marketing Hub ================================ */
/* Queue → Buffer-style day-grouped job cards. */
.hub-queue-daylabel {
    color: var(--wr-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; margin: 20px 0 8px;
}
.hub-queue-daylabel:first-of-type { margin-top: 0; }
.hub-job-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--wr-surface); border: 1px solid var(--wr-line);
    border-radius: var(--wr-radius); padding: 14px 16px; margin-bottom: 10px;
}
.hub-job-card:hover { border-color: #313743; }
.hub-job-time { flex: 0 0 96px; display: flex; flex-direction: column; gap: 2px; }
.hub-job-time strong { color: var(--wr-text); font-size: 14px; font-weight: 650; }
.hub-job-platform { color: var(--wr-muted); font-size: 11px; text-transform: capitalize; }
.hub-job-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hub-job-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-job-title { color: var(--wr-text); font-weight: 600; font-size: 14px; text-decoration: none; }
a.hub-job-title:hover { text-decoration: underline; }
.hub-job-meta { color: var(--wr-muted); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.hub-job-error { color: var(--wr-warn); }
.hub-job-action { flex: 0 0 auto; }

/* Status pills coloring (reuse status-pill base). */
.status-pill.hub-status-succeeded { color: var(--wr-up); border-color: color-mix(in srgb, var(--wr-up) 45%, var(--wr-line)); }
.status-pill.hub-status-failed { color: var(--wr-down); border-color: color-mix(in srgb, var(--wr-down) 45%, var(--wr-line)); }
.status-pill.hub-status-queued { color: var(--wr-warn); border-color: color-mix(in srgb, var(--wr-warn) 45%, var(--wr-line)); }
.status-pill.hub-status-running { color: var(--wr-text); }

/* Provider launch readiness pills (production hardening). */
.status-pill.readiness-pill.is-ready { color: var(--wr-up); border-color: color-mix(in srgb, var(--wr-up) 45%, var(--wr-line)); }
.status-pill.readiness-pill.is-soon { color: #b9a8e6; border-color: color-mix(in srgb, #b9a8e6 45%, var(--wr-line)); }
.status-pill.readiness-pill.is-config { color: var(--wr-warn); border-color: color-mix(in srgb, var(--wr-warn) 45%, var(--wr-line)); }
.integration-readiness-note { margin: 4px 0 10px; }

.hub-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-pagination span { color: var(--wr-muted); font-size: 13px; }

/* Queue bucket tabs → pill row. */
.hub-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 20px; }
.hub-tab {
    border: 1px solid transparent; background: transparent; color: var(--wr-text-2);
    border-radius: var(--wr-radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.hub-tab:hover { background: var(--wr-surface); color: var(--wr-text); }
.hub-tab.is-active { background: var(--wr-surface-2); color: var(--wr-text); border-color: var(--wr-line); }

/* Calendar month grid polish (hub-calendar.js renders these). */
.hub-cal-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.hub-cal-filters input, .hub-cal-filters select { min-width: 150px; }
.hub-cal-count { color: var(--wr-muted); font-size: 13px; }
.hub-cal-panelwrap { padding: 12px; }
.hub-calendar { width: 100%; }
.hub-calendar-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.hub-calendar-head > * { color: var(--wr-muted); font-size: 12px; font-weight: 600; text-align: left; padding: 0 6px; }
.hub-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.hub-calendar-cell, .week-cell {
    min-height: 108px; min-width: 0; background: var(--wr-surface-2); border: 1px solid var(--wr-line-soft);
    border-radius: var(--wr-radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.hub-calendar-cell:hover { border-color: var(--wr-line); }
.hub-calendar-day { color: var(--wr-muted); font-size: 12px; font-weight: 600; }
.hub-cal-item {
    background: var(--wr-surface-hover); border: 1px solid var(--wr-line);
    border-radius: 8px; padding: 5px 8px; font-size: 12px; color: var(--wr-text);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-cal-item:hover { border-color: var(--wr-accent); }
.hub-cal-more { color: var(--wr-muted); font-size: 11px; }
@media (max-width: 720px) {
    .hub-calendar-head, .hub-cal-month { grid-template-columns: repeat(7, minmax(44px, 1fr)); font-size: 11px; }
    .hub-calendar-cell, .week-cell { min-height: 72px; }
}

/* ============================ PRD-021 Integration Health banner ============= */
.ih-banner {
    display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
    border: 1px solid color-mix(in srgb, var(--wr-warn) 55%, var(--wr-line));
    background: color-mix(in srgb, var(--wr-warn) 12%, var(--wr-surface));
    border-radius: var(--wr-radius); padding: 16px 18px; margin: 0 0 20px;
}
.ih-banner-wr { margin-bottom: 22px; }
.ih-banner-body { flex: 1 1 300px; min-width: 0; }
.ih-banner-title { font-size: 15px; font-weight: 700; color: var(--wr-text); display: flex; align-items: center; gap: 8px; }
.ih-banner-title::before { content: "⚠"; color: var(--wr-warn); font-size: 16px; }
.ih-banner-text { color: var(--wr-text-2); font-size: 13px; line-height: 1.55; margin-top: 4px; }
.ih-banner-sub { color: var(--wr-muted); font-size: 12px; font-weight: 600; margin-top: 8px; }
.ih-banner-list { margin: 4px 0 0; padding-left: 18px; color: var(--wr-text); font-size: 13px; line-height: 1.6; }
.ih-banner-list li { font-weight: 600; }
.ih-banner-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ih-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--wr-radius-sm); border: 1px solid var(--wr-line); text-decoration: none; white-space: nowrap; }
.ih-btn-primary { background: var(--wr-warn); border-color: var(--wr-warn); color: #1a1300; }
.ih-btn-primary:hover { filter: brightness(1.06); }
.ih-btn-ghost { background: transparent; color: var(--wr-text); }
.ih-btn-ghost:hover { background: var(--wr-surface-2); }
@media (max-width: 560px) { .ih-banner-actions { width: 100%; } .ih-btn { flex: 1; } }