/* ═══════════════════════════════════════════════════════════════════════════
   GESTÃO realme — Design System v2
   Inspirado no sistema realme Recruta (Inter, light-first, sidebar preta)
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --yellow:       #FFC915;
  --yellow-dark:  #F0B400;
  --yellow-light: #FFF7DC;
  --black:        #111111;

  /* Backgrounds (light-first) */
  --bg:       #F7F7F7;
  --surface:  #FFFFFF;
  --surface2: #F3F4F6;
  --surface3: #E9EAEC;

  /* Borders */
  --border:  #E5E7EB;
  --border2: #D1D5DB;

  /* Text */
  --text:   #111827;
  --text2:  #374151;
  --muted:  #6B7280;
  --muted2: #9CA3AF;

  /* Status */
  --green:      #059669;
  --green-bg:   #D1FAE5;
  --red:        #DC2626;
  --red-bg:     #FEE2E2;
  --orange:     #D97706;
  --orange-bg:  #FEF3C7;
  --blue:       #2563EB;
  --blue-bg:    #DBEAFE;
  --purple:     #7C3AED;
  --purple-bg:  #EDE9FE;

  /* Sidebar */
  --sb-bg:          #111111;
  --sb-text:        rgba(255,255,255,.55);
  --sb-text-hover:  rgba(255,255,255,.9);
  --sb-active-bg:   #FFC915;
  --sb-active-text: #111111;
  --sb-width:       248px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(17,17,17,.06),0 1px 2px rgba(17,17,17,.04);
  --shadow:    0 1px 3px rgba(17,17,17,.06),0 4px 16px rgba(17,17,17,.05);
  --shadow-md: 0 4px 24px rgba(17,17,17,.08);
  --shadow-lg: 0 8px 40px rgba(17,17,17,.12);

  /* Typography */
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'DM Mono','Fira Code',monospace;

  /* Radius */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-xl:  18px;

  /* Compat aliases (usados pelo JS existente) */
  --accent:     var(--yellow);
  --accent-dim: var(--yellow-light);
  --accent-txt: #000;
  --accent-hi:  #7a5000;
  --sw:         var(--sb-width);
  --sh:         var(--shadow-lg);
  --sh-sm:      var(--shadow-sm);
}

/* Dark theme */
body.dark {
  --bg:      #0f1011;
  --surface: #17181b;
  --surface2:#1d1f22;
  --surface3:#252729;
  --border:  #2b2d30;
  --border2: #3a3c40;
  --text:    #e6e6e6;
  --text2:   #c0c0c0;
  --muted:   #8a8a8a;
  --muted2:  #6a6a6a;
  --green-bg:   rgba(5,150,105,.15);
  --red-bg:     rgba(220,38,38,.15);
  --orange-bg:  rgba(217,119,6,.15);
  --blue-bg:    rgba(37,99,235,.15);
  --purple-bg:  rgba(124,58,237,.15);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow:     0 2px 12px rgba(0,0,0,.4);
  --shadow-md:  0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.6);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; -webkit-font-smoothing:antialiased }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  transition:background .2s,color .2s;
}
a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:inherit }
input,select,textarea { font-family:inherit }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH
   ═══════════════════════════════════════════════════════════════════════════ */
