/* ==========================================================================
   SPCS Modern Theme (v4)
   Palette matches the SUB OFFICE brand mark: near-black + white, with a
   single blue accent for interactive elements — no clashing rainbow tiles.
   v4 benchmarks the spacing/radius/shadow/type scale against a real modern
   admin dashboard (Volt Bootstrap 5) and adds real mobile/tablet behavior:
   the sidebar becomes an off-canvas drawer below desktop width instead of
   permanently eating 200px of a tablet's screen, tables scroll horizontally
   instead of overflowing, and touch targets are sized for fingers, not just
   cursors.
   Loaded LAST so these rules win over the older template stylesheets.
   Nothing here renames or removes classes the JavaScript plugins depend on.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --spcs-ink: #17181a;          /* near-black, matches logo */
  --spcs-ink-soft: #2b2d31;
  --spcs-accent: #2563eb;       /* single accent color for actions/links */
  --spcs-accent-dark: #1d4ed8;
  --spcs-sidebar-bg: #17181a;
  --spcs-sidebar-text: #b9bcc2;
  --spcs-sidebar-text-active: #ffffff;
  --spcs-bg: #f3f4f6;
  --spcs-card-bg: #ffffff;
  --spcs-border: #e5e7eb;
  --spcs-text: #1a1b1e;
  --spcs-text-muted: #6b7280;
  --spcs-radius: 10px;
  --spcs-shadow: 0 1px 3px rgba(15, 15, 20, 0.06), 0 1px 2px rgba(15,15,20,0.04);
  --spcs-shadow-lg: 0 10px 30px rgba(15, 15, 20, 0.10);
}

/* ---------- Base ---------- */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--spcs-bg);
  color: var(--spcs-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .panel-heading, .panel-title { font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--spcs-accent); transition: color .15s ease; }
a:hover, a:focus { color: var(--spcs-accent-dark); }

/* ---------- Sidebar ---------- */
.sidebar-panel { background: var(--spcs-sidebar-bg) !important; }

