/* ==========================================================================
   SafeGrd Console layer — /login, /signup, /dashboard

   Tokens and primitives live in system.css, which every page loads first.
   This file holds ONLY what is specific to the authenticated console and the
   auth screens. If something here would be useful on the landing page too,
   it belongs in system.css instead.

   Read css/STYLE.md before adding to this file.
   ========================================================================== */

/* --- Page ground -----------------------------------------------------------
   The console shares the landing page's graph-paper ground so the product and
   the marketing surface read as one system.
   ---------------------------------------------------------------------------- */

body {
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 22px 22px;
}

/* --- Auth screens (/login, /signup) ----------------------------------------- */

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h) - 24px);
  padding: 32px 20px 64px;
}

.auth-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 34px 30px;
  text-align: left;
}

/* Registration brackets, same grammar as .module. */
.auth-card::before,
.auth-card::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border: 2px solid var(--signal);
  pointer-events: none;
}

.auth-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.auth-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.auth-card h2 {
  font-size: 23px;
  margin-bottom: 8px;
}

.auth-card p.subtitle {
  font-size: var(--fs-table);
  color: var(--ink-2);
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.auth-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-ui);
  letter-spacing: .06em;
  color: var(--ink-3);
  text-align: center;
}

/* --- Dashboard shell -------------------------------------------------------- */

/* Alpine anti-FOUC. Lives here, not in a page <style> block. */
[x-cloak] { display: none !important; }


.dashboard-layout {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 30px var(--gutter) 80px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-bottom: 30px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* Metric tiles share hairlines rather than floating as separate cards. */
.metric-card {
  background: var(--ground);
  border: 0;
  padding: 18px 20px;
}

.metric-title {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* --- Console rail ------------------------------------------------------------ */

/* A left rail rather than a tab strip. Seven sections needed 1344px of label in
   a 1168px bar, so the old strip wrapped to two rows at every width — and the
   list still grows (evidence-pack export, agent status). A vertical rail scales
   with the section count instead of fighting it, and STYLE.md §7 rule 8 forbids
   solving it by scrolling chrome sideways. */
.console-body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  border-top: 1px solid var(--line);
}

.console-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 14px 0 24px;
  position: sticky;
  /* Clears the fixed console bar so the rail stays reachable while a long
     snapshot table scrolls. */
  top: calc(var(--nav-h) + 8px);
}

.console-content {
  min-width: 0; /* lets wide tables shrink instead of forcing page scroll */
  padding: 24px 0 0 26px;
}

.rail-btn {
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px 10px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rail-btn:hover { color: var(--ink); background: var(--panel); }

.rail-btn.active {
  color: var(--signal);
  border-left-color: var(--signal);
  background: var(--panel);
}

/* The count rides at the end of the row so labels stay left-aligned and
   scannable down the column. */
.rail-count {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: .06em;
}

.rail-btn.active .rail-count { color: var(--signal); }

/* Grouping label above a run of related sections. */
.rail-group {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 700;
  padding: 16px 16px 7px;
}

.rail-group:first-child { padding-top: 4px; }

/* Below the rail's useful width the grid folds to one column and the rail
   becomes a wrapping row again. It wraps — it never scrolls (STYLE.md §7.8). */
@media (max-width: 860px) {
  .console-body { grid-template-columns: minmax(0, 1fr); }

  .console-rail {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    position: static;
    padding: 8px 0;
  }

  .rail-btn {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 9px 12px;
  }

  .rail-btn.active { border-left-color: transparent; border-bottom-color: var(--signal); }

  .rail-group { display: none; }

  .console-content { padding: 22px 0 0; }
}

/* --- Section headings inside the console -------------------------------------- */

.panel-title {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}