/* ==========================================================================
   Quill Media

   ONE system. Every screen is assembled from the parts defined here — do not
   invent a new height, radius, padding or button style for a new screen. If
   something genuinely does not exist yet, add it here first as a named token,
   then use it.

   Light surfaces, Helvetica Now, the Quill brand palette. The only dark
   surface is the sidebar, which anchors the app and lets brand colour sit
   against something neutral.

   Brand theming works by overriding --accent and the logo only. Nothing else
   is tenant-variable, so a customer's colour can never make the interface
   unreadable.
   ========================================================================== */

@font-face {
  font-family: "Helvetica Now";
  src: url("../fonts/HelveticaNowDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("../fonts/HelveticaNowDisplay-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Helvetica Now";
  src: url("../fonts/HelveticaNowDisplay-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- brand colour --------------------------------------------------- */
  --bg:          #f7f7f7;
  --bg-alt:      #f5f5f3;
  --ink:         #2e2e2e;
  --dim:         rgba(23,23,23,.55);
  --dimmer:      rgba(23,23,23,.35);
  --line:        rgba(23,23,23,.12);
  --line-strong: rgba(23,23,23,.2);

  --panel-dark:      #171717;
  --panel-dark-ink:  #f5f5f3;
  --panel-dark-line: rgba(255,255,255,.14);
  --panel-dark-dim:  rgba(245,245,243,.58);

  --surface:   #ffffff;
  --surface-2: #ececea;

  --danger:      #b3261e;
  --danger-line: #e6c4c1;
  --danger-bg:   #fbf2f1;
  --ok:          #2e7d32;
  --warn:        #8a5a00;
  --warn-bg:     #fdf6e7;

  /* Overridden per brand. Default is the Quill near-black. */
  --accent:     #171717;
  --accent-ink: #ffffff;

  /* ---- spacing: one scale, nothing between ----------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ---- radius: three, plus a pill ------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ---- control heights: three, and nothing else ------------------------ */
  --h-sm: 34px;
  --h-md: 42px;
  --h-lg: 50px;

  /* ---- type ------------------------------------------------------------ */
  --t-xs:      12px;
  --t-sm:      13px;
  --t-body:    14px;
  --t-input:   15px;
  --t-title:   18px;
  --t-display: 26px;

  --sidebar:  248px;
  --topbar:   64px;
  --ease:     cubic-bezier(.23, 1, .32, 1);
}

html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Now", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   The Quill wordmark

   Always flat black or white — never the gold bulb, never a gradient, on any
   background. The source SVGs are pre-flattened AND filtered here, so dropping
   in a fresh file cannot reintroduce colour by accident.
   ========================================================================== */

.wordmark      { height: 20px; width: auto; filter: brightness(0); }
.wordmark--on-dark { filter: brightness(0) invert(1); }

/* A customer's own logo is shown exactly as supplied: no filter, no recolour,
   no crop. It is their intellectual property, not ours to restyle. */
.brand-logo { max-height: 26px; width: auto; }

/* ==========================================================================
   App shell
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

/* ---- sidebar ------------------------------------------------------------ */

.sidebar {
  background: var(--panel-dark);
  color: var(--panel-dark-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__head {
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s5);
  border-bottom: 1px solid var(--panel-dark-line);
  flex: none;
}

.sidebar__product {
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--panel-dark-dim);
}

.sidebar__nav {
  padding: var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
}

.navitem {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--h-md);
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--panel-dark-dim);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.navitem:hover { background: rgba(255,255,255,.06); color: var(--panel-dark-ink); }
.navitem--active {
  background: rgba(255,255,255,.1);
  color: var(--panel-dark-ink);
  font-weight: 500;
}
.navitem svg { width: 18px; height: 18px; flex: none; }
.navitem__label { flex: 1; }

/* Marks a section that a later build step delivers. */
.navitem__step {
  font-size: 10px;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--panel-dark-line);
  color: var(--panel-dark-dim);
}

