/* ============================================================
   styles.css — SMS Sorocaba · Dashboard SUEQ
   CSS compartilhado: tokens, tema dark, componentes base
   login.html · cadastro.html · chamado.html · index.html
   ============================================================ */

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

/* ── TOKENS DE COR (light) ── */
:root{
  /* Neutros */
  --bg:#f0f4f8;
  --surface:#ffffff;
  --surface2:#f4f7fb;
  --border:#dde3ed;
  --text:#1a2233;
  --text2:#4a5568;
  --text3:#8896a8;

  /* Semânticas */
  --green:#1D9E75;  --green-bg:#E1F5EE;  --green-text:#085041;
  --blue:#1a5fa8;   --blue-bg:#deeaf8;   --blue-text:#0c3060;
  --amber:#EF9F27;  --amber-bg:#FAEEDA;  --amber-text:#633806;
  --red:#E24B4A;    --red-bg:#FCEBEB;    --red-text:#501313;
  --purple:#7F77DD; --purple-bg:#EEEDFE; --purple-text:#26215C;

  /* Alias para chamado.html */
  --accent:#1a5fa8;
  --accent-soft:#deeaf8;
  --accent-bg:#deeaf8;

  /* Identidade Sorocaba */
  --sorocaba-verde:#1a6b3c;
  --sorocaba-azul:#1a5fa8;
  --sorocaba-ouro:#c9a84c;

  /* Utilitários */
  --radius:10px;
  --radius-sm:6px;
  --shadow:rgba(0,0,0,.08);

  /* Componentes */
  --tabs-bg:#fff;
  --filters-bg:#f5f8fc;
  --dropdown-bg:#fff;
  --input-bg:#fff;
  --sec-bg:#f0efea;
  --sec-hover:#e0ddd5;
  --info-bg:#f5f5f3;

  /* Tabela */
  --th-bg:#dde8f5;  --th-text:#1a3a6b;
  --td-border:#ccd6e0;
  --row-odd:#ffffff; --row-even:#f0f4f8; --row-hover:#e8f0fb;
}

/* ── TOKENS DE COR (dark) ── */
html[data-theme="dark"]{
  --bg:#0f141c;
  --surface:#15202e;
  --surface2:#1b2735;
  --border:#243040;
  --text:#e6edf5;
  --text2:#c3ccd8;
  --text3:#8b97a8;

  --green:#34d399;  --green-bg:#0e3b2e;  --green-text:#6ee7b7;
  --blue:#5eb3f5;   --blue-bg:#173049;   --blue-text:#9ecbf5;
  --amber:#fbbf24;  --amber-bg:#3d2f12;  --amber-text:#fcd97a;
  --red:#f87171;    --red-bg:#3d1b1b;    --red-text:#fca5a5;
  --purple:#a59cf5; --purple-bg:#23204a; --purple-text:#c4bdfb;

  --accent:#5eb3f5;
  --accent-soft:#1c2e44;
  --accent-bg:#1b2533;

  --shadow:rgba(0,0,0,.35);
  --tabs-bg:#0b0f16;
  --filters-bg:#15202e;
  --dropdown-bg:#15202e;
  --input-bg:#0f141c;
  --sec-bg:#1c2533;
  --sec-hover:#243040;
  --info-bg:#1b2533;

  --th-bg:#1b2a3d;  --th-text:#9ec5ef;
  --td-border:#243040;
  --row-odd:#15202e; --row-even:#111a25; --row-hover:#1e2c3d;
}

/* ── BASE ── */
html{transition:background .2s}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
select,input,textarea{color-scheme:light dark}
select:not([class]){background:var(--surface);color:var(--text)}

/* ── BOTÃO TEMA ── */
.tema-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--accent,var(--blue));font-size:18px;cursor:pointer;line-height:1}

/* ── BOTÕES BASE ── */
button{color:var(--text)}
button[style*="background:var(--surface)"],button[style*="background: var(--surface)"]{color:var(--text2)}
button[style*="background:none"],button[style*="background: none"]{color:var(--text2)}

.btn-primary{font-size:13px;padding:8px 20px;border-radius:var(--radius-sm);border:none;background:var(--blue);color:#fff;cursor:pointer;font-weight:500}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{font-size:13px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer}
.btn-secondary:hover{background:var(--surface2)}

/* ── FORMULÁRIOS (compartilhado) ── */
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.form-group input,.form-group select{font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--blue)}
.form-group input[readonly]{background:var(--surface2);color:var(--text3)}
.form-actions{display:flex;gap:8px;margin-top:1rem;align-items:center;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}

/* selects estilizados (form-group / ne-item): remove o widget nativo (que no Windows em
   modo escuro ignora parte do background do autor) e desenha uma seta própria */
.form-group select,.ne-item select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238896a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:10px 7px;padding-right:28px;height:34px;box-sizing:border-box}
/* option vazia ("Selecione...") deve pesar visualmente igual ao placeholder de um input */
.form-group select:has(option:checked[value=""]),.ne-item select:has(option:checked[value=""]){color:var(--text3);font-weight:400}

/* ── ITENS INLINE (ex.: cadastro de emenda) ── */
.ne-item input,.ne-item select{font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--surface);color:var(--text);height:34px;box-sizing:border-box;width:100%}
.ne-item input:focus,.ne-item select:focus{outline:none;border-color:var(--blue)}
/* linha unidade+qtde+total+remover em grid: larguras fixas e alinhadas, sem "sobra" de flex desbalanceado */
.ne-item .ne-u-row{display:grid;grid-template-columns:2fr 90px 110px 34px;gap:8px;align-items:center;margin-bottom:6px}
.ne-item .ne-u-row select,.ne-item .ne-u-row input{width:100%;min-width:0}
.ne-item .ne-u-total{height:34px;display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:var(--text2)}
.ne-item .ne-u-row .ne-u-remove{width:34px;height:34px;box-sizing:border-box;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── SELECT PESQUISÁVEL (s2) ── */
.s2-outer{position:relative}
.s2-wrap{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;min-height:34px;user-select:none}
.s2-wrap:hover{border-color:var(--blue)}
.s2-wrap.open{border-color:var(--blue)}
.s2-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.s2-display.placeholder{color:var(--text3)}
.s2-arrow{font-size:10px;color:var(--text3);margin-left:6px;transition:transform .15s}
.s2-wrap.open .s2-arrow{transform:rotate(180deg)}
.s2-dropdown{position:absolute;left:0;right:0;z-index:9999;background:var(--surface);border:1px solid var(--blue);border-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(0,0,0,.35);margin-top:2px}
.s2-search{width:100%;box-sizing:border-box;padding:7px 10px;border:none;border-bottom:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;outline:none}
.s2-list{max-height:200px;overflow-y:auto}
.s2-opt{padding:7px 10px;cursor:pointer;font-size:13px;color:var(--text)}
.s2-opt:hover{background:var(--blue);color:#fff}
.s2-opt.selected{background:var(--blue);color:#fff;font-weight:600}
.s2-opt.placeholder-opt{color:var(--text3)}

/* ── FEEDBACK (fmsg) ── */
.fmsg{font-size:12px;padding:4px 10px;border-radius:var(--radius-sm);display:none}
.fmsg.ok{background:var(--green-bg);color:var(--green-text);display:inline-block}
.fmsg.err{background:var(--red-bg);color:var(--red-text);display:inline-block}

/* ── BADGE ── */
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap}

/* ── PILL (header) ── */
.pill{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500}
.pill-ok{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.pill-loading{background:rgba(239,159,39,.2);color:#fff}
.pill-err{background:rgba(226,75,74,.2);color:#fff}

/* ── SPINNER ── */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── LOADING ── */
.loading{text-align:center;padding:3rem;color:var(--text3);font-size:14px}

/* ── MODAIS ── */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:999;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-box{background:var(--surface);border-radius:var(--radius);padding:1.5rem;width:320px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal-title{font-size:15px;font-weight:600;margin-bottom:.75rem;display:flex;justify-content:space-between;align-items:center;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.modal-title-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text3);line-height:1;padding:4px;flex-shrink:0}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:1rem}
.modal-input{width:100%;font-size:14px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.75rem}
.modal-input:focus{outline:none;border-color:var(--blue)}
.modal-err{font-size:12px;color:var(--red);margin-bottom:.75rem;display:none}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.modal-filter-btn{width:100%;text-align:left;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer}
.modal-filter-btn:hover{border-color:var(--blue)}
.modal-filter-btn.active{border-color:var(--blue);background:var(--blue-bg);color:var(--blue-text);font-weight:600}

/* ── LOGIN / CADASTRO ── */
.login-body{display:flex;align-items:center;justify-content:center}
.login-card{background:var(--surface);border-radius:12px;padding:2.5rem;width:100%;max-width:380px;box-shadow:0 4px 24px var(--shadow)}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px}
.login-logo-sub{font-size:13px;color:var(--text3)}
.login-input{width:100%;font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--text);transition:border-color .15s}
.login-input:focus{outline:none;border-color:var(--accent,var(--blue))}
.login-btn{width:100%;font-size:14px;font-weight:500;padding:11px;border-radius:8px;border:none;background:var(--accent,var(--blue));color:#fff;cursor:pointer;margin-top:.5rem;transition:opacity .15s}
.login-btn:hover{opacity:.9}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-btn-sec{background:var(--sec-bg);color:var(--text2);margin-top:.5rem}
.login-btn-sec:hover{background:var(--sec-hover)}
.login-error{font-size:13px;color:#E24B4A;background:#FCEBEB;border-radius:6px;padding:8px 12px;margin-top:.75rem;display:none}
.login-success{font-size:13px;color:#085041;background:#E1F5EE;border-radius:6px;padding:8px 12px;margin-top:.75rem;display:none}
.login-footer{text-align:center;font-size:12px;color:var(--text3);margin-top:1.5rem}
.login-info{font-size:12px;color:var(--text3);background:var(--info-bg);border-radius:6px;padding:8px 12px;margin-bottom:1rem;text-align:center}

/* ── Select pesquisável estilo Select2 (multi) — componente próprio vanilla ── */
.ss-box{position:relative;width:100%}
.ss-control{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:38px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm,6px);background:var(--input-bg,var(--surface));cursor:text}
.ss-control.ss-open{border-color:var(--accent,var(--blue))}
.ss-chip{display:inline-flex;align-items:center;gap:5px;background:var(--blue);color:#fff;font-size:12px;line-height:1;padding:4px 6px 4px 8px;border-radius:12px;max-width:100%}
.ss-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-chip button{background:none;border:none;color:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.85}
.ss-chip button:hover{opacity:1}
.ss-input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--text);font-size:13px;padding:3px 2px}
.ss-dropdown{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:50;max-height:240px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm,6px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ss-opt{padding:7px 10px;font-size:13px;color:var(--text);cursor:pointer}
.ss-opt:hover,.ss-opt.ss-active{background:var(--surface2)}
.ss-opt.ss-sel{color:var(--blue);font-weight:600}
.ss-opt.ss-sel::before{content:"✓ "}
.ss-empty{padding:9px 10px;font-size:12px;color:var(--text3)}
/* variante single (1 valor) — mesmo visual, com busca interna */
.ss-single .ss-control{cursor:pointer;flex-wrap:nowrap}
.ss-single .ss-value{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-single .ss-value.ss-ph{color:var(--text3)}
.ss-single .ss-caret{color:var(--text3);font-size:11px;margin-left:6px;pointer-events:none}
.ss-single .ss-input{min-width:40px}
.login-label{font-size:12px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:block}