/* ===========================================================================
   Application stylesheet.

   Carries the layout and component conventions of the portal this shell was
   extracted from — 64px nav, centred .page, card surfaces, the same button and
   table treatment — but lifted out of the inline <style> block that file kept
   them in, and expressed entirely in custom properties.

   Every colour here is a var(). None is a literal. Tokens are defined in
   templates/_tokens.html from src/branding.py, which reads the environment at
   startup, so rebranding is an environment change and never an edit here.
   ========================================================================= */

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

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ── Nav ──────────────────────────────────────────────────────────────
   Light, not a dark slab. The supplied logo lockup was drawn for a light
   ground, a-rsolar.com is light, and a heavy dark bar on every page competes
   with the data tables this portal exists to show. Separation from content is
   a bottom border plus a soft shadow. */

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
  padding: 0 1.5rem;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-nav);
}
.nav .logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
  color: var(--nav-text);
  text-decoration: none;
}
.nav .logo .company-logo { height: 40px; width: auto; }
.nav .logo-text {
  font-family: var(--font-brand);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.nav-links a,
.nav-linkish {
  display: inline-flex;
  align-items: center;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  /* The logout control is a <button> in a form, not an <a>. Resetting its
     chrome HERE rather than in a later rule keeps the two dimensionally
     identical — a later reset was clearing the padding and the reserved
     underline, so it sat 2px off from its neighbours. */
  background: none;
  cursor: pointer;
  border: none;
  /* Reserved so switching to .active does not shift the row by 2px. */
  border-bottom: 2px solid transparent;
  color: var(--nav-text);
  font-family: var(--font-brand);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s;
}
.nav-links a:hover,
.nav-linkish:hover { background: var(--brand-tint); }

/* Active state carries TWO signals — a cyan underline and a weight change.
   Colour alone would fail WCAG 1.4.1, which is the trap in the dark design
   this replaced, where cyan text was the only marker. */
.nav-links a.active {
  font-weight: 600;
  border-bottom-color: var(--brand-ui);
  border-radius: var(--radius) var(--radius) 0 0;
}

.nav-logout { display: flex; }

/* ── Apps dropdown ───────────────────────────────────────────────────── */

.nav-dropdown { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--nav-text);
  transition: background .15s;
}
.nav-dropdown-btn:hover { background: var(--brand-tint); }
.nav-dropdown-btn.active {
  font-weight: 600;
  border-bottom-color: var(--brand-ui);
  border-radius: var(--radius) var(--radius) 0 0;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  padding: .375rem 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-size: .875rem;
  white-space: nowrap;
}
.nav-dropdown-menu a { color: var(--text); }
.nav-dropdown-menu a:hover { background: var(--brand-tint); }
/* Weight AND a left rule, never colour alone — see 1.4.1 note above. */
.nav-dropdown-menu a.active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-ui);
}

.entry-icon { height: 20px; width: auto; flex-shrink: 0; }
.entry-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-tint-strong);
  color: var(--muted);
  font-family: var(--font-brand);
  font-size: .6875rem;
  font-weight: 600;
}

/* ── Page ────────────────────────────────────────────────────────────── */

.page { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.page-intro { margin-bottom: 2rem; }
.page-intro h1 { margin-bottom: .25rem; }

h1, h2, h3 { font-family: var(--font-brand); }
h1 { font-size: 1.375rem; font-weight: 600; margin-bottom: 1.5rem; }
h2 { font-size: 1rem;     font-weight: 600; margin-bottom: .875rem; }

.flush    { margin: 0 !important; }
.push-sm  { margin-top: .5rem; margin-bottom: .5rem; }
.push-md  { margin-top: 1rem; margin-bottom: 1rem; }
.muted    { color: var(--muted); font-size: .8125rem; }
.flex     { display: flex; align-items: center; gap: .75rem; }
.flex-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
.form-card { max-width: 520px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-brand);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Navy label on the cyan fill: 6.42:1. White on the same fill is 2.52:1, which
   fails AA outright — that is the site's own CTA styling, not carried over.
   Hover LIGHTENS relative to a naive darkening, because darkening a light fill
   under a dark label reduces contrast (#2C879C drops it to 3.89:1). */
.btn-primary        { background: var(--brand-color); color: var(--brand-on-fill); }
.btn-primary:hover  { background: var(--brand-hover); }
.btn-secondary      { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover{ background: var(--bg); }
.btn-danger         { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-line); }
.btn-danger:hover   { background: var(--danger-bg); }
.btn-sm             { padding: .35rem .7rem; font-size: .8125rem; }
.btn-block          { width: 100%; }

/* ── Forms ───────────────────────────────────────────────────────────── */

label { display: block; font-family: var(--font-brand); font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.form-group { margin-bottom: 1.25rem; }
.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check label { margin: 0; font-weight: 400; }
.form-check input { width: auto; }

/* --border-strong, not --border: a control's boundary is non-text UI and WCAG
   1.4.11 wants 3:1. The decorative hairline is 1.24:1. This reads slightly
   heavier than a hairline, which is the intended trade. */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: .475rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-ui);
  /* --brand-rgb exists for exactly this: rgba() cannot take a hex variable. */
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .30);
}
.select-sm { width: auto; padding: .3rem .5rem; font-size: .8125rem; }

