/* ============================================================
   ERM DESIGN SYSTEM — globals.css
   Generated from codebase analysis of actual usage patterns.
   
   Usage: import in layout.tsx via:
   <link rel="stylesheet" href="/globals.css" />
   or @import in your main CSS.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Brand */
  --red:          #E8302A;
  --red-dim:      rgba(232,48,42,0.08);
  --red-border:   rgba(232,48,42,0.25);
  --gold:         #f5c518;
  --gold-dim:     rgba(245,197,24,0.08);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.08);
  --green-border: rgba(34,197,94,0.2);
  --blue:         #3b82f6;
  --blue-dim:     rgba(59,130,246,0.08);

  /* Backgrounds — from actual usage */
  --bg:           #0a0a0b;
  --bg-2:         #111113;
  --bg-3:         #18181b;
  --bg-raised:    rgba(255,255,255,0.03);
  --bg-hover:     rgba(255,255,255,0.025);
  --bg-active:    rgba(255,255,255,0.05);

  /* Text — #6b6966 used 510x, #f0ede8 350x, #3a3836 154x */
  --text:         #f0ede8;
  --muted:        #6b6966;
  --dim:          #3a3836;
  --text-red:     #E8302A;
  --text-gold:    #f5c518;
  --text-green:   #22c55e;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-2:     rgba(255,255,255,0.1);
  --border-3:     rgba(255,255,255,0.15);
  --border-red:   rgba(232,48,42,0.25);
  --border-green: rgba(34,197,94,0.2);
  --border-gold:  rgba(245,197,24,0.2);

  /* Typography */
  --font-sans:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Syne', sans-serif;

  /* Font sizes — from actual usage frequencies */
  --text-2xs:     9px;
  --text-xs:      10px;
  --text-sm:      11px;
  --text-base:    12px;
  --text-md:      13px;
  --text-lg:      14px;
  --text-xl:      15px;
  --text-2xl:     18px;
  --text-3xl:     20px;
  --text-4xl:     28px;

  /* Spacing */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      10px;
  --space-4:      12px;
  --space-5:      14px;
  --space-6:      16px;
  --space-7:      20px;
  --space-8:      24px;
  --space-10:     32px;
  --space-12:     48px;

  /* Border radius — border-radius:8px used 138x */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    12px;
  --radius-2xl:   14px;
  --radius-full:  9999px;

  /* Transitions */
  --transition:   all 0.15s ease;
  --transition-slow: all 0.25s ease;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */

.t-display   { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.t-mono      { font-family: var(--font-mono); }
.t-sans      { font-family: var(--font-sans); }

.t-2xs       { font-size: var(--text-2xs); }
.t-xs        { font-size: var(--text-xs); }
.t-sm        { font-size: var(--text-sm); }
.t-base      { font-size: var(--text-base); }
.t-md        { font-size: var(--text-md); }
.t-lg        { font-size: var(--text-lg); }
.t-xl        { font-size: var(--text-xl); }

.t-primary   { color: var(--text); }
.t-muted     { color: var(--muted); }
.t-dim       { color: var(--dim); }
.t-red       { color: var(--red); }
.t-gold      { color: var(--gold); }
.t-green     { color: var(--green); }

/* Section label — the "—— LABEL" pattern used everywhere */
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

/* Column header — used in tables/grids */
.col-head {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Page heading pattern */
.pg-title    { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.pg-sub      { font-size: var(--text-base); color: var(--muted); margin-top: 4px; }
.pg-head     { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }

/* ── LAYOUT UTILITIES ───────────────────────────────────────── */

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.gap-1       { gap: var(--space-1); }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }
.wrap        { flex-wrap: wrap; }

/* ── CARDS ───────────────────────────────────────────────────── */

.card {
  background: var(--bg-raised);
  border: .5px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.card + .card         { margin-top: 16px; }
.card-title           { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin-bottom: 12px; }
.card-sub             { font-size: var(--text-base); color: var(--muted); margin-bottom: 16px; line-height: 1.6; }

.card-sm              { padding: var(--space-4); border-radius: var(--radius-lg); }
.card-red             { border-color: var(--border-red); background: var(--red-dim); }
.card-green           { border-color: var(--border-green); background: var(--green-dim); }
.card-gold            { border-color: var(--border-gold); background: var(--gold-dim); }

/* ── BADGES ─────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: .5px solid transparent;
  white-space: nowrap;
}
.badge-green  { color: var(--green);  background: var(--green-dim);  border-color: var(--border-green); }
.badge-red    { color: var(--red);    background: var(--red-dim);    border-color: var(--border-red); }
.badge-gold   { color: var(--gold);   background: var(--gold-dim);   border-color: var(--border-gold); }
.badge-blue   { color: var(--blue);   background: var(--blue-dim);   border-color: rgba(59,130,246,0.2); }
.badge-muted  { color: var(--muted);  background: var(--bg-raised);  border-color: var(--border); }

/* ── BUTTONS ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-red      { background: var(--red);     color: #fff; border: 1px solid var(--red); }
.btn-red:hover{ opacity: .85; }
.btn-ghost    { background: transparent;    color: var(--text); border: .5px solid var(--border-2); }
.btn-ghost:hover { border-color: var(--border-3); }
.btn-green    { background: var(--green);   color: #000; }
.btn-green:hover { opacity: .85; }
.btn-sm       { font-size: var(--text-base); padding: 7px 14px; border-radius: var(--radius-md); }
.btn-xs       { font-size: var(--text-sm);  padding: 5px 10px; border-radius: var(--radius-sm); }
.btn-danger   { background: var(--red-dim); color: var(--red); border: .5px solid var(--border-red); }
.btn-danger:hover { background: var(--red); color: #fff; }

/* ── INPUTS ──────────────────────────────────────────────────── */

.inp {
  background: var(--bg-2);
  border: .5px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.inp:focus            { border-color: var(--border-3); }
.inp::placeholder     { color: var(--dim); }
.inp-sm               { padding: 5px 10px; font-size: var(--text-sm); }

label.field-label {
  display: block;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

/* ── TABLES ──────────────────────────────────────────────────── */

.tbl              { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.tbl th           { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--muted);
                    text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px;
                    border-bottom: .5px solid var(--border-2); text-align: left; font-weight: 400; }
.tbl td           { padding: 10px; border-bottom: .5px solid var(--border); vertical-align: middle; color: var(--text); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td  { background: var(--bg-hover); }
.tbl-mono td      { font-family: var(--font-mono); font-size: var(--text-sm); }

/* ── DIVIDERS & SPACING ──────────────────────────────────────── */

.divider          { border: none; border-top: .5px solid var(--border); margin: 16px 0; }
.divider-strong   { border-color: var(--border-2); }
.mt-1  { margin-top: var(--space-1); }  .mb-1  { margin-bottom: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }  .mb-2  { margin-bottom: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }  .mb-4  { margin-bottom: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }  .mb-6  { margin-bottom: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }  .mb-8  { margin-bottom: var(--space-8); }

/* ── STATUS / FEEDBACK ───────────────────────────────────────── */

.status-ok    { background: var(--green-dim); border: .5px solid var(--border-green); color: var(--green);
                border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-base); font-family: var(--font-mono); }
.status-err   { background: var(--red-dim);   border: .5px solid var(--border-red);   color: var(--red);
                border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-base); font-family: var(--font-mono); }
.status-info  { background: var(--blue-dim);  border: .5px solid rgba(59,130,246,.2); color: var(--blue);
                border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-base); font-family: var(--font-mono); }
.status-warn  { background: var(--gold-dim);  border: .5px solid var(--border-gold);  color: var(--gold);
                border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-base); font-family: var(--font-mono); }

/* ── EMPTY STATES ────────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}
.empty-icon   { font-size: 32px; margin-bottom: 12px; opacity: .5; }
.empty-title  { font-size: var(--text-md); color: var(--muted); margin-bottom: 6px; }
.empty-sub    { font-size: var(--text-base); color: var(--dim); }

/* ── SKELETONS ───────────────────────────────────────────────── */

@keyframes erm-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
/* Use .erm-skeleton to avoid conflicting with page-level .skeleton classes */
.erm-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 800px 100%;
  animation: erm-shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}
.erm-sk-line      { height: 12px; border-radius: var(--radius-sm); }
.erm-sk-line-sm   { height: 10px; }
.erm-sk-line-lg   { height: 16px; }
.erm-sk-block     { height: 80px; }
.erm-sk-avatar    { width: 36px; height: 36px; border-radius: 50%; }

/* ── UTILITY: VISUALLY HIDDEN (for a11y) ─────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }