/* ===================== Horse Garage — style.css ===================== */
:root{
  --bg:#0b0b0d; --bg2:#0f1012; --panel:#16171a; --panel2:#1d1e22; --line:#2a2b30;
  --gray:#3a3b42; --muted:#8b8d96; --text:#eceef2; --white:#fff;
  --gold:#c9a24a; --gold-2:#e2c06e; --gold-d:#9a7a2e; --danger:#e0625c; --ok:#3fb27a;
  --sidebar:248px; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.82rem}.gold{color:var(--gold-2)}

/* ---------- Botões ---------- */
.btn{border:0;border-radius:9px;padding:10px 18px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1407}
.btn-gold:hover{filter:brightness(1.08)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--gray)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-lg{padding:13px 30px;font-size:1rem}.btn-sm{padding:6px 12px;font-size:.8rem}.btn-block{width:100%}

/* ---------- Login ---------- */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,#1a1813 0%,#0b0b0d 60%);padding:20px;z-index:100}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px 32px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.login-logo{width:170px;margin:0 auto 6px;display:block}
.login-hint{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:18px}
.login-card label{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:6px}
.login-card input{background:var(--bg2);border:1px solid var(--gray);border-radius:9px;color:var(--text);padding:12px 14px;font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--gold)}
.login-card .btn{margin-top:18px}
.login-error{color:var(--danger);font-size:.82rem;text-align:center;min-height:18px;margin-top:8px}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40}
.sidebar-logo{padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.sidebar-logo img{width:100%;max-width:180px;display:block;margin:0 auto}
.sidebar-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.nav-link{display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--muted);font-weight:600;font-size:.92rem;padding:11px 14px;border-radius:10px;cursor:pointer;transition:.15s;text-align:left;font-family:inherit}
.nav-link svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.nav-link:hover{background:var(--panel);color:var(--text)}
.nav-link.active{background:linear-gradient(135deg,rgba(201,162,74,.18),rgba(201,162,74,.06));color:var(--gold-2);box-shadow:inset 3px 0 0 var(--gold)}
.sidebar-foot{padding:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.user-chip{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.user-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}

.main{flex:1;margin-left:var(--sidebar);min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;background:rgba(11,11,13,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:14px 26px}
.topbar h2{font-size:1.2rem;font-weight:700}
.nav-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:2px}
.nav-toggle svg{width:24px;height:24px;fill:currentColor;display:block}
.topbar-brand{margin-left:auto;opacity:.5}.topbar-brand img{height:30px}
.content{padding:26px;max-width:1160px;width:100%}

.view{display:none;animation:fade .2s ease}.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Stat cards ---------- */
.stat-grid{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:13px;flex:1 1 200px}
.stat-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--panel2);flex-shrink:0}
.stat-ic svg{width:22px;height:22px;fill:var(--gold-2)}
.stat-label{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.stat-value{font-size:1.35rem;font-weight:800;line-height:1.2;white-space:nowrap}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Status bars ---------- */
.status-bars{display:flex;flex-direction:column;gap:11px}
.sbar{display:flex;align-items:center;gap:10px}
.sbar-label{width:108px;font-size:.82rem;color:var(--muted);flex-shrink:0}
.sbar-track{flex:1;height:9px;background:var(--panel2);border-radius:6px;overflow:hidden}
.sbar-fill{height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold-2));border-radius:6px}
.sbar-n{width:28px;text-align:right;font-weight:700;font-size:.85rem}

/* ---------- Panels / Forms ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.panel-title{font-size:.98rem;margin-bottom:15px;color:var(--gold-2);font-weight:700}
.form-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}.form-row.end{align-items:flex-end}
.form-group{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px}
.form-group.grow{flex:2}.form-group.qty{flex:0 0 90px;min-width:80px}.form-group.end{flex:0 0 auto;justify-content:flex-end}
label{font-size:.78rem;color:var(--muted);font-weight:600}
input,select,textarea{background:var(--bg2);border:1px solid var(--gray);border-radius:9px;color:var(--text);padding:10px 12px;font-size:.92rem;font-family:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical}
.quick-box{background:var(--bg2);border:1px dashed var(--gray);border-radius:11px;padding:16px;margin-top:8px}
.manual-box{margin:10px 0;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:8px 14px}
.manual-box summary{cursor:pointer;color:var(--gold-2);font-weight:600;padding:6px 0}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.file-label{cursor:pointer}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.data-table{width:100%;border-collapse:collapse;min-width:520px}
.data-table th,.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.88rem}
.data-table th{background:var(--panel2);color:var(--muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.5px}
.data-table tbody tr:hover{background:var(--panel2)}
.data-table a{color:var(--gold-2);text-decoration:none}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.filters-row{display:flex;gap:12px;margin:14px 0;flex-wrap:wrap}.filters-row input,.filters-row select{max-width:340px}

/* ---------- Badges ---------- */
.badge{padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;display:inline-block}
.st-orcamento{background:rgba(201,162,74,.16);color:var(--gold-2)}
.st-aprovado{background:rgba(63,178,122,.16);color:#5fd09a}
.st-andamento{background:rgba(92,179,255,.14);color:#7cc0ff}
.st-finalizado{background:rgba(63,178,122,.22);color:#7be0a5}
.st-entregue{background:rgba(255,255,255,.1);color:#cfd3da}
.st-cancelado{background:rgba(224,98,92,.18);color:#ff8f8a}

/* ---------- Totals ---------- */
.totals-box{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin-top:14px;max-width:380px;margin-left:auto}
.totals-box div{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.totals-box .total-line{border-top:1px solid var(--gray);margin-top:6px;padding-top:10px;font-size:1.15rem}
.totals-box .total-line strong{color:var(--gold-2)}
.totals-box .remaining-line strong{color:var(--ok)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--panel2);border:1px solid var(--gray);border-left:4px solid var(--gold);color:var(--text);padding:13px 20px;border-radius:11px;font-weight:600;z-index:200;transition:transform .25s;box-shadow:0 12px 34px rgba(0,0,0,.5);max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}.toast.error{border-left-color:var(--danger)}

/* ============ DOCUMENTO DA OS ============ */
.os-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px;flex-wrap:wrap}
.os-doc{background:#fff;color:#1a1a1a;border-radius:12px;padding:36px;max-width:830px;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.os-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #c9a24a;padding-bottom:16px;gap:16px;flex-wrap:wrap}
.os-company{display:flex;gap:16px;align-items:center}
.os-logo-img{height:74px;width:auto}
.os-company h2{font-size:1.35rem;color:#0c0c0e}
.os-sub{color:#666;font-size:.82rem;font-weight:600}
.os-contact{color:#777;font-size:.78rem;margin-top:2px}
.os-meta{text-align:right}
.os-meta p{font-size:.85rem;color:#444;margin-bottom:4px}
.os-meta span{display:block;font-size:.68rem;color:#999;text-transform:uppercase;letter-spacing:.5px}
.os-meta strong{font-size:1rem;color:#0c0c0e}
.os-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.os-block h4,.os-sec-title,.os-info h4,.os-summary h4,.os-terms h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.6px;color:#999}
.os-block h4{border-bottom:1px solid #e2e2e2;padding-bottom:5px;margin-bottom:8px}
.os-block p{font-size:.9rem;color:#222;margin:2px 0}
.os-sec-title{margin:18px 0 8px}
.os-table{width:100%;border-collapse:collapse;margin-bottom:18px}
.os-table th,.os-table td{padding:9px 10px;text-align:left;border-bottom:1px solid #e6e6e6;font-size:.85rem}
.os-table th{background:#0c0c0e;color:#fff;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px}
.os-table th:nth-child(n+3),.os-table td:nth-child(n+3){text-align:right}
.os-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.os-info{flex:1;min-width:230px}.os-info h4{margin-bottom:8px}
.os-info p{font-size:.86rem;margin:4px 0;color:#333}.os-info span{color:#999}
.os-summary{min-width:260px;background:#faf8f3;border:1px solid #efe7d2;border-radius:9px;padding:14px 16px}
.os-summary div{display:flex;justify-content:space-between;padding:4px 0;font-size:.9rem}
.os-summary .os-total{border-top:2px solid #c9a24a;margin-top:6px;padding-top:8px;font-size:1.1rem;font-weight:800}
.os-summary .os-remaining b{color:#1faa67}
.os-terms{margin-top:22px;border-top:1px solid #e2e2e2;padding-top:12px}
.os-terms h4{margin-bottom:6px}.os-terms p{font-size:.75rem;color:#666;line-height:1.55;text-align:justify}
.os-signatures{display:flex;gap:50px;margin-top:54px}
.os-signatures div{flex:1;text-align:center}
.sig-line{border-top:1px solid #333;margin-bottom:6px}.os-signatures span{font-size:.8rem;color:#555}

/* ---------- Vistoria ---------- */
.vst-areas{display:flex;flex-direction:column;gap:8px}
.vst-area{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.vst-area-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vst-area-name{flex:0 0 190px;font-size:.9rem;font-weight:600}
.vst-area-head select{flex:0 0 155px;width:auto}
.vst-area-head .vst-note{flex:1;min-width:140px}
.vst-area-head select.c-bad{color:var(--gold-2);border-color:var(--gold-d)}
.vst-photo-btn{flex:0 0 auto;white-space:nowrap}
.vst-area-photos{display:flex;flex-wrap:wrap;gap:10px}
.vst-area-photos:not(:empty){margin-top:10px}
.vst-photo{width:130px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px;display:flex;flex-direction:column;gap:5px}
.vst-photo img{width:100%;height:90px;object-fit:cover;border-radius:5px}
.vst-photo input{font-size:.76rem;padding:5px 7px}
.vst-photo .btn{padding:4px 8px;font-size:.72rem}
.laudo-table th,.laudo-table td{text-align:left!important}
.laudo-area-block{margin-bottom:14px;break-inside:avoid}
.laudo-area-block h5{font-size:.8rem;font-weight:700;color:#333;margin-bottom:6px}
.laudo-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:8px}
.laudo-photos figure{margin:0;break-inside:avoid}
.laudo-photos img{width:100%;height:120px;object-fit:cover;border-radius:6px;border:1px solid #ddd}
.laudo-photos figcaption{font-size:.7rem;color:#666;margin-top:3px}

/* ---------- WhatsApp ---------- */
.wa-status{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:14px}
.wa-dot{width:11px;height:11px;border-radius:50%;background:var(--gray);flex-shrink:0}
.wa-dot.on{background:var(--ok)}.wa-dot.off{background:var(--danger)}.wa-dot.wait{background:var(--gold-2)}
.wa-qr{background:#fff;border-radius:12px;padding:16px;text-align:center;max-width:300px;margin-bottom:14px}
.wa-qr img{width:100%;max-width:260px;display:block;margin:0 auto}
.wa-qr p{color:#333;font-size:.82rem;margin-top:8px}

/* ---------- Modal / Nota Fiscal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal-overlay.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;width:100%;max-width:470px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.modal-title{font-size:1.15rem;font-weight:800;margin-bottom:8px;color:var(--gold-2)}
.modal-card label{display:block;margin:6px 0 5px}
.nf-data{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:14px;margin:12px 0 8px;font-family:inherit;font-size:.85rem;white-space:pre-wrap;color:var(--text);max-height:240px;overflow-y:auto}
.nf-divider{border-top:1px solid var(--line);margin:16px 0}
.st-venda{background:rgba(63,178,122,.22);color:#7be0a5}
.wa-attach{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:.9rem;color:var(--text);cursor:pointer}
.wa-attach input{width:auto}
#waMessage{font-family:inherit}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.82em;color:var(--gold-2);white-space:nowrap}

/* ============ RESPONSIVO ============ */
@media (max-width:900px){.dash-cols{grid-template-columns:1fr}}
@media (max-width:760px){
  .sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .nav-toggle{display:block}
  .os-grid{grid-template-columns:1fr}
  .totals-box{margin-left:0;max-width:100%}
}

/* ============ IMPRESSÃO A4 ============ */
@media print{
  .no-print,.sidebar,.topbar,.toast,.os-actions{display:none!important}
  body{background:#fff;color:#000}
  .app{display:block}.main{margin:0}.content{padding:0;max-width:100%}
  .view{display:none!important}#view-os.active,#view-laudo.active{display:block!important}
  .os-doc{box-shadow:none;border-radius:0;max-width:100%;padding:0;margin:0}
  .os-table th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .laudo-photos img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .os-logo-img{filter:brightness(0) saturate(0)} /* logo em preto na impressao */
  .os-signatures{margin-top:72px}
  @page{size:A4;margin:14mm}
}