/* --------------------------------------------------------------
   Squarezix Website Update Tracker — styles
   Matches squarezix.com brand: dark slate, indigo/cyan accent,
   Inter typography, clean agency cards.
-------------------------------------------------------------- */
:root{
  --bg:#0b1021;
  --panel:#12182b;
  --panel-hover:#1c2641;
  --border:#25304a;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --accent:#6366f1;      /* indigo */
  --accent-hover:#4f46e5;
  --accent-soft:rgba(99,102,241,0.12);
  --success:#34d399;
  --danger:#f87171;
  --warn:#fbbf24;
  --radius:14px;
  --shadow:0 10px 30px -10px rgba(0,0,0,0.5);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
  min-height:100vh;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }

/* ---------- Layout ---------- */
.container{ max-width:1100px; margin:0 auto; padding:0 24px; }
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,33,0.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.25rem; letter-spacing:-0.5px; }
.brand .dot{
  width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#22d3ee);
  box-shadow:0 0 16px rgba(99,102,241,0.45); display:grid; place-items:center; font-weight:800; color:#fff; font-size:0.85rem;
}
.nav{ display:flex; gap:22px; align-items:center; }
.nav a{ color:var(--muted); font-size:0.95rem; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.nav a:hover{ color:var(--text); border-bottom-color:var(--accent); text-decoration:none; }
.nav .btn{ background:var(--accent); color:#fff; padding:8px 18px; border-radius:8px; font-weight:600; font-size:0.9rem; border:none; cursor:pointer; box-shadow:0 0 14px rgba(99,102,241,0.35); }
.nav .btn:hover{ background:var(--accent-hover); text-decoration:none; box-shadow:0 0 20px rgba(99,102,241,0.5); }

/* ---------- Hero / landing ---------- */
.hero{ padding:70px 0 40px; text-align:center; }
.hero .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,0.03); color:var(--muted); font-size:0.85rem; margin-bottom:16px;
}
.hero .badge .dot{ width:8px;height:8px;border-radius:50%;background:var(--accent); }
h1{ font-size:2.6rem; font-weight:800; line-height:1.15; margin-bottom:14px; letter-spacing:-1px; }
h1 .accent{ color:var(--accent); }
.lead{ color:var(--muted); font-size:1.1rem; max-width:620px; margin:0 auto 30px; line-height:1.6; }

/* ---------- Cards ---------- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.card-title{ font-size:1.05rem; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:var(--text); }
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.stat{ display:flex; flex-direction:column; gap:6px; }
.stat .val{ font-size:1.75rem; font-weight:800; color:var(--accent); }
.stat .lab{ color:var(--muted); font-size:0.9rem; }

/* ---------- Forms ---------- */
.form{ display:grid; gap:16px; max-width:520px; }
.form label{ display:flex; flex-direction:column; gap:6px; font-size:0.9rem; font-weight:600; color:var(--muted); }
.form input,.form select,.form textarea{
  width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border);
  background:#070c18; color:var(--text); font-size:0.95rem; outline:none;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.form textarea{ min-height:110px; resize:vertical; font-family:inherit; }
.form-note{ color:var(--muted); font-size:0.85rem; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn{
  border:none; border-radius:8px; padding:10px 20px; font-weight:600; font-size:0.95rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:all .15s;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 0 14px rgba(99,102,241,0.35); }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-danger{ background:rgba(248,113,113,0.15); color:var(--danger); border:1px solid rgba(248,113,113,0.3); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-sm{ padding:6px 12px; font-size:0.85rem; }
.btn-outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover{ background:var(--accent); color:#fff; }

/* ---------- Tables / lists ---------- */
table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
th{ text-align:left; color:var(--muted); font-weight:600; padding:12px 8px; border-bottom:1px solid var(--border); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px; }
td{ padding:12px 8px; border-bottom:1px solid #1c2641; vertical-align:middle; }
tr:hover td{ background:rgba(255,255,255,0.03); }
.badge{ display:inline-block; font-size:0.78rem; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid; }
.badge-active{ background:rgba(52,211,153,0.15); color:var(--success); border-color:rgba(52,211,153,0.35); }
.badge-expired{ background:rgba(248,113,113,0.15); color:var(--danger); border-color:rgba(248,113,113,0.35); }
.badge-never{ background:rgba(139,92,246,0.15); color:#a78bfa; border-color:rgba(139,92,246,0.35); }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.88rem; font-weight:700; letter-spacing:0.5px; background:#070c18; border:1px solid var(--border); padding:2px 8px; border-radius:6px; color:#c7d2fe; }
.actions{ display:flex; gap:6px; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.85rem; color:var(--muted); word-break:break-all; }
.empty{ color:var(--muted); text-align:center; padding:30px; }

/* ---------- Rich doc content rendering ---------- */
.doc-content{
  color:var(--text);
  font-size:0.98rem;
}
.doc-content h1,.doc-content h2,.doc-content h3,.doc-content h4,.doc-content h5,.doc-content h6{
  color:var(--text);
  font-weight:800;
  line-height:1.3;
  margin:24px 0 10px;
  letter-spacing:-0.3px;
}
.doc-content h1{ font-size:1.7rem; border-bottom:2px solid var(--border); padding-bottom:8px; }
.doc-content h2{ font-size:1.4rem; color:#c7d2fe; }
.doc-content h3{ font-size:1.2rem; color:#a5b4fc; }
.doc-content p{ margin:10px 0; line-height:1.7; }
.doc-content a{
  color:#818cf8;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .15s;
}
.doc-content a:hover{ color:#a5b4fc; }
.doc-content ul,.doc-content ol{ margin:10px 0 10px 22px; line-height:1.7; }
.doc-content li{ margin-bottom:6px; }
.doc-content strong{ color:var(--text); }
.doc-content em{ color:var(--muted); font-style:italic; }

.callout{
  border-radius:10px; padding:14px 18px; margin:16px 0; border-left:4px solid;
}
.callout-info{ background:rgba(99,102,241,0.1); border-left-color:var(--accent); color:var(--text); }
.callout-info strong{ color:#a5b4fc; }
.callout-warn{ background:rgba(251,191,36,0.12); border-left-color:var(--warn); color:var(--text); }
.callout-warn strong{ color:#fbbf24; }

.doc-meta{
  display:flex; gap:16px; flex-wrap:wrap; margin:16px 0;
  font-size:0.88rem; color:var(--muted);
}
.doc-meta .item{ display:flex; align-items:center; gap:8px; }

/* ---------- Client tracker view ---------- */
.tracker-head{ text-align:center; padding:56px 0 28px; }
.tracker-head .company{ font-size:1.25rem; font-weight:800; letter-spacing:-0.5px; margin-bottom:6px; }
.tracker-head .company .accent{ color:var(--accent); }
.tracker-head .url{ color:var(--muted); font-size:0.95rem; margin-bottom:4px; }
.tracker-head .status-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:8px 16px; border-radius:999px; font-size:0.85rem; font-weight:700; border:1px solid; }
.tracker-head .ok{ background:rgba(52,211,153,0.15); color:var(--success); border-color:rgba(52,211,153,0.35); }
.tracker-head .exp{ background:rgba(248,113,113,0.15); color:var(--danger); border-color:rgba(248,113,113,0.35); }
.update-item{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-bottom:14px; }
.update-item .head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.update-item .page{ font-weight:700; font-size:1rem; }
.update-item .meta{ color:var(--muted); font-size:0.85rem; display:flex; gap:12px; flex-wrap:wrap; }
.update-item .notes{ color:var(--text); font-size:0.93rem; white-space:pre-wrap; line-height:1.6; }
.code-gate{ max-width:460px; margin:0 auto; text-align:center; padding:40px 0; }
.code-gate input{ width:100%; max-width:320px; }

/* ---------- Admin dashboard ---------- */
.admin-hero{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.admin-hero h2{ font-size:1.6rem; font-weight:800; letter-spacing:-0.5px; }
.admin-hero .subtitle{ color:var(--muted); font-size:0.95rem; }
.import-box{ background:linear-gradient(180deg,rgba(99,102,241,0.08),rgba(99,102,241,0.03)); border:1px dashed var(--border); border-radius:var(--radius); padding:20px; margin-bottom:24px; }
.import-box .label{ font-size:0.85rem; color:var(--muted); margin-bottom:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }

/* ---------- Overlay / modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(2,6,23,0.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:24px; }
.overlay.open{ display:flex; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); width:100%; max-width:560px; max-height:85vh; overflow:auto; box-shadow:0 20px 50px -15px rgba(0,0,0,0.6); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:1.1rem; font-weight:700; }
.close-btn{ background:none; border:none; color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer; padding:4px; }
.close-btn:hover{ color:var(--text); }
.modal-body{ padding:24px; }

/* ---------- Utilities ---------- */
.flex{ display:flex; align-items:center; gap:10px; }
.jc-between{ justify-content:space-between; }
.mt-6{ margin-top:24px; }
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.small{ font-size:0.85rem; }
.hidden{ display:none !important; }

/* Responsive */
@media (max-width:640px){
  .container{ padding:0 16px; }
  h1{ font-size:2rem; }
  .nav{ gap:14px; }
  .admin-hero{ flex-direction:column; align-items:flex-start; }
  table{ font-size:0.82rem; }
  td,th{ padding:10px 6px; }
  .update-item{ padding:14px 18px; }
}