#auth-screen {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--black);
  padding:2rem;
  gap:.75rem;
}
.auth-brand {
  font-size:2.2rem;
  font-weight:800;
  color:var(--yellow);
  letter-spacing:-1px;
}
.auth-sub {
  font-size:.7rem;
  font-weight:600;
  color:rgba(255,255,255,.3);
  letter-spacing:4px;
  text-transform:uppercase;
  margin-top:-.2rem;
}
.auth-card {
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  border-radius:var(--r-xl);
  padding:2rem;
  width:100%;
  max-width:380px;
  margin-top:.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.auth-h { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:.1rem }
.auth-card .f { display:flex; flex-direction:column; gap:.4rem }
.auth-card label {
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  color:rgba(255,255,255,.4);
}
.auth-card input {
  background:#262626; border:1px solid #333;
  border-radius:var(--r); padding:.7rem 1rem;
  color:#fff; font-size:.9rem; outline:none;
  transition:border-color .15s;
}
.auth-card input:focus { border-color:var(--yellow) }
.auth-err {
  font-size:.78rem; color:#fb7185;
  text-align:center; display:none;
  font-family:var(--mono); line-height:1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACESSO NEGADO
   ═══════════════════════════════════════════════════════════════════════════ */
#acesso-negado-screen {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
.acesso-negado {
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding:3rem 2rem;
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  max-width:400px;
}
.acesso-negado-icon  { font-size:3rem }
.acesso-negado-title { font-size:1.2rem; font-weight:700 }
.acesso-negado-sub   { font-size:.875rem; color:var(--muted); line-height:1.6 }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
#app { min-height:100vh }
.layout { display:flex; min-height:100vh }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar {
  width:var(--sb-width);
  min-height:100vh;
  background:var(--sb-bg);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  flex-shrink:0;
  z-index:100;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.07) transparent;
}
#sidebar::-webkit-scrollbar { width:3px }
#sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px }

.sb-logo {
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1.3rem 1.25rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.sb-logo-icon {
  width:30px; height:30px;
  background:var(--yellow);
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.65rem;
  color:#000;
  letter-spacing:-.5px;
  flex-shrink:0;
}
.sb-logo-t {
  font-size:1.1rem;
  font-weight:800;
  color:var(--yellow);
  letter-spacing:-.5px;
  line-height:1.1;
}
.sb-logo-s {
  font-size:.62rem;
  color:rgba(255,255,255,.3);
  font-weight:500;
  letter-spacing:.5px;
  margin-top:1px;
}

.sb-sec { flex:1; padding:.6rem 0 }

.sb-modulo-lbl {
  font-size:.58rem;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.22);
  padding:.9rem 1.25rem .35rem;
}

.sb-item {
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.52rem 1rem .52rem 1.25rem;
  margin:1px .5rem;
  border-radius:var(--r);
  color:var(--sb-text);
  font-size:.85rem;
  font-weight:500;
  transition:background .12s,color .12s;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sb-item:hover { background:rgba(255,255,255,.07); color:var(--sb-text-hover) }
.sb-item.active { background:var(--sb-active-bg); color:var(--sb-active-text); font-weight:600 }

.sb-subitem {
  padding-left:2.5rem;
  font-size:.8rem;
  color:rgba(255,255,255,.38);
  margin:0 .5rem;
}
.sb-subitem:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.05) }
.sb-subitem.active { background:rgba(255,201,21,.12); color:var(--yellow) }

.sb-grupo {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem 1rem .42rem 1.25rem;
  margin:1px .5rem;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.45);
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
  transition:background .12s;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.sb-grupo:hover { background:rgba(255,255,255,.05) }
.sb-grupo.active { background:rgba(255,255,255,.08) }
.sb-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0 }

.sb-bottom {
  padding:.9rem .75rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:.45rem;
  flex-shrink:0;
}
.sb-user {
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  padding:.4rem .75rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  overflow:hidden;
}
.gestao-role-badge {
  background:var(--yellow);
  color:#000;
  font-size:.52rem;
  font-weight:800;
  padding:.18rem .45rem;
  border-radius:4px;
  letter-spacing:1px;
  flex-shrink:0;
}

/* ── Main content ─────────────────────────────────────────────────────────── */
#main { flex:1; min-width:0; display:flex; flex-direction:column }
.page-wrap { flex:1; padding:2rem }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
.mob-btn {
  display:none;
  position:fixed;
  top:1rem; left:1rem;
  z-index:200;
  width:40px; height:40px;
  background:var(--black);
  color:#fff;
  border:none;
  border-radius:var(--r);
  font-size:1.1rem;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-md);
}
.sb-ov {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:99;
}
.sb-ov.show { display:block }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.page-header { margin-bottom:1.5rem }
.page-header-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.page-title { font-size:1.35rem; font-weight:700; color:var(--text); line-height:1.2 }
.page-subtitle { font-size:.875rem; color:var(--muted); margin-top:.25rem }
.page-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.breadcrumb {
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; color:var(--muted2); margin-bottom:.5rem;
}
.breadcrumb-sep { opacity:.4 }
.breadcrumb-cur { color:var(--muted); font-weight:500 }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:1.5rem;
}
.card-sm  { padding:1rem }
.card-title { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:1rem }

