/* =====================================================================
   TagPrecise design tokens
   Single source of truth for the product UI. Match these exactly when
   building the real PHP/Blade templates.

   Rules baked in here:
   - Inter (body), JetBrains Mono (code/keys/regex/snippets)
   - Two weights only: 400 and 500. No 600/700. No italics.
   - Sentence case everywhere. Never Title Case, never ALL CAPS.
   - Pair text with the background from the same colour ramp.
   - Status pills are 11px on purpose (smaller than body).
   - Dark-mode parity: every colour is defined in both blocks.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand + accent */
  --brand:        #1D9E75; /* primary actions, brand mark, success */
  --brand-dark:   #0F6E56; /* brand hover, dark success text */
  --brand-light:  #E1F5EE; /* success background fills */
  --ai-accent:    #534AB7; /* AI-specific actions: Generate report, Ask */
  --ai-accent-dark:#3C3489; /* AI hover */

  /* Semantic background / text pairs */
  --bg-success: #E1F5EE; --text-success: #085041; /* Pass, Connected, Synced */
  --bg-danger:  #FCEBEB; --text-danger:  #791F1F; /* Fail, High impact, Critical */
  --bg-warning: #FAEEDA; --text-warning: #633806; /* Duplicate, Issues, Medium */
  --bg-info:    #E6F1FB; --text-info:    #0C447C; /* Links, recommendations */
  --bg-ai:      #EEEDFE; --text-ai:      #3C3489; /* DLV pill, AI fills */

  /* Surfaces + structure */
  --bg-app:      #F3F1EA;
  --bg-surface:  #FFFFFF;
  --bg-subtle:   #FAF9F5;
  --border:      #E4E1D7;
  --border-strong:#D2CEC1;

  /* Text */
  --text:        #1F1E1B;
  --text-muted:  #73726C;
  --text-nav-muted:#9C9A92;

  --radius:   10px;
  --radius-sm: 7px;
  --shadow:   0 1px 2px rgba(31,30,27,0.05), 0 4px 16px rgba(31,30,27,0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:        #34B98C;
    --brand-dark:   #1D9E75;
    --brand-light:  #103A2E;
    --ai-accent:    #8B82E6;
    --ai-accent-dark:#6F66C9;

    --bg-success: #0F2E25; --text-success: #8FE0C4;
    --bg-danger:  #3A1A1A; --text-danger:  #F0A8A8;
    --bg-warning: #3A2C12; --text-warning: #E6C488;
    --bg-info:    #122C44; --text-info:    #9CC7EE;
    --bg-ai:      #221F3A; --text-ai:      #B5ADF2;

    --bg-app:      #16150F;
    --bg-surface:  #1E1D17;
    --bg-subtle:   #232219;
    --border:      #36342B;
    --border-strong:#46443A;

    --text:        #ECEAE0;
    --text-muted:  #9C9A92;
    --text-nav-muted:#73726C;

    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; }
h3 { font-size: 16px; font-weight: 500; margin: 0 0 4px; }
p  { margin: 0 0 10px; }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- Layout shell ---- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex: 0 0 232px;
  background: var(--bg-surface);
  border-right: 0.5px solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar-header { padding: 18px 20px 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-weight: 500; font-size: 15px;
}
.brand span { font-weight: 500; font-size: 15px; }
.subtitle { font-size: 11px; color: var(--text-nav-muted); margin: 4px 0 0 36px; }

nav { padding: 8px 12px; flex: 1; }
.group-label {
  font-size: 11px; color: var(--text-nav-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 16px 10px 6px;
}
nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none;
  font-size: 13px; cursor: pointer;
}
nav a:hover { background: var(--bg-subtle); color: var(--text); }
nav a.active { background: var(--brand-light); color: var(--brand-dark); }
nav a .num {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--bg-subtle); color: var(--text-nav-muted);
  display: grid; place-items: center; font-size: 11px;
}
nav a.active .num { background: var(--brand); color: #fff; }
.sidebar-footer {
  padding: 14px 20px; border-top: 0.5px solid var(--border);
  font-size: 11px; color: var(--text-nav-muted); line-height: 1.5;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; flex: 0 0 56px;
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--bg-surface);
}
.topbar .tabs { display: flex; gap: 2px; }
.topbar .tabs a {
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-muted); text-decoration: none; cursor: pointer;
}
.topbar .tabs a.active { background: var(--bg-subtle); color: var(--text); }
.content { padding: 28px 32px; overflow: auto; }
.page-head { margin-bottom: 22px; }
.page-head .lead { color: var(--text-muted); margin: 0; }

/* ---- Cards ---- */
.card {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 500;
  border: 0.5px solid var(--border-strong); background: var(--bg-surface);
  color: var(--text); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ai { background: var(--ai-accent); border-color: var(--ai-accent); color: #fff; }
.btn-ai:hover { background: var(--ai-accent-dark); }

/* ---- Pills / statuses (11px on purpose) ---- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 100px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-pass    { background: var(--bg-success); color: var(--text-success); }
.pill-fail    { background: var(--bg-danger);  color: var(--text-danger); }
.pill-dupe    { background: var(--bg-warning); color: var(--text-warning); }
.pill-unexp   { background: var(--bg-warning); color: var(--text-warning); }
.pill-missing { background: var(--bg-danger);  color: var(--text-danger); }
.pill-ai      { background: var(--bg-ai);      color: var(--text-ai); }
.pill-info    { background: var(--bg-info);    color: var(--text-info); }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-weight: 500; color: var(--text-muted);
  padding: 9px 12px; border-bottom: 0.5px solid var(--border);
  font-size: 12px;
}
tbody td { padding: 10px 12px; border-bottom: 0.5px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td .mono, th .mono { font-size: 12px; }

/* ---- Metrics ---- */
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .value { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.metric .label { font-size: 12px; color: var(--text-muted); }

/* ---- Misc ---- */
.snippet {
  background: var(--bg-subtle); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  line-height: 1.7; color: var(--text); overflow-x: auto; white-space: pre;
}
.muted { color: var(--text-muted); }
.row { display: flex; align-items: center; gap: 10px; }
.spread { justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-muted); }
.field input, .field select {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text);
}
.divider { height: 0.5px; background: var(--border); margin: 18px 0; border: 0; }