/*
  AreaCli design tokens.

  Signature: the "régua de atraso" (aging ramp) — a continuous 6-stop scale
  from em-dia to atraso crítico. It is the one recurring visual idea across
  the app: invoice/negotiation status badges, delay-band editor rows, and the
  client cockpit summary all read the same ramp, because "how many days late"
  is the single fact this whole product organizes itself around. Deliberately
  not flat Bootstrap success/warning/danger — those only have 3 steps and the
  domain has continuous, policy-defined bands.
*/

:root {
  --al-ink: #10151f;
  --al-ink-soft: #1b2333;
  --al-paper: #f6f5f2;
  --al-paper-raised: #ffffff;
  --al-line: #dad6cc;
  --al-text: #1a1d24;
  --al-text-muted: #5b5f6b;
  --al-accent: #2c5f6f;
  --al-accent-strong: #1f4552;
  --al-accent-contrast: #eaf3f2;

  --al-age-0: #2d7b5a;
  --al-age-1: #60772e;
  --al-age-2: #8b6a20;
  --al-age-3: #aa5929;
  --al-age-4: #a33b2e;
  --al-age-5: #6e1f24;

  --al-font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --al-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

:root[data-bs-theme="dark"] {
  --al-ink: #0b0e16;
  --al-ink-soft: #161c29;
  --al-paper: #12151d;
  --al-paper-raised: #191d28;
  --al-line: #2b303d;
  --al-text: #e7e6e2;
  --al-text-muted: #9a9fae;
  --al-accent: #6fb3c4;
  --al-accent-strong: #8fc7d6;
  --al-accent-contrast: #16262a;

  --al-age-0: #367b5c;
  --al-age-1: #62762e;
  --al-age-2: #8a6a18;
  --al-age-3: #b0561c;
  --al-age-4: #c24332;
  --al-age-5: #9c4650;
}

body {
  font-family: var(--al-font-ui);
  background-color: var(--al-paper);
  color: var(--al-text);
}

/* Classic AdminLTE two-tone shell: light header (chrome, breadcrumbs, tenant
   switcher) + dark sidebar (wayfinding). Both painted the same near-black was
   the bug — it read as "everything thrown in black" instead of a dashboard. */
.app-header {
  background-color: var(--al-paper-raised) !important;
  border-bottom: 1px solid var(--al-line);
}

.app-sidebar {
  background-color: var(--al-ink-soft) !important;
}

.brand-link {
  color: #ffffff !important;
  font-family: var(--al-font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Active/hover nav item picks up the brand accent instead of a generic
   dark-on-dark overlay, so wayfinding has a real focal color. */
.app-sidebar .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active {
  background-color: var(--al-accent);
  color: #ffffff;
}

.app-sidebar .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover,
.app-sidebar .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.08);
}

.app-sidebar .sidebar-wrapper .nav-header {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  padding-top: 0.75rem;
}

.al-mono,
.al-money,
.al-public-code {
  font-family: var(--al-font-mono);
  font-variant-numeric: tabular-nums;
}

.al-money {
  font-weight: 500;
}

h1, h2, h3, h4, h5, .app-content-header h3 {
  font-family: var(--al-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card {
  border-color: var(--al-line);
  background-color: var(--al-paper-raised);
}

/* Aging ramp badge: background/text derived from --age-stop, set inline per row. */
.al-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-family: var(--al-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  background-color: var(--al-age-color, var(--al-text-muted));
  white-space: nowrap;
}

.al-age-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--al-age-color, var(--al-text-muted));
  display: inline-block;
  flex: none;
}

.al-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--al-ink) 0%, var(--al-ink-soft) 100%);
}

.al-login-card {
  width: min(380px, 92vw);
  background-color: var(--al-paper-raised);
  border-radius: 6px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.al-login-card .al-wordmark {
  font-family: var(--al-font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-accent);
  margin-bottom: 0.25rem;
}

.al-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--al-text-muted);
}