/* ── KPI Cards ──────────────────────────────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
.kpi {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:1.25rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  transition:box-shadow .15s,transform .15s;
}
.kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-1px) }
.kpi-icon { font-size:1.3rem; margin-bottom:.1rem }
.kpi-val {
  font-size:1.55rem;
  font-weight:800;
  color:var(--text);
  line-height:1;
  font-family:var(--mono);
}
.kpi-lbl {
  font-size:.68rem;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.kpi-change { font-size:.72rem; font-weight:600; font-family:var(--mono) }
.kpi-change.up   { color:var(--green) }
.kpi-change.down { color:var(--red) }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-pri {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--yellow); color:#000; border:none;
  border-radius:var(--r); padding:.6rem 1.25rem;
  font-size:.875rem; font-weight:600; font-family:var(--font);
  transition:background .12s,box-shadow .12s;
  white-space:nowrap; cursor:pointer;
}
.btn-pri:hover { background:var(--yellow-dark); box-shadow:0 4px 12px rgba(255,201,21,.3) }
.btn-pri:disabled { opacity:.5; cursor:not-allowed }

.btn-sec {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--black); color:#fff; border:none;
  border-radius:var(--r); padding:.6rem 1.25rem;
  font-size:.875rem; font-weight:600; font-family:var(--font);
  transition:background .12s; white-space:nowrap; cursor:pointer;
}
.btn-sec:hover { background:#2a2a2a }
.btn-sec:disabled { opacity:.5; cursor:not-allowed }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--surface); color:var(--text2);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.55rem 1rem; font-size:.875rem; font-weight:500;
  font-family:var(--font); transition:background .12s,border-color .12s;
  white-space:nowrap; cursor:pointer;
}
.btn-ghost:hover { background:var(--surface2); border-color:var(--border2) }
.btn-ghost:disabled { opacity:.5; cursor:not-allowed }

.btn-out {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r);
  padding:.5rem .9rem; font-size:.78rem; font-weight:500;
  font-family:var(--font); transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap; cursor:pointer; width:100%;
}
.btn-out:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.25) }
.btn-out.danger { border-color:rgba(251,113,133,.3); color:rgba(251,113,133,.7) }
.btn-out.danger:hover { background:rgba(251,113,133,.1); color:#fb7185 }

.btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--red); color:#fff; border:none;
  border-radius:var(--r); padding:.6rem 1.25rem;
  font-size:.875rem; font-weight:600; font-family:var(--font);
  transition:background .12s; cursor:pointer; white-space:nowrap;
}
.btn-danger:hover { background:#b91c1c }

/* Modal action buttons */
.btn-sv {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--yellow); color:#000; border:none;
  border-radius:var(--r); padding:.6rem 1.25rem;
  font-size:.875rem; font-weight:600; font-family:var(--font);
  cursor:pointer; transition:background .12s;
}
.btn-sv:hover { background:var(--yellow-dark) }
.btn-sv:disabled { opacity:.5; cursor:not-allowed }

.btn-can {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--surface2); color:var(--text2);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.6rem 1.25rem; font-size:.875rem; font-weight:500;
  font-family:var(--font); cursor:pointer; transition:background .12s;
}
.btn-can:hover { background:var(--surface3) }

.btn-danger-sm {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:transparent; color:var(--red);
  border:1px solid rgba(220,38,38,.3); border-radius:var(--r);
  padding:.5rem 1rem; font-size:.8rem; font-weight:600;
  font-family:var(--font); cursor:pointer; transition:background .12s;
}
.btn-danger-sm:hover { background:var(--red-bg) }

.btn-icon {
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--muted); font-size:.85rem;
  cursor:pointer; transition:background .12s,color .12s;
}
.btn-icon:hover { background:var(--surface3); color:var(--text) }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.fg {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.8rem;
}
.f { display:flex; flex-direction:column; gap:.32rem }
.f.full { grid-column:1/-1 }
.f label,.lbl {
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
}
.f input,.f select,.f textarea,.inp,.sel {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); padding:.6rem .85rem;
  font-size:.875rem; color:var(--text); outline:none;
  transition:border-color .15s,box-shadow .15s;
  font-family:var(--font); width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus,.inp:focus,.sel:focus {
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,201,21,.12);
}
.f textarea { resize:vertical; min-height:80px }
.f select { cursor:pointer }

.section-label {
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; color:var(--muted);
  padding:.4rem 0 .2rem;
  border-bottom:1px solid var(--border); margin-bottom:.75rem;
}

.form-grp { display:flex; flex-direction:column; gap:.4rem }
.form-grp label { font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.form-grp input,.form-grp select,.form-grp textarea {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); padding:.6rem .85rem;
  font-size:.875rem; color:var(--text); outline:none;
  transition:border-color .15s; font-family:var(--font);
}
.form-grp input:focus,.form-grp select:focus,.form-grp textarea:focus {
  border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,201,21,.12);
}

