/* =====================================================================
   CloudScale Admin Design System  (SINGLE SOURCE OF TRUTH)
   ---------------------------------------------------------------------
   Authored once here, then synced into every plugin's asset folder by
   sync-admin-css.sh and enqueued (first, before each plugin's own CSS)
   on its admin screens.

   To restyle ALL CloudScale plugin admin UIs in future: edit the tokens
   in :root below, then run  bash sync-admin-css.sh  and redeploy.
   Do NOT edit the copies inside individual plugins; they are overwritten.

   Two layers:
     1. Design tokens  (--csds-*)         -> palette, type, shape, spacing
     2. Component classes (.csds-*)     -> cards, buttons, tabs, tables...
   Existing per-plugin classes (.cs-/.csc-/.cspv-/.ab-) can progressively
   point their colours at these tokens so the whole estate stays in sync.
   ===================================================================== */

:root {
  /* ---- Brand ---- */
  --csds-navy:        #0f172a;
  --csds-navy-2:      #1e3a5f;
  --csds-accent:      #2563eb;   /* primary action */
  --csds-accent-2:    #6366f1;   /* indigo */
  --csds-brand:       #f0821e;   /* CloudScale orange */
  --csds-teal:        #0e7490;

  /* ---- Status ---- */
  --csds-success:     #16a34a;
  --csds-warn:        #d97706;
  --csds-danger:      #dc2626;

  /* ---- Surfaces (modern light docs) ---- */
  --csds-bg:          #f4f6fa;
  --csds-surface:     #ffffff;
  --csds-surface-2:   #f8fafc;
  --csds-border:      #e2e8f0;
  --csds-border-2:    #eef2f7;
  --csds-border-strong:#cbd5e1;

  /* ---- Text (high contrast on light) ---- */
  --csds-text:        #0f172a;
  --csds-text-2:      #334155;
  --csds-muted:       #64748b;
  --csds-on-dark:     #e2e8f0;
  --csds-on-dark-mute:#94a3b8;

  /* ---- Shape ---- */
  --csds-radius:      12px;
  --csds-radius-sm:   8px;
  --csds-radius-pill: 999px;
  --csds-shadow:      0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --csds-shadow-lg:   0 10px 28px rgba(15,23,42,.12);

  /* ---- Type ---- */
  --csds-font:        -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,sans-serif;
  --csds-mono:        "SF Mono","Fira Code","Cascadia Code",Consolas,monospace;

  /* ---- Spacing scale ---- */
  --csds-gap:         16px;
  --csds-gap-sm:      10px;
  --csds-gap-lg:      24px;
}

/* =====================================================================
   COMPONENTS  (namespaced .csds- to avoid clashing with existing prefixes)
   ===================================================================== */

.csds-scope { font-family: var(--csds-font); color: var(--csds-text); line-height: 1.6; }

/* ---- Page hero panel ---- */
.csds-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--csds-navy) 0%, var(--csds-navy-2) 60%, var(--csds-navy-2) 100%);
  color: #fff;
  border-radius: var(--csds-radius);
  padding: 36px 36px 32px;
  margin: 0 0 28px;
}
.csds-hero h1 { margin: 0 0 10px; font-size: 1.9em; font-weight: 800; line-height: 1.2; color: #fff; }
.csds-hero p  { margin: 0; font-size: 1.05em; line-height: 1.7; color: var(--csds-on-dark); max-width: 720px; }
.csds-hero .csds-eyebrow {
  display: inline-block; margin: 0 0 8px;
  font-size: .78em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #a5b4fc;
}

/* ---- Card ---- */
.csds-card {
  background: var(--csds-surface);
  border: 1px solid var(--csds-border);
  border-radius: var(--csds-radius);
  box-shadow: var(--csds-shadow);
  padding: 22px 24px;
  margin: 0 0 20px;
}
.csds-card--muted { background: var(--csds-surface-2); }
.csds-card h2, .csds-card h3 { margin: 0 0 12px; color: var(--csds-text); font-weight: 800; letter-spacing: -.01em; }
.csds-card h2 { font-size: 1.25em; }
.csds-card h3 { font-size: 1.05em; }
.csds-card p  { color: var(--csds-text-2); }

/* ---- Section label / heading ---- */
.csds-label {
  font-size: .75em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--csds-teal); margin: 0 0 8px;
}

/* ---- Buttons ---- */
.csds-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--csds-font); font-size: .92em; font-weight: 700; line-height: 1;
  padding: 11px 20px; border-radius: var(--csds-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .1s, background .15s, border-color .15s;
}
.csds-btn:hover  { filter: brightness(1.05); }
.csds-btn:active { transform: translateY(1px); }
.csds-btn--primary  { background: var(--csds-accent);  color: #fff; }
.csds-btn--brand    { background: var(--csds-brand);   color: #1a1206; }
.csds-btn--success  { background: var(--csds-success); color: #fff; }
.csds-btn--danger   { background: var(--csds-danger);  color: #fff; }
.csds-btn--ghost    { background: transparent; color: var(--csds-text); border-color: var(--csds-border-strong); }
.csds-btn--ghost:hover { background: var(--csds-surface-2); }

/* ---- Tabs ---- */
.csds-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--csds-surface-2);
  border: 1px solid var(--csds-border);
  border-radius: var(--csds-radius-sm);
  padding: 5px; margin: 0 0 22px;
}
.csds-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--csds-font); font-size: .9em; font-weight: 600;
  color: var(--csds-muted); padding: 9px 18px; border-radius: 7px;
  transition: background .15s, color .15s;
}
.csds-tab:hover { color: var(--csds-text); }
.csds-tab.is-active { background: var(--csds-accent); color: #fff; }

/* ---- Badges / tags ---- */
.csds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78em; font-weight: 700; padding: 3px 11px;
  border-radius: var(--csds-radius-pill);
  background: rgba(37,99,235,.1); color: var(--csds-accent);
}
.csds-badge--ok    { background: rgba(22,163,74,.12);  color: var(--csds-success); }
.csds-badge--warn  { background: rgba(217,119,6,.12);  color: var(--csds-warn); }
.csds-badge--danger{ background: rgba(220,38,38,.1);   color: var(--csds-danger); }
.csds-tag {
  font-family: var(--csds-mono); font-size: .8em;
  background: var(--csds-surface-2); border: 1px solid var(--csds-border);
  color: var(--csds-text-2); padding: 2px 8px; border-radius: 6px;
}

/* ---- Tables ---- */
.csds-table { width: 100%; border-collapse: collapse; font-size: .93em; color: var(--csds-text-2); }
.csds-table th {
  text-align: left; font-weight: 700; color: var(--csds-text);
  padding: 11px 14px; border-bottom: 2px solid var(--csds-border); background: var(--csds-surface-2);
}
.csds-table td { padding: 11px 14px; border-bottom: 1px solid var(--csds-border-2); }
.csds-table tr:last-child td { border-bottom: none; }

/* ---- Comparison rows (old way vs CloudScale) ---- */
.csds-compare { display: flex; flex-direction: column; gap: 8px; }
.csds-compare-head { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 18px 4px; }
.csds-compare-head .old { flex: 1 1 220px; font-size: .76em; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--csds-on-dark-mute); }
.csds-compare-head .new { flex: 1 1 220px; font-size: .76em; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--csds-teal); }
.csds-compare-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  background: var(--csds-surface); border: 1px solid var(--csds-border-2);
  border-radius: var(--csds-radius-sm); padding: 14px 18px;
}
.csds-compare-row .old, .csds-compare-row .new { flex: 1 1 220px; display: flex; gap: 10px; align-items: flex-start; font-size: .95em; line-height: 1.55; }
.csds-compare-row .old { color: var(--csds-text-2); }
.csds-compare-row .new { color: var(--csds-text); font-weight: 600; }
.csds-compare-row .ico-x { color: var(--csds-border-strong); font-weight: 800; flex-shrink: 0; }
.csds-compare-row .ico-v { color: var(--csds-success);       font-weight: 800; flex-shrink: 0; }

/* ---- Callout ---- */
.csds-callout {
  border-left: 4px solid var(--csds-accent);
  background: var(--csds-surface-2);
  border-radius: 0 var(--csds-radius-sm) var(--csds-radius-sm) 0;
  padding: 16px 20px; margin: 0 0 20px;
}
.csds-callout--warn   { border-left-color: var(--csds-warn); }
.csds-callout--danger { border-left-color: var(--csds-danger); }

/* ---- Grid ---- */
.csds-grid { display: grid; gap: var(--csds-gap); }
.csds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.csds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Code ---- */
.csds-code, .csds-scope code { font-family: var(--csds-mono); }
.csds-pre {
  background: var(--csds-navy); color: var(--csds-on-dark);
  border-radius: var(--csds-radius-sm); padding: 16px 18px; overflow-x: auto;
  font-family: var(--csds-mono); font-size: .85em; line-height: 1.6;
}

@media (max-width: 600px) {
  .csds-hero { padding: 26px 22px; }
  .csds-card { padding: 18px 18px; }
}