/* ============================================================
   AlfaMonitor Web — softened design system
   Catppuccin Mocha/Latte · Geist (UI) + JetBrains Mono (data)
   ============================================================ */

:root {
  /* dark — Catppuccin Mocha, softened */
  --crust:#0f0f17; --mantle:#16161f; --base:#1c1c27;
  --surface:#21212e; --surface2:#2a2a3a;
  --line:#2c2c3c; --line-soft:#24242f;
  --s2:#585b70;
  --ov0:#6c7086; --ov1:#838aa3; --ov2:#9aa0b8;
  --sub0:#aab0c8; --sub1:#c2c7dd; --text:#dfe3f2;

  --mauve:#cba6f7; --mauve-ink:#1c1c27;
  --blue:#89b4fa; --green:#a6e3a1; --peach:#fab387;
  --yellow:#f9e2af; --red:#f38ba8; --lavender:#b4befe; --teal:#94e2d5;

  --shadow-card:0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.6);
  --r-card:16px; --r-tile:13px; --r-pill:11px; --r-input:9px;

  --font-ui:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  --maxw:1280px;
}

[data-theme="light"] {
  /* light — Catppuccin Latte, softened */
  --crust:#e8eaf0; --mantle:#eef0f6; --base:#ffffff;
  --surface:#f7f8fc; --surface2:#eef0f7;
  --line:#dfe2ec; --line-soft:#e8ebf3;
  --s2:#9ca0b8;
  --ov0:#8c8fa1; --ov1:#6e7186; --ov2:#5c5f72;
  --sub0:#565969; --sub1:#494c5c; --text:#3a3c4e;

  --mauve:#8839ef; --mauve-ink:#ffffff;
  --blue:#1e66f5; --green:#2fa33b; --peach:#e8650b;
  --yellow:#c98a08; --red:#d20f39; --lavender:#7287fd; --teal:#179299;

  --shadow-card:0 1px 2px rgba(76,79,105,.07), 0 10px 28px -16px rgba(76,79,105,.28);
  --shadow-pop:0 20px 56px -16px rgba(76,79,105,.32);
}

* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  font-family:var(--font-ui);
  background:var(--crust); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14px; line-height:1.5;
}
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num  { font-variant-numeric:tabular-nums; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
::selection { background:color-mix(in srgb,var(--mauve) 32%,transparent); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { min-height:100%; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:18px;
  padding:0 26px; height:62px;
  background:color-mix(in srgb,var(--mantle) 86%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand .mark {
  width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:block; object-fit:contain;
  box-shadow:0 2px 10px -3px rgba(0,0,0,.5);
}
.brand .bname { font-family:"Righteous", var(--font-ui); font-size:18px; font-weight:400; letter-spacing:.5px; text-transform:uppercase; }
.brand .bname b { color:var(--text); font-weight:400; }
.brand .bname span { color:var(--ov1); font-weight:400; }

.tabs { display:flex; gap:3px; flex:0 0 auto; margin-left:6px; }
.tabs button {
  border:0; background:transparent; color:var(--ov1); cursor:pointer;
  font-size:13.5px; font-weight:500; padding:8px 15px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:8px; transition:.16s ease; white-space:nowrap;
}
.tabs button svg { width:15px; height:15px; opacity:.85; }
.tabs button:hover { color:var(--sub0); background:color-mix(in srgb,var(--surface2) 60%,transparent); }
.tabs button.on { color:var(--lavender); background:color-mix(in srgb,var(--mauve) 16%,transparent); font-weight:600; }
[data-theme="light"] .tabs button.on { color:var(--mauve); }

.topbar .spacer { flex:1 1 auto; }

/* global search */
.gsearch { position:relative; flex:0 1 260px; display:flex; align-items:center; }
.gsearch svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ov1); pointer-events:none; }
.gsearch span { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; }
.gsearch input {
  width:100%; font:inherit; font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px 8px 34px; outline:none; transition:.16s ease;
}
.gsearch input::placeholder { color:var(--ov0); }
.gsearch input:focus { border-color:var(--mauve); background:var(--base); box-shadow:0 0 0 3px color-mix(in srgb,var(--mauve) 16%,transparent); }
.gsearch kbd {
  position:absolute; right:9px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:10.5px; color:var(--ov0);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; background:var(--mantle); line-height:1.4;
}

.iconbtn {
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ov1); cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; transition:.16s ease;
}
.iconbtn:hover { color:var(--text); border-color:var(--s2); }
.iconbtn svg { width:16px; height:16px; }

.userchip { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.userchip .av {
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:var(--surface2); color:var(--sub0); display:grid; place-items:center;
  font-size:12px; font-weight:600; border:1px solid var(--line);
}
.userchip .uname { font-size:13px; font-weight:500; color:var(--sub1); }
.userchip .urole {
  font-size:9.5px; font-weight:700; letter-spacing:.6px; color:var(--mauve);
  border:1px solid color-mix(in srgb,var(--mauve) 40%,transparent); border-radius:5px;
  padding:1px 6px; background:color-mix(in srgb,var(--mauve) 12%,transparent);
}
.logout {
  font:inherit; font-size:13px; font-weight:500; color:var(--ov1); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:9px; padding:7px 14px; transition:.16s ease;
}
.logout:hover { color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,transparent); }

/* mobile menu button */
.menubtn { display:none; }

/* ============================================================
   PAGE
   ============================================================ */
.page { flex:1 1 auto; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:26px 26px 64px; }

.pagehead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.pagehead .ph-back {
  display:inline-flex; align-items:center; gap:6px; color:var(--ov1); font-size:13px;
  cursor:pointer; padding:5px 10px; border-radius:8px; transition:.16s ease; white-space:nowrap;
}
.pagehead .ph-back:hover { color:var(--lavender); background:color-mix(in srgb,var(--surface2) 60%,transparent); }
.pagehead .ph-back svg { width:14px; height:14px; }
.updated { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ov0); white-space:nowrap; }
.updated .live {
  width:7px; height:7px; border-radius:50%; background:var(--green); position:relative; flex:0 0 auto;
}
.updated .live::after {
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--green);
}
@media (prefers-reduced-motion:no-preference) {
  .updated .live::after { animation:ampulse 2.4s ease-out infinite; }
}
@keyframes ampulse { 0%{transform:scale(1);opacity:.55} 100%{transform:scale(3.4);opacity:0} }
.updated b { color:var(--sub0); font-weight:600; }

