/* ═══════════════════════════════════════════════════
   ETM Log · Theme & Design System
   Shared across all dashboard pages
   ═══════════════════════════════════════════════════ */

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

/* ── DESIGN TOKENS ── */
:root{
  /* Surfaces */
  --bg:#09090f;
  --s1:#0f1019;
  --s2:#15161f;
  --s3:#1c1d2a;

  /* Borders */
  --b:rgba(255,255,255,0.07);
  --b2:rgba(255,255,255,0.13);

  /* Text */
  --tx:#ecedf5;
  --mu:#55576e;
  --mu2:#8a8da8;

  /* Accent palette */
  --blue:#4f7aff;
  --green:#00c896;
  --amber:#f5a623;
  --red:#ff4f6a;
  --purple:#9d7dff;
  --cyan:#22d3ee;

  /* Typography — fluid scale using clamp() */
  --font:'Plus Jakarta Sans',sans-serif;
  --fs-body:    clamp(14px, 0.85rem + 0.25vw, 17px);
  --fs-xs:      clamp(10px, 0.55rem + 0.2vw,  12px);
  --fs-sm:      clamp(11px, 0.6rem + 0.2vw,   13px);
  --fs-md:      clamp(13px, 0.75rem + 0.25vw,  16px);
  --fs-lg:      clamp(15px, 0.9rem + 0.3vw,    19px);
  --fs-xl:      clamp(17px, 1rem + 0.35vw,     22px);
  --fs-2xl:     clamp(20px, 1.15rem + 0.5vw,   28px);
  --fs-gauge:   clamp(28px, 1.6rem + 0.7vw,    36px);

  /* Label / uppercase tracking */
  --fs-label:   clamp(10px, 0.55rem + 0.18vw, 12px);

  /* Spacing — fluid */
  --sp-xs:  clamp(4px, 0.25rem + 0.15vw, 6px);
  --sp-sm:  clamp(8px, 0.45rem + 0.25vw, 12px);
  --sp-md:  clamp(14px, 0.8rem + 0.35vw, 20px);
  --sp-lg:  clamp(20px, 1.1rem + 0.5vw, 28px);
  --sp-xl:  clamp(28px, 1.5rem + 0.7vw, 40px);

  /* Radii */
  --r:10px;
  --r2:16px;
}

/* ── BASE ── */
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--font);
  font-size:var(--fs-body);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── GRID BACKGROUND (shared subtle grid) ── */
.bg-grid{
  background-image:
    linear-gradient(rgba(79,122,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,122,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
}
.bg-grid-hero{
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(79,122,255,.06),transparent 60%),
    linear-gradient(rgba(79,122,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,122,255,.015) 1px,transparent 1px);
  background-size:100% 100%,48px 48px,48px 48px;
}

/* ── WRAP / CONTAINER ── */
.wrap{
  max-width:clamp(900px, 80vw, 1680px);
  margin:0 auto;
  padding:var(--sp-lg) var(--sp-lg);
}

/* ── HEADER ── */
.hdr{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:var(--sp-md);
  padding-bottom:var(--sp-md);
  border-bottom:1px solid var(--b);
}
.hdr-l{display:flex;align-items:center;gap:var(--sp-sm);}
.logo{
  width:clamp(28px, 1.8vw, 36px);
  height:clamp(28px, 1.8vw, 36px);
  border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:800;color:#fff;flex-shrink:0;
}
.hdr h1{
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.4px;
}
.hdr-meta{
  font-size:var(--fs-sm);
  color:var(--mu2);
  margin-top:3px;
  font-weight:500;
  font-family:monospace;
}
.hdr-r{display:flex;gap:var(--sp-sm);align-items:center;}

/* ── LIVE PILL ── */
.live{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,200,150,.08);
  border:1px solid rgba(0,200,150,.2);
  color:var(--green);
  padding:4px 10px;border-radius:20px;
  font-size:var(--fs-xs);font-weight:700;
}
.live-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ── BUTTON ── */
.btn{
  background:var(--s2);border:1px solid var(--b2);
  color:var(--mu2);
  padding:6px 14px;border-radius:var(--r);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:all .15s;
}
.btn:hover{background:var(--s3);color:var(--tx);}

