/* ============================================================================
   DASE control-plane BRAND FILE — shared design system (tokens + components).
   Mirrors dase_buff/public/css/buff_app.css (same --buff-* values, same buff-*
   component classes) so the whole platform shares one visual language.
   KEEP IN SYNC with the tenant brand file + project-knowledge/UI_STYLE_GUIDE.md.
   ============================================================================ */

:root {
    /* Peacock teal ramp */
    --buff-primary: #0FA6B8;
    --buff-primary-dark: #0A7684;
    --buff-primary-shade: #06525C;
    --buff-primary-tint-solid: #E6F8FA;
    --buff-primary-hover-bg: rgba(15, 166, 184, 0.06);
    --buff-primary-active-bg: rgba(15, 166, 184, 0.09);
    --buff-primary-focus-ring: rgba(15, 166, 184, 0.3);
    --buff-primary-tint: var(--buff-primary-hover-bg);
    --buff-primary-tint-strong: var(--buff-primary-active-bg);
    --buff-primary-bg: rgba(15, 166, 184, 0.04);

    /* Sheen gradients */
    --buff-sheen-1: #0FA6B8;
    --buff-sheen-2: #3FC2D2;
    --buff-sheen-3: #7ADCE8;
    --buff-sheen: linear-gradient(180deg, var(--buff-sheen-1), var(--buff-sheen-2) 55%, var(--buff-sheen-3));
    --buff-sheen-h: linear-gradient(90deg, #4CC9D8, #8FE3EE);
    --buff-sheen-soft: linear-gradient(90deg, #C9F2F7, #E2F8FA);
    --buff-sheen-hero: linear-gradient(135deg, #DFF7FA, #F2FDFE);
    --buff-sheen-tint: linear-gradient(90deg, #E8FAFC, #F6FEFE);

    /* Canvas + surfaces (neutral re-base 2026-09-02 — Linear/shadcn-style
       neutral base; teal reserved for accent/primary. Keep in sync with
       dase_buff buff_app.css.) */
    --buff-bg: #F6F7F9;
    --buff-surface: #FFFFFF;
    --buff-surface-tint: #F1F3F6;
    --buff-surface-deeper: #E8EBF0;
    --buff-surface-subtle: #FAFBFC;
    --buff-hairline: #EBEEF2;
    --buff-border: #E3E6EB;
    --buff-border-subtle: #F0F2F5;
    --buff-border-strong: rgba(15, 23, 42, 0.10);

    /* Text (neutral re-base 2026-09-02) */
    --buff-text: #1B2433;
    --buff-text-strong: #0F172A;
    --buff-text-muted: #5D6673;
    --buff-text-muted-2: #5D6673;
    --buff-text-muted-3: #8B93A1;
    --buff-text-placeholder: #A9B0BC;

    /* Semantic ramps */
    --buff-success-fill: #EAF3DE;
    --buff-success-text: #3B6D11;
    --buff-success-dot: #97C459;
    --buff-warning-fill: #FAEEDA;
    --buff-warning-fill-soft: #FEF8ED;
    --buff-warning-text: #854F0B;
    --buff-warning-dot: #C6892C;
    /* UK number-plate treatment for vehicle registrations */
    --buff-plate-bg: #F5D935;
    --buff-plate-fg: #111111;
    --buff-plate-border: #C9AE1F;
    --buff-danger-fill: #FCEBEB;
    --buff-danger-text: #A32D2D;
    --buff-danger-dot: #A32D2D;
    --buff-neutral-fill: #F1F3F6;         /* (neutral re-base 2026-09-02) */
    --buff-neutral-text: #5D6673;
    --buff-neutral-dot: #98A1AE;
    --buff-max-fill: #EEEDFE;
    --buff-max-text: #3C3489;

    /* Shadows (neutral re-base 2026-09-02) */
    --buff-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.07);
    --buff-shadow-hero: 0 2px 8px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.10);
    --buff-shadow-btn:  0 1px 2px rgba(15, 23, 42, 0.10);
    --buff-shadow-side: 0 2px 10px rgba(15, 23, 42, 0.08);

    /* Spacing + radius (radius tightened 2026-09-02 toward shadcn scale) */
    --buff-page-x: 24px;
    --buff-page-b: 28px;
    --buff-panel-p: 22px;
    --buff-panel-gap: 12px;
    --buff-field-gap: 16px;
    --buff-r-pip: 999px;
    --buff-r-btn: 9px;
    --buff-r-card: 12px;
    --buff-r-panel: 14px;
    --buff-r-tile: 10px;
    --buff-r-round: 999px;

    /* Legacy aliases for token renames (2026-08-24) — kept in sync with
       dase_buff's buff_app.css so both apps resolve old token names. */
    --buff-ink: var(--buff-text);
    --buff-ink-muted: var(--buff-text-muted);
    --buff-muted: var(--buff-text-muted);
    --buff-mid: var(--buff-text-muted-2);
    --buff-canvas: var(--buff-bg);
    --buff-petrol: var(--buff-primary-shade);
    --buff-primary-pale: var(--buff-primary-tint-solid);
    --buff-sheen-gradient-90: var(--buff-sheen-h);
    --buff-surface-1: var(--buff-surface);
    --buff-surface-2: var(--buff-surface-tint);
    --buff-surface-alt: var(--buff-surface-tint);
    --buff-teal: var(--buff-primary);
    --buff-tint: var(--buff-primary-tint-solid);
}

/* ==========================================================================
   SHARED COMPONENT KIT — same class names as the tenant app.
   ========================================================================== */

/* Buttons */
.dase-btn, .buff-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 8px 14px; border-radius: var(--buff-r-btn);
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    border: 0.5px solid var(--buff-border-strong);
    background: white; color: var(--buff-text); transition: all 0.12s;
    text-decoration: none;
}
.dase-btn:hover, .buff-btn:hover { border-color: rgba(0, 0, 0, 0.22); }
.dase-btn:active, .buff-btn:active { transform: scale(0.97); }
.dase-btn:disabled, .buff-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.dase-btn:focus-visible, .buff-btn:focus-visible { outline: 2px solid var(--buff-primary-focus-ring); outline-offset: 1px; }
.dase-btn.pri, .buff-btn.pri {
    background: var(--buff-sheen-h); color: var(--buff-primary-dark);
    border-color: transparent; box-shadow: var(--buff-shadow-btn);
}
.dase-btn.pri:hover, .buff-btn.pri:hover {
    border-color: transparent; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}
.dase-btn.danger, .buff-btn.danger { background: var(--buff-danger-text); color: var(--buff-surface); border-color: transparent; }
.dase-btn.danger:hover, .buff-btn.danger:hover { filter: brightness(0.94); }
.dase-btn.lg, .buff-btn.lg { padding: 11px 24px; font-size: 13.5px; }
.dase-btn i, .buff-btn i { font-size: 14px; }

/* Status pips */
.buff-pip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; font-size: 11px; font-weight: 500;
    border-radius: var(--buff-r-round); letter-spacing: 0.02em; line-height: 1.3;
}
.buff-pip.success { background: var(--buff-success-fill); color: var(--buff-success-text); }
.buff-pip.warning { background: var(--buff-warning-fill); color: var(--buff-warning-text); }
.buff-pip.danger  { background: var(--buff-danger-fill);  color: var(--buff-danger-text); }
.buff-pip.neutral { background: var(--buff-neutral-fill); color: var(--buff-neutral-text); }
.buff-pip.teal    { background: var(--buff-primary-tint-solid); color: var(--buff-primary-dark); }
.buff-pip.max     { background: var(--buff-max-fill); color: var(--buff-max-text); }

