/* ================================================================
   style.css — Client Dashboard — COLD STEEL SCAFFOLDING
   ================================================================
   Read this like a job description, not a wall of code.

   THE BUILDING METAPHOR: this file is an empty workshop. The walls
   are bare steel — cold, but solid, and ready for anyone to move in
   and hang their own signs. Everything under "THE CONTROL PANEL"
   below is the one part you're meant to touch. Everything after
   "THE STRUCTURE" is the studs and pipes behind the wall — it makes
   the room stand up, and it works the same no matter what color you
   paint it.

   TWO WAYS THIS FILE GETS EDITED, BOTH ON PURPOSE:
     1. A brave Tenant Admin opens this in Notepad, changes a value
        under THE CONTROL PANEL, saves it. (Today: email the file to
        an admin to apply by hand. A CSS-reviewer pipeline that does
        this automatically is designed, not yet built — see
        core_theapps.org/text/VISION_SERVICES_ARCHITECTURE.md.)
     2. A programming VIP reads this SAME file to understand what
        each value controls, and turns "make it feel like a dark
        room" into real edits to THE CONTROL PANEL below — without
        ever needing to touch THE STRUCTURE. That's the whole reason
        every value down there has a plain-English comment: the
        comment is doing as much work for the VIP as for the human.
   ================================================================ */

:root {
  /* ── THE CONTROL PANEL ──────────────────────────────────────
     Change values here. Nothing else in this file needs to change
     to give this dashboard a whole new mood. */

  --ts-bg:          #1a1d21;  /* the wall behind everything — the room's paint color */
  --ts-panel-bg:    #22262b;  /* a card/panel's own surface — like a clipboard hung on the wall */
  --ts-border:      #33383f;  /* the edge around a panel — the frame around the clipboard */
  --ts-text:        #e8e8ea;  /* the main text color — the ink */
  --ts-text-dim:    #8a8f98;  /* quieter, secondary text — pencil, not pen */
  --ts-accent:      #6b7280;  /* buttons, links, highlights — the "house color," steel grey until a Tenant picks their own */
  --ts-accent-text: #ffffff;  /* text written ON TOP of the accent color (e.g. a button's own label) */
  --ts-danger:      #c0392b;  /* error messages — the color of a warning light */
  --ts-radius:      10px;     /* how rounded corners are — 0 for sharp/industrial, 20+ for soft/friendly */
  --ts-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Want it "like a dark room"? A real starting point:
       --ts-bg: #0a0a0a; --ts-panel-bg: #141414; --ts-accent: #8b0000;
     Want it bright and friendly instead?
       --ts-bg: #f5f5f7; --ts-panel-bg: #ffffff; --ts-text: #1a1a1a;
       --ts-text-dim: #666; --ts-accent: #2563eb; --ts-border: #e2e2e5;
  */
}

/* ── THE STRUCTURE ─────────────────────────────────────────────
   Studs and pipes. Reads the control panel above; doesn't set its
   own colors. Safe to leave alone even if you don't read code. */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: var(--ts-font);
  padding: 2rem;
}

.card {
  width: min(420px, 100%);
  background: var(--ts-panel-bg);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.brand {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
}

.subtitle {
  color: var(--ts-text-dim);
  font-size: 0.9rem;
  text-align: center;
  margin: -0.75rem 0 0;
}

input[type="email"],
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--ts-bg);
  border: 1px solid var(--ts-border);
  border-radius: calc(var(--ts-radius) * 0.6);
  color: var(--ts-text);
  font-size: 1rem;
  outline: none;
}
input:focus { border-color: var(--ts-accent); }

button {
  width: 100%;
  padding: 12px;
  background: var(--ts-accent);
  color: var(--ts-accent-text);
  border: none;
  border-radius: calc(var(--ts-radius) * 0.6);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: default; }
button.secondary {
  background: transparent;
  border: 1px solid var(--ts-border);
  color: var(--ts-text);
}

.error   { color: var(--ts-danger); font-size: 0.85rem; min-height: 1.1em; margin: 0; }
.hint    { color: var(--ts-text-dim); font-size: 0.82rem; margin: 0; }
.hidden  { display: none !important; }

.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ts-border);
}
.panel-row:last-child { border-bottom: none; }

.tenant-list { display: flex; flex-direction: column; gap: 0.5rem; }

.pin-reveal {
  background: var(--ts-bg);
  border: 1px dashed var(--ts-accent);
  border-radius: calc(var(--ts-radius) * 0.6);
  padding: 1rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}