/* ── LOADING BAR ── */
.lbar{height:2px;background:var(--b);border-radius:1px;margin-bottom:var(--sp-md);overflow:hidden;display:none;}
.lbar.on{display:block;}
.lfill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));animation:la 1.8s ease-in-out infinite;}
@keyframes la{0%{width:0%;margin-left:0}50%{width:55%;margin-left:22%}100%{width:0%;margin-left:100%}}

/* ── FILTER BAR ── */
.fbar{
  display:flex;gap:var(--sp-sm);flex-wrap:wrap;
  margin-bottom:var(--sp-md);
  background:var(--s1);border:1px solid var(--b);border-radius:var(--r2);
  padding:var(--sp-sm) var(--sp-md);
  align-items:flex-end;
}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{
  font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--mu);
}
.fg select{
  background:var(--s2);border:1px solid var(--b2);color:var(--tx);
  padding:7px 12px;border-radius:var(--r);
  font-family:var(--font);font-size:var(--fs-sm);font-weight:500;
  outline:none;transition:border-color .15s;color-scheme:dark;
  min-width:150px;appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2355576e'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(79,122,255,.1);}
.fsep{width:1px;background:var(--b);margin:0 2px;align-self:stretch;}

/* ── CONTEXT BANNER ── */
.ctx-banner{
  background:var(--s1);border:1px solid var(--b);border-radius:var(--r2);
  padding:var(--sp-md) var(--sp-lg);
  margin-bottom:var(--sp-md);
  display:flex;gap:var(--sp-lg);flex-wrap:wrap;align-items:center;
}
.ctx-item{display:flex;flex-direction:column;gap:2px;}
.ctx-label{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);}
.ctx-val{font-size:var(--fs-lg);font-weight:700;}
.ctx-val.on-track{color:var(--green);}
.ctx-val.behind{color:var(--amber);}
.ctx-val.critical{color:var(--red);}

/* ── GAUGE GRID ── */
.gauge-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-md);
  margin-bottom:var(--sp-md);
}

/* ── GAUGE CARD ── */
.gauge-card{
  background:var(--s1);border:1px solid var(--b);border-radius:var(--r2);
  padding:var(--sp-lg);
  position:relative;overflow:hidden;
  transition:border-color .2s;
  display:flex;flex-direction:column;
}
.gauge-card:hover{border-color:var(--b2);}
.gc-bar{position:absolute;top:0;left:0;right:0;height:2px;}
.gc-title{
  font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;
  color:var(--mu2);margin-bottom:var(--sp-sm);
}
.gc-gauge{
  position:relative;
  width:clamp(150px, 12vw, 200px);
  height:clamp(85px, 6.5vw, 110px);
  margin:0 auto var(--sp-sm);
}
.gc-nums{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;}
.gc-real-wrap{display:flex;flex-direction:column;}
.gc-real-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);margin-bottom:1px;}
.gc-real{font-size:var(--fs-gauge);font-weight:800;letter-spacing:-1px;line-height:1;}
.gc-meta-wrap{display:flex;flex-direction:column;margin-left:auto;text-align:right;}
.gc-meta-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);margin-bottom:1px;}
.gc-meta{font-size:var(--fs-lg);font-weight:700;color:var(--mu2);line-height:1;}
.gc-info{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;}
.gc-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);}
.gc-row .label{color:var(--mu2);font-weight:500;}
.gc-row .value{font-weight:700;font-family:monospace;}

/* Pacing */
.gc-pacing{padding-top:var(--sp-sm);border-top:1px solid var(--b);}
.gc-pacing-label{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);margin-bottom:4px;}
.gc-pacing-bar{height:4px;background:var(--s3);border-radius:2px;overflow:hidden;position:relative;}
.gc-pacing-fill{height:100%;border-radius:2px;transition:width .4s ease;}
.gc-pacing-marker{position:absolute;top:-2px;width:2px;height:8px;background:var(--tx);border-radius:1px;transition:left .4s ease;}
.gc-status{font-size:var(--fs-sm);font-weight:700;margin-top:4px;text-align:right;}