/* Filter bar */
.filter-bar {
  display:flex; align-items:center; gap:.65rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.filter-bar input,.filter-bar select {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); padding:.48rem .85rem;
  font-size:.875rem; color:var(--text); outline:none;
  font-family:var(--font); transition:border-color .15s;
}
.filter-bar input:focus,.filter-bar select:focus { border-color:var(--yellow) }
.filter-bar input[type=search] { min-width:180px }
.filter-sep { flex:1 }

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
.tbl-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  overflow-x:auto;
}
.tbl-wrap table { width:100%; border-collapse:collapse; font-size:.875rem }
.tbl-wrap th {
  background:var(--surface2);
  font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
  padding:.7rem 1rem; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.tbl-wrap td {
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:middle;
}
.tbl-wrap tr:last-child td { border-bottom:none }
.tbl-wrap tr:hover td { background:var(--surface2) }
.tbl-wrap td b { color:var(--text); font-weight:600 }
.tbl-wrap .tbl-actions {
  display:flex; align-items:center; gap:.35rem; justify-content:flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */
.ov {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:300; align-items:flex-start; justify-content:center;
  padding:2rem 1rem; overflow-y:auto; backdrop-filter:blur(2px);
}
.ov.open { display:flex }
body.modal-open { overflow:hidden; position:fixed; width:100% }

.modal {
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  width:100%; max-width:580px;
  margin:auto;
  animation:modalIn .2s ease;
}
.modal.wide  { max-width:760px }
.modal.slim  { max-width:420px }
.modal.ultra { max-width:1000px }
@keyframes modalIn {
  from { opacity:0; transform:translateY(-14px) scale(.98) }
  to   { opacity:1; transform:none }
}
.modal-h,.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
}
.modal-t { font-size:1rem; font-weight:700; color:var(--text) }
.modal-x {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:50%; color:var(--muted); font-size:.8rem;
  cursor:pointer; transition:background .12s,color .12s; flex-shrink:0;
}
.modal-x:hover { background:var(--red-bg); color:var(--red) }
.modal-b,.modal-bd {
  padding:1.5rem; max-height:70vh; overflow-y:auto;
}
.modal-f,.modal-ft {
  display:flex; align-items:center; justify-content:flex-end; gap:.75rem;
  padding:1.25rem 1.5rem; border-top:1px solid var(--border);
}
#ov-confirm .modal-b { text-align:center }
#confirm-msg { font-size:.925rem; color:var(--text2); padding:.5rem 0; line-height:1.5 }

/* ═══════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-bar {
  display:flex; align-items:center; gap:.2rem;
  background:var(--surface2); border-radius:var(--r);
  padding:.25rem; margin-bottom:1.25rem; flex-wrap:wrap;
  border:1px solid var(--border);
}
.tab {
  padding:.42rem .9rem; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:500; color:var(--muted);
  cursor:pointer; transition:background .12s,color .12s; white-space:nowrap;
}
.tab:hover { color:var(--text2) }
.tab.active {
  background:var(--surface); color:var(--text);
  font-weight:600; box-shadow:var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES / CHIPS
   ═══════════════════════════════════════════════════════════════════════════ */
.badge,.chip {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.18rem .6rem; border-radius:9999px;
  font-size:.7rem; font-weight:600; white-space:nowrap;
}
.badge-green,.chip-green,.dot-green+span  { background:var(--green-bg);  color:var(--green)  }
.badge-red,.chip-red                       { background:var(--red-bg);    color:var(--red)    }
.badge-orange,.chip-orange                 { background:var(--orange-bg); color:var(--orange) }
.badge-blue,.chip-blue                     { background:var(--blue-bg);   color:var(--blue)   }
.badge-purple,.chip-purple                 { background:var(--purple-bg); color:var(--purple) }
.badge-gray,.chip-gray                     { background:var(--surface2);  color:var(--muted)  }
.badge-yellow,.chip-yellow                 { background:var(--yellow-light); color:#7a5000    }

.dot-green,.dot-red,.dot-yellow,.dot-orange,.dot-blue,.dot-gray {
  display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.dot-green  { background:var(--green)  }
.dot-red    { background:var(--red)    }
.dot-yellow { background:var(--yellow) }
.dot-orange { background:var(--orange) }
.dot-blue   { background:var(--blue)   }
.dot-gray   { background:var(--muted2) }

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:4rem 2rem; text-align:center; color:var(--muted);
}
.empty i { font-size:2.5rem; font-style:normal }
.empty p,.empty span { font-size:.9rem }

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLES
   ═══════════════════════════════════════════════════════════════════════════ */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 0; border-bottom:1px solid var(--border);
}
.toggle-row:last-child { border-bottom:none }
.tg { position:relative; display:inline-flex; align-items:center; width:42px; height:24px; flex-shrink:0 }
.tg input { opacity:0; width:0; height:0; position:absolute }
.tg-sl {
  position:absolute; inset:0;
  background:var(--border2); border-radius:9999px;
  cursor:pointer; transition:background .2s;
}
.tg-sl::before {
  content:''; position:absolute; left:3px; top:3px;
  width:18px; height:18px; background:#fff; border-radius:50%;
  transition:transform .2s; box-shadow:var(--shadow-sm);
}
.tg input:checked + .tg-sl { background:var(--yellow) }
.tg input:checked + .tg-sl::before { transform:translateX(18px) }

/* ═══════════════════════════════════════════════════════════════════════════
   FILE DROP ZONE
   ═══════════════════════════════════════════════════════════════════════════ */
.drop-zone {
  border:2px dashed var(--border2); border-radius:var(--r-lg);
  padding:2.5rem; text-align:center; cursor:pointer;
  transition:border-color .15s,background .15s;
  color:var(--muted); background:var(--surface2);
}
.drop-zone:hover,.drop-zone.drag-over {
  border-color:var(--yellow); background:var(--yellow-light); color:var(--text);
}
.drop-icon { font-size:2rem; margin-bottom:.5rem }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */
#toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
  z-index:9999; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem; background:var(--black); color:#fff;
  border-radius:var(--r); box-shadow:var(--shadow-md);
  font-size:.85rem; font-weight:500; pointer-events:auto;
  animation:toastIn .25s ease; max-width:340px; cursor:pointer;
}
.toast.success,.toast.ok   { background:#064e3b; border-left:3px solid var(--green) }
.toast.error,.toast.err    { background:#7f1d1d; border-left:3px solid var(--red) }
.toast.warn                { background:#78350f; border-left:3px solid var(--orange) }
.toast.info                { background:#1e3a5f; border-left:3px solid var(--blue) }
@keyframes toastIn {
  from { opacity:0; transform:translateX(14px) }
  to   { opacity:1; transform:none }
}
.toast-out { animation:toastOut .2s ease forwards }
@keyframes toastOut { to { opacity:0; transform:translateX(14px) } }
#toast-wrap { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem }

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
#ldov {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:9998; display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:1rem; backdrop-filter:blur(2px);
}
#ldov.show { display:flex }
#ldtxt { color:#fff; font-size:.875rem; font-weight:500; font-family:var(--mono) }
.ld-spinner {
  width:38px; height:38px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--yellow);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD / FINANCEIRO GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.section-hd {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
}
.section-ht { font-size:.95rem; font-weight:700; color:var(--text) }
.mt-tipo-opt {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border:1px solid var(--border2);
  border-radius:var(--r-sm); cursor:pointer;
  transition:border-color .12s,background .12s;
}
.mt-tipo-opt input { accent-color:var(--yellow) }
.mt-tipo-opt:hover { border-color:var(--yellow); background:var(--yellow-light) }

/* Extrato rows */
.ext-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 0; border-bottom:1px solid var(--border);
}
.ext-row:last-child { border-bottom:none }
.ext-desc { flex:1; font-size:.875rem; color:var(--text2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ext-val  { font-family:var(--mono); font-size:.875rem; font-weight:600; flex-shrink:0 }
.ext-val.pos { color:var(--green) }
.ext-val.neg { color:var(--red) }

/* ═══════════════════════════════════════════════════════════════════════════
   EM BREVE (placeholder pages)
   ═══════════════════════════════════════════════════════════════════════════ */
.em-breve {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1rem; padding:5rem 2rem; text-align:center;
}
.em-breve-icon { font-size:3.5rem }
.em-breve h2 { font-size:1.25rem; font-weight:700 }
.em-breve p  { color:var(--muted); font-size:.9rem; max-width:340px; line-height:1.6 }

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB BAR
   ═══════════════════════════════════════════════════════════════════════════ */
#breadcrumb-bar {
  padding:.6rem 2rem .1rem;
  min-height:0;
}
#breadcrumb-bar:empty { display:none }
.bc {
  display:flex; align-items:center; gap:.35rem;
  font-size:.72rem; color:var(--muted2); flex-wrap:wrap;
}
.bc-item { color:var(--muted2); transition:color .12s }
.bc-item:hover { color:var(--muted) }
.bc-item.link { cursor:pointer }
.bc-sep { color:var(--border2); font-size:.65rem }
.bc-cur { color:var(--muted); font-weight:500 }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER COMPAT — aliases para as classes usadas pelo JS existente
   ═══════════════════════════════════════════════════════════════════════════ */

/* pg-head: mesmo que .page-header-top */
.pg-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.35rem;
}
.pg-title {
  font-size:1.3rem; font-weight:700;
  color:var(--text); line-height:1.2;
  display:flex; align-items:center; gap:.5rem;
}
.pg-sub { font-size:.875rem; color:var(--muted); margin-top:.25rem; line-height:1.4 }

/* btn-add: alias do btn-pri */
.btn-add {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--yellow); color:#000; border:none;
  border-radius:var(--r); padding:.58rem 1.15rem;
  font-size:.875rem; font-weight:600; font-family:var(--font);
  transition:background .12s,box-shadow .12s; white-space:nowrap; cursor:pointer;
}
.btn-add:hover { background:var(--yellow-dark); box-shadow:0 4px 12px rgba(255,201,21,.3) }
.btn-add:disabled { opacity:.5; cursor:not-allowed }

/* btn-row: linha de botões */
.btn-row {
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
}

/* toolbar: alias de .filter-bar */
.toolbar {
  display:flex; align-items:center; gap:.65rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.toolbar input,.toolbar select,
.srch,.filt {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); padding:.5rem .85rem;
  font-size:.875rem; color:var(--text); outline:none;
  font-family:var(--font); transition:border-color .15s,box-shadow .15s;
  height:38px;
}
.toolbar input:focus,.toolbar select:focus,
.srch:focus,.filt:focus {
  border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,201,21,.12);
}
.srch { min-width:200px }
.filt { cursor:pointer }