.sidebar__foot {
  padding: var(--s4);
  border-top: 1px solid var(--panel-dark-line);
  flex: none;
}

.who { display: flex; align-items: center; gap: var(--s3); }
.who__avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .02em;
}
.who__text { min-width: 0; flex: 1; }
.who__name {
  font-size: var(--t-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who__role { font-size: var(--t-xs); color: var(--panel-dark-dim); }
.who__out {
  color: var(--panel-dark-dim);
  padding: var(--s2);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.who__out:hover { background: rgba(255,255,255,.08); color: var(--panel-dark-ink); }
.who__out svg { width: 16px; height: 16px; }

/* ---- main --------------------------------------------------------------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar__title { font-size: var(--t-title); font-weight: 500; }
.topbar__context { display: flex; align-items: center; gap: var(--s3); }

.content { padding: var(--s6); max-width: 1180px; width: 100%; }

/* ==========================================================================
   Pieces
   ========================================================================== */

.page-head { margin-bottom: var(--s6); }
.page-head h1 { font-size: var(--t-display); font-weight: 500; letter-spacing: -.01em; }
.page-head p  { color: var(--dim); margin-top: var(--s2); max-width: 62ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
}

.stat__label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dimmer);
}
.stat__value {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-top: var(--s2);
}
.stat__note { font-size: var(--t-sm); color: var(--dim); margin-top: var(--s1); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 24px;
  padding: 0 var(--s3);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: var(--t-xs);
  color: var(--dim);
}
.badge--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--h-md);
  padding: 0 var(--s5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--t-body);
  font-weight: 500;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { opacity: .88; }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--lg { height: var(--h-lg); width: 100%; }

/* ---- fields ------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s4); }
.field__label {
  display: block;
  font-size: var(--t-sm);
  color: var(--dim);
  margin-bottom: var(--s2);
}
.field__input {
  width: 100%;
  height: var(--h-lg);
  padding: 0 var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--t-input);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23,23,23,.08);
}

/* ---- notices ------------------------------------------------------------ */

.notice {
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--dim);
}
.notice--error  { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.notice--warn   { background: var(--warn-bg);   border-color: #ecdcb4;            color: var(--warn); }

/* ---- empty / not-yet-built --------------------------------------------- */

.empty {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.empty__icon {
  width: 44px; height: 44px;
  margin: 0 auto var(--s4);
  color: var(--dimmer);
}
.empty__icon svg { width: 100%; height: 100%; }
.empty h2 { font-size: var(--t-title); font-weight: 500; margin-bottom: var(--s2); }
.empty p  { color: var(--dim); max-width: 46ch; margin: 0 auto; }
.empty .badge { margin-top: var(--s5); }

/* ==========================================================================
   Login — its own layout, no shell
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth__aside {
  background: var(--panel-dark);
  color: var(--panel-dark-ink);
  padding: var(--s7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth__pitch { max-width: 34ch; }
.auth__pitch h2 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.auth__pitch p { color: var(--panel-dark-dim); margin-top: var(--s4); }
.auth__foot { font-size: var(--t-xs); color: var(--panel-dark-dim); }

.auth__panel {
  display: grid;
  place-items: center;
  padding: var(--s6);
}
.auth__form { width: 100%; max-width: 360px; }
.auth__form h1 {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: var(--s2);
}
.auth__form > p { color: var(--dim); margin-bottom: var(--s6); }

/* ==========================================================================
   Error page
   ========================================================================== */

.errorpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s6);
  text-align: center;
}
.errorpage__code {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--dimmer);
}
.errorpage h1 { font-size: var(--t-display); font-weight: 500; margin: var(--s3) 0 var(--s2); }
.errorpage p  { color: var(--dim); margin-bottom: var(--s5); }

/* ==========================================================================
   Narrow screens — the panel is a desktop tool, but it must not break
   ========================================================================== */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; }
  .navitem__step { display: none; }
  .content { padding: var(--s5) var(--s4); }
  .topbar { padding: 0 var(--s4); }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}