/* ---------------------------------------------------------------------------
   AppForge Admin, on top of Bootstrap 5.3
   ---------------------------------------------------------------------------
   Shares the storefront's identity — pine brand, clay for actions, IBM Plex —
   so the site, the documentation and the panel a buyer works in every day all
   look like one product rather than three.
--------------------------------------------------------------------------- */

:root {
  --af-sidebar-w: 248px;
  --af-accent: #14513f;          /* pine */
  --af-accent-2: #1d6e55;
  --af-action: #b8501f;          /* clay — actions only */
  --af-sidebar-bg: #131a17;
  --af-sidebar-text: #96a49d;
  --af-sidebar-active: #ffffff;
}

/* Point Bootstrap's own primary at the brand. Without this every component we
   have not styled by hand — nav pills, links, checks, spinners — keeps shipping
   the default blue next to our pine. */
:root {
  --bs-primary: #14513f;
  --bs-primary-rgb: 20, 81, 63;
  --bs-link-color: #0e3b2e;
  --bs-link-color-rgb: 14, 59, 46;
  --bs-link-hover-color: #b8501f;
  --bs-border-radius: .55rem;
}
[data-bs-theme="dark"] {
  --bs-primary: #4fb392;
  --bs-primary-rgb: 79, 179, 146;
  --bs-link-color: #6fcaab;
  --bs-link-color-rgb: 111, 202, 171;
  --bs-link-hover-color: #e0794a;
}
.btn-primary {
  --bs-btn-bg: var(--af-accent);
  --bs-btn-border-color: var(--af-accent);
  --bs-btn-hover-bg: var(--af-accent-2);
  --bs-btn-hover-border-color: var(--af-accent-2);
  --bs-btn-active-bg: var(--af-accent-2);
  --bs-btn-active-border-color: var(--af-accent-2);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--af-accent);
}
.form-check-input:checked {
  background-color: var(--af-accent);
  border-color: var(--af-accent);
}

[data-bs-theme="light"] body { background: #f2f2ee; }
[data-bs-theme="dark"]  body { background: #0d100e; }
[data-bs-theme="dark"] {
  --af-accent: #4fb392;
  --af-accent-2: #6fcaab;
  --af-action: #e0794a;
}

body {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, .af-brand-name {
  font-family: "IBM Plex Serif", Georgia, serif;
  letter-spacing: -0.012em;
}
code, .font-monospace, .af-stat-value {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- shell ---------- */
.af-shell { display: flex; min-height: 100vh; }

.af-sidebar {
  width: var(--af-sidebar-w);
  background: var(--af-sidebar-bg);
  color: var(--af-sidebar-text);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1040;
  transition: transform .25s ease;
}
.af-main { flex: 1; margin-left: var(--af-sidebar-w); display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 991.98px) {
  .af-sidebar { transform: translateX(-100%); }
  .af-sidebar.open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); }
  .af-main { margin-left: 0; }
}

/* ---------- brand ---------- */
.af-brand {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 20px; }
.af-brand-logo {
  width: 38px; height: 38px; border-radius: 10px; color: #fff;
  background: var(--af-accent);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
}
.af-brand-name { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.1; }
.af-brand-sub { font-size: 11px; color: var(--af-sidebar-text); }

/* ---------- nav ---------- */
/* min-height:0 is what actually lets this scroll: without it the flex item
   grows to its content height and the last menu entries slide under the
   footer on short screens. */
.af-nav { flex: 1 1 auto; min-height: 0; padding: 8px 12px; overflow-y: auto; }
.af-sidebar-foot { flex: 0 0 auto; padding: 8px 12px 16px; border-top: 1px solid rgba(148,163,184,.12); }
.af-nav-link {
  display: flex; align-items: center; gap: 12px;
  color: var(--af-sidebar-text); text-decoration: none;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.af-nav-link i { font-size: 16px; width: 18px; text-align: center; }
.af-nav-link:hover { color: var(--af-sidebar-active); background: rgba(148,163,184,.08); }
/* The active page. A flat pine block with a bright edge reads more clearly
   than a gradient, and keeps the sidebar in the product's palette. */
.af-nav-link.active {
  color: #fff;
  background: var(--af-accent);
  box-shadow: inset 3px 0 0 var(--af-action);
}

/* ---------- topbar ---------- */
.af-topbar {
  height: 60px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; position: sticky; top: 0; z-index: 1030;
  background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color);
}
.af-topbar-title { font-weight: 600; font-size: 16px; flex: 1; }
.af-topbar-actions { display: flex; align-items: center; gap: 8px; }
.af-burger { font-size: 22px; color: var(--bs-body-color); padding: 4px 8px; }
.af-icon-btn { border: 1px solid var(--bs-border-color); border-radius: 8px; }
.af-user-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 4px 12px 4px 4px; }
.af-avatar {
  width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--af-accent), var(--af-accent-2));
  display: grid; place-items: center;
}

/* ---------- content ---------- */
.af-content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }

.af-card {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
[data-bs-theme="dark"] .af-card { background: #111a2e; }

.af-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-bottom: 4px; }
.af-stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; word-break: break-all; }
.af-stat-icon {
  width: 42px; height: 42px; border-radius: 10px; font-size: 19px;
  display: grid; place-items: center; flex-shrink: 0;
}

