/* /public_html/static/styles.css */
:root{
  /* Slightly brighter foregrounds, stronger lines for contrast */
  --bg:#0f1621;--fg:#e6f0ff;--mut:#a8bed6;--acc:#2ad4ff;--card:#141d2c;--line:#23324a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

/* WIDTH unified with header */
.wrap{max-width:1120px;margin:0 auto;padding:16px}

/* Header */
.top{border-bottom:1px solid var(--line);padding:8px 0;background:#0f1621;position:sticky;top:0;z-index:50}
.top .inner{max-width:1120px;margin:0 auto;display:flex;gap:12px;align-items:center;padding:0 14px}
.logo{font-weight:800;letter-spacing:.08em;font-size:16px;white-space:nowrap}
.mainnav{display:flex;gap:8px;flex:1}
.mainnav a{padding:6px 8px;border-radius:8px}
.mainnav .call{background:var(--acc);color:#002;padding:6px 10px;border-radius:10px}
.usernav{display:flex;gap:8px;align-items:center}
.usernav .welcome{color:var(--mut);margin-right:4px}
.usernav a{padding:6px 8px;border-radius:8px;border:1px solid transparent}
.usernav a:hover{border-color:var(--line)}
@media(max-width:780px){ .mainnav a{margin:0 2px} .usernav{display:none} }

.foot{border-top:1px solid var(--line);padding:20px 16px;text-align:center;color:var(--mut)}
.hero{padding:28px 0;text-align:center}
.hero-cta .btn{margin:6px}
.trust{color:var(--mut);margin-top:8px}

/* Cards & buttons */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{background:var(--card);padding:14px;border:1px solid var(--line);border-radius:12px;color:var(--fg)}
.card .small{font-size:.9rem}
.btn{display:inline-block;background:var(--acc);color:#002;padding:10px 16px;border-radius:10px;font-weight:700}
.btn.ghost{background:transparent;border:1px solid var(--acc);color:var(--acc)}
.btn.big{padding:14px 20px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:20px 0}

/* Lists */
.svc{columns:2;gap:24px}
@media(max-width:700px){.svc{columns:1}}
.bul{list-style:disc;margin-left:20px}

/* Forms */
label{display:block;margin:10px 0}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#0b1220;color:var(--fg)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.helpbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}
.helpbox+.helpbox{margin-top:14px}

/* Two-column page layout */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.aside-sticky{position:sticky;top:84px;align-self:start}

/* Sticky mobile CTA */
.cta-bar{position:fixed;bottom:0;left:0;right:0;background:#08111f;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0;z-index:40}
.cta-bar a{padding:8px 14px;border:1px solid var(--line);border-radius:8px}
@media(min-width:800px){.cta-bar{display:none}}
@media(max-width:799px){ main.wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))} }

/* Stepper */
.h2{font-size:1.1rem;margin:6px 0}
.stepper{display:flex;gap:8px;margin:6px 0 12px 0}
.step{display:flex;align-items:center;gap:8px;background:#0c1524;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--mut)}
.step .num{width:20px;height:20px;display:inline-grid;place-items:center;border-radius:50%;background:#0d1a2b;color:#9fb3c8;font-weight:700;font-size:.85rem}
.step.act{border-color:var(--acc);color:var(--fg)}
.step.act .num{background:var(--acc);color:#002}

/* Category selector */
.cats-select .cat{cursor:pointer;text-align:left}
.cats-select .cat.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(42,212,255,.18)}
.cats-select .cat:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* SLA chips */
.sla-chips{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);
  gap:10px;overflow-x:auto;padding:4px 2px 6px 2px;scroll-snap-type:x mandatory
}
.sla-chips::-webkit-scrollbar{height:8px}
.chip{
  scroll-snap-align:start; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px; display:flex; flex-direction:column; gap:2px; color:var(--fg); /* ensure readable on <button> */
}
.chip-title{font-weight:700}
.chip-sub{color:var(--mut);font-size:.95rem}
.chip-price{font-weight:700;margin-top:2px}
.chip.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(42,212,255,.18)}
.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.sla-summary{
  margin:10px 0 6px 0; background:#0c1524; border:1px solid var(--line);
  border-radius:10px; padding:10px;
}

/* Category cards layout consistency */
.cats .card, .cats-select .card{min-height:132px;display:flex;flex-direction:column;justify-content:space-between}
.cats .card .btn{align-self:flex-start}

/* Tables */
.table{width:100%;border-collapse:collapse;margin:10px 0}
.table th,.table td{border:1px solid var(--line);padding:8px;text-align:left}
.table th{background:#0c1524}


/* Dashboard tabs */
.adminnav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 16px;       /* space away from header */
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.adminnav a{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--fg);
  text-decoration:none;
}
.adminnav a:hover{ border-color:var(--line); }
.adminnav a.act{
  background:var(--acc);
  color:#002;
  border-color:transparent;
}

/* Legal page niceties */
.legal details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0}
.legal summary{cursor:pointer;list-style:none}
.legal summary::-webkit-details-marker{display:none}

/* Fix checkbox/radio sizing/placement */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  padding:0;
  margin:0 0 0 0;
  accent-color: var(--acc); /* optional: theme color */
}

/* Nice inline alignment for agreement line */
.checkline{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer; /* clicking text toggles too */
}

/* --- Admin tables --- */
.admin-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:8px 0 18px}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.admin-table tr:last-child td{border-bottom:0}
.admin-table th{background:#0c1524;font-weight:600}
.admin-table .col-when{white-space:nowrap;width:220px}
.admin-table .col-svc{min-width:240px}
.admin-table .col-staff{width:160px}
.admin-table .col-status{width:140px}
.admin-table .col-actions{width:220px}
.admin-table .actions a{margin-right:10px}

/* Status pill */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  font-size:12px;line-height:1.5}
.pill.pending{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.35)}
.pill.ok{background:rgba(50,205,50,.08);border-color:rgba(50,205,50,.35)}
.pill.bad{background:rgba(255,99,71,.08);border-color:rgba(255,99,71,.35)}


/* --- Tickets (customer) — SLA radio cards --- */
.ticket .sla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin:6px 0 10px;
  padding:0;                 /* no bullets/indent */
  list-style:none;
}
.ticket .sla .plane{
  position:relative;
  display:block;
  cursor:pointer;
}

/* hide native radios */
.ticket .sla .plane input[type="radio"]{
  position:absolute;
  opacity:0;
  inset:0;
  width:0; height:0;
  pointer-events:none;
}

/* the visual card */
.ticket .sla .plane > div{
  height:100%;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#0f1621;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.ticket .sla .plane > div .price{
  margin-top:6px;
  font-weight:600;
}

/* hover/focus */
.ticket .sla .plane:hover > div{ border-color:rgba(255,255,255,.18); }
.ticket .sla .plane:focus-within > div{ border-color:rgba(80,200,255,.55); }

/* selected state */
.ticket .sla .plane input[type="radio"]:checked + div{
  outline:2px solid rgba(80,200,255,.9);
  outline-offset:0;
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(80,200,255,.15) inset;
}