/* ============================================================
   rackit.io dark theme for app.rackit.io
   Loaded AFTER all other stylesheets in every served template —
   overrides the light BootstrapMade OnePage theme (style.css),
   Bootstrap 4 defaults on the logged-in pages, and the inline
   <style> blocks in buy.html / howto.html.
   Palette matches the rackit.io marketing site (brand card navy).
   ============================================================ */

:root {
  --ink-page: #0e1526;
  --ink-raised: #131c31;
  --ink-surface: #182139;
  --ink-elevate: #1f2b4a;
  --ink-hover: #263454;
  --ink-border: #2c3a5e;
  --ink-border-soft: #1c2743;
  --ink-text: #f1f5f9;
  --ink-text-2: #c3cfe5;
  --ink-text-3: #a9b8d6;
  --ink-muted: #8d9dc0;
  --ink-faint: #7285ab;
  --ink-accent: #2dd4bf;
  --app-blue: #2487ce;
  --app-blue-bright: #47aeff;
  /* Repoint buy.html/howto.html inline-style vars at dark values */
  --pp-blue: #47aeff;
  --pp-blue-dark: #e3f0fa;
  --pp-line: #2c3a5e;
}

/* ---------- Base ---------- */
html { background: var(--ink-page); }

body {
  background: var(--ink-page) !important;
  color: var(--ink-text-2);
}

a { color: var(--app-blue-bright); }
a:hover { color: #6dc0ff; }

h1, h2, h3, h4, h5, h6 { color: var(--ink-text); }

::selection { background: rgba(36, 135, 206, 0.4); }

/* ---------- OnePage header / nav ---------- */
#header {
  background: rgba(14, 21, 38, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-border-soft);
}

#header.header-scrolled {
  border-color: var(--ink-border-soft);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4);
}

#header .logo a { color: var(--ink-text); }

.nav-menu a { color: var(--ink-text-2); }
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { color: var(--app-blue-bright); }
.nav-menu .drop-down ul { background: var(--ink-surface); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); }
.nav-menu .drop-down ul a { color: var(--ink-text-2); }
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { color: var(--app-blue-bright); }

.mobile-nav { background: var(--ink-surface); }
.mobile-nav a { color: var(--ink-text-2); }
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: var(--app-blue-bright); }
.mobile-nav-toggle i { color: var(--ink-text); }

.get-started-btn { color: #fff; }

/* ---------- Hero ---------- */
#hero:before { background: rgba(14, 21, 38, 0.88); }
#hero h1 { color: var(--ink-text); }
#hero h2 { color: var(--ink-text-3); }

#hero .icon-box {
  background: var(--ink-surface);
  border-color: var(--ink-border) !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}
#hero .icon-box .title a { color: var(--ink-text); }
#hero .icon-box .description { color: var(--ink-text-3); }
#hero .icon-box:hover { border-color: var(--app-blue) !important; }
#hero .icon-box:hover .title a { color: var(--app-blue-bright); }

/* ---------- Sections ---------- */
.section-bg { background-color: var(--ink-raised); }
.section-title h2 { color: var(--ink-text); }
.section-title p { color: var(--ink-text-3); }

.breadcrumbs { background: var(--ink-raised); }

/* About / content blocks */
.about .content h3, .about-video .content h3 { color: var(--ink-text); }
.counts .count-box span { color: var(--ink-text); }
.counts .count-box p { color: var(--ink-text-3); }
.counts .count-box { background: var(--ink-surface); }

/* Services / feature icon boxes (also used on signup, device, user) */
.services .icon-box,
.icon-boxes .icon-box {
  background: var(--ink-surface);
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3);
}

/* Logged-in dashboards: make each card fill its column so the grid
   stays uniform (boxes otherwise shrink to their content) */
.icon-boxes .icon-box {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ink-border-soft);
}
.services .icon-box h4 a, .icon-boxes .icon-box .title, .icon-boxes .icon-box .title a { color: var(--ink-text); }
.services .icon-box p, .icon-boxes .icon-box .description { color: var(--ink-text-3); }

/* Testimonials */
.testimonials .testimonial-item { background: var(--ink-surface); }
.testimonials .testimonial-item h3 { color: var(--ink-text); }
.testimonials .testimonial-item h4 { color: var(--ink-muted); }
.testimonials .testimonial-item p { color: var(--ink-text-2); }

/* FAQ */
.faq .faq-list li { background: var(--ink-surface); }
.faq .faq-list a { color: var(--ink-text); }
.faq .faq-list p { color: var(--ink-text-3); }

/* Pricing boxes */
.pricing .box { background: var(--ink-surface); color: var(--ink-text-2); }
.pricing .box h3 { color: var(--ink-text); }
.pricing .box h4 { color: var(--app-blue-bright); }

/* ---------- Footer ---------- */
#footer {
  background: #0b1120;
  color: var(--ink-text-3);
  box-shadow: none;
  border-top: 1px solid var(--ink-border-soft);
}
#footer .footer-top { background: var(--ink-raised); }
#footer .footer-top h3, #footer .footer-top h4 { color: var(--ink-text); }
#footer .footer-top .footer-contact p, #footer .footer-top .footer-links ul li { color: var(--ink-text-3); }
#footer .footer-top .footer-links ul a { color: var(--ink-muted); }
#footer .footer-top .footer-links ul a:hover { color: var(--app-blue-bright); }
#footer .copyright, #footer .credits { color: var(--ink-muted); }

