/* =============================================================================
   PJM Designs — brand skin for the WHMCS "six" theme
   Matches pjmdesigns.biz: Archivo / IBM Plex, near-black + paper, logo blue.
   Drop in at:  templates/six/css/custom.css  (six loads this file by design)
   Only colour, type, border and radius are touched — layout is left intact.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --pjm-ink:#0A0E1A;      --pjm-ink-2:#161E33;   --pjm-steel:#5B6780;
  --pjm-zinc:#C0C9DA;     --pjm-paper:#EDF0F6;   --pjm-paper-2:#E1E6F0;
  --pjm-brand:#00A0FF;    --pjm-brand-ink:#0070B2;
  --pjm-stamp:#C0392B;    --pjm-live:#1A8353;
  --pjm-rule:rgba(10,14,26,.13); --pjm-rule-strong:rgba(10,14,26,.28);
  --pjm-disp:'Archivo',system-ui,-apple-system,sans-serif;
  --pjm-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --pjm-data:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------- base ---------- */
body{ background:var(--pjm-paper); color:var(--pjm-ink); font-family:var(--pjm-body); font-size:15px; line-height:1.55; }
a{ color:var(--pjm-brand-ink); }
a:hover, a:focus{ color:var(--pjm-ink); text-decoration:none; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{ font-family:var(--pjm-disp); font-weight:800; letter-spacing:-.025em; color:var(--pjm-ink); }
hr{ border-top:1px solid var(--pjm-rule); }
label{ font-weight:600; }

/* ---------- eyebrow / mono labels (six uses .text-uppercase in places) ---------- */
.text-uppercase{ font-family:var(--pjm-data); letter-spacing:.08em; }

/* ---------- top utility bar ---------- */
#header{ background:var(--pjm-ink); border-bottom:1px solid var(--pjm-ink-2); }
#header .top-nav a,
#header .top-nav > li > a,
#header .loginLink,
#header .btn-link{ color:var(--pjm-zinc); font-family:var(--pjm-data); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
#header .top-nav a:hover{ color:#fff; }

/* ---------- primary navigation ---------- */
#main-menu, .navbar-default, #main-menu .navbar{
  background:var(--pjm-ink); border:0; border-radius:0; box-shadow:none; margin-bottom:0;
}
#main-menu .navbar-brand, .navbar-brand{ height:auto; padding:14px 15px; }
.navbar-default .navbar-nav > li > a,
#main-menu .navbar-nav > li > a{
  color:var(--pjm-zinc); font-family:var(--pjm-data); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
#main-menu .navbar-nav > li > a:hover{
  color:#fff; background:var(--pjm-ink-2);
}
.navbar-default .navbar-toggle{ border-color:var(--pjm-rule-strong); }
.navbar-default .navbar-toggle .icon-bar{ background:var(--pjm-zinc); }
.dropdown-menu{ border:1px solid var(--pjm-rule); border-radius:3px; box-shadow:0 8px 24px rgba(10,14,26,.12); }
.dropdown-menu > li > a{ font-family:var(--pjm-body); color:var(--pjm-ink-2); }
.dropdown-menu > li > a:hover{ background:var(--pjm-paper); color:var(--pjm-ink); }