/* kpi-row: alias de .kpi-grid */
.kpi-row {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
/* .kpi-val.mn — valor monospace */
.kpi-val.mn,.kpi-val { font-family:var(--mono) }

/* info-box: caixa de alerta informativa */
.info-box {
  display:flex; align-items:flex-start; gap:.65rem;
  background:var(--blue-bg); color:var(--blue);
  border:1px solid rgba(37,99,235,.2); border-radius:var(--r);
  padding:.75rem 1rem; font-size:.875rem; line-height:1.5;
  margin-bottom:1rem;
}
.info-box.warn { background:var(--orange-bg); color:var(--orange); border-color:rgba(217,119,6,.2) }
.info-box.ok   { background:var(--green-bg);  color:var(--green);  border-color:rgba(5,150,105,.2) }
.info-box.err  { background:var(--red-bg);    color:var(--red);    border-color:rgba(220,38,38,.2) }

/* ── Dashboard company tabs ─────────────────────────────────────────────── */
.dash-emp-tabs {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.35rem 0 1rem; border-bottom:1px solid var(--border);
  margin-bottom:1.25rem;
}
.dash-emp-tab {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .85rem; border-radius:9999px;
  font-size:.78rem; font-weight:500;
  background:var(--surface); border:1px solid var(--border2);
  color:var(--muted); cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap;
}
.dash-emp-tab:hover { background:var(--surface2); color:var(--text2); border-color:var(--border) }
.dash-emp-tab.active {
  background:var(--yellow); color:#000;
  border-color:var(--yellow); font-weight:600;
}

/* ── Table action buttons (.act) ────────────────────────────────────────── */
.act {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.28rem .7rem; border-radius:var(--r-sm);
  font-size:.78rem; font-weight:500;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--muted); cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap; font-family:var(--font);
}
.act:hover { background:var(--surface3); color:var(--text); border-color:var(--border2) }
.act.del,.act[style*="color:var(--r)"] {
  color:var(--red); border-color:rgba(220,38,38,.25);
}
.act.del:hover { background:var(--red-bg) }

