/* =======================================================================
   ElShaday UI Kit (2025) - unified styles
   ======================================================================= */
:root{
  --brand:#6f3df4; --brand-600:#7c3aed; --brand-700:#6d28d9; --brand-800:#5420a8;
  --success:#16a34a; --warning:#eab308; --danger:#ef4444; --info:#0ea5e9;
  --bg:#f7f9fc; --surface:#ffffff; --surface-2:#f3f6fb; --text:#0f172a; --muted:#5b6479; --stroke:#d9e1ec;
  --shadow-sm:0 6px 22px rgba(31,41,55,.08); --shadow-md:0 14px 38px rgba(15,23,42,.12);
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px;
  --focus:0 0 0 3px color-mix(in oklab,var(--brand-600),transparent 40%);
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#0f172a; --surface-2:#111827; --text:#e5e7eb; --muted:#a8b3c7; --stroke:#1f2937;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.45); --shadow-md: 0 18px 48px rgba(0,0,0,.5);
}

/* Reset / base */
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-16); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:where(a,button,input,select,textarea,[role="button"]):focus-visible{outline:none; box-shadow:var(--focus); border-radius:8px}

/* Layout */
.container{width:min(1120px,92vw);margin:0 auto;padding:16px}
.stack > * + *{margin-top:12px}
.cluster{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.micro-hint{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--muted)}
.micro-hint .dot{width:6px;height:6px;border-radius:50%;background:var(--info);box-shadow:0 0 0 2px color-mix(in oklab,var(--info),transparent 60%)}
#syncStatus{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--muted)}
#syncStatus[data-state="online"]{color:var(--success)}
#syncStatus[data-state="offline"]{color:var(--danger)}
#syncStatus[data-state="sync"]{color:var(--info)}

/* Topbar */
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background: color-mix(in oklab, var(--surface), transparent 20%); border-bottom:1px solid var(--stroke) }
.topbar-inner{width:min(1120px,92vw); margin-inline:auto; display:flex; align-items:center; gap:16px; padding:10px 8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .dot{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--brand-600),var(--brand-800));box-shadow:var(--shadow-sm)}
.brand b{font-size:var(--fs-20)}
.theme-toggle{border:1px solid var(--stroke);background:var(--surface);border-radius:999px;padding:6px 10px;cursor:pointer;box-shadow:var(--shadow-sm)}
.theme-toggle:active{transform:scale(.97)}

/* Hero */
.hero{padding:clamp(28px,8vw,56px) 0; background:linear-gradient(120deg,color-mix(in oklab,var(--brand-600),transparent 10%),color-mix(in oklab,var(--surface),transparent 0%)); color:var(--text)}
.hero-checkin{background:
  radial-gradient(1200px 620px at 14% -10%, color-mix(in oklab,var(--brand-600),transparent 70%), transparent),
  radial-gradient(980px 520px at 90% -6%, color-mix(in oklab,var(--brand-800),transparent 65%), transparent),
  linear-gradient(125deg,color-mix(in oklab,var(--surface),transparent 0%),color-mix(in oklab,var(--surface-2),transparent 0%))}
.hero-dashboard{background:
  radial-gradient(820px 440px at 0% 0%, color-mix(in oklab,var(--brand-600),transparent 82%), transparent),
  linear-gradient(140deg,color-mix(in oklab,var(--surface),transparent 0%),color-mix(in oklab,var(--surface-2),transparent 0%))}
.hero-content{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hero-text{flex:1 1 380px;max-width:620px}
.hero-text h1{margin:6px 0 10px;font-size:clamp(32px,4vw,44px);line-height:1.1}
.hero-text p{margin:0;color:color-mix(in oklab,var(--muted),var(--text) 40%)}
.hero-eyebrow{text-transform:uppercase;font-size:var(--fs-12);letter-spacing:.2em;color:var(--muted)}
.hero-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-card{flex:1 1 320px;max-width:420px;background:color-mix(in oklab,var(--surface),transparent 0%);border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:18px}
.hero-card .btn{align-self:flex-start}
.hero-chip{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--stroke);border-radius:16px;background:color-mix(in oklab,var(--surface-2),transparent 0%)}
.hero-chip .dot{width:12px;height:12px;border-radius:50%;background:var(--info)}
.hero-summary{display:flex;flex-direction:column;gap:12px;font-size:var(--fs-14);color:var(--muted)}
.hero-summary div{display:flex;flex-direction:column;gap:2px}
.hero-summary span{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.15em}
.hero-summary strong{font-size:var(--fs-16);color:var(--text)}
@media(max-width:768px){
  .hero-content{flex-direction:column}
  .hero-card{max-width:100%}
}

