/*
 * VirtualBeeper — retro pager / LCD-terminal skin (Option A, "lighter").
 *
 * DIAL-BACK: this entire look is opt-in. It only applies when <html> carries the
 * `.vb-retro` class, which is added by the one <link>+<script> pair in
 * usersc/includes/head_tags.php. Remove that pair (or delete this file) and the
 * site reverts to stock Bootstrap 5 — nothing here is baked into core/templates.
 *
 * Aesthetic: LCD-green on charcoal, monospace, chunky beveled buttons, a faux
 * pager-LCD frame around the "Send a Page" panel and the Quick Ring cards.
 */

:root {
  --vb-bg:        #14171a;  /* charcoal body            */
  --vb-bg-2:      #1b1f24;  /* raised surfaces          */
  --vb-lcd:       #0c0f0b;  /* LCD inset (greenish-black)*/
  --vb-green:     #39ff14;  /* LCD green (accent/headings)*/
  --vb-green-dim: #2bbf12;  /* dimmer green             */
  --vb-text:      #b8c6b0;  /* body text (soft green-gray)*/
  --vb-amber:     #ffb000;  /* pager amber              */
  --vb-red:       #ff3b30;  /* alert red                */
  --vb-edge:      #2c3a2a;  /* green-tinted borders     */
}

/* ---- base canvas ---- */
.vb-retro,
.vb-retro body {
  background:
    radial-gradient(ellipse at top, #1b2320 0%, var(--vb-bg) 70%) fixed;
  color: var(--vb-text);
  font-family: "Share Tech Mono", "VT323", ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: .2px;
}

/* (Removed the CRT scanline overlay: a fixed full-screen pseudo-element with
   mix-blend-mode broke focus/click handling in Android WebView — it dimmed the
   page and trapped form inputs underneath. The LCD look is carried by colors,
   panels and button styling below, which create no overlays.) */

/* ---- headings: glowing LCD text ---- */
.vb-retro h1, .vb-retro h2, .vb-retro h3,
.vb-retro h4, .vb-retro h5, .vb-retro h6 {
  color: var(--vb-green);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 6px rgba(57,255,20,.45), 0 0 1px rgba(57,255,20,.9);
}
.vb-retro h1 { font-weight: 700; }
.vb-retro .text-muted { color: #7d8a78 !important; }
.vb-retro a { color: var(--vb-green-dim); }
.vb-retro a:hover { color: var(--vb-green); text-shadow: 0 0 6px rgba(57,255,20,.5); }

/* ---- home jumbotron → pager welcome panel ---- */
.vb-retro .jumbotron {
  background: var(--vb-lcd);
  border: 2px solid var(--vb-edge);
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(57,255,20,.08), 0 0 0 4px #0a0c0a;
  padding: 2rem;
}

/* ---- faux pager-LCD panels (Send a Page + Quick Ring cards) ---- */
.vb-retro .vb-panel,
.vb-retro .card {
  background: var(--vb-lcd);
  border: 2px solid var(--vb-edge);
  border-radius: 10px;
  box-shadow:
    inset 0 0 22px rgba(57,255,20,.07),  /* LCD inner glow */
    0 2px 0 #0a0c0a, 0 6px 14px rgba(0,0,0,.55); /* bezel depth */
  color: var(--vb-text);
}
.vb-retro .vb-panel { padding: 1.25rem 1.25rem 1rem; margin-top: .5rem; }
/* embossed pager label across the top of the Send-a-Page panel */
.vb-retro .vb-panel > h2:first-child::before {
  content: "▣ ";
  color: var(--vb-amber);
  text-shadow: 0 0 6px rgba(255,176,0,.5);
}

/* ---- tables ---- */
.vb-retro .table { color: var(--vb-text); border-color: var(--vb-edge); }
.vb-retro .table thead th {
  color: var(--vb-green-dim);
  border-bottom: 1px solid var(--vb-edge);
  text-transform: uppercase; letter-spacing: 1px; font-size: .82em;
}
.vb-retro .table td, .vb-retro .table th { border-color: rgba(44,58,42,.5); }

/* ---- form controls: dark LCD inputs ---- */
.vb-retro .form-control,
.vb-retro .form-control:focus {
  background: #0a0d0a;
  color: var(--vb-green);
  border: 1px solid var(--vb-edge);
  font-family: inherit;
  box-shadow: inset 0 0 8px rgba(57,255,20,.08);
}
.vb-retro .form-control:focus { border-color: var(--vb-green-dim); box-shadow: 0 0 8px rgba(57,255,20,.35); }
.vb-retro .form-control::placeholder { color: #5d6b58; }
.vb-retro .form-label, .vb-retro label { color: var(--vb-text); }
.vb-retro .form-check-input { background: #0a0d0a; border-color: var(--vb-edge); }
.vb-retro .form-check-input:checked { background: var(--vb-green-dim); border-color: var(--vb-green); }

/* ---- chunky beveled pager buttons ---- */
.vb-retro .btn {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: 0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .04s ease, box-shadow .04s ease;
}
.vb-retro .btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.vb-retro .btn-danger  { background: var(--vb-red);   color: #1a0d0c; }
.vb-retro .btn-warning { background: var(--vb-amber); color: #1f1400; }
.vb-retro .btn-info,
.vb-retro .btn-primary { background: var(--vb-green-dim); color: #04140a; border-color: #0a0c0a; }
.vb-retro .btn-lg { padding: .55rem 1.4rem; }

/* ---- badges (device type chips) ---- */
.vb-retro .badge.bg-secondary { background: #2c3a2a !important; color: var(--vb-green); }
.vb-retro .badge.bg-info      { background: #0c3a3a !important; color: #4ff0ff; }

/* ---- the "online/offline" health dots, if present ---- */
.vb-retro .dot-online  { color: var(--vb-green); text-shadow: 0 0 6px var(--vb-green); }
.vb-retro .dot-offline { color: #5d6b58; }
