/* ============================================================================
   EIM dashboards — shared theme tokens + base component styles.

   Ship this file alongside eim-auth so every dashboard pulls the same brand
   surface. The goal is to align CHROME (topbars, buttons, panels, tables,
   form inputs, badges) — domain-specific UI (Plotly charts, maps, modals,
   etc.) keeps whatever fits its task.

   Usage: copy or symlink to a path served by each portal, then
     <link rel="stylesheet" href="/eim-theme.css">
   in the host HTML. CSS variables override; component classes are namespaced
   `.eim-*` so they don't collide with portal-specific styles.

   Light theme by default; dark via [data-theme="dark"] on documentElement.
   ============================================================================ */

:root {
  /* Brand palette */
  --eim-primary:        #01363F;
  --eim-primary-2:      #03505b;
  --eim-deep:           #001b1e;
  --eim-teal:           #2dc4b3;
  --eim-teal-2:         #6cc6bb;
  --eim-teal-soft:      rgba(45, 196, 179, 0.14);

  /* Status */
  --eim-danger:         #c44651;
  --eim-danger-bg:      #fae3e5;
  --eim-warning:        #d68a3d;
  --eim-warning-bg:     #fbecd9;
  --eim-success:        #2f8a52;
  --eim-success-bg:     #ddeee3;

  /* Surfaces */
  --eim-bg:             #eef2f2;
  --eim-surface:        #ffffff;
  --eim-surface-2:      #f5f8f8;
  --eim-pale:           #e7f1f1;
  --eim-border:         #dde3e3;
  --eim-border-strong:  #c4cccc;

  /* Text */
  --eim-text:           #0f1a1c;
  --eim-text-2:         #2a3a3d;
  --eim-muted:          #6b7574;
  --eim-on-primary:     #e7f1f1;
  --eim-on-primary-mut: rgba(231, 241, 241, 0.7);

  /* Type */
  --eim-font:           'Inter', system-ui, -apple-system, sans-serif;
  --eim-font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Geometry */
  --eim-radius-sm:      4px;
  --eim-radius:         6px;
  --eim-radius-lg:      10px;
}

[data-theme="dark"] {
  --eim-bg:             #0e1719;
  --eim-surface:        #16242a;
  --eim-surface-2:      #1c2d33;
  --eim-pale:           #1a2b30;
  --eim-border:         #233740;
  --eim-border-strong:  #2f4751;
  --eim-text:           #dbe6e7;
  --eim-text-2:         #b8c6c8;
  --eim-muted:          #8a9799;
  --eim-teal-soft:      rgba(56, 224, 207, 0.16);
}

/* ── Reset / base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
body.eim-app {
  margin: 0;
  font-family: var(--eim-font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--eim-bg);
  color: var(--eim-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.eim-topbar {
  background: var(--eim-primary);
  color: var(--eim-on-primary);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--eim-deep);
}
.eim-topbar h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.eim-topbar .eim-accent { color: var(--eim-teal); }
.eim-topbar .eim-meta {
  color: var(--eim-on-primary-mut);
  font-size: 12px;
  margin-left: auto;
}
.eim-topbar a,
.eim-topbar button.eim-btn-ghost {
  background: rgba(231, 241, 241, 0.08);
  color: var(--eim-on-primary);
  border: 1px solid rgba(231, 241, 241, 0.22);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--eim-radius-sm);
}
.eim-topbar a:hover,
.eim-topbar button.eim-btn-ghost:hover {
  background: rgba(231, 241, 241, 0.16);
  border-color: var(--eim-teal);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.eim-panel {
  background: var(--eim-surface);
  border: 1px solid var(--eim-border);
  border-radius: var(--eim-radius);
  overflow: hidden;
  margin-bottom: 22px;
}
.eim-panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--eim-border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--eim-surface-2);
}
.eim-panel-head h2,
.eim-panel-head h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eim-primary);
  font-weight: 800;
}
.eim-panel-head .eim-grow { flex: 1; }
.eim-panel-body { padding: 16px; }
.eim-panel-body--flush { padding: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.eim-btn,
.eim-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--eim-primary);
  color: var(--eim-on-primary);
  border: 1px solid var(--eim-primary);
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: var(--eim-radius-sm);
  transition: background 0.12s, border-color 0.12s;
}
.eim-btn:hover,
.eim-btn-primary:hover {
  background: var(--eim-primary-2);
  border-color: var(--eim-primary-2);
}
.eim-btn-secondary {
  background: var(--eim-surface);
  color: var(--eim-text-2);
  border: 1px solid var(--eim-border-strong);
}
.eim-btn-secondary:hover {
  background: var(--eim-pale);
  border-color: var(--eim-primary);
  color: var(--eim-primary);
}
.eim-btn-danger {
  background: var(--eim-danger);
  border-color: var(--eim-danger);
  color: #fff;
}
.eim-btn-danger:hover { background: #a33843; border-color: #a33843; }
.eim-btn-link {
  background: none;
  border: none;
  color: var(--eim-teal);
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.eim-btn-link:hover { color: var(--eim-primary-2); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.eim-field { display: block; margin-bottom: 12px; }
.eim-field-label,
.eim-field label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--eim-muted);
  margin-bottom: 4px;
}
.eim-input,
.eim-field input[type="text"],
.eim-field input[type="email"],
.eim-field input[type="password"],
.eim-field input[type="search"],
.eim-field select,
.eim-field textarea {
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--eim-text);
  background: var(--eim-surface);
  border: 1px solid var(--eim-border-strong);
  border-radius: var(--eim-radius-sm);
}
.eim-input:focus,
.eim-field input:focus,
.eim-field select:focus,
.eim-field textarea:focus {
  outline: 2px solid var(--eim-teal);
  outline-offset: 1px;
  border-color: var(--eim-teal);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.eim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.eim-table thead th {
  background: var(--eim-surface-2);
  color: var(--eim-muted);
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid var(--eim-border);
}
.eim-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--eim-border);
  vertical-align: top;
}
.eim-table tbody tr:last-child td { border-bottom: 0; }
.eim-table td.eim-num,
.eim-table th.eim-num { text-align: right; font-variant-numeric: tabular-nums; }
.eim-table td.eim-mono { font-family: var(--eim-font-mono); font-size: 11px; color: var(--eim-text-2); }

/* ── Badges / pills ─────────────────────────────────────────────────────── */
.eim-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--eim-radius-sm);
  background: var(--eim-teal-soft);
  color: var(--eim-teal);
  border: 1px solid rgba(45, 196, 179, 0.4);
  white-space: nowrap;
}
.eim-pill--admin {
  background: var(--eim-danger-bg);
  color: var(--eim-danger);
  border-color: rgba(196, 70, 81, 0.4);
}
.eim-pill--muted {
  background: rgba(107, 117, 116, 0.12);
  color: var(--eim-muted);
  border-color: var(--eim-border-strong);
}
.eim-pill--warning {
  background: var(--eim-warning-bg);
  color: var(--eim-warning);
  border-color: rgba(214, 138, 61, 0.4);
}
.eim-pill--success {
  background: var(--eim-success-bg);
  color: var(--eim-success);
  border-color: rgba(47, 138, 82, 0.4);
}

/* ── Banners ────────────────────────────────────────────────────────────── */
.eim-banner-err {
  background: var(--eim-danger-bg);
  color: var(--eim-danger);
  border-left: 3px solid var(--eim-danger);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--eim-radius-sm);
  margin-bottom: 14px;
}
.eim-banner-ok {
  background: var(--eim-success-bg);
  color: var(--eim-success);
  border-left: 3px solid var(--eim-success);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--eim-radius-sm);
  margin-bottom: 14px;
}

/* ── Login surface (used by per-portal login pages) ─────────────────────── */
.eim-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--eim-deep) 0%, var(--eim-primary) 100%);
  font-family: var(--eim-font);
}
.eim-login-card {
  background: var(--eim-surface);
  border-radius: var(--eim-radius-lg);
  padding: 34px 38px;
  width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}
.eim-login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--eim-primary);
  letter-spacing: -0.01em;
}
.eim-login-card .eim-accent { color: var(--eim-teal); }
.eim-login-card .eim-login-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eim-muted);
  font-weight: 700;
  margin: 4px 0 18px;
}
.eim-login-card .eim-btn-primary { width: 100%; padding: 11px; font-size: 13px; margin-top: 6px; }

/* ── Utility ────────────────────────────────────────────────────────────── */
.eim-muted { color: var(--eim-muted); }
.eim-mono { font-family: var(--eim-font-mono); }
.eim-small { font-size: 11px; }
.eim-cross-link {
  color: var(--eim-teal);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.eim-cross-link:hover { color: var(--eim-primary-2); }