/* styles.css - theme inspired by consumerserviceselectric.com (clean, blue, strong contrast) */
:root{
  --bg:#0b1220;
  --card:#0f1a2d;
  --card2:#0b1426;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.10);
  --brand:#2f5ea8; /* deep electric blue */
  --brand2:#3b82f6;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(47,94,168,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, #060b16, #0b1220 40%, #070b14);
  color:var(--text);
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:22px 16px 40px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.card + .card{margin-top:14px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
h1,h2,h3{margin:0 0 10px 0}
h1{font-size:28px}
h2{font-size:20px;color:#f3f4f6}
h3{font-size:16px;color:#f3f4f6}
.small{color:var(--muted);font-size:13px;line-height:1.4}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  backdrop-filter: blur(10px);
  background: rgba(6,11,22,.55);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:12px;align-items:center}
.brand-logo{height:40px;width:auto}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{color:var(--muted);font-size:13px;margin-top:2px}
.pill{
  display:inline-block;margin-left:8px;
  padding:2px 8px;border-radius:999px;
  background: rgba(47,94,168,.25);
  border:1px solid rgba(47,94,168,.45);
  color:#cfe0ff;font-weight:700;font-size:11px
}
.nav{display:flex;gap:10px;align-items:center}
.navlink{
  text-decoration:none;
  padding:8px 10px;border-radius:10px;
  border:1px solid transparent;
  color:#e5e7eb;
}
.navlink:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.navlink.active{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn.primary{
  border-color:rgba(59,130,246,.55);
  background: linear-gradient(180deg, rgba(59,130,246,.35), rgba(47,94,168,.25));
}
.btn.primary:hover{background: linear-gradient(180deg, rgba(59,130,246,.45), rgba(47,94,168,.32))}
.btn.danger{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.10)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px}
label{font-size:12px;color:var(--muted)}
input,select,textarea{
  width:100%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,18,32,.55);
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(59,130,246,.7);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
textarea{min-height:92px;resize:vertical}
.hr{height:1px;background:var(--line);margin:14px 0}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{color:var(--muted);font-size:12px;text-align:left;padding:0 10px}
.table td{
  padding:12px 10px;
  background: rgba(255,255,255,.04);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.table tr td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
.table tr td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.badge.good{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.12)}
.badge.warn{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.12)}
.badge.bad{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.12)}
.flash{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.flash.good{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.10)}
.flash.bad{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.10)}
.flash.warn{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.10)}
.kicker{color:#cfe0ff;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.footer{margin-top:22px;color:var(--muted);font-size:12px}
.codebox{
  font-size:26px;font-weight:900;letter-spacing:4px;text-align:center;
}

.grid-col-2{grid-column:1 / -1}
@media (max-width:860px){.grid-col-2{grid-column:auto}}
input[readonly]{opacity:.72;background:rgba(255,255,255,.03)}


.lead-table th,.lead-table td{vertical-align:top}
.lead-table td{word-break:break-word;overflow-wrap:anywhere}
.lead-table .row{align-items:flex-start}
@media (max-width:1200px){
  .lead-table{table-layout:auto !important}
}


.grid-address{grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(80px,.6fr) minmax(110px,.8fr);gap:10px}
@media (max-width:860px){.grid-address{grid-template-columns:1fr 1fr}.grid-address > div:first-child{grid-column:1 / -1}}
.miher-input-wrap{position:relative}
.miher-flag{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:999px;display:none;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.14)}
.miher-flag.show{display:inline-flex}
.miher-flag.bad{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.55);color:#fecaca}
.miher-flag.good{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:#bbf7d0}
.miher-status{margin-top:6px}
.input-bad{border-color:rgba(239,68,68,.75)!important;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.input-good{border-color:rgba(34,197,94,.65)!important}


.session-warning-overlay{position:fixed;inset:0;z-index:9998;background:rgba(3,8,18,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.session-warning-overlay.show{display:flex}
.session-warning-modal{width:min(460px,100%);padding:22px;border-radius:18px;border:1px solid rgba(245,158,11,.38);background:linear-gradient(180deg, rgba(15,26,45,.98), rgba(11,20,38,.98));box-shadow:0 24px 70px rgba(0,0,0,.45)}
.session-warning-title{margin:0 0 8px 0;font-size:22px;font-weight:800;color:#f9fafb}
.session-warning-text{margin:0 0 16px 0;color:#d1d5db;line-height:1.5}
.session-warning-countdown{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:10px 14px;border-radius:999px;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.12);color:#fde68a;font-size:22px;font-weight:900;letter-spacing:.05em}
.session-warning-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.session-warning-actions .btn{min-width:145px}