/* section label */
.section { margin:30px 0 14px; display:flex; align-items:center; gap:12px; }
.section:first-of-type { margin-top:20px; }
.section h2 {
  margin:0; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ov2); white-space:nowrap;
}
.section .scount {
  font-size:11.5px; font-weight:600; color:var(--ov0); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px; font-variant-numeric:tabular-nums;
}
.section .sline { flex:1 1 auto; height:1px; background:var(--line-soft); }

/* ============================================================
   SUMMARY STAT TILES
   ============================================================ */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:18px; }
.stat {
  background:var(--base); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 20px; box-shadow:var(--shadow-card); display:flex; align-items:center; gap:16px;
}
.stat .sicon {
  width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
}
.stat .sicon svg { width:21px; height:21px; }
.stat .sv { font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1.05; font-variant-numeric:tabular-nums; }
.stat .sl { font-size:12.5px; color:var(--ov1); margin-top:2px; }
.tint-green { background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
.tint-blue  { background:color-mix(in srgb,var(--blue) 15%,transparent); color:var(--blue); }
.tint-mauve { background:color-mix(in srgb,var(--mauve) 15%,transparent); color:var(--mauve); }
.tint-peach { background:color-mix(in srgb,var(--peach) 15%,transparent); color:var(--peach); }

/* ============================================================
   CARDS GRID
   ============================================================ */
.grid-servers { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.grid-monitors { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.grid-sources { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

.card {
  background:var(--base); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); overflow:hidden; position:relative; transition:border-color .16s ease, transform .16s ease;
}
.card.link { cursor:pointer; }
.card.link:hover { border-color:var(--s2); transform:translateY(-2px); }
.card .accent { position:absolute; left:0; top:0; bottom:0; width:3px; }
.acc-ok { background:var(--green); } .acc-warn { background:var(--yellow); } .acc-crit { background:var(--red); }

.card-h { display:flex; align-items:center; gap:11px; padding:16px 18px 12px; }
.card-h .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.dot.ok { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent); }
.dot.warn { background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 18%,transparent); }
.dot.crit { background:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent); }
.card-h .ttl { min-width:0; flex:1 1 auto; }
.card-h .ttl .nm { font-size:14.5px; font-weight:600; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-h .ttl .sub { font-size:11.5px; color:var(--ov0); margin-top:1px; }

.badge {
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.2px; padding:3px 9px 3px 8px; border-radius:var(--r-pill);
}
.badge .bd { width:6px; height:6px; border-radius:50%; }
.badge.ok { background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
.badge.ok .bd { background:var(--green); }
.badge.warn { background:color-mix(in srgb,var(--yellow) 16%,transparent); color:var(--yellow); }
.badge.warn .bd { background:var(--yellow); }
.badge.crit { background:color-mix(in srgb,var(--red) 15%,transparent); color:var(--red); }
.badge.crit .bd { background:var(--red); }
.badge.neutral { background:var(--surface2); color:var(--sub0); font-weight:500; }

/* server metrics */
.metrics { padding:4px 18px 18px; display:flex; flex-direction:column; gap:14px; }
.metric .mtop { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.metric .ml { font-size:12px; font-weight:500; color:var(--ov2); }
.metric .mv { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.track { height:8px; border-radius:5px; background:var(--surface2); overflow:hidden; }
.track > span { display:block; height:100%; border-radius:5px; transition:width .5s cubic-bezier(.2,.7,.3,1); }
.metric .mx { font-size:11px; color:var(--ov0); margin-top:6px; font-variant-numeric:tabular-nums; }
.fill-cpu { background:var(--blue); } .fill-mem { background:var(--green); } .fill-dsk { background:var(--peach); }
.fill-warn { background:var(--yellow); } .fill-crit { background:var(--red); }
.v-cpu { color:var(--blue); } .v-mem { color:var(--green); } .v-dsk { color:var(--peach); }
.v-warn { color:var(--yellow); } .v-crit { color:var(--red); }

/* ============================================================
   MONITOR (uptime) card
   ============================================================ */
.mon-state { padding:0 18px 2px; font-size:14px; font-weight:700; }
.mon-state.ok { color:var(--green); } .mon-state.warn { color:var(--yellow); } .mon-state.crit { color:var(--red); }
.mon-state small { color:var(--ov1); font-weight:500; font-size:12px; }
.hb { display:flex; align-items:flex-end; gap:3px; height:34px; padding:10px 18px 6px; }
.hb i { flex:1 1 0; min-width:3px; border-radius:2px; height:60%; align-self:flex-end; transition:height .2s ease; }
.hb i.up { background:var(--green); height:100%; }
.hb i.slow { background:var(--yellow); height:78%; }
.hb i.down { background:var(--red); height:46%; }
.mon-f { display:flex; align-items:flex-end; gap:8px; padding:6px 18px 16px; }
.mon-f .mstat { flex:1 1 0; }
.mon-f .msl { font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--ov0); }
.mon-f .msv { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--sub1); margin-top:3px; }

/* device source mini card */
.src-body { padding:2px 18px 18px; display:flex; flex-direction:column; gap:1px; }
.src-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
.src-row + .src-row { border-top:1px solid var(--line-soft); }
.src-row .sk { font-size:12.5px; color:var(--ov1); }
.src-row .sv { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ============================================================
   VIEW TOGGLE + COMPACT LIST (dashboard density)
   ============================================================ */
.vtoggle { display:flex; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:4px; flex:0 0 auto; }
.vtoggle button { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--ov1);
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:8px; cursor:pointer; transition:.14s ease; }
.vtoggle button svg { width:14px; height:14px; }
.vtoggle button:hover { color:var(--sub0); }
.vtoggle button.on { background:var(--surface2); color:var(--text); }

.clist { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; }
.crow { display:grid; align-items:center; gap:18px; padding:11px 18px; }
.clist.srv .crow { grid-template-columns:minmax(170px,1.4fr) 1fr 1fr 1fr 64px; }
.clist.mon .crow { grid-template-columns:minmax(190px,1.6fr) 104px 1fr 64px 78px; }
.clist.src .crow { grid-template-columns:minmax(190px,1fr) 110px 90px; }
.crow.chead { background:var(--surface); padding:9px 18px; }
.crow.chead .ch { font-size:10px; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--ov0); }
.crow.chead .ch.num { text-align:right; }
.crow:not(.chead) { box-shadow:inset 0 -1px 0 var(--line-soft); transition:background .12s ease; }
.crow:not(.chead):last-child { box-shadow:none; }
.crow:not(.chead):hover { background:color-mix(in srgb,var(--surface2) 45%,transparent); }
.crow.link { cursor:pointer; }
.cname { display:flex; align-items:center; gap:11px; min-width:0; }
.cname .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.cname .cmeta { min-width:0; }
.cname .cn { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cname .cip { font-size:11px; color:var(--ov0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccell { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ccell .cv { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.cbar { height:5px; border-radius:3px; background:var(--surface2); overflow:hidden; }
.cbar > span { display:block; height:100%; border-radius:3px; }
.cnum { text-align:right; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--sub1); }
.crow .badge { justify-self:start; }
.chb { display:flex; align-items:flex-end; gap:2px; height:20px; }
.chb i { flex:1 1 0; min-width:2px; border-radius:1px; align-self:stretch; }
.chb i.up { background:var(--green); } .chb i.slow { background:var(--yellow); } .chb i.down { background:var(--red); }

/* ============================================================
   DEVICES TAB
   ============================================================ */
.src-block { margin-top:14px; }
.src-head { display:flex; align-items:center; gap:11px; margin:28px 0 12px; }
.src-head .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.src-head h2 { margin:0; font-size:15px; font-weight:700; letter-spacing:.3px; white-space:nowrap; }
.src-head .ct { font-size:12.5px; color:var(--ov1); font-weight:600; white-space:nowrap; }
.src-head .srcbar { flex:1 1 auto; max-width:220px; height:5px; border-radius:3px; background:var(--surface2); overflow:hidden; }
.src-head .srcbar > span { display:block; height:100%; border-radius:3px; }
.src-head .srcbar > span.ok { background:var(--green); }
.src-head .srcbar > span.part { background:var(--yellow); }
.src-head .srcbar > span.crit { background:var(--red); }
.src-head .gc-meta { font-size:11.5px; color:var(--ov0); white-space:nowrap; margin-left:auto; }

/* devices toolbar */
.dtoolbar { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.dfilters { display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:4px; }
.dfilter { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--ov1);
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:8px; cursor:pointer; transition:.14s ease; }
.dfilter:hover { color:var(--sub0); }
.dfilter .fc { font-size:11px; color:var(--ov0); background:var(--surface2); border-radius:999px; padding:1px 7px; }
.dfilter.on { background:var(--surface2); color:var(--text); }
.dfilter.on .fc { background:color-mix(in srgb,var(--mauve) 22%,transparent); color:var(--lavender); }
[data-theme="light"] .dfilter.on .fc { color:var(--mauve); }

.dgroup { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:10px; }
.dgroup-h {
  display:flex; align-items:center; gap:11px; padding:11px 16px; cursor:pointer;
  background:var(--surface); border-bottom:1px solid var(--line); transition:background .14s ease;
}
.dgroup-h:hover { background:var(--surface2); }
.dgroup-h .gn { flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600; letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgroup-h .gcount { font-size:11.5px; color:var(--ov0); white-space:nowrap; flex:0 0 auto; }
.dgroup-h .gc { font-size:12px; color:var(--ov0); font-weight:500; white-space:nowrap; }
.dgroup-h .chev { color:var(--ov1); transition:transform .2s ease; display:flex; flex:0 0 auto; }
.dgroup-h .chev svg { width:16px; height:16px; display:block; }
.dgroup.collapsed .dgroup-h { border-bottom-color:transparent; }
.dgroup.collapsed .chev { transform:rotate(-90deg); }
.dgroup.collapsed .dgroup-b { display:none; }
.dgroup-h .gpct {
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; padding:2px 9px; border-radius:999px;
  flex:0 0 auto; min-width:48px; text-align:center;
}
.gpct.ok { color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent); }
.gpct.part { color:var(--yellow); background:color-mix(in srgb,var(--yellow) 14%,transparent); }
.gpct.crit { color:var(--red); background:color-mix(in srgb,var(--red) 14%,transparent); }

.drow {
  display:grid; grid-template-columns:1fr minmax(120px,180px) 96px; align-items:center; gap:18px;
  padding:9px 16px; transition:background .12s ease;
}
.drow + .drow { border-top:1px solid var(--line-soft); }
.drow:hover { background:color-mix(in srgb,var(--surface2) 50%,transparent); }
.drow .dn { display:flex; align-items:center; gap:11px; min-width:0; }
.drow .dn .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.drow .dn .dmeta { min-width:0; }
.drow .dn .dname { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drow .dn .dsub { font-size:11px; color:var(--ov0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drow .dhb { display:flex; align-items:flex-end; gap:2px; height:20px; }
.drow .dhb i { flex:1 1 0; min-width:2px; border-radius:1px; align-self:stretch; }
.drow .dhb i.up { background:var(--green); }
.drow .dhb i.down { background:var(--red); }
.drow .dhb i.slow { background:var(--yellow); }
.drow .dpct { text-align:right; font-size:12.5px; font-variant-numeric:tabular-nums; }
.drow .dpct b { font-weight:700; }
.drow .dpct .rms { color:var(--ov0); font-size:11.5px; }
.up-on { color:var(--green); } .up-off { color:var(--red); }

/* ============================================================
   FORM PRIMITIVES (shared)
   ============================================================ */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 0; }
.grow { flex:1 1 auto; }
.field > label { font-size:11px; font-weight:500; color:var(--ov1); letter-spacing:.2px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px 14px; align-items:end; }
.fgrid.wide { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

input[type=text], input[type=number], input[type=password], input[type=time], select, textarea {
  font:inherit; font-size:13px; color:var(--text);
  background:var(--mantle); border:1px solid var(--line); border-radius:var(--r-input);
  padding:9px 11px; outline:none; width:100%; transition:.16s ease;
}
/* O seletor de horário nativo segue o tema (relógio/spinner) e não estica demais. */
input[type=time] { color-scheme:dark; font-variant-numeric:tabular-nums; }
[data-theme="light"] input[type=time] { color-scheme:light; }
[data-theme="light"] input, [data-theme="light"] select { background:var(--surface); }
input::placeholder { color:var(--ov0); }
input:focus, select:focus, textarea:focus { border-color:var(--mauve); box-shadow:0 0 0 3px color-mix(in srgb,var(--mauve) 15%,transparent); }
input.short { max-width:120px; }
select { -webkit-appearance:none; appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8fa1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }

.btn {
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:.16s ease; white-space:nowrap;
  border-radius:9px; padding:9px 16px; border:1px solid var(--line); background:var(--surface2); color:var(--text);
  display:inline-flex; align-items:center; gap:7px;
}
.btn svg { width:14px; height:14px; }
.btn:hover { border-color:var(--s2); }
.btn.primary { background:var(--mauve); color:var(--mauve-ink); border-color:transparent; box-shadow:0 2px 10px -4px color-mix(in srgb,var(--mauve) 70%,transparent); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.ghost { background:transparent; color:var(--sub0); }
.btn.danger { background:transparent; color:var(--red); border-color:color-mix(in srgb,var(--red) 32%,transparent); }
.btn.danger:hover { background:color-mix(in srgb,var(--red) 12%,transparent); }
.btn.sm { padding:7px 13px; font-size:12.5px; }
.hint { font-size:11.5px; color:var(--ov0); line-height:1.5; }

/* toggle switch */
.switch { width:38px; height:22px; border-radius:999px; background:var(--surface2); border:1px solid var(--line);
  position:relative; cursor:pointer; transition:.16s ease; flex:0 0 auto; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--ov1); transition:.18s cubic-bezier(.3,.7,.4,1); }
.switch.on { background:var(--mauve); border-color:var(--mauve); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--ov1); transition:.18s cubic-bezier(.3,.7,.4,1); box-shadow:0 1px 2px rgba(0,0,0,.3); }
.switch.on::after { left:18px; background:#fff; }
.swrow { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; color:var(--sub0); cursor:pointer; user-select:none; }
.switch-grid { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }

/* ============================================================
   ADMIN — settings page
   ============================================================ */
.admin-layout { display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:start; margin-top:14px; }
.admin-nav { position:sticky; top:84px; display:flex; flex-direction:column; gap:2px; }
.anav-label { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ov0); padding:4px 12px 8px; }
.anav-i { text-align:left; border:0; background:transparent; color:var(--ov1); font:inherit; font-size:13.5px; font-weight:500;
  padding:9px 13px; border-radius:9px; cursor:pointer; transition:.14s ease; border-left:2px solid transparent; }
.anav-i:hover { color:var(--sub0); background:color-mix(in srgb,var(--surface2) 55%,transparent); }
.anav-i.on { color:var(--lavender); background:color-mix(in srgb,var(--mauve) 13%,transparent); font-weight:600; }
[data-theme="light"] .anav-i.on { color:var(--mauve); }

.admin-content { min-width:0; display:flex; flex-direction:column; gap:18px; }
.aset { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; scroll-margin-top:84px; }
.aset-h { display:flex; align-items:flex-start; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.aset-ico { width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; margin-top:1px;
  background:color-mix(in srgb,var(--mauve) 13%,transparent); color:var(--mauve); }
.aset-ico svg { width:19px; height:19px; }
.aset-t { min-width:0; }
.aset-t h3 { margin:0; font-size:15px; font-weight:600; letter-spacing:-.1px; line-height:1.3; }
.aset-t p { margin:3px 0 0; font-size:12.5px; color:var(--ov1); line-height:1.4; }
.aset-b { padding:20px 22px; display:flex; flex-direction:column; gap:13px; }
.aset-foot { display:flex; align-items:center; gap:14px; margin-top:6px; padding-top:16px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }

/* thresholds */
.thr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:13px; }
.thr { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile); padding:14px 15px; }
.thr-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:12px; }
.thr-key { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.tint-blue.thr-key { background:var(--blue); } .tint-green.thr-key { background:var(--green); }
.tint-peach.thr-key { background:var(--peach); } .tint-mauve.thr-key { background:var(--mauve); }
.thr-fields { display:flex; gap:12px; }

/* alert channels */
.chan { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile); padding:15px 16px; }
.chan-h { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.chan-h b { font-size:13.5px; font-weight:600; }
.chan-st { font-size:11px; font-weight:600; color:var(--ov0); text-transform:uppercase; letter-spacing:.4px; }

/* collapsible config card */
.ccard { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile); overflow:hidden; transition:border-color .14s ease; }
.ccard + .ccard, .aset-b .ccard:not(:first-child) { margin-top:0; }
.aset-b > .ccard { margin:0; }
.ccard:hover { border-color:var(--s2); }
.ccard.add { border-style:dashed; }
.ccard-row { display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; }
.ccard-row .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ccard-row .dot.off { background:var(--ov0); box-shadow:none; }
.ccard-row .add-ico { color:var(--mauve); display:flex; flex:0 0 auto; }
.ccard-row .add-ico svg { width:17px; height:17px; }
.ccard-id { min-width:0; flex:1 1 auto; }
.ccard-name { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccard-meta { font-size:11.5px; color:var(--ov0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.ccard-row .chev { color:var(--ov1); display:flex; flex:0 0 auto; transition:transform .2s ease; }
.ccard-row .chev svg { width:16px; height:16px; }
.ccard.collapsed .chev { transform:rotate(-90deg); }
.ccard.collapsed .ccard-body { display:none; }
.ccard-body { padding:4px 16px 16px; border-top:1px solid var(--line-soft); }
.ccard-body .fgrid { margin-top:16px; }
.ccard-foot { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }

/* users */
.urow { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile); flex-wrap:wrap; }
.urow + .urow, .urow + .uadd { margin-top:0; }
.urow .uav { width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:12.5px; font-weight:600;
  background:color-mix(in srgb,var(--mauve) 16%,transparent); color:var(--mauve); }
.urow .you { font-size:10px; font-weight:600; color:var(--ov0); background:var(--surface2); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.urow .upw { max-width:170px; }
.urow.uadd .upw { max-width:180px; }
.urow select { width:auto; max-width:140px; flex:0 0 auto; }

/* ============================================================
   RELATÓRIOS
   ============================================================ */
.grid-reports { display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:16px; }
.card.rep .rep-body { padding:6px 18px 16px; display:flex; flex-direction:column; gap:16px; }
.rmetric { display:flex; flex-direction:column; gap:7px; }
.rmh { display:flex; align-items:center; gap:8px; }
.rkey { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.rkey.key-cpu { background:var(--blue); } .rkey.key-mem { background:var(--green); } .rkey.key-dsk { background:var(--peach); }
.rmh .rlabel { font-size:12.5px; font-weight:600; }
.rmh .rstats { font-size:11.5px; color:var(--ov1); }
.rmh .rstats b { color:var(--sub1); font-weight:700; }
.spark { width:100%; height:42px; display:block; }
.spark.cpu { color:var(--blue); } .spark.mem { color:var(--green); } .spark.dsk { color:var(--peach); }
.sparkline { fill:none; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.sparkfill { fill:currentColor; opacity:.13; stroke:none; }
.rfoot { display:flex; gap:10px; font-size:11px; color:var(--ov0); }

.rep-proc { border-top:1px solid var(--line-soft); }
.rep-proc-h { display:flex; align-items:center; gap:10px; padding:13px 18px; cursor:pointer; }
.rep-proc-h:hover { background:color-mix(in srgb,var(--surface2) 40%,transparent); }
.rep-proc-h .rpt { font-size:12.5px; font-weight:600; white-space:nowrap; }
.rep-proc-h .rpt-sub { font-size:11px; color:var(--ov0); white-space:nowrap; }
.rep-proc-h .chev { color:var(--ov1); display:flex; transition:transform .2s ease; }
.rep-proc-h .chev svg { width:16px; height:16px; }
.rep-proc.collapsed .chev { transform:rotate(-90deg); }
.rep-proc.collapsed .rep-proc-b { display:none; }
.rep-proc-b { padding:2px 18px 16px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ptbl { min-width:0; }
.ptbl-h { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ov0); padding:6px 0 8px; }
.prow { display:grid; grid-template-columns:54px 56px 1fr 48px; gap:8px; align-items:center; padding:5px 0; font-size:11.5px; }
.prow + .prow { border-top:1px solid var(--line-soft); }
.ppid { color:var(--ov0); }
.puser { color:var(--ov1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcmd { color:var(--sub0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pval { text-align:right; font-weight:700; }

.clist.rep-mon .crow { grid-template-columns:minmax(200px,1.6fr) minmax(160px,1fr) 90px; }
.vtoggle.rwin button { padding:6px 12px; }

/* export menu */
.exp-wrap { position:relative; flex:0 0 auto; }
.exp-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:178px;
  background:var(--base); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-pop); padding:5px; }
.exp-menu button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
  color:var(--sub0); font:inherit; font-size:13px; font-weight:500; padding:9px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.exp-menu button svg { width:15px; height:15px; color:var(--ov1); }
.exp-menu button:hover { background:color-mix(in srgb,var(--surface2) 60%,transparent); color:var(--text); }
.exp-menu button:hover svg { color:var(--mauve); }

/* incidents timeline */
.inc-list { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; }
.inc-row { display:grid; grid-template-columns:18px minmax(120px,1fr) auto 70px; align-items:center; gap:14px; padding:12px 18px; }
.inc-row + .inc-row { border-top:1px solid var(--line-soft); }
.inc-dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent); }
.inc-mon { font-size:13px; font-weight:600; }
.inc-time { font-size:12px; color:var(--ov1); }
.inc-dur { font-size:12px; font-weight:700; color:var(--peach); text-align:right; }

/* ====== Relatório analítico (documento) ====== */
.report { max-width:1120px; }
.rep-cover .rc-top { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.rep-cover .rc-top .ph-back { display:inline-flex; align-items:center; gap:6px; color:var(--ov1); font-size:13px; cursor:pointer; padding:5px 10px; border-radius:8px; transition:.16s ease; white-space:nowrap; text-decoration:none; }
.rep-cover .rc-top .ph-back:hover { color:var(--lavender); background:color-mix(in srgb,var(--surface2) 60%,transparent); }
.rep-cover .rc-top .ph-back svg { width:14px; height:14px; }
.rep-cover h1 { margin:0; font-size:27px; font-weight:700; letter-spacing:-.6px; }
.rep-cover .cover-meta { margin-top:7px; font-size:13px; color:var(--ov1); }
.rep-cover .cover-meta b { color:var(--sub1); font-weight:600; }
.rep-sec { margin-top:36px; }
.ov { color:var(--ov0); }

/* resumo executivo */
.rep-exec { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:22px; margin-top:18px; }
.exec-h { display:flex; align-items:flex-start; gap:16px; }
.badge.big { font-size:12px; padding:5px 12px 5px 11px; flex:0 0 auto; margin-top:2px; }
.exec-t h3 { margin:0 0 5px; font-size:16px; font-weight:600; }
.exec-t p { margin:0; font-size:13.5px; color:var(--sub0); line-height:1.6; max-width:78ch; }
.rep-exec .rep-kpi { margin:20px 0; }
.findings { border-top:1px solid var(--line-soft); padding-top:16px; }
.find-t { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--ov0); margin-bottom:10px; }
.find, .rec { display:flex; align-items:flex-start; gap:11px; font-size:13px; color:var(--sub0); line-height:1.55; padding:5px 0; }
.find b, .rec b { color:var(--text); font-weight:600; }
.fi { width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-top:6px; }
.fi.ok { background:var(--green); } .fi.warn { background:var(--yellow); } .fi.crit { background:var(--red); }

/* análise por servidor */
.srv-sections { display:flex; flex-direction:column; gap:16px; }
.rep-srv { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:20px 22px; }
.rs-h { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:18px; }
.rs-h .dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.rs-id { flex:1 1 auto; min-width:0; }
.rs-nm { font-size:16px; font-weight:700; }
.rs-sub { font-size:11.5px; color:var(--ov0); margin-top:2px; }
.rcharts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:20px; }
.rc-h { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; margin-bottom:6px; }
.rc-h .mono { font-size:11px; font-weight:700; }

/* tabelas do relatório (compartilhado) */
.stat-table, .sla-table, .inc-table, .proc-tbl { width:100%; border-collapse:collapse; }
.stat-table th, .sla-table th, .inc-table th, .proc-tbl th { text-align:right; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ov0); padding:0 10px 9px; white-space:nowrap; }
.stat-table th:first-child, .sla-table th:first-child, .inc-table th:first-child, .proc-tbl th:first-child { text-align:left; }
.stat-table td, .sla-table td, .inc-table td, .proc-tbl td { text-align:right; font-size:12.5px; padding:8px 10px; color:var(--sub1); border-top:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
.stat-table td:first-child, .sla-table td:first-child, .inc-table td:first-child, .proc-tbl td:first-child { text-align:left; }
.stat-table th:first-child, .stat-table td:first-child { padding-left:0; }
.stat-table .rk { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); }
.stat-table .rk .rkey { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }

/* blocos de info */
.rblock { margin-top:20px; }
.rb-t { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ov1); margin-bottom:10px; }
.rb-t .ov { font-weight:500; letter-spacing:0; text-transform:none; }
.rb-c { font-size:13px; color:var(--sub0); line-height:1.5; }
.rb-c b { color:var(--text); }

/* tempo por faixa */
.statebar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--surface2); }
.statebar .sb.ok { background:var(--green); } .statebar .sb.warn { background:var(--yellow); } .statebar .sb.crit { background:var(--red); }
.state-leg { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; font-size:11.5px; color:var(--ov1); }
.state-leg span { display:inline-flex; align-items:center; gap:6px; }
.state-leg .d { width:8px; height:8px; border-radius:2px; }
.state-leg .d.ok { background:var(--green); } .state-leg .d.warn { background:var(--yellow); } .state-leg .d.crit { background:var(--red); }

/* heatmap por hora */
.heat { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; }
.heat .hc { height:26px; border-radius:3px; }
.heat-ax { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:var(--ov0); font-variant-numeric:tabular-nums; }

/* processos */
.proc-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.proc-tbl th { padding:0 8px 8px; } .proc-tbl td { padding:7px 8px; }
.proc-tbl th:first-child, .proc-tbl td:first-child { padding-left:0; }
.proc-tbl .pcmd { max-width:1px; width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; color:var(--sub0); }

/* SLA + incidentes (cards de tabela) */
.sla-table, .inc-table { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); border-collapse:separate; border-spacing:0; overflow:hidden; }
.inc-table th.lt, .inc-table td.lt { text-align:left; }
.inc-table td.cause { white-space:normal; color:var(--sub0); font-size:12px; }
.sla-table th, .inc-table th { padding:15px 14px 10px; } .sla-table td, .inc-table td { padding:12px 14px; }
.sla-table th:first-child, .sla-table td:first-child, .inc-table th:first-child, .inc-table td:first-child { padding-left:18px; }
.sla-table th:last-child, .sla-table td:last-child, .inc-table th:last-child, .inc-table td:last-child { padding-right:18px; }
.m-nm { font-size:13px; font-weight:600; color:var(--text); }
.m-url { font-size:10.5px; }
.bud { white-space:nowrap; }
.budbar { height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; display:inline-block; width:84px; vertical-align:middle; margin-right:9px; }
.budbar span { display:block; height:100%; border-radius:3px; }
.budbar span.ok { background:var(--green); } .budbar span.warn { background:var(--yellow); } .budbar span.crit { background:var(--red); }
.inc-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px; }
.sum { background:var(--base); border:1px solid var(--line); border-radius:var(--r-tile); box-shadow:var(--shadow-card); padding:15px 17px; }
.sum-v { font-size:19px; font-weight:700; letter-spacing:-.3px; }
.sum-l { font-size:11.5px; color:var(--ov1); margin-top:4px; }
.inc-table td:first-child { display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text); }
.inc-table .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }

/* recomendações */
.recs { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:16px 20px; }

/* gráfico do relatório */
.chart { width:100%; height:46px; display:block; }
.chart.cpu { color:var(--blue); } .chart.mem { color:var(--green); } .chart.dsk { color:var(--peach); }
.chart .c-line { fill:none; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.chart .c-fill { fill:currentColor; opacity:.12; stroke:none; }
.chart .c-avg { stroke:var(--ov1); stroke-width:1; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; opacity:.55; }
.chart .c-warn { stroke:var(--red); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; opacity:.5; }
.chart .c-peak { stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:.6; }
.chart .c-peak.ok { stroke:var(--green); } .chart .c-peak.warn { stroke:var(--yellow); } .chart .c-peak.crit { stroke:var(--red); }

/* dispositivos no relatório */
.rep-dev { background:var(--base); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; }
.rep-dev-sum { padding:12px 18px; font-size:13px; font-weight:700; border-bottom:1px solid var(--line-soft); }
.rep-dev-src { display:flex; align-items:center; gap:10px; padding:10px 18px; font-weight:600; font-size:12.5px; background:color-mix(in srgb,var(--surface2) 26%,transparent); border-bottom:1px solid var(--line-soft); }
.rep-dev-src .rds-num { margin-left:auto; color:var(--ov1); font-weight:700; }
.rep-dev-grp { display:flex; align-items:center; gap:10px; padding:8px 18px 8px 26px; font-size:12.5px; }
.rep-dev-grp .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.dot.part { background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 18%,transparent); }
.rep-dev-grp + .rep-dev-grp { border-top:1px solid var(--line-soft); }
.rep-dev-grp .rdg-num { margin-left:auto; color:var(--ov1); font-variant-numeric:tabular-nums; }
.dev-off-list { padding:12px 18px; border-top:1px solid var(--line-soft); }
.dev-off-list .dol-h { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ov0); margin-bottom:8px; }
.dev-off { font-size:12px; color:var(--sub0); padding:3px 0; }
.dev-off.more { color:var(--ov1); font-style:italic; }