/* ── Bar chart (dashboard stats) ────────────────────────────────────────── */
.bar-lbl {
  font-size:.72rem; color:var(--muted2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
  flex:0 0 100px;
}
.bar-bg {
  flex:1; background:var(--surface3); border-radius:9999px;
  height:8px; overflow:hidden;
}
.bar-fill {
  height:100%; background:var(--yellow);
  border-radius:9999px; transition:width .4s ease;
  min-width:3px;
}

/* ── Card header/body (usado dentro de .card) ───────────────────────────── */
.card-h {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  font-size:.9rem; font-weight:700; color:var(--text);
}
.card-b { padding:1.25rem }
.card-hd { /* alias */ display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.card-bd { padding:1.25rem }

/* ── Tag chip ──────────────────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center;
  padding:.18rem .55rem; border-radius:var(--r-sm);
  font-size:.72rem; font-weight:600;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--muted2);
}

/* ── Acesso display rows ─────────────────────────────────────────────────── */
.acesso-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.875rem;
}
.acesso-row:last-child { border-bottom:none }
.acesso-row span:first-child { color:var(--muted); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px }
.acesso-senha {
  font-family:var(--mono); font-size:.875rem; cursor:pointer;
  color:var(--muted); transition:color .12s;
  padding:.15rem .4rem; border-radius:var(--r-sm);
  background:var(--surface2); border:1px solid var(--border);
}
.acesso-senha:hover { color:var(--text); border-color:var(--yellow) }

/* ── Employee period / experience grid ──────────────────────────────────── */
.ep-val { font-family:var(--mono); font-size:.8rem; color:var(--muted) }
.exp-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:.75rem;
}