.sidebar-panel .brand {
  background: var(--spcs-sidebar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 22px 16px;
  height: auto !important;
  min-height: 0;
  margin-bottom: 18px;
  text-align: center;
}

.sidebar-panel .brand-logo {
  display: block;
  float: none !important;
  margin: 0 auto;
  text-align: center;
}
.sidebar-panel .brand-logo img { max-height: 34px; width: auto; max-width: 100%; margin: 0 auto; display: block; }

.sidebar-panel nav.animated ul.nav > li > a {
  color: var(--spcs-sidebar-text) !important;
  border-radius: 8px;
  margin: 2px 10px;
  padding: 11px 14px;
  font-weight: 500;
  font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}

.sidebar-panel nav.animated ul.nav > li > a:hover,
.sidebar-panel nav.animated ul.nav > li > a:focus {
  background: rgba(255,255,255,0.07) !important;
  color: var(--spcs-sidebar-text-active) !important;
}

.sidebar-panel nav.animated ul.nav > li.active > a,
.sidebar-panel nav.animated ul.nav > li.open > a {
  background: var(--spcs-accent) !important;
  color: #fff !important;
}

.sidebar-panel nav.animated ul.nav > li > a > i {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  opacity: .85;
}

/* ---------- Top header ---------- */
.header.navbar {
  background: var(--spcs-card-bg) !important;
  border-bottom: 1px solid var(--spcs-border);
  box-shadow: var(--spcs-shadow);
}

.header.navbar .dropdown-toggle {
  color: var(--spcs-text) !important;
  font-weight: 600;
  font-size: 13.5px;
}

/* ---------- Main content area ---------- */
.main-content { padding: 28px; }

.main-content h2, .main-content h3 { color: var(--spcs-ink); }

/* ---------- Dashboard stat cards: replace flat rainbow tiles ---------- */
/* These override the template's own .bg-teal / .bg-blue / .bg-purple / .bg-cyan
   utility classes used specifically on the dashboard "card card-block" tiles,
   turning them into clean white cards with a colored icon accent instead of
   a solid saturated background. */
.card.card-block.bg-teal,
.card.card-block.bg-blue,
.card.card-block.bg-purple,
.card.card-block.bg-cyan {
  background: var(--spcs-card-bg) !important;
  color: var(--spcs-text) !important;
  border: 1px solid var(--spcs-border);
  border-radius: var(--spcs-radius);
  box-shadow: var(--spcs-shadow);
  position: relative;
  overflow: hidden;
}

.card.card-block.bg-teal *,
.card.card-block.bg-blue *,
.card.card-block.bg-purple *,
.card.card-block.bg-cyan * {
  color: var(--spcs-text) !important;
}

.card.card-block .card-circle-bg-icon {
  color: #fff !important;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 1 !important;
  position: static !important;
  margin-bottom: 14px;
}

.card.card-block.bg-teal .card-circle-bg-icon   { background: #0f766e; }
.card.card-block.bg-blue .card-circle-bg-icon   { background: var(--spcs-accent); }
.card.card-block.bg-purple .card-circle-bg-icon { background: #7c3aed; }
.card.card-block.bg-cyan .card-circle-bg-icon   { background: #0891b2; }

/* icons must stay white on their colored boxes (the blanket "*" color rule above would otherwise darken them) */
.card.card-block .card-circle-bg-icon,
.card.card-block .card-circle-bg-icon i { color: #fff !important; opacity: 1 !important; transform: none !important; }

/* the big number in each stat card */
.card.card-block h2, .card.card-block h3, .card.card-block .h2, .card.card-block .h3 {
  font-weight: 800;
  font-size: 26px;
}

/* ---------- "This month status" side panel ----------
   The "THIS MONTH STATUS" label has no .text-white class in its markup —
   it relies on inherited text color. Setting this panel's background to
   near-black without also pinning the text to white left dark text on a
   near-black background (unreadable). Fixed by setting both together. */
.card.bg-white { border: 1px solid var(--spcs-border); box-shadow: var(--spcs-shadow); border-radius: var(--spcs-radius); overflow: hidden; }
.card.bg-white .p-a.bg-primary {
  background: var(--spcs-ink) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .05em;
}
.circle-icon.bg-success { background: var(--spcs-accent) !important; }

/* ---------- Cards / panels (generic) ---------- */
.panel, .card {
  border: 1px solid var(--spcs-border);
  border-radius: var(--spcs-radius);
  box-shadow: var(--spcs-shadow);
}

.panel-heading {
  background: var(--spcs-card-bg);
  color: var(--spcs-text);
  border-bottom: 1px solid var(--spcs-border);
  border-radius: var(--spcs-radius) var(--spcs-radius) 0 0 !important;
  font-weight: 700;
  padding: 16px 20px;
}

.panel-body { padding: 20px; color: var(--spcs-text); }

/* ---------- Card headers (New Order / Leads / etc.) ----------
   The template's own .bg-info is a light Bootstrap blue (#6EC7E6) that
   clashes with the near-black + accent-blue palette. These cards keep
   .text-white in their markup, so the header must stay a DARK background —
   switching it to a light one without also flipping the text color is
   exactly the white-on-white risk being guarded against here. */
.card-header.bg-info {
  background: var(--spcs-ink) !important;
  color: #fff !important;
  border-bottom: none;
}
.card-header.bg-info a,
.card-header.bg-info .btn-default {
  color: var(--spcs-ink) !important;
}
/* .btn-primary is themed to near-black elsewhere; on this now-near-black
   header that button would nearly disappear into its own background, so
   give header action buttons the accent blue instead so they stay visible. */
.card-header.bg-info .btn-primary {
  background-color: var(--spcs-accent) !important;
  border-color: var(--spcs-accent) !important;
  color: #fff !important;
}

/* Modal headers use the template's purple .bg-primary (#6164C1) with no
   explicit text color set, so the title/close button fall back to dark
   Bootstrap defaults on a mid-tone background — low, inconsistent contrast.
   Pin both explicitly instead of relying on inheritance. */
.modal-header.bg-primary {
  background: var(--spcs-ink) !important;
  border-bottom: none;
}
.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .close {
  color: #fff !important;
  opacity: 1;
  text-shadow: none;
}
.modal-header.bg-primary .close:hover { opacity: .7; }

/* ---------- Section divider headings (e.g. "Billing Address") ----------
   app.css ships this as a literal unthemed demo snippet: a blue
   border-bottom plus a RED box-shadow line — that stray red line under
   "Billing Address" is not a bug in the page, it's leftover placeholder
   CSS from the template. Replace both with the theme's own border color. */
h2.background:before {
  border-top: 1px solid var(--spcs-border);
}
h2.background span {
  background: var(--spcs-card-bg);
  color: var(--spcs-text);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
h2.double:after {
  border-bottom: 1px solid var(--spcs-border);
  box-shadow: none;
}

/* ---------- Radio buttons (.cs-radio: Company/Individual, Tax Yes/No) ----------
   Custom-styled already (the circle + fill dot are template CSS, not raw
   browser radios) but the checked dot used the template's stock purple
   (#6164C1), which reads as an unrelated, unthemed accent next to the new
   near-black/blue palette. Recolor to match; keep the rest of the sizing. */
.cs-radio label:before {
  border-color: #c9cbd1;
}
.cs-radio input[type="radio"]:checked + label:before {
  border-color: var(--spcs-accent);
}
.cs-radio input[type="radio"]:checked + label:after {
  background-color: var(--spcs-accent) !important;
}
.cs-radio label { font-weight: 500; color: var(--spcs-text); }

/* ---------- New Order page: RESET / SUBMIT ----------
   Two full-width, equally-weighted, all-caps buttons with large icons read
   as oversized and give a destructive action (Reset) the same visual
   weight as the primary action (Submit). Standard form-action pattern:
   a quiet secondary action + one clear primary action, right-aligned. */
.order-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}
.order-form-actions .col-xs-6 {
  width: auto;
  float: none;
  padding: 0;
}
.order-form-actions .btn-block {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 13px;
  text-transform: none;
  font-weight: 600;
}
.order-form-actions .btn-danger {
  background: transparent;
  border: 1px solid var(--spcs-border);
  color: var(--spcs-text-muted);
}
.order-form-actions .btn-danger:hover,
.order-form-actions .btn-danger:focus {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.order-form-actions .btn-success {
  background: var(--spcs-accent);
  border-color: var(--spcs-accent);
}
.order-form-actions .btn-success:hover,
.order-form-actions .btn-success:focus {
  background: var(--spcs-accent-dark);
  border-color: var(--spcs-accent-dark);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 9px 18px;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--spcs-ink);
  border-color: var(--spcs-ink);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--spcs-ink-soft);
  border-color: var(--spcs-ink-soft);
}

.btn-info, .btn-default.btn-action {
  background-color: var(--spcs-accent);
  border-color: var(--spcs-accent);
  color: #fff;
}

.btn-danger { background-color: #dc2626; border-color: #dc2626; }
.btn-success { background-color: #059669; border-color: #059669; }
.btn-link { color: var(--spcs-accent); font-weight: 600; }

/* ---------- Tables ---------- */
.table { background: var(--spcs-card-bg); }

.table > thead > tr > th {
  background: #fafafa;
  border-bottom: 2px solid var(--spcs-border);
  font-weight: 700;
  color: var(--spcs-text-muted);
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 12px 14px;
}

.table > tbody > tr > td { padding: 12px 14px; vertical-align: middle; }
.table-hover > tbody > tr:hover { background-color: #f8fafc; }

/* ---------- Alerts ---------- */
.alert { border: none; border-radius: var(--spcs-radius); box-shadow: var(--spcs-shadow); font-weight: 500; }
.alert-success { background-color: #ecfdf5; color: #065f46; }
.alert-danger { background-color: #fef2f2; color: #991b1b; }

/* ---------- Forms ---------- */
.form-control {
  border-radius: 8px;
  border: 1px solid var(--spcs-border);
  box-shadow: none;
  height: 42px;
  padding: 8px 14px;
}
.form-control:focus {
  border-color: var(--spcs-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
label { font-weight: 600; color: var(--spcs-text); font-size: 13.5px; }

/* ---------- Badges / labels ---------- */
.label-primary, .badge { background-color: var(--spcs-accent); }

/* ==========================================================================
   Auth pages (login / register / password reset) — layouts/app.blade.php
   ========================================================================== */
body.auth-body {
  background: var(--spcs-ink);
  background-image: radial-gradient(circle at 20% 20%, #26282c 0%, var(--spcs-ink) 60%);
  min-height: 100vh;
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--spcs-card-bg);
  border-radius: 16px;
  box-shadow: var(--spcs-shadow-lg);
  padding: 40px 36px;
}

.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo img { max-width: 220px; height: auto; }

.auth-card h4 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--spcs-ink);
}

.auth-card .form-group { margin-bottom: 18px; }
.auth-card label { display: block; margin-bottom: 6px; }
.auth-card .btn-primary { width: 100%; padding: 11px; font-size: 14.5px; }
.auth-card .checkbox { margin: 0 0 18px 0; font-weight: 500; color: var(--spcs-text-muted); }
.auth-footer-link { text-align: center; margin-top: 16px; font-size: 13.5px; }

/* ---------- Rounded pill badges/labels ----------
   The benchmark dashboard uses pill-shaped status tags; the template's own
   .label/.badge are nearly square. Purely cosmetic, no markup dependency. */
.label, .badge {
  border-radius: 50px !important;
  padding: 4px 10px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ==========================================================================
   Responsive: tablet + phone
   The template's own CSS keeps a permanently-visible 200px sidebar from
   768px up, and only turns it into a hide-by-default, hamburger-toggled
   drawer below 768px. That leaves a tablet in portrait (768–991px, e.g. an
   iPad) with a fixed 200px column eating over a quarter of the screen with
   no way to hide it. The benchmark dashboard (and most modern admin UIs)
   treats "tablet or smaller" as one group: sidebar hidden by default,
   opened with the same hamburger used on phones, full width otherwise.
   This block extends that same off-canvas behavior through 991px so
   tablets behave like the benchmark instead of like a squeezed desktop.
   It reuses the exact transform/z-index values the template already uses
   for phones below 768px — nothing new to test, just a wider trigger range.
   ========================================================================== */
@media (max-width: 991px) {
  .sidebar-panel {
    width: 12.5rem !important;
    z-index: 9999;
    transform: translate(-100%, 0);
    transform: translate3d(-100%, 0, 0);
  }
  .offscreen .sidebar-panel {
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
  }
  .main-panel { margin-left: 0 !important; }
  .layout-fixed-header .main-panel > .header {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* ---------- Responsive tables ----------
   Several admin pages put a wide .table directly inside a card/panel body
   without a .table-responsive wrapper, so on a phone the table pushes the
   page wider than the screen instead of scrolling. Rather than hunting
   down and editing every page, make any table inside a card/panel body
   scroll horizontally by default — same visual result as wrapping it,
   with no template markup to touch. */
@media (max-width: 991px) {
  .card-block > .table,
  .card-block > .table-responsive,
  .panel-body > .table,
  .panel-body > .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Dashboard stat cards: 2-up instead of 1-up on tablet/phone ----------
   The four stat tiles only carry a .col-md-3 class (no .col-sm-*), so below
   992px Bootstrap stacks them one per row — safe, but wastes space on a
   tablet or a phone in landscape. :has() is supported in all current
   evergreen browsers; where it isn't, this simply falls back to the
   existing safe single-column stack, never breaks. */
@media (min-width: 480px) and (max-width: 991px) {
  .row > .col-md-3:has(> .card.card-block) {
    width: 50%;
    float: left;
  }
}

/* ---------- Touch targets ----------
   Sidebar links and buttons that are comfortable to click with a cursor
   can be too small to reliably tap. Bump the hit area below desktop width
   without changing how anything looks at desktop size. */
@media (max-width: 991px) {
  .sidebar-panel nav.animated ul.nav > li > a {
    padding: 13px 14px;
    font-size: 14.5px;
  }
  .btn { min-height: 42px; }
  .order-form-actions { flex-wrap: wrap; }
  .order-form-actions .col-xs-6 { width: 100%; }
  .order-form-actions .btn-block { width: 100%; justify-content: center; }
}


/* "This month status": blue link/text -> black (icons inside the blue circles stay white) */
.card.bg-white .notifications-list a,
.card.bg-white .notification-message,
.card.bg-white .notification-message strong { color: var(--spcs-ink) !important; }
.card.bg-white .circle-icon,
.card.bg-white .circle-icon i { color: #fff !important; }