/* ---------- buttons ---------- */
.btn{ border-radius:2px; font-family:var(--pjm-data); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:500; padding:9px 16px; }
.btn-primary{ background:var(--pjm-ink); border-color:var(--pjm-ink); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background:var(--pjm-brand-ink); border-color:var(--pjm-brand-ink); color:#fff; }
.btn-success{ background:var(--pjm-live); border-color:var(--pjm-live); }
.btn-danger{ background:var(--pjm-stamp); border-color:var(--pjm-stamp); }
.btn-default{ background:#fff; border-color:var(--pjm-rule-strong); color:var(--pjm-ink); }
.btn-default:hover{ border-color:var(--pjm-brand-ink); color:var(--pjm-brand-ink); }
.btn-link{ color:var(--pjm-brand-ink); }

/* ---------- panels / cards / wells ---------- */
.panel, .card, .well{
  background:#fff; border:1px solid var(--pjm-rule); border-radius:3px; box-shadow:none;
}
.panel-heading, .card-header{
  background:#fff; border-bottom:1px solid var(--pjm-rule);
  font-family:var(--pjm-disp); font-weight:600; color:var(--pjm-ink);
}
.panel-title, .card-title{ font-family:var(--pjm-disp); font-weight:600; letter-spacing:-.01em; }
.panel-default > .panel-heading{ color:var(--pjm-ink); }

/* ---------- the marketing/home jumbotron six shows on the client homepage ---------- */
.primary-content, .home-container{ background:var(--pjm-paper); }
.jumbotron, .highlight{ background:var(--pjm-ink); color:#fff; border-radius:4px; }
.jumbotron h1, .jumbotron h2{ color:#fff; }

/* ---------- forms ---------- */
.form-control{ border-radius:2px; border-color:var(--pjm-rule-strong); box-shadow:none; color:var(--pjm-ink); }
.form-control:focus{ border-color:var(--pjm-brand); box-shadow:0 0 0 2px rgba(0,160,255,.18); }
.input-group-addon{ border-radius:2px; border-color:var(--pjm-rule-strong); background:var(--pjm-paper); }

/* ---------- tables (invoices, services lists) ---------- */
.table > thead > tr > th{
  font-family:var(--pjm-data); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pjm-steel); border-bottom:2px solid var(--pjm-ink); }
.table > tbody > tr > td{ border-top:1px solid var(--pjm-rule); }
.table-hover > tbody > tr:hover{ background:var(--pjm-paper); }

/* ---------- labels / badges / status pills ---------- */
.label, .badge{ border-radius:2px; font-family:var(--pjm-data); font-weight:500; letter-spacing:.04em; }
.label-success{ background:var(--pjm-live); }
.label-danger, .badge-important{ background:var(--pjm-stamp); }
.label-info{ background:var(--pjm-brand-ink); }
.text-primary{ color:var(--pjm-brand-ink) !important; }
.text-success{ color:var(--pjm-live) !important; }
.text-danger{ color:var(--pjm-stamp) !important; }

/* ---------- alerts ---------- */
.alert{ border-radius:3px; border:1px solid var(--pjm-rule); }
.alert-success{ background:#EAF4EE; border-color:rgba(26,131,83,.35); color:#12613D; }
.alert-danger{ background:#FBEDEC; border-color:rgba(192,57,43,.35); color:#8E2A20; }
.alert-info{ background:var(--pjm-paper); border-color:var(--pjm-rule-strong); color:var(--pjm-ink-2); }

/* ---------- client area sidebars ---------- */
.sidebar-menu, .primary-sidebar .panel, .secondary-sidebar .panel{ border:1px solid var(--pjm-rule); }
.list-group-item{ border-color:var(--pjm-rule); }
.list-group-item.active{ background:var(--pjm-ink); border-color:var(--pjm-ink); }

/* ---------- state colours WHMCS uses for service/invoice status ---------- */
.status.active, .invoice-paid, .state-active{ color:var(--pjm-live); }
.status.overdue, .status.unpaid, .invoice-unpaid, .state-overdue{ color:var(--pjm-stamp); }

/* ---------- footer ---------- */
#footer{ background:var(--pjm-ink); color:#8891A8; border-top:0; padding-top:30px; }
#footer a{ color:var(--pjm-zinc); }
#footer a:hover{ color:#fff; }
.footer-shortcuts .btn{ border-color:var(--pjm-rule-strong); color:var(--pjm-zinc); background:transparent; }

/* ---------- login / register cards ---------- */
.logincontainer .panel, .registercontainer .panel{ max-width:520px; margin:0 auto; }

/* ---------- misc trims ---------- */
.pagination > li > a{ color:var(--pjm-brand-ink); }
.pagination > .active > a{ background:var(--pjm-ink); border-color:var(--pjm-ink); }
.breadcrumb{ background:transparent; font-family:var(--pjm-data); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.progress-bar{ background:var(--pjm-brand-ink); }

/* -----------------------------------------------------------------------------
   Override block — the six base theme colours the header, nav and footer with
   higher-specificity (theme-colour) rules, so these surfaces need !important to
   take the brand. Kept at the end and scoped tightly so nothing else is forced.
   ----------------------------------------------------------------------------- */
#header{ background:var(--pjm-ink) !important; border-bottom:1px solid var(--pjm-ink-2) !important; }
#main-menu, .navbar-default, #main-menu .navbar{ background:var(--pjm-ink) !important; border-color:var(--pjm-ink-2) !important; }
#header .top-nav a,
.navbar-default .navbar-nav > li > a,
#main-menu .navbar-nav > li > a{ color:var(--pjm-zinc) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a,
#main-menu .navbar-nav > li > a:hover{ color:#fff !important; background:var(--pjm-ink-2) !important; }
#footer{ background:var(--pjm-ink) !important; }