.field-error { margin-top: .3rem; font-size: .8125rem; color: var(--danger); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.5rem; }
.pw-toggle {
  position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; padding: .2rem;
  line-height: 0; cursor: pointer; color: var(--muted);
}
.pw-toggle:hover { color: var(--text); }

.inline-form { display: inline-flex; align-items: center; gap: .4rem; }

/* ── Tables ──────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--surface); }
thead th {
  font-family: var(--font-brand);
  padding: .7rem 1rem;
  background: var(--brand-ink);
  color: var(--surface);
  text-align: left;
  font-weight: 500;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* tabular-nums so digits align down a column — the reason the body face is not
   the geometric brand face here. */
td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--brand-tint); }
.row-muted td { opacity: .6; }
.col-actions { width: 1%; }
.actions { gap: .5rem; flex-wrap: wrap; }

/* ── Badges ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-brand);
  font-size: .75rem;
  font-weight: 600;
}
.badge-quiet   { background: var(--bg);          color: var(--muted);   border: 1px solid var(--border-strong); }
.badge-success { background: var(--success-bg);  color: var(--success); }
.badge-warning { background: var(--warning-bg);  color: var(--warning); }

/* ── Flash messages ──────────────────────────────────────────────────── */

.flash {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
}
.flash-error   { background: var(--danger-bg);  color: var(--danger-text);  border: 1px solid var(--danger-line); }
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); }
.flash-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-line); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-line); }

/* ── Module grid ─────────────────────────────────────────────────────── */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.module-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 200px;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.module-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.module-icon { height: 48px; width: auto; max-width: 48px; align-self: flex-start; }
.module-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  align-self: flex-start;
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 600;
}
.module-info { flex: 1; }
.module-info h2 { font-size: 1rem; margin-bottom: .375rem; }
.module-info p  { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.module-open { align-self: flex-start; }

.empty-state { max-width: 480px; padding: 3rem 2rem; text-align: center; }
.empty-icon  { font-size: 2rem; margin-bottom: 1rem; color: var(--muted); }
.empty-title { font-weight: 600; margin-bottom: .5rem; }

/* ── Auth layout ─────────────────────────────────────────────────────── */

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand img { height: 84px; width: auto; max-width: 100%; }
.auth-title { font-family: var(--font-brand); font-size: 1.25rem; text-align: center; margin-bottom: 1.5rem; }
.auth-footer { margin-top: 1.25rem; text-align: center; }
.auth-footer a { color: var(--brand-text); }

/* ── Error page ──────────────────────────────────────────────────────── */

.error-card { max-width: 480px; margin: 2rem auto; text-align: center; padding: 2.5rem 2rem; }
.error-code { font-family: var(--font-brand); font-size: 2.5rem; font-weight: 600; color: var(--muted); line-height: 1; }
.error-title { font-family: var(--font-brand); font-size: 1.125rem; margin: .75rem 0 .5rem; }

/* ── Mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page { padding: 1.5rem 1.25rem; }
}
@media (max-width: 640px) {
  .nav { padding: 0 1rem; gap: 1rem; }
  .nav-links { gap: 1.25rem; }
  .page { padding: 1.25rem 1rem; }
  h1 { font-size: 1.2rem; }
  .module-grid { grid-template-columns: 1fr; }
}

/* ── Admin sub-navigation ────────────────────────────────────────────── */

.subnav {
  display: flex;
  gap: 1.25rem;
  margin: -0.75rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
}
.subnav a {
  padding: .5rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subnav a { font-family: var(--font-brand); }
.subnav a:hover { color: var(--text); background: var(--brand-tint); }
/* Weight AND underline, not colour alone (WCAG 1.4.1). */
.subnav a.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--brand-ui);
}


/* ── Links ───────────────────────────────────────────────────────────────
   --brand-text, not --brand-color: the fill colour is 2.52:1 on white and
   unreadable as text. This tone is derived against the TINT ground (the
   darkest of the three it appears on), so it clears 4.5:1 on white, on the
   page ground and on a hovered table row alike. */

a { color: var(--brand-text); }
a:hover { color: var(--brand-hover); }
.nav a, .nav-dropdown-menu a, .subnav a, .btn, .module-card a { color: inherit; }
.module-card .btn-primary { color: var(--brand-on-fill); }
td a { color: var(--brand-text); font-weight: 500; }
td a:hover { text-decoration: underline; }

/* Digits line up wherever they are compared, not only in tables. */
.tabular, .module-card .muted time { font-variant-numeric: tabular-nums; }

/* Inline style attributes are blocked by the CSP (style-src has no
   'unsafe-inline'), so every one-off width or spacing needs a class. */
.input-inline { width: auto; }