.af-badge-status { font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px; }
.af-badge-status.active  { background: rgba(52,211,153,.15); color: #059669; }
.af-badge-status.grace   { background: rgba(251,191,36,.15); color: #b45309; }
.af-badge-status.blocked, .af-badge-status.mismatch { background: rgba(248,113,113,.15); color: #dc2626; }
.af-badge-status.inactive { background: rgba(148,163,184,.18); color: #64748b; }
[data-bs-theme="dark"] .af-badge-status.active { color: #34d399; }
[data-bs-theme="dark"] .af-badge-status.grace  { color: #fbbf24; }
[data-bs-theme="dark"] .af-badge-status.blocked, [data-bs-theme="dark"] .af-badge-status.mismatch { color: #f87171; }

.af-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--bs-border-color); font-size: 13.5px; }
.af-kv:last-child { border-bottom: 0; }
.af-kv .k { color: var(--bs-secondary-color); }
.af-kv .v { font-weight: 600; text-align: right; word-break: break-all; }

.af-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin: 4px 0 12px; }

/* ---------- setting toggle rows ---------- */
.af-toggle-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border: 1px solid var(--bs-border-color);
  border-radius: 10px; margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.af-toggle-row:hover { border-color: color-mix(in srgb, var(--af-accent) 45%, transparent); }
.af-toggle-row .af-toggle-icon {
  width: 38px; height: 38px; border-radius: 10px; font-size: 17px; flex-shrink: 0;
  background: color-mix(in srgb, var(--af-accent) 12%, transparent);
  color: var(--af-accent);
  display: grid; place-items: center;
}
.af-toggle-row .af-toggle-text { flex: 1; min-width: 0; }
.af-toggle-row .af-toggle-title { font-weight: 600; font-size: 14px; }
.af-toggle-row .af-toggle-desc { font-size: 12.5px; color: var(--bs-secondary-color); }
.af-toggle-row .form-check { margin: 0; }
.af-toggle-row .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

/* ---------- navigation builder ---------- */
.af-style-card {
  flex: 1; min-width: 150px; cursor: pointer;
  border: 2px solid var(--bs-border-color); border-radius: 12px;
  padding: 14px; text-align: center; position: relative;
  transition: border-color .15s, background .15s;
}
.af-style-card:hover { border-color: color-mix(in srgb, var(--af-accent) 50%, transparent); }
.af-style-card.active { border-color: var(--af-accent); background: color-mix(in srgb, var(--af-accent) 7%, transparent); }
.af-style-card.active::after {
  content: "\F26B"; font-family: "bootstrap-icons";
  position: absolute; top: 8px; right: 10px; color: var(--af-accent); font-size: 15px;
}
.af-style-card .af-style-icon {
  width: 42px; height: 42px; margin: 0 auto 8px; border-radius: 11px; font-size: 19px;
  background: color-mix(in srgb, var(--af-accent) 10%, transparent); color: var(--af-accent);
  display: grid; place-items: center;
}
.af-style-card .af-style-name { font-weight: 600; font-size: 14px; }
.af-style-card .af-style-desc { font-size: 11.5px; color: var(--bs-secondary-color); }

.af-nav-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px; background: var(--bs-body-bg);
  transition: border-color .15s, box-shadow .15s;
}
.af-nav-row:hover { border-color: color-mix(in srgb, var(--af-accent) 45%, transparent); }
.af-nav-row.dragging { opacity: .4; }
.af-nav-row .af-nav-grip { color: var(--bs-secondary-color); cursor: grab; font-size: 16px; }
.af-nav-row .af-nav-ico {
  width: 36px; height: 36px; border-radius: 9px; font-size: 16px; flex-shrink: 0;
  background: color-mix(in srgb, var(--af-accent) 10%, transparent); color: var(--af-accent);
  display: grid; place-items: center;
}

/* ---------- forms ---------- */
.form-label { font-size: 13.5px; font-weight: 600; }
.form-text { font-size: 12px; }
.invalid-feedback { display: block; }

/* ---------- login page ---------- */
.af-login-body {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--af-accent) 25%, transparent), transparent),
              radial-gradient(1000px 500px at 110% 110%, color-mix(in srgb, var(--af-accent-2) 20%, transparent), transparent),
              #0f172a;
}
.af-login-card {
  width: 100%; max-width: 400px; background: #111a2e; color: #e2e8f0;
  border: 1px solid #26324a; border-radius: 16px; padding: 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.af-login-card .form-control {
  background: #101713; border-color: #27332c; color: #e4ece7;
}
.af-login-card .form-control:focus {
  border-color: var(--af-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--af-accent) 25%, transparent);
}
/* The one button that commits a change. Clay rather than the brand pine, so a
   save reads differently from the chrome around it. */
.btn-af {
  background: var(--af-action);
  color: #fff; border: 0; font-weight: 500;
}
.btn-af:hover, .btn-af:focus { color: #fff; filter: brightness(1.07); }

/* Icon chip on the activity counters. Tokenised so it follows the theme; it
   used to be three hardcoded hexes that ignored dark mode entirely. */
.af-stat-icon[data-tone="accent"] {
  background: color-mix(in srgb, var(--af-accent) 14%, transparent);
  color: var(--af-accent);
}

/* Names the group a row of cards belongs to. The identity cards and the
   activity counters look different because they are different; this says so. */
.af-row-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 500;
  color: var(--bs-secondary-color);
  margin: 0 0 .5rem 2px;
}