/* campo de horário compacto do resumo (Config → Alertas) */
.sum-time-wrap { margin-top:14px; }
.sum-time-wrap .field { max-width:200px; }
input[type=time].short { max-width:150px; }

/* ============================================================
   EMPTY / ERROR STATES
   ============================================================ */
.estate { text-align:center; padding:48px 24px; }
.estate .eico { width:54px; height:54px; border-radius:15px; margin:0 auto 16px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ov1); }
.estate .eico svg { width:26px; height:26px; }
.estate h3 { margin:0 0 6px; font-size:15px; font-weight:600; }
.estate p { margin:0 auto; max-width:360px; font-size:13px; color:var(--ov1); line-height:1.55; }
.estate.crit .eico { background:color-mix(in srgb,var(--red) 12%,transparent); border-color:color-mix(in srgb,var(--red) 30%,transparent); color:var(--red); }

/* skeleton shimmer on refresh */
.refreshing .track > span, .refreshing .hb i { animation:pulseO 1s ease-in-out infinite; }
@keyframes pulseO { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px) {
  .topbar { padding:0 16px; gap:12px; height:58px; }
  .gsearch { display:none; }
  .tabs { display:none; }
  .menubtn { display:grid; }
  .userchip .uname, .userchip .urole { display:none; }
  .logout { display:none; }
  .wrap { padding:20px 16px 56px; }
  .drow { grid-template-columns:1fr 88px; }
  .drow .dhb { display:none; }
  /* compact lists: drop lower-priority columns on small screens */
  .clist.srv .crow { grid-template-columns:minmax(110px,1fr) 1fr 1fr; }
  .clist.srv .crow > :nth-child(4), .clist.srv .crow > :nth-child(5) { display:none; }
  .clist.mon .crow { grid-template-columns:minmax(120px,1fr) 96px 76px; }
  .clist.mon .crow > :nth-child(3), .clist.mon .crow > :nth-child(4) { display:none; }
  .admin-layout { grid-template-columns:1fr; gap:14px; }
  .grid-reports { grid-template-columns:1fr; }
  .rep-proc-b { grid-template-columns:1fr; }
  .rcharts { grid-template-columns:1fr; gap:14px; }
  .proc-grid { grid-template-columns:1fr; gap:18px; }
  .report { max-width:none; }
  .sla-table, .inc-table, .stat-table { display:block; overflow-x:auto; white-space:nowrap; }
  .rep-cover h1 { font-size:22px; }
  .admin-nav { position:static; top:auto; flex-direction:row; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .admin-nav .anav-label { display:none; }
  .anav-i { border-left:0; white-space:nowrap; border:1px solid var(--line); }
  .anav-i.on { border-color:transparent; }
}
@media (max-width:560px) {
  .brand .bname span { display:none; }
  .stat { padding:15px 16px; gap:13px; }
  .frow2 { flex-direction:column; }
}

/* mobile slide-down nav */
.mobnav {
  display:none; position:sticky; top:58px; z-index:25;
  background:var(--mantle); border-bottom:1px solid var(--line); padding:8px 16px 12px;
  flex-direction:column; gap:4px;
}
.mobnav.show { display:flex; }
.mobnav button { text-align:left; border:0; background:transparent; color:var(--sub0); font:inherit; font-size:14px; padding:11px 12px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.mobnav button svg { width:17px; height:17px; }
.mobnav button.on { background:color-mix(in srgb,var(--mauve) 14%,transparent); color:var(--lavender); }
.mobnav .msearch { position:relative; display:flex; align-items:center; flex:0 0 auto; }
.mobnav .msearch svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ov1); pointer-events:none; }
.mobnav .msearch input {
  width:100%; font:inherit; font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px 10px 38px; outline:none; transition:.16s ease;
}
.mobnav .msearch input::placeholder { color:var(--ov0); }
.mobnav .msearch input:focus { border-color:var(--mauve); background:var(--base); box-shadow:0 0 0 3px color-mix(in srgb,var(--mauve) 16%,transparent); }

