/* base.css — ControleOS 2026 */


/* ──────────────────────────────────────────────────────────────────────────
   GV NOTEBOOKS — Design System v2
   Fonte: Plus Jakarta Sans | Cores: Navy #1E2278 · Sky Blue #00AEEF
─────────────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Brand */
  --brand-navy:#1E2278;
  --brand-blue:#00AEEF;
  --brand-blue-h:#0099d4;

  /* Superfícies */
  --bg:#eef2f7;
  --surface:#ffffff;
  --surface2:#f8fafc;
  --surface3:#f1f5f9;
  --border:#dde5ef;
  --border-light:#edf2f7;

  /* Texto */
  --text:#111827;
  --text-secondary:#374151;
  --muted:#64748b;
  --muted-light:#94a3b8;

  /* Cores semânticas */
  --primary:#00AEEF;
  --primary-h:#0099d4;
  --primary-dark:#1E2278;
  --primary-glow:rgba(0,174,239,.15);
  --success:#059669;
  --success-bg:#ecfdf5;
  --warn:#d97706;
  --warn-bg:#fffbeb;
  --danger:#dc2626;
  --danger-bg:#fef2f2;

  /* Sidebar */
  --sidebar-bg:#1E2278;
  --sidebar-surface:rgba(255,255,255,.05);
  --sidebar-text:#c8d4f0;
  --sidebar-muted:#7a88c0;
  --sidebar-active-bg:rgba(0,174,239,.2);
  --sidebar-active-text:#00AEEF;
  --sidebar-hover-bg:rgba(255,255,255,.07);
  --sidebar-border:rgba(255,255,255,.08);

  /* Tokens de design */
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);

  /* Hover / Active */
  --hover-bg:#e8f4fc;
  --active-bg:#d0eaf8;
  --td-hover:#f5f9fd;
  --td-border:#eef3f8;
  --input-readonly:#f8fafc;
  --chart-grid:#e8eef5;
}

[data-theme="dark"]{
  --bg:#080d14;
  --surface:#0f1623;
  --surface2:#141e2e;
  --surface3:#192235;
  --border:#1e2d42;
  --border-light:#182030;
  --text:#e8edf5;
  --text-secondary:#c4cdd8;
  --muted:#7a8ba8;
  --muted-light:#4a5a70;
  --primary:#00AEEF;
  --primary-h:#33c0f4;
  --primary-dark:#1E2278;
  --primary-glow:rgba(0,174,239,.12);
  --success:#10b981;
  --success-bg:rgba(16,185,129,.1);
  --warn:#f59e0b;
  --warn-bg:rgba(245,158,11,.1);
  --danger:#f87171;
  --danger-bg:rgba(248,113,113,.1);
  --sidebar-bg:#080e1a;
  --sidebar-surface:rgba(255,255,255,.04);
  --sidebar-text:#c8d4f0;
  --sidebar-muted:#4a5a78;
  --sidebar-active-bg:rgba(0,174,239,.15);
  --sidebar-active-text:#00AEEF;
  --sidebar-hover-bg:rgba(255,255,255,.05);
  --sidebar-border:rgba(255,255,255,.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow:0 4px 12px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.4);
  --hover-bg:#1a2640;
  --active-bg:#162038;
  --td-hover:#111a28;
  --td-border:#1a2638;
  --input-readonly:#0d1520;
  --chart-grid:#1a2638;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
#app{display:flex;height:100vh;overflow:hidden}

#sidebar{
  width:228px;
  background:var(--sidebar-bg);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  box-shadow:4px 0 24px rgba(0,0,0,.2);
  position:relative;
  z-index:10;
  height:100vh;
  overflow-y:auto;
}

#main{
  flex:1;
  overflow-y:auto;
  padding:28px 32px;
  background:var(--bg);
  height:100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar-logo{
  padding:18px 16px 16px;
  border-bottom:1px solid var(--sidebar-border);
  display:flex;
  align-items:center;
  justify-content:center;
}

nav{padding:14px 10px;flex:1;overflow-y:auto}

nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  color:var(--sidebar-text);
  font-weight:500;
  font-size:13px;
  margin-bottom:2px;
  cursor:pointer;
  transition:all .18s ease;
  position:relative;
}

nav a:hover{
  background:var(--sidebar-hover-bg);
  color:#fff;
}

nav a.active{
  background:var(--sidebar-active-bg);
  color:var(--sidebar-active-text);
  font-weight:600;
}

nav a.active::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--primary);
}

#btn-desfazer-nav{color:var(--warn)!important}
#btn-desfazer-nav:hover{background:rgba(217,119,6,.15)!important;color:var(--warn)!important}
nav a svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
nav a.active svg, nav a:hover svg{opacity:1}

/* ── Page Header ───────────────────────────────────────────────────────── */



/* ── Cards ─────────────────────────────────────────────────────────────── */









/* ── Panel ─────────────────────────────────────────────────────────────── */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-sm);
}

.panel-title{
  font-size:13px;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:16px;
  letter-spacing:.01em;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

table{width:100%;border-collapse:collapse;font-size:13px}

th{
  text-align:left;
  padding:11px 14px;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  user-select:none;
  background:var(--surface);
}

th.sortable{cursor:pointer;transition:color .15s}
th.sortable:hover{color:var(--text)}
th .sort-icon{margin-left:4px;opacity:.4;font-style:normal}
th.sort-asc .sort-icon, th.sort-desc .sort-icon{opacity:1;color:var(--primary)}

td{
  padding:11px 14px;
  border-bottom:1px solid var(--td-border);
  vertical-align:middle;
  color:var(--text-secondary);
}

tr:hover td{background:var(--td-hover)}
tr:last-child td{border-bottom:none}

.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── Badges ────────────────────────────────────────────────────────────── */



/* ── Buttons ───────────────────────────────────────────────────────────── */







/* ── Forms ─────────────────────────────────────────────────────────────── */

label{
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

input, select, textarea{
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:13px;
  color:var(--text);
  background:var(--surface);
  transition:border .18s, box-shadow .18s;
  font-family:inherit;
  font-weight:500;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}

input[readonly]{
  background:var(--input-readonly);
  color:var(--muted);
  border-style:dashed;
}

textarea{resize:vertical;width:100%}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{color-scheme:dark}



/* ── Modal ─────────────────────────────────────────────────────────────── */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.gos-grid{grid-template-columns:repeat(3,1fr) !important;}




/* ── Toolbar ───────────────────────────────────────────────────────────── */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.search-wrap{
  position:relative;
  flex:1;
  min-width:200px;
  max-width:360px;
}

.search-wrap svg{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  width:15px;
  height:15px;
  pointer-events:none;
}

.search-wrap input{
  width:100%;
  padding-left:36px;
}

.toolbar select{min-width:130px}

/* ── Config ────────────────────────────────────────────────────────────── */
.cfg-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}

.cfg-section-title{
  font-size:14px;
  font-weight:800;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  letter-spacing:-0.1px;
}

.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.cfg-grid-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}

.pct-group{position:relative}
.pct-group input{padding-right:32px}
.pct-group span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted)}

.tecnico-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tecnico-item{display:flex;align-items:center;gap:8px}
.tecnico-item input{flex:1}
.tecnico-item button{flex-shrink:0}



/* ── Charts ────────────────────────────────────────────────────────────── */
.chart-wrap{position:relative;height:240px}
.filters{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}

/* ── Drop Zone ─────────────────────────────────────────────────────────── */
.drop-zone{
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:48px;
  text-align:center;
  cursor:pointer;
  transition:all .2s;
}
.drop-zone:hover, .drop-zone.drag{
  border-color:var(--primary);
  background:var(--primary-glow);
}
.drop-zone p{font-size:13px;color:var(--muted);margin-top:8px}

/* ── Misc ──────────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.hidden{display:none!important}
.mt16{margin-top:16px}

.empty{
  text-align:center;
  padding:56px 20px;
  color:var(--muted-light);
  font-size:13px;
  font-weight:500;
}

.count-badge{
  background:var(--active-bg);
  color:var(--primary-dark);
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:99px;
  margin-left:8px;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
#toast{
  position:fixed;
  bottom:28px;
  right:28px;
  background:#111827;
  color:#fff;
  padding:13px 20px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:500;
  z-index:999;
  transform:translateY(80px);
  opacity:0;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  max-width:340px;
  box-shadow:var(--shadow-lg);
  display:flex;
  align-items:center;
  gap:8px;
}
#toast.show{transform:translateY(0);opacity:1}

/* ── Pending rows (dashboard) ──────────────────────────────────────────── */
.pending-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--td-border);
}
.pending-row:last-child{border-bottom:none}
.pending-row .info{font-size:13px;font-weight:600}
.pending-row .meta{font-size:12px;color:var(--muted);margin-top:2px}
.pending-row .valor{font-size:14px;font-weight:800;color:var(--warn)}

/* ── Client ────────────────────────────────────────────────────────────── */
.cli-avatar{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--active-bg);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
  flex-shrink:0;
}
.cli-info{display:flex;align-items:center;gap:10px}
.cli-name{font-weight:600;font-size:13px}
.cli-doc{font-size:11px;color:var(--muted)}

/* ── Annual table ──────────────────────────────────────────────────────── */
.anual-table td.zero{color:var(--muted-light)}

/* ── Agora link ────────────────────────────────────────────────────────── */
.agora-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:6px;
  color:var(--primary);
  transition:all .15s;
  text-decoration:none;
}
.agora-btn:hover{background:var(--active-bg);color:var(--primary-h)}


#logo-preview-box{transition:all .2s}
#logo-preview-box:hover{border-color:var(--primary)}

.grupo-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.grupo-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.grupo-nome{font-weight:600;font-size:13px;flex:1}
.subgrupo-lista{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.subgrupo-tag{display:inline-flex;align-items:center;gap:4px;background:var(--active-bg);color:var(--primary);border-radius:99px;padding:2px 10px;font-size:11px;font-weight:600}
.subgrupo-tag button{background:none;border:none;cursor:pointer;color:var(--muted);padding:0;font-size:13px;line-height:1;display:flex;align-items:center}
.subgrupo-tag button:hover{color:var(--danger)}

.nav-group{margin-bottom:4px}
.nav-group-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;border-radius:var(--radius-sm);
  color:var(--sidebar-muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;user-select:none;transition:all .15s;
}
.nav-group-header:hover{color:var(--sidebar-text);background:var(--sidebar-hover-bg)}
.nav-group-header svg{width:13px;height:13px;transition:transform .2s;flex-shrink:0}
.nav-group-header.open svg{transform:rotate(90deg)}
.nav-group-items{overflow:hidden;transition:max-height .25s ease;max-height:0}
.nav-group-items.open{max-height:800px}
.nav-group-items a{padding-left:24px!important}
.nav-group-items a.active::before{left:12px}
.nav-sep{height:1px;background:var(--sidebar-border);margin:6px 10px}


/* ── Abas de configuração fiscal ────────────────────────── */
.cfg-tab {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  font-family: inherit;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.cfg-tab:hover { color: var(--text); }
.cfg-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.cfg-tab-content { padding-top: 16px; }

/* ── Abas do modal de venda ─────────────────────────────── */
.venda-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.venda-tab:hover { color: var(--text); }
.venda-tab.venda-tab-ativa { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.btn-sm { padding: 5px 10px; font-size: 12px; }