/* ── Escalas & schedules ────────────────────────────────────────────────── */
.escala-emp {
  display:inline-flex; align-items:center;
  padding:.15rem .55rem; background:var(--yellow-light);
  border-radius:var(--r-sm); font-size:.72rem; font-weight:600; color:#7a5000;
}

/* ── Feriados year selector ──────────────────────────────────────────────── */
.fer-year-sel {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--r); padding:.28rem .6rem;
}
.fer-year-btn {
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--muted); font-size:.9rem;
  cursor:pointer; border-radius:var(--r-sm);
  transition:background .12s,color .12s; font-family:var(--font);
}
.fer-year-btn:hover { background:var(--surface2); color:var(--text) }
.fer-year-lbl { font-size:.875rem; font-weight:700; color:var(--text); min-width:40px; text-align:center }

/* ── Feriados table ─────────────────────────────────────────────────────── */
.fer-table { width:100%; border-collapse:collapse; font-size:.875rem }
.fer-table th {
  background:var(--surface2); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
  padding:.65rem 1rem; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.fer-table td {
  padding:.65rem 1rem; border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:middle;
}
.fer-table tr:last-child td { border-bottom:none }
.fer-table tr:hover td { background:var(--surface2) }

/* ── Financeiro: navigation pills ───────────────────────────────────────── */
.gnav {
  display:flex; align-items:center; gap:.35rem;
  flex-wrap:wrap; margin-bottom:.75rem;
}
.gpill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .9rem; border-radius:9999px;
  font-size:.8rem; font-weight:500; cursor:pointer;
  background:var(--surface); border:1px solid var(--border2);
  color:var(--muted); transition:background .12s,color .12s,border-color .12s;
  white-space:nowrap;
}
.gpill:hover { background:var(--surface2); color:var(--text2) }
.gpill.active {
  background:var(--yellow); color:#000;
  border-color:var(--yellow); font-weight:600;
}

/* ── Financeiro: store subtabs ──────────────────────────────────────────── */
.store-tabs {
  display:flex; align-items:center; gap:.2rem;
  background:var(--surface2); border-radius:var(--r);
  padding:.25rem; margin-bottom:1.25rem; flex-wrap:wrap;
  border:1px solid var(--border); overflow-x:auto;
}
.store-tab {
  padding:.38rem .85rem; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:500; color:var(--muted);
  cursor:pointer; transition:background .12s,color .12s; white-space:nowrap;
}
.store-tab:hover { color:var(--text2) }
.store-tab.active {
  background:var(--surface); color:var(--text);
  font-weight:600; box-shadow:var(--shadow-sm);
}

/* ── Ponto / escalas table inner ────────────────────────────────────────── */
.pt-table { width:100%; border-collapse:collapse; font-size:.875rem }
.pt-table th {
  background:var(--surface2); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
  padding:.65rem 1rem; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.pt-table td {
  padding:.65rem 1rem; border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:middle;
}
.pt-table tr:last-child td { border-bottom:none }
.pt-table tr:hover td { background:var(--surface2) }

/* ── Misc RH legacy classes ─────────────────────────────────────────────── */
.func-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:1.25rem; transition:box-shadow .15s,transform .15s;
}
.func-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px) }

.row  { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem }
.lbl  { font-size:.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.val  { font-size:.875rem; color:var(--text2) }
.item { display:flex; flex-direction:column; gap:.15rem }
.l    { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600 }
.v    { font-size:.875rem; color:var(--text2) }

/* Compat: bd-* badge variants */
.bd-g { background:var(--green-bg);  color:var(--green)  }
.bd-r { background:var(--red-bg);    color:var(--red)    }
.bd-y { background:var(--yellow-light); color:#7a5000    }
.bd-b { background:var(--blue-bg);   color:var(--blue)   }

/* Compat: section-h / section wrapping */
.section-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  overflow:hidden; margin-bottom:1.25rem;
}
.section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--border);
  font-size:.875rem; font-weight:700;
}