#footer .footer-newsletter form {
  background: var(--ink-raised);
  border: 1px solid var(--ink-border);
}
#footer .footer-newsletter form input[type="email"] { background: var(--ink-raised); }

/* ---------- Forms (global + Bootstrap .form-control) ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
select, textarea, .form-control {
  background-color: var(--ink-page) !important;
  border: 1px solid var(--ink-border) !important;
  color: var(--ink-text) !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--ink-muted) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--app-blue) !important;
  box-shadow: 0 0 0 3px rgba(36, 135, 206, 0.25) !important;
  outline: none;
}

/* Bare, classless buttons (e.g. the PSK "reveal" toggle) render with
   browser-default white chrome on dark; give them dark styling */
button:not([class]), input[type="button"]:not([class]) {
  background: var(--ink-elevate);
  border: 1px solid var(--ink-border);
  border-radius: 6px;
  color: var(--ink-text-2);
  padding: 2px 10px;
}
button:not([class]):hover, input[type="button"]:not([class]):hover { background: var(--ink-hover); }

/* ---------- Bootstrap 4 (logged-in device/user pages) ---------- */
.navbar-light .navbar-nav .nav-link { color: var(--ink-text-2); }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--app-blue-bright); }
.navbar-light .navbar-toggler { border-color: var(--ink-border); color: var(--ink-text-2); }
.table { color: var(--ink-text-2); }
.table td, .table th { border-color: var(--ink-border-soft); }
.table thead th { border-color: var(--ink-border); color: var(--ink-text); }
.table-hover tbody tr:hover { background-color: var(--ink-elevate); color: var(--ink-text); }
.table .thead-light th, .table-light { background-color: var(--ink-elevate); color: var(--ink-text); }

.btn-outline-primary { color: var(--app-blue-bright); border-color: var(--app-blue); }
.btn-outline-primary:hover { background-color: var(--app-blue); color: #fff; }
.btn-outline-secondary { color: var(--ink-text-3); border-color: var(--ink-border); }
.btn-outline-secondary:hover { background-color: var(--ink-hover); color: var(--ink-text); border-color: var(--ink-border); }
.btn-light { background-color: var(--ink-elevate); border-color: var(--ink-border); color: var(--ink-text); }

.card { background-color: var(--ink-surface); border-color: var(--ink-border-soft); }
.card-header, .card-footer { background-color: var(--ink-raised); border-color: var(--ink-border-soft); }

.list-group-item { background-color: var(--ink-surface); border-color: var(--ink-border-soft); color: var(--ink-text-2); }

.modal-content { background-color: var(--ink-surface); border-color: var(--ink-border); }
.modal-header, .modal-footer { border-color: var(--ink-border-soft); }
.close { color: var(--ink-text); text-shadow: none; }

.bg-light { background-color: var(--ink-raised) !important; }
.bg-white { background-color: var(--ink-surface) !important; }
.text-dark { color: var(--ink-text) !important; }
.text-muted { color: var(--ink-muted) !important; }
.text-secondary { color: var(--ink-text-3) !important; }
hr { border-color: var(--ink-border-soft); }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--ink-border) !important; }

/* app.css legacy helpers (border boxes on logged-in pages) */
.no-top, .no-bottom, .no-top-bottom, .padded-border { border-color: var(--ink-border); }
.list-group, .list-group-item { background-color: var(--ink-surface); }

/* ---------- howto.html inline-style overrides ---------- */
.howto-page h2 { border-bottom-color: var(--ink-border); }
.howto-page p, .howto-page li { color: var(--ink-text-2); }
.howto-page code {
  background: var(--ink-elevate);
  border-color: var(--ink-border);
  color: var(--ink-text);
}
.howto-callout {
  background: var(--ink-raised);
  border-color: var(--ink-border-soft);
  border-left-color: var(--app-blue);
}
.howto-router {
  background: var(--ink-surface);
  border-color: var(--ink-border-soft);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

/* ---------- buy.html checkout inline-style overrides ---------- */
.checkout-card {
  background: var(--ink-surface);
  border-color: var(--ink-border-soft);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}
.checkout-sub, .section-label, .secure-note { color: var(--ink-muted); }
.order-summary { background: var(--ink-raised); border-color: var(--ink-border-soft); }
.order-summary .item, .order-summary .price { color: var(--ink-text); }
.field label { color: var(--ink-text-3); }
.field input, .promo-row input { background: var(--ink-page); border-color: var(--ink-border); color: var(--ink-text); }
.btn-ghost { background: transparent; border-color: var(--app-blue); color: var(--app-blue-bright); }
.btn-ghost:hover { background: var(--ink-elevate); }
.btn-rates { background: var(--ink-elevate); border-color: var(--ink-border); color: var(--ink-text-2); }
.btn-rates:hover { background: var(--ink-hover); }
.totals { background: var(--ink-raised); border-color: var(--ink-border-soft); }
.totals .line { color: var(--ink-text-3); }
.totals .line.total { color: var(--ink-text); border-top-color: var(--ink-border); }
.btn-pay:disabled { background: var(--ink-hover); color: var(--ink-muted); }