/* Conversion */
.gc-conv{margin-top:var(--sp-sm);padding-top:var(--sp-sm);border-top:1px solid var(--b);}
.gc-conv-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--mu);margin-bottom:6px;}
.gc-conv-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.gc-conv-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--mu);width:55px;text-align:right;flex-shrink:0;}
.gc-conv-track{flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden;}
.gc-conv-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.gc-conv-val{font-size:var(--fs-sm);font-weight:800;width:44px;text-align:right;font-family:monospace;flex-shrink:0;}
.gc-conv-diff{font-size:var(--fs-sm);font-weight:700;text-align:center;margin-top:2px;}

/* ── CARD ── */
.card{
  background:var(--s1);border:1px solid var(--b);border-radius:var(--r2);
  padding:var(--sp-lg);
  margin-bottom:var(--sp-md);
}
.ct{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.2px;margin-bottom:2px;}
.cs{font-size:var(--fs-sm);color:var(--mu2);margin-bottom:var(--sp-md);font-weight:500;}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;color:var(--mu);
  text-align:left;padding:var(--sp-sm) var(--sp-sm);
  border-bottom:1px solid var(--b2);
}
.tbl th.r{text-align:right;}
.tbl td{
  font-size:var(--fs-md);font-weight:500;
  padding:var(--sp-sm);
  border-bottom:1px solid var(--b);
}
.tbl td.r{text-align:right;font-family:monospace;font-weight:700;}
.tbl tr:last-child td{border-bottom:none;}
.tbl .good{color:var(--green);}
.tbl .warn{color:var(--amber);}
.tbl .bad{color:var(--red);}

/* ── STATE (loading / error) ── */
.estado{text-align:center;padding:60px 20px;}
.estado h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-sm);color:var(--mu2);}
.estado p{font-size:var(--fs-sm);color:var(--mu);max-width:500px;margin:0 auto;}
.spin{
  width:28px;height:28px;
  border:2px solid var(--b2);border-top-color:var(--blue);
  border-radius:50%;animation:spin .7s linear infinite;
  margin:0 auto var(--sp-md);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FOOTER ── */
.footer{
  text-align:center;
  padding-top:var(--sp-md);
  border-top:1px solid var(--b);
  font-size:var(--fs-xs);
  color:var(--mu);
  font-weight:500;
  margin-top:var(--sp-sm);
  font-family:monospace;
}

/* ── STATUS BAR (index page) ── */
.status-bar{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-md);
  padding:var(--sp-md) 0;margin-bottom:var(--sp-lg);
}
.st-item{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--mu);}
.st-dot{width:6px;height:6px;border-radius:50%;}
.st-dot.on{background:var(--green);box-shadow:0 0 8px rgba(0,200,150,.4);animation:pulse 2.5s ease-in-out infinite;}
.st-dot.off{background:var(--mu);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── ANIMATIONS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════ */

/* Small screens */
@media(max-width:600px){
  .wrap{padding:var(--sp-md) var(--sp-sm);}
  .gauge-grid{grid-template-columns:1fr;}
  .ctx-banner{gap:var(--sp-md);padding:var(--sp-sm) var(--sp-md);}
}

/* Medium screens */
@media(max-width:1100px){
  .gauge-grid{grid-template-columns:repeat(2,1fr);}
}

/* Large screens — breathe more */
@media(min-width:1600px){
  :root{
    --fs-body:    17px;
    --fs-xs:      12px;
    --fs-sm:      14px;
    --fs-md:      16px;
    --fs-lg:      20px;
    --fs-xl:      24px;
    --fs-2xl:     30px;
    --fs-gauge:   38px;
    --fs-label:   12px;
  }
  .wrap{padding:var(--sp-xl) var(--sp-xl);}
}

/* Extra-large screens */
@media(min-width:2000px){
  :root{
    --fs-body:    18px;
    --fs-sm:      15px;
    --fs-md:      17px;
    --fs-lg:      22px;
    --fs-xl:      26px;
    --fs-gauge:   42px;
  }
}