/* bottom tab bar (mobile + tablet) — navegação fixa estilo app */
.botnav {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:color-mix(in srgb,var(--mantle) 92%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:2px;
}
.botnav button {
  flex:1 1 0; min-width:0; border:0; background:transparent; color:var(--ov1); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:600; letter-spacing:.2px; padding:7px 4px 5px;
  border-radius:12px; white-space:nowrap; transition:.15s ease;
}
.botnav button svg { width:21px; height:21px; opacity:.9; }
.botnav button.on { color:var(--lavender); background:color-mix(in srgb,var(--mauve) 15%,transparent); }
[data-theme="light"] .botnav button.on { color:var(--mauve); }

@media (max-width:1024px) {
  .tabs { display:none; }
  .botnav { display:flex; }
  .wrap { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   PRINT (Relatórios → PDF)
   ============================================================ */
@media print {
  @page { margin:12mm; }
  .topbar, .mobnav, .botnav, .pagehead .ph-back, .rc-top .ph-back, .vtoggle, .exp-wrap, .updated .live { display:none !important; }
  body { background:#fff; }
  .wrap, .report { max-width:none; padding:0; }
  .page { overflow:visible; }
  .section { margin:18px 0 10px; break-after:avoid; }
  .card, .clist, .inc-list, .rep-exec, .recs, .rep-dev { box-shadow:none !important; break-inside:avoid; }
  .badge.big { box-shadow:none !important; }
  .updated { color:#555; }

  /* A largura do PDF (~794px) dispara o responsivo de 860px, que vira as tabelas
     em bloco rolável e as CORTA no papel. Aqui restauramos tabela normal. */
  .stat-table, .sla-table, .inc-table { display:table !important; overflow:visible !important; white-space:normal !important; }
  .rcharts { grid-template-columns:repeat(3,1fr) !important; gap:12px; }
  .proc-grid { grid-template-columns:1fr 1fr !important; gap:16px; }

  /* Tabelas mais compactas para caber na largura do papel. */
  .stat-table, .sla-table, .inc-table, .proc-tbl { font-size:10.5px; }
  .sla-table th, .sla-table td, .inc-table th, .inc-table td { padding:7px 8px; }
  .sla-table th:first-child, .sla-table td:first-child, .inc-table th:first-child, .inc-table td:first-child { padding-left:12px; }
  .sla-table th:last-child, .sla-table td:last-child, .inc-table th:last-child, .inc-table td:last-child { padding-right:12px; }
  .stat-table th, .stat-table td { padding:6px 7px; }
  .proc-tbl th, .proc-tbl td { padding:5px 6px; }
  .budbar { width:46px; margin-right:6px; }

  /* Quebra graciosa: a seção do servidor pode atravessar páginas, mas os blocos
     internos e as linhas de tabela não se partem no meio. */
  .rep-srv, .recs, .sla-table, .inc-table { break-inside:auto; }
  .rep-exec, .sum, .rcharts, .stat-table, .ptbl, .rblock, .inc-summary, .rs-h { break-inside:avoid; }
  tr { break-inside:avoid; }
}
.printing .topbar, .printing .mobnav, .printing .botnav { display:none !important; }