/* Financeiro: alert cards */
.alert-card {
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.9rem 1rem; border-radius:var(--r);
  border:1px solid; margin-bottom:.6rem;
  font-size:.875rem; cursor:pointer;
  transition:opacity .12s;
}
.alert-card.danger { background:var(--red-bg);    border-color:rgba(220,38,38,.2); color:var(--red) }
.alert-card.warn   { background:var(--orange-bg); border-color:rgba(217,119,6,.2); color:var(--orange) }
.alert-card.info   { background:var(--blue-bg);   border-color:rgba(37,99,235,.2); color:var(--blue) }
.alert-card.ok     { background:var(--green-bg);  border-color:rgba(5,150,105,.2); color:var(--green) }
.alert-card:hover  { opacity:.85 }
.alert-card-title  { font-weight:600; line-height:1.3 }
.alert-card-sub    { font-size:.78rem; margin-top:.2rem; opacity:.8 }

/* Financeiro: extrato/statement */
.ext-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
}
.ext-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--border);
  font-size:.875rem; font-weight:700;
}

/* Fechamento / resumo financeiro */
.fech-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.85rem; margin-bottom:1.25rem;
}
.fech-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.fech-lbl { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted) }
.fech-val { font-size:1.2rem; font-weight:800; font-family:var(--mono); color:var(--text) }
.fech-val.pos { color:var(--green) }
.fech-val.neg { color:var(--red) }

/* ── Pontos (registros de ponto) ────────────────────────────────────────── */
.ponto-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:1rem;
}
.ponto-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem; background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:.875rem; font-weight:600;
}

/* ── VT cards ───────────────────────────────────────────────────────────── */
.vt-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.25rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.vt-nome { font-weight:700; font-size:.925rem }
.vt-empresa { font-size:.75rem; color:var(--muted) }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.flex          { display:flex }
.flex-col      { display:flex; flex-direction:column }
.items-center  { align-items:center }
.justify-between { justify-content:space-between }
.gap-1  { gap:.5rem }  .gap-2 { gap:1rem }  .gap-3 { gap:1.5rem }
.mt-1   { margin-top:.5rem } .mt-2 { margin-top:1rem } .mt-3 { margin-top:1.5rem }
.mb-1   { margin-bottom:.5rem } .mb-2 { margin-bottom:1rem } .mb-3 { margin-bottom:1.5rem }
.w-full { width:100% }
.text-sm    { font-size:.875rem } .text-xs { font-size:.75rem }
.text-muted { color:var(--muted) } .text-right { text-align:right }
.text-center{ text-align:center } .font-bold { font-weight:700 }
.font-mono  { font-family:var(--mono) }
.truncate   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.divider    { height:1px; background:var(--border); margin:1rem 0 }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .mob-btn { display:flex }
  #sidebar {
    position:fixed; left:-100%; top:0; bottom:0;
    transition:left .25s ease; z-index:200;
  }
  #sidebar.open { left:0 }
  .page-wrap { padding:1.25rem 1rem }
  #breadcrumb-bar { padding:.5rem 1rem .1rem }
  .kpi-grid,.kpi-row { grid-template-columns:1fr 1fr }
  .fg { grid-template-columns:1fr }
  .modal-b,.modal-bd { max-height:60vh }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
  .dashboard-grid { grid-template-columns:1fr }
  .exp-grid { grid-template-columns:1fr }
  .fech-grid { grid-template-columns:1fr 1fr }
  .pg-head { flex-direction:column; gap:.75rem }
  .pg-head .btn-row { width:100%; justify-content:flex-start }
  .toolbar,.filter-bar { flex-direction:column; align-items:stretch }
  .toolbar select,.toolbar input,.filt,.srch { width:100% }
  .dash-emp-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:.75rem }
  .gnav { overflow-x:auto; flex-wrap:nowrap }
  .store-tabs { flex-wrap:nowrap; overflow-x:auto }
  .tbl-wrap { overflow-x:auto }
  .fer-table,.pt-table { min-width:500px }
}
@media (max-width:480px) {
  .kpi-grid,.kpi-row { grid-template-columns:1fr }
  .tab-bar { overflow-x:auto; flex-wrap:nowrap; padding:.2rem }
  .page-title,.pg-title { font-size:1.15rem }
  .filter-bar,.toolbar { flex-direction:column; align-items:stretch }
  .fech-grid { grid-template-columns:1fr }
  .modal { border-radius:var(--r-lg) }
  .modal-b,.modal-bd { max-height:55vh }
}