/* ═══════════════════════════════════════════════════
   OrbiChain Distri — base.css
   Design system: Ivory Ledger
   S4S / Sector4Solutions · BR Telelink SZD
   ═══════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

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

html, body {
  height: 100%;
  overflow: hidden;
}

/* ── Design Tokens ── */
:root {
  /* Ivory Ledger palette */
  --base:   #faf8f5;
  --surf:   #ffffff;
  --surf2:  #f0eeeb;
  --bdr:    #e8e4de;
  --bdr2:   #d4d0ca;

  /* Ink */
  --ink:    #1a1a2e;
  --ink2:   #2d2d44;
  --mu:     #8a8a9a;

  /* Teal accent */
  --ac:     #0d7377;
  --ach:    #0a5c60;
  --acs:    rgba(13, 115, 119, .07);
  --acs2:   rgba(13, 115, 119, .15);

  /* Status */
  --ok:     #2a7d4f;
  --wn:     #b17a00;
  --dg:     #c0392b;

  /* ASM colours */
  --asm-a:  #0d7377;
  --asm-b:  #2a7d4f;
  --asm-c:  #b17a00;
  --asm-d:  #c0392b;
  --asm-e:  #8b5cf6;

  /* Layout */
  --sw:     230px;   /* sidebar width */
  --th:     52px;    /* topbar height */
  --r:      8px;
  --rl:     12px;
}

/* ── Base typography ── */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings use Sora ── */
.font-sora  { font-family: 'Sora', sans-serif; }
.font-mono  { font-family: 'DM Mono', monospace; }

/* ── Scrollbar global ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surf2) transparent;
}
*::-webkit-scrollbar       { width: 4px; height: 4px; }
*::-webkit-scrollbar-thumb { background: var(--surf2); border-radius: 3px; }

/* ── Text utilities ── */
.pos  { color: var(--ok); }
.neg  { color: var(--dg); }
.mute { color: var(--mu); }
.warn { color: var(--wn); }
.ac   { color: var(--ac); font-weight: 700; font-family: 'DM Mono', monospace; }

/* ── Number display ── */
.num {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
}

/* ── Eyebrow label ── */
.ey {
  font-size: .59rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ac);
  margin-bottom: 2px;
}

/* ── Page title ── */
.page-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.5px;
}

/* ── Sub text ── */
.sub {
  font-size: .71rem;
  color: var(--mu);
  margin-top: 2px;
}

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .58rem;
  font-weight: 700;
}
.b-ok { background: rgba(42,125,79,.1);    color: var(--ok); }
.b-wn { background: rgba(177,122,0,.1);    color: var(--wn); }
.b-dg { background: rgba(192,57,43,.1);    color: var(--dg); }
.b-bl { background: rgba(13,115,119,.1);   color: var(--ac); }
.b-pu { background: rgba(139,92,246,.1);   color: #7c3aed;   }
.b-mu { background: rgba(138,138,154,.14); color: var(--mu); }

/* ── Status tag (topbar pills) ── */
.stag {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: .61rem;
  font-weight: 600;
  border: 1px solid;
}
.stag-teal {
  background: rgba(13,115,119,.06);
  border-color: rgba(13,115,119,.2);
  color: var(--ac);
}
.stag-green {
  background: rgba(42,125,79,.06);
  border-color: rgba(42,125,79,.2);
  color: var(--ok);
}
.sdot {
  width: 4px; height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sdot-teal  { background: var(--ac); }
.sdot-green { background: var(--ok); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--r);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--bdr2);
  background: #fff;
  color: var(--ink2);
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover                 { border-color: var(--ac); color: var(--ac); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(13,115,119,.1); }
.btn:active                { transform: translateY(0); box-shadow: none; }
.btn svg                   { width: 12px; height: 12px; }
.btn-primary               { background: linear-gradient(135deg,var(--ac),#14a8ac); color: #fff; border-color: var(--ac); }
.btn-primary:hover         { background: linear-gradient(135deg,var(--ach),var(--ac)); color: #fff; box-shadow: 0 3px 10px rgba(13,115,119,.25); }
.btn-success               { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-success:hover         { background: #22663f; color: #fff; }
.btn-sm                    { padding: 3px 8px; font-size: .65rem; }
.btn:disabled              { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }

/* ── Motion ──
   Only the outer view fades in on navigation (fires once per page switch).
   Cards/KPIs intentionally do NOT animate on their own — they get rebuilt on
   every tab/filter click, and animating each rebuild caused visible flicker
   and made the UI feel slower than it is. */
@media (prefers-reduced-motion: no-preference) {
  .view.active   { animation: viewIn .22s cubic-bezier(.22,.9,.32,1); }
}
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Focus ring ── */
input:focus, select:focus, textarea:focus, button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--acs2);
}

/* ── Slim scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--mu); }

/* ── Form elements ── */
.fsel {
  padding: 4px 7px;
  border: 1px solid var(--bdr2);
  border-radius: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: .71rem;
  color: var(--ink2);
  background: #fff;
  outline: none;
  cursor: pointer;
}
.fsel:focus { border-color: var(--ac); }

input.fsel { cursor: text; }

/* ── Tab groups ── */
.tabs {
  display: flex;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 3px;
  gap: 2px;
}
.tab {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: .67rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--mu);
  white-space: nowrap;
  border: none;
  background: none;
}
.tab.act {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
.tab:hover:not(.act) { color: var(--ink); }

/* ── Toast container ── */
#toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--rl);
  font-size: .73rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: toastIn .25s ease;
  max-width: 300px;
  pointer-events: all;
}
.toast-ok { background: var(--ok); }
.toast-dg { background: var(--dg); }
.toast-wn { background: var(--wn); }

@keyframes toastIn  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { transform: translateX(110%); opacity: 0; } }

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--surf) 25%, var(--surf2) 50%, var(--surf) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Auth overlay — split panel (brand left, form right) ── */
#auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--base);
  z-index: 9999;
  display: flex;
}
#auth-overlay.hidden { display: none; }
.auth-brand-panel {
  flex: 1;
  display: none;
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ach) 60%, var(--ac) 100%);
  overflow: hidden;
}
@media (min-width: 760px) { .auth-brand-panel { display: flex; align-items: center; justify-content: center; } }
.auth-brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.auth-brand-content { position: relative; text-align: center; padding: 0 40px; }
.auth-brand-orbit { width: 88px; height: 88px; margin: 0 auto 24px; }
.auth-brand-title { font-family: 'Sora', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.auth-brand-title span { color: #7fd6d1; }
.auth-brand-sub { font-size: .8rem; color: rgba(255,255,255,.7); margin-top: 8px; }
.auth-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }

/* ── Startup orbit animation (loading state, before auth resolves) ──
   Positioned independently of #auth-overlay's own flex layout (which the
   two-panel login form needs full-height, unstretched children for) via
   absolute+transform centering, so it's centered no matter what else the
   overlay's flex settings are doing. */
.boot-loading-wrap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* ── Loader spinner ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--surf2);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 860px) {
  :root { --sw: 0px; }
}