/* Cards */
.card{ background:var(--surface); border:1px solid color-mix(in oklab,var(--stroke),transparent 10%); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease }
.card.pad{ padding:16px }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px) }
.kiosk .topbar, .kiosk .hero{display:none}
.kiosk .section{padding-top:10px}

/* Buttons */
.btn{
  --btn-bg:var(--surface-2); --btn-fg:var(--text); --btn-bd:var(--stroke);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  border-radius:14px; font-weight:700; cursor:pointer; transition:filter .18s, transform .14s, box-shadow .18s, background .22s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{filter:brightness(1.03); box-shadow:var(--shadow-md); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{--btn-bg:linear-gradient(135deg,var(--brand-600),var(--brand-800));--btn-fg:#fff;--btn-bd:transparent;color:#fff}
.btn-danger{--btn-bg:#ef4444;--btn-fg:#fff;--btn-bd:transparent;color:#fff}
.btn-outline{--btn-bg:color-mix(in oklab,var(--surface-2),transparent 0%);--btn-bd:var(--stroke)}
.btn.sm{padding:8px 12px;border-radius:10px;font-size:var(--fs-14)}
.btn.lg{padding:13px 20px;border-radius:16px}
.icon-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--stroke); background:var(--surface);
  display:grid; place-items:center; box-shadow:var(--shadow-sm); cursor:pointer }
.icon-btn:active{ transform: scale(.97) }

/* Inputs */
.input,.select,.textarea{
  width:100%; background:color-mix(in oklab,var(--surface),transparent 0%); color:var(--text); border:1px solid color-mix(in oklab,var(--stroke),transparent 0%);
  border-radius:14px; padding:11px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-sm); transition:border-color .15s, box-shadow .15s, background .2s
}
.input::placeholder{color:color-mix(in oklab,var(--muted),transparent 10%)}
.input:focus,.select:focus,.textarea:focus{
  border-color: color-mix(in oklab, var(--brand-600), white 45%); box-shadow: var(--focus), inset 0 1px 0 rgba(255,255,255,.6)
}
.form-row{display:grid;gap:8px}
.form-row label{font-size:var(--fs-14);color:var(--muted)}
.input-icon{display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--surface-2);box-shadow:var(--shadow-sm) inset}
.input-icon i{color:var(--muted)}
.input-icon .input{border:none;box-shadow:none;background:transparent;padding:0;min-width:0;flex:1}
.filters-modern{display:flex;flex-direction:column;gap:18px}
.filters-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.filters-label{font-size:var(--fs-14);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px}
.chip-group{display:flex;flex-direction:column;gap:10px}
.chip-group.compact{gap:6px}
.chip-label{font-size:var(--fs-12);font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;
  border:1px solid color-mix(in oklab,var(--stroke),transparent 10%);background:var(--surface);color:var(--text);font-size:var(--fs-14);
  cursor:pointer;transition:background .2s ease,color .2s ease,border .2s ease,transform .2s ease,box-shadow .2s ease;
  appearance:none;-webkit-appearance:none; box-shadow:var(--shadow-sm);
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.chip.active{background:linear-gradient(135deg,var(--brand-600),var(--brand-800));color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}
.chip.ghost{background:transparent;border-style:dashed;color:var(--muted)}
.filter-dock{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.chip-stack{display:grid;gap:12px}
@media(min-width:720px){
  .chip-stack{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
.chip-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:var(--fs-12);
  border:1px solid var(--stroke); background:var(--surface) }
.badge .dot{ width:8px; height:8px; border-radius:50% }
.badge.success{ color:#065f46; background:#ecfdf5; border-color:#d1fae5 } .badge.success .dot{ background:#10b981 }
.badge.warn{ color:#92400e; background:#fffbeb; border-color:#fef3c7 } .badge.warn .dot{ background:#f59e0b }
.badge.danger{ color:#7f1d1d; background:#fef2f2; border-color:#fee2e2 } .badge.danger .dot{ background:#ef4444 }
.badge.info{ color:#0c4a6e; background:#e0f2fe; border-color:#bae6fd } .badge.info .dot{ background:#0ea5e9 }

/* Tables */
.table-wrap{ background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:auto }
table.table{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px }
.table thead th{ position:sticky; top:0; z-index:1; background:var(--surface-2); text-align:left; font-size:var(--fs-12);
  letter-spacing:.02em; color:var(--muted); padding:12px; border-bottom:1px solid var(--stroke) }
.table tbody td{ padding:12px; border-bottom:1px solid var(--stroke) }
.table tbody tr:hover{ background: color-mix(in oklab, var(--surface-2), transparent 35%) }
.table tbody tr:last-child td{ border-bottom:none }
.table .num{ text-align:right; font-variant-numeric:tabular-nums }
.table tbody tr.done td{background:color-mix(in oklab,var(--success),transparent 92%)}
.table tbody td.actions{min-width:168px}
.status-toggle{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--stroke);border-radius:999px;background:var(--surface-2);box-shadow:var(--shadow-sm) inset}
.status-pill{
  width:38px;height:38px;border:none;border-radius:50%;display:grid;place-items:center;
  background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,transform .15s;
  font-size:var(--fs-16)
}
.status-pill:hover{transform:translateY(-1px)}
.status-pill.ghost{color:var(--muted)}
.status-toggle[data-state="yes"] .status-pill[data-act="yes"]{background:var(--success);color:#fff}
.status-toggle[data-state="no"] .status-pill[data-act="no"]{background:var(--danger);color:#fff}
.status-toggle[data-state="pend"] .status-pill[data-act="reset"]{background:var(--brand-600);color:#fff}
.status-pill i{pointer-events:none}

/* KPIs */
.kpis{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.kpi{ background:color-mix(in oklab,var(--surface),transparent 0%); border:1px solid color-mix(in oklab,var(--stroke),transparent 0%); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:18px; position:relative; overflow:hidden }
.kpi::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:color-mix(in oklab,var(--brand-600),transparent 80%);filter:blur(0px);z-index:0}
.kpi .label{ font-size:var(--fs-12); color:var(--muted) }
.kpi .value{ font-size:32px; font-weight:800; margin:6px 0; position:relative; z-index:1 }
.kpi .delta{ font-size:var(--fs-12); margin-top:6px; color:var(--muted); position:relative; z-index:1 }
.kpi-head{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.kpi-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--brand-600);box-shadow:var(--shadow-sm)}
.kpi-icon.success{background:#16a34a}
.kpi-icon.warn{background:#eab308;color:#1f2937}
.kpi-icon.danger{background:#ef4444}
.kpi-icon.neutral{background:var(--brand-800)}
.kpi-pill{font-size:var(--fs-12);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.18em}
.kpi-progress{width:100%;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;position:relative;z-index:1;margin-top:4px}
.kpi-progress span{display:block;height:100%;width:var(--pct,0%);background:linear-gradient(135deg,var(--brand-600),var(--brand-800));transition:width .3s ease}

/* Sections */
.section{ padding:20px 0 } .section h1{ font-size:var(--fs-24); margin:0 0 12px } .section p.lead{ color:var(--muted); margin:0 0 16px }

/* Login */
.login-shell,
.login-hero{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:clamp(20px,5vw,48px);
  background: radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab,var(--brand-600),transparent 78%), transparent),
              radial-gradient(900px 420px at 96% -6%, color-mix(in oklab,var(--brand-800),transparent 72%), transparent) }
.login-grid{ width:min(1080px,94vw); display:grid; gap:24px; align-items:stretch; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }
.login-hero-panel{
  background:color-mix(in oklab,var(--surface),transparent 0%); border:1px solid var(--stroke); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-md); color:var(--text)
}
.login-hero-panel h1{font-size:clamp(30px,4vw,40px);margin:8px 0}
.login-hero-panel p{color:color-mix(in oklab,var(--muted),var(--text) 40%);margin:0}
.login-points{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-14)}
.login-points li{display:flex;align-items:center;gap:10px}
.login-points i{color:var(--brand-600)}
.login-hero-badge{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:1px solid var(--stroke);background:var(--surface-2);box-shadow:var(--shadow-sm)}
.login-hero-badge .dot{width:10px;height:10px;border-radius:50%;background:var(--info)}
.login-card{ width:100%; padding:22px; border-radius:var(--radius-lg) }
.login-title{ font-size:var(--fs-24); font-weight:800; margin-bottom:6px }
.login-sub{ color:var(--muted); margin-bottom:16px }
.footer{ margin-top:28px; color:var(--muted); font-size:var(--fs-12); text-align:center }

/* ====== LIGHTWEIGHT DONUT (CSS-only) ====== */
.donut-card .legend{ display:flex; gap:16px; justify-content:center; color:var(--muted); margin-top:8px; flex-wrap:wrap }
.donut-card .legend .item{ display:flex; align-items:center; gap:6px; }
.donut-card .legend .sw{ width:10px; height:10px; border-radius:50% }

.donut-wrap{ display:flex; justify-content:center; align-items:center; padding:12px }
.donut{
  --ok:#16a34a; --pen:#6b7280; --nok:#ef4444;
  --p-ok:0; --p-pen:0; --p-nok:100;
  position:relative; width:clamp(220px, 34vw, 320px); aspect-ratio:1; border-radius:50%;
  background:
    conic-gradient(var(--ok) 0 calc(var(--p-ok)*1%),
                   var(--pen) 0 calc((var(--p-ok) + var(--p-pen))*1%),
                   var(--nok) 0 100%);
  box-shadow:var(--shadow-sm);
}
.donut::after{
  content:""; position:absolute; inset:12%; border-radius:50%;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--stroke);
}
.donut-center{
  position:absolute; inset:auto;
  top:50%; left:50%; transform:translate(-50%, -50%);
  text-align:center; line-height:1.1;
}
.donut-center .big{ font-size:26px; font-weight:800 }
.donut-center .small{ font-size:12px; color:var(--muted); margin-top:4px }

/* (Opcional) chart-container legacy — caso fique algum código antigo */
.chart-container{
  width:min(820px, 100%); margin:10px auto 8px;
  background: var(--surface); border:1px solid var(--stroke);
  border-radius:16px; padding:12px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.chart-container canvas{ width:100% !important; height: clamp(240px,38vh,360px) !important; display:block }

/* === Tabela com scroll interno + paginador sticky === */
.table-wrap{
  position: relative;                 /* ajuda no stacking do sticky  */
  max-height: clamp(360px, 58vh, 72vh); /* limita a altura da área da tabela */
  overflow:auto;                        /* cria barras de scroll internas */
  -webkit-overflow-scrolling: touch;    /* rolagem suave no iOS */
}

/* barra de paginação */
.table-pager{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; border:1px solid var(--stroke);
  background:var(--surface); border-radius:12px; margin-bottom:10px;
}
.table-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:10px; border:1px solid var(--stroke); background:var(--surface);
  border-radius:12px; box-shadow:var(--shadow-sm); margin:6px 0 12px;
}
.table-toolbar .input-icon{flex:1}
.table-toolbar .btn{white-space:nowrap}
.table-toolbar .btn.ghost{border-style:dashed}
@media(max-width:900px){
  .table-toolbar{position:sticky; top:64px; z-index:7}
}
.table-pager.sticky{
  position: sticky; bottom: 0; margin:0; border-left:0; border-right:0; border-bottom:0;
  border-top:1px solid var(--stroke); border-radius:0;
  background: color-mix(in oklab, var(--surface), transparent 0%);
  z-index: 5; /* garante que fique acima das linhas da tabela */
}
.pager-hint{ color:var(--muted); font-size: var(--fs-12) }