/* Panels */
.buff-panel {
    background: var(--buff-surface-subtle);
    border: 0.5px solid var(--buff-border);
    border-radius: var(--buff-r-panel); padding: var(--buff-panel-p);
    margin-bottom: var(--buff-panel-gap);
}
.buff-panel-h {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500; color: var(--buff-primary-dark);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
}

/* Fields */
.buff-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--buff-field-gap); }
.buff-flabel { font-size: 12px; font-weight: 400; color: var(--buff-text-muted-2); }
.buff-fval { font-size: 14.5px; font-weight: 400; color: var(--buff-text); }

/* Card */
.buff-card {
    background: var(--buff-surface); border: 0.5px solid var(--buff-border);
    border-radius: var(--buff-r-card); padding: var(--buff-panel-p);
    box-shadow: var(--buff-shadow-card);
}
.buff-card + .buff-card { margin-top: var(--buff-panel-gap); }
.buff-card-title { font-size: 13px; font-weight: 600; color: var(--buff-text-strong); margin: 0 0 4px; }
.buff-card-sub { font-size: 12.5px; color: var(--buff-text-muted); margin: 0 0 12px; }

/* Page head + title */
.buff-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.buff-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--buff-text-strong); line-height: 1.2; margin: 0; }
.buff-title-sub { font-size: 13.5px; color: var(--buff-text-muted); margin-top: 4px; }

/* Table */
.buff-table-wrap { overflow-x: auto; background: var(--buff-surface); border: 0.5px solid var(--buff-border); border-radius: var(--buff-r-card); }
.buff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.buff-table th {
    text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--buff-text-muted); padding: 12px 14px;
    border-bottom: 1px solid var(--buff-hairline); background: var(--buff-surface-tint);
}
.buff-table td { padding: 11px 14px; color: var(--buff-text); border-bottom: 1px solid var(--buff-hairline); vertical-align: middle; }
.buff-table tr:last-child td { border-bottom: none; }
.buff-table tbody tr:hover { background: var(--buff-surface-subtle); }

/* KPI */
.buff-kpi { background: var(--buff-surface); border: 0.5px solid var(--buff-border); border-radius: var(--buff-r-card); padding: 14px 16px; box-shadow: var(--buff-shadow-card); }
.buff-kpi-lbl { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--buff-text-muted); }
.buff-kpi-val { font-size: 24px; font-weight: 500; color: var(--buff-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-top: 5px; }
.buff-kpi-sub { font-size: 10.5px; color: var(--buff-text-muted-3); margin-top: 4px; }

/* Empty state */
.buff-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; gap: 6px; }
.buff-empty-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--buff-primary-tint-solid); color: var(--buff-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }
.buff-empty-h { font-size: 17px; font-weight: 700; color: var(--buff-text); margin: 0; }
.buff-empty-p { font-size: 14px; color: var(--buff-text-muted); margin: 0; max-width: 360px; }
.buff-empty-cta { margin-top: 14px; }