/* B&W Quotation Builder – Admin UI (v15) */
:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --card:#101e35;
  --card2:#0e1b31;
  --text:#eaf0ff;
  --muted:#a9b7d6;
  --line:rgba(255,255,255,.08);
  --accent:#0ea5e9;
  --accent2:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 500px at 10% 0%, rgba(14,165,233,.35), transparent 55%),
              radial-gradient(800px 500px at 90% 0%, rgba(34,197,94,.18), transparent 52%),
              linear-gradient(180deg, #070b14, #0b1220 40%, #070b14);
  color: var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:22px}
.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(7,11,20,.65);
  border-bottom:1px solid var(--line);
}
.topbar-inner{max-width:1200px;margin:0 auto;padding:14px 22px;display:flex;gap:14px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:36px;height:36px;border-radius:12px;
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(34,197,94,.65));
  box-shadow: var(--shadow);
}
.brand h1{font-size:14px;margin:0;letter-spacing:.4px}
.brand small{color:var(--muted);display:block;margin-top:2px}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav a{
  padding:9px 12px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size:13px;
}
.nav a:hover{border-color:rgba(14,165,233,.55); box-shadow:0 0 0 3px rgba(14,165,233,.12) inset}
.userbox{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px}
.pill{
  padding:7px 10px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.btn:hover{border-color:rgba(14,165,233,.55); transform: translateY(-1px)}
.btn.primary{background: rgba(14,165,233,.20); border-color: rgba(14,165,233,.45)}
.btn.green{background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35)}
.btn.warn{background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35)}
.grid{display:grid;gap:14px}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 980px){
  .grid.cols-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.cols-3{grid-template-columns: repeat(1, minmax(0,1fr))}
  .grid.cols-2{grid-template-columns: repeat(1, minmax(0,1fr))}
}
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.card h2{margin:0 0 10px 0;font-size:16px}
.kpi{
  padding:14px;border-radius: var(--radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,30,53,.75), rgba(14,27,49,.65));
}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:22px;margin-top:6px;letter-spacing:.4px}
.kpi .meta{margin-top:8px;color:var(--muted);font-size:12px}
.rowline{display:flex;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:14px;border:1px solid transparent}
.rowline:hover{border-color:rgba(14,165,233,.35);background: rgba(14,165,233,.08)}
.muted{color:var(--muted)}
.badge{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background: rgba(255,255,255,.03);color:var(--text)}
.badge.green{border-color:rgba(34,197,94,.4);background: rgba(34,197,94,.12)}
.badge.warn{border-color:rgba(245,158,11,.4);background: rgba(245,158,11,.12)}
.badge.gray{border-color:rgba(255,255,255,.12);background: rgba(255,255,255,.02);color:var(--muted)}
.hr{height:1px;background: var(--line);margin:12px 0}
.small{font-size:12px;color:var(--muted);line-height:1.5}


/* Tables + forms */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 10px}
.table td{
  padding:12px 10px;
  background: rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.table tr td:first-child{border-left:1px solid var(--line);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid var(--line);border-top-right-radius:14px;border-bottom-right-radius:14px;text-align:right}
.table tr:hover td{background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.22)}
.inp, select.inp{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
.inp:focus{border-color:rgba(14,165,233,.55); box-shadow: 0 0 0 3px rgba(14,165,233,.12)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{
  padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--muted); font-size:12px;
}

/* Brand logo image */
.brand img{
  width:68px;height:52px;object-fit:contain;border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:6px;
}
@media (max-width: 520px){ .brand img{width:40px;height:40px} }

/* v22 polish */
.nav a{font-weight:600;letter-spacing:.2px}


/* v25 UI fixes */
.lbl{display:block;font-size:12px;opacity:.85;margin-bottom:6px}
.inp, select.inp{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#eaf1ff;outline:none}
.inp:focus{border-color:rgba(120,180,255,.6);box-shadow:0 0 0 4px rgba(80,140,255,.12)}
.footerbar{position:sticky;bottom:0;left:0;right:0;background:rgba(5,10,20,.92);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.08);padding:10px 16px;color:#dbe7ff;text-align:center;font-size:12px;z-index:50}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .full{grid-column:1 / -1}
@media (max-width: 820px){.topbar-inner{flex-wrap:wrap;gap:12px}.nav{flex-wrap:wrap}.container{padding:14px}.row{flex-direction:column}.grid2{grid-template-columns:1fr}}


/* --- Hotfix: force dark form controls everywhere (kills white inputs/selects/autofill) --- */
html{ color-scheme: dark; }
body, .container{ color-scheme: dark; }
input, textarea, select{
  background-color: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(233,240,255,.45) !important; }
select{
  -webkit-appearance: none;
  appearance: none;
}
option, optgroup, datalist option{
  background-color: #0f1a2e !important;
  color: var(--text) !important;
}
input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: rgba(14,165,233,.55) !important;
  box-shadow: 0 0 0 4px rgba(14,165,233,.12) !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.04) inset !important;
  caret-color: var(--text) !important;
}


/* Hotfix: remove overly wide sections & force dark native selects/options */
html{ color-scheme: dark; }
select, option, optgroup, textarea, input{ background:#0f1a2e !important; color:#eaf0ff !important; }
select{ border-color: rgba(255,255,255,.10) !important; }


/* Hotfix: globally center modals */
.modal, .modal-overlay{
  position: fixed;
  inset: 0;
}
.modal-overlay{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index: 9999;
}
.modal-card, .modal .card, .modal-content{
  margin:0 auto;
  max-width:min(760px, calc(100vw - 48px));
  width:100%;
}

.container{max-width:1200px;margin:0 auto;padding:0 22px;}