/* ============================================================
   SafeUEM shared design system — v1 (July 2026)
   Used by: marketing site (safeuem.ai), partner portal
   (portal.safeuem.ai), ticketing (support.safeuem.ai).
   Import this file FIRST, then add app-specific styles.
   Do not override token values locally — change them here.
   ============================================================ */

:root {
  /* Brand color — from the SafeUEM brand voice guide (#214497) */
  --su-blue: #214497;
  --su-blue-dark: #16306e;
  --su-blue-deep: #0e2050;

  /* Neutrals */
  --su-ink: #14213d;        /* headings */
  --su-body: #3d4a63;       /* body text */
  --su-muted: #6b7891;      /* secondary text */
  --su-line: #e3e9f2;       /* borders */
  --su-bg: #ffffff;
  --su-bg-soft: #f5f8fc;    /* section / page background */

  /* Accent — use sparingly (highlights, progress, success-ish) */
  --su-accent: #35b6c9;

  /* Status (apps: tickets, portal states) */
  --su-success: #1e9e6a;
  --su-warning: #c07b00;
  --su-danger: #c0392b;
  --su-info: var(--su-blue);

  /* Surfaces (theme-aware) */
  --su-surface: #ffffff;
  --su-header-bg: #ffffff;

  /* Shape & elevation */
  --su-radius: 16px;
  --su-radius-sm: 10px;
  --su-shadow: 0 10px 30px rgba(20, 33, 61, 0.08);
  --su-shadow-sm: 0 4px 14px rgba(20, 33, 61, 0.06);

  /* Type */
  --su-font-head: 'Poppins', 'Inter', -apple-system, sans-serif;
  --su-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Base */
.su-app {
  font-family: var(--su-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--su-body);
  background: var(--su-bg-soft);
  -webkit-font-smoothing: antialiased;
}
.su-app h1, .su-app h2, .su-app h3, .su-app h4 {
  font-family: var(--su-font-head);
  color: var(--su-ink);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Buttons — same geometry as the marketing site */
.su-btn {
  display: inline-block; font-weight: 600; font-size: 0.95rem;
  padding: 11px 20px; border-radius: var(--su-radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  font-family: var(--su-font-body); text-decoration: none;
  transition: all .18s ease;
}
.su-btn-primary { background: var(--su-blue); color: #fff; }
.su-btn-primary:hover { background: var(--su-blue-dark); }
.su-btn-ghost { border-color: var(--su-line); color: var(--su-ink); background: var(--su-surface); }
.su-btn-ghost:hover { border-color: var(--su-blue); color: var(--su-blue); }
.su-btn-danger { background: var(--su-danger); color: #fff; }

/* Cards */
.su-card {
  background: var(--su-surface); border: 1px solid var(--su-line);
  border-radius: var(--su-radius); padding: 24px;
  box-shadow: var(--su-shadow-sm);
}

/* Form fields */
.su-field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--su-ink); margin-bottom: 6px; }
.su-field input, .su-field select, .su-field textarea {
  font: inherit; font-size: 0.95rem; padding: 11px 14px; width: 100%;
  border: 1.5px solid var(--su-line); border-radius: var(--su-radius-sm);
  background: var(--su-surface); color: var(--su-ink);
}
.su-field input:focus, .su-field select:focus, .su-field textarea:focus {
  outline: none; border-color: var(--su-blue);
}

/* Status pills (tickets, portal deal states) */
.su-pill {
  display: inline-block; font-size: 0.78rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
}
.su-pill-open    { background: rgba(33, 68, 151, 0.10);  color: var(--su-blue); }
.su-pill-success { background: rgba(30, 158, 106, 0.12); color: var(--su-success); }
.su-pill-warning { background: rgba(192, 123, 0, 0.12);  color: var(--su-warning); }
.su-pill-danger  { background: rgba(192, 57, 43, 0.10);  color: var(--su-danger); }

/* App header bar (portal / ticketing) */
.su-appbar {
  background: var(--su-header-bg); border-bottom: 1px solid var(--su-line);
  height: 64px; display: flex; align-items: center; gap: 24px;
  padding: 0 24px; position: sticky; top: 0; z-index: 50;
}
.su-appbar .su-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--su-font-head); font-weight: 700; font-size: 1.1rem;
  color: var(--su-ink); text-decoration: none;
}

/* Tables (ticket lists, partner deal lists) */
.su-table { width: 100%; border-collapse: collapse; background: var(--su-surface); border-radius: var(--su-radius); overflow: hidden; }
.su-table th {
  text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--su-muted); font-weight: 600; padding: 12px 16px;
  background: var(--su-bg-soft); border-bottom: 1px solid var(--su-line);
}
.su-table td { padding: 14px 16px; border-bottom: 1px solid var(--su-line); font-size: 0.95rem; }
.su-table tr:last-child td { border-bottom: 0; }


/* ---------- dark mode ----------
   Toggle by setting data-theme="dark" on <html>. Pair with the standard
   theme script + .su-theme-toggle button (see kit snippets). */
[data-theme="dark"] {
  --su-ink: #e9eef8;
  --su-body: #bac4d9;
  --su-muted: #8b98b1;
  --su-line: #253150;
  --su-bg: #0d1526;
  --su-bg-soft: #111b30;
  --su-surface: #172239;
  --su-header-bg: rgba(13, 21, 38, 0.95);
  --su-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --su-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] a { color: #9db4ec; }
[data-theme="dark"] .su-pill-open { background: rgba(107, 143, 232, 0.16); color: #9db4ec; }
.su-theme-toggle {
  background: none; border: 1.5px solid var(--su-line); border-radius: var(--su-radius-sm);
  width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center;
  color: var(--su-body);
}
.su-theme-toggle:hover { border-color: var(--su-blue); color: var(--su-blue); }
.su-theme-toggle .su-icon-sun { display: none; }
[data-theme="dark"] .su-theme-toggle .su-icon-sun { display: block; }
[data-theme="dark"] .su-theme-toggle .su-icon-moon { display: none; }