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

/* Vantage portal tokens — ACTIVE = dark set.
   To revert to light: comment this :root and uncomment the light block below. */
:root {
  --deep:#2f9fd0; --mid:#60d3fc; --bright:#c8b6ff; --accent:#60d3fc;
  --canvas:#060912; --card:#0e142c; --inset:#131a37;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --ink-900:#eaf0ff; --ink-700:#aebbd6; --ink-500:#76859f; --ink-300:#5a6884;
  --ok:#3ddca0; --warn:#e6b86a; --danger:#ff6d80;
  --shadow-card:0 1px 0 inset rgba(255,255,255,.03), 0 22px 48px -32px rgba(0,0,0,.85);
  --radius:16px; --radius-sm:10px;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
/* LIGHT SET (revert):
:root {
  --deep:#166a99; --mid:#4ba2c9; --bright:#60d3fc; --accent:#1f7fb0;
  --canvas:#e9f0f7; --card:#ffffff; --inset:#f2f7fb;
  --line:#e1eaf2; --line-2:#d2deea;
  --ink-900:#0d2436; --ink-700:#33485d; --ink-500:#61788c; --ink-300:#93a7b9;
  --ok:#18935f; --warn:#b4791b; --danger:#cc4356;
  --shadow-card:0 1px 2px rgba(13,36,54,.04), 0 10px 30px -22px rgba(13,36,54,.22);
  --radius:16px; --radius-sm:10px;
  --font:'Geist',sans-serif; --font-mono:'Geist Mono',monospace;
}
*/

/* Base */
body { background: var(--canvas) !important; color: var(--ink-700); font-family: var(--font) !important; }
h1,h2,h3,h4,h5,h6,.card-title { color: var(--ink-900) !important; font-family: var(--font) !important; font-weight:600; }
.text-muted { color: var(--ink-500) !important; }
a { color: var(--accent); }
a:hover { color: var(--bright); }
code,kbd,pre,.mono { font-family: var(--font-mono) !important; }
hr { border-color: var(--line) !important; }

/* Navbar */
.navbar, #header, header .navbar { background: var(--card) !important; border-bottom:1px solid var(--line); }
.navbar .nav-link, .navbar a, .navbar-brand { color: var(--ink-700) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--bright) !important; }
.navbar-brand img { max-height:40px; width:auto; }

/* Dropdown menus */
.dropdown-menu { background: var(--card) !important; border:1px solid var(--line-2) !important; }
.dropdown-menu a, .dropdown-item { color: var(--ink-700) !important; }
.dropdown-item:hover { background: var(--inset) !important; color: var(--bright) !important; }

/* Breadcrumb */
.breadcrumb { background:transparent !important; }
.breadcrumb a { color: var(--accent) !important; }
.breadcrumb .active, .breadcrumb-item.active { color: var(--ink-500) !important; }

/* Cards / panels / white surfaces */
.card, .panel { background: var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-card) !important; }
.card-header, .panel-heading { background:transparent !important; border-bottom:1px solid var(--line) !important; color:var(--ink-900) !important; font-weight:600; }
.bg-white, .panel-body, .card-body, .well { background: var(--card) !important; color: var(--ink-700); }
.card-footer, .panel-footer { background:transparent !important; border-top:1px solid var(--line) !important; }
.product-image, .product-details-product-image, .product-details-image { background: var(--inset) !important; }

/* Home KPI tiles */
.tile { background: var(--card) !important; border-color: var(--line) !important; }
.tile:hover { background: var(--inset) !important; }
.tile .stat { color: var(--accent) !important; }
.tile .title { color: var(--ink-500) !important; }
.tile i { color: var(--ink-300) !important; opacity:.55; }
.highlight.bg-color-blue,  .bg-color-blue  { background: var(--accent) !important; }
.highlight.bg-color-green, .bg-color-green { background: var(--ok) !important; }
.highlight.bg-color-red,   .bg-color-red   { background: var(--danger) !important; }
.highlight.bg-color-gold,  .bg-color-gold  { background: var(--warn) !important; }

/* list-group items: service rows, contacts, shortcuts, news */
.list-group-item, .list-group-item-action { background: var(--card) !important; color: var(--ink-700) !important; border-color: var(--line) !important; }
.list-group-item-action:hover { background: var(--inset) !important; color: var(--ink-900) !important; }
.list-group-item .font-weight-bold, .div-service-name .font-weight-bold { color: var(--ink-900) !important; }
.text-domain, .text-last-updated { color: var(--ink-500) !important; }
.sidebar-menu-item-label { color: var(--ink-700) !important; }
.btn-view-more { color: var(--ink-500) !important; }

/* Buttons */
.btn-primary, .btn-success { background:linear-gradient(180deg, var(--mid), var(--deep)) !important; border:none !important; color:#04121f !important; }
.btn-primary:hover, .btn-success:hover { filter:brightness(1.08); }
.btn-default, .btn-secondary, .btn-outline-primary, .btn-light { background: var(--inset) !important; border:1px solid var(--line-2) !important; color: var(--ink-700) !important; }
.btn-danger { background: var(--danger) !important; border:none !important; color:#2a0810 !important; }
.btn-danger:hover { filter:brightness(1.08); }

/* State */
.label-success, .badge-success { color:#04241a !important; background: var(--ok) !important; }
.text-success { background:transparent !important; color: var(--ok) !important; }
.product-status-text { background: var(--ok) !important; color:#04241a !important; }

/* Alerts */
.alert { border-radius: var(--radius-sm) !important; }
.alert-warning { background:color-mix(in srgb, var(--warn) 15%, var(--card)) !important; border:1px solid color-mix(in srgb, var(--warn) 35%, transparent) !important; color:var(--ink-900) !important; }
.alert-info    { background:color-mix(in srgb, var(--accent) 14%, var(--card)) !important; border:1px solid color-mix(in srgb, var(--accent) 32%, transparent) !important; color:var(--ink-900) !important; }
.alert-success { background:color-mix(in srgb, var(--ok) 14%, var(--card)) !important; border:1px solid color-mix(in srgb, var(--ok) 32%, transparent) !important; color:var(--ink-900) !important; }
.alert-danger  { background:color-mix(in srgb, var(--danger) 14%, var(--card)) !important; border:1px solid color-mix(in srgb, var(--danger) 32%, transparent) !important; color:var(--ink-900) !important; }

/* Tables */
.table, .table td, .table th { color: var(--ink-700) !important; border-color: var(--line) !important; }
.table thead th { color: var(--ink-900) !important; border-bottom:1px solid var(--line-2) !important; }
.table-hover tbody tr:hover { background: var(--inset) !important; }

/* Inputs */
.form-control, .form-select, textarea, select { background: var(--inset) !important; border:1px solid var(--line-2) !important; color: var(--ink-900) !important; border-radius: var(--radius-sm) !important; }
.form-control::placeholder { color: var(--ink-500) !important; }
.form-control:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important; border-color: var(--accent) !important; }
.input-group-text { background: var(--inset) !important; border:1px solid var(--line-2) !important; color: var(--ink-500) !important; }

/* Modals */
.modal-content { background: var(--card) !important; color: var(--ink-700); border:1px solid var(--line-2) !important; }
.modal-header, .modal-footer { border-color: var(--line) !important; }
.close, .btn-close { color: var(--ink-700) !important; }

/* Footer */
footer, .footer, footer a, .footer a { color: var(--ink-500) !important; background:transparent !important; }

/* Hide Pterodactyl panel link */
a[href^="https://panel.vantageservers.com"] { display:none !important; }

/* Hide redundant Manage power-controls tab + its empty container */
li.nav-item > a[href="#manage"] { display:none !important; }
.product-details-tab-container { display:none !important; }

/* Product-details icon block — dark-mode fix + on-brand circular icon */
.product-icon { background: transparent !important; }
.product-icon .fa-stack-2x { color: var(--deep) !important; }         /* the circle */
.product-icon .fa-inverse, .product-icon .fa-stack-1x { color: #fff !important; }  /* the glyph */
.product-icon h3 { color: var(--ink-900) !important; }
.product-icon h4 { color: var(--ink-500) !important; }

/* Neutralize the status-tinted product wrapper to the dark card surface.
   The state signal stays on the .product-status-text stripe (styled above). */
.product-status,
.product-status-active,
.product-status-pending,
.product-status-suspended,
.product-status-cancelled,
.product-status-terminated,
.product-status-fraud { background: var(--card) !important; }

/* Per-game product art (circular) */
.product-icon .game-icon {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
/* ============================================
   VANTAGE — viewinvoice.tpl: force LIGHT tokens
   Scopes the light palette to the invoice page only,
   so the global dark theme recolors to a clean white
   printable document without per-element overrides.
   ============================================ */
.invoice-container {
  --deep:#166a99; --mid:#4ba2c9; --bright:#60d3fc; --accent:#1f7fb0;
  --canvas:#ffffff; --card:#ffffff; --inset:#f2f7fb;
  --line:#e1eaf2; --line-2:#d2deea;
  --ink-900:#0d2436; --ink-700:#33485d; --ink-500:#61788c; --ink-300:#93a7b9;
  --ok:#18935f; --warn:#b4791b; --danger:#cc4356;
  --shadow-card:0 1px 2px rgba(13,36,54,.04), 0 10px 30px -22px rgba(13,36,54,.22);

  background:#ffffff !important;
  color:var(--ink-700) !important;
  max-width:900px;
  margin:32px auto;
  padding:40px 48px;
  border-radius:12px;
  box-shadow:0 4px 24px rgba(22,106,153,.10);
}

/* Text that WHMCS/your theme left uncolored on the invoice */
.invoice-container,
.invoice-container address,
.invoice-container .small-text,
.invoice-container .invoice-col { color:var(--ink-700) !important; }
.invoice-container strong { color:var(--deep) !important; }
.invoice-container h2, .invoice-container h3 { color:var(--deep) !important; }
.invoice-header h3 { color:var(--mid) !important; font-size:20px; font-weight:700; }

/* Logo size */
.invoice-header img { max-width:180px; height:auto; }

/* Card headers → brand gradient bar (matches the email header) */
.invoice-container .card-header,
.invoice-container .card > .card-title,
.invoice-container .card-title.bg-info {
  background:linear-gradient(90deg,#166a99 0%,#4ba2c9 100%) !important;
  color:#ffffff !important;
  border-bottom:0 !important;
}
.invoice-container .card-header h3,
.invoice-container .card-title { color:#ffffff !important; }

/* WHMCS contextual bg classes on this page */
.invoice-container .bg-default { background:#ffffff !important; }
.invoice-container .bg-info { background:linear-gradient(90deg,#166a99 0%,#4ba2c9 100%) !important; color:#fff !important; }

/* Table header + total rows */
.invoice-container .table thead td { background:#f4f7fa !important; color:var(--deep) !important; }
.invoice-container .total-row { background:#f4f7fa !important; color:var(--deep) !important; font-weight:700; }

/* hr → brand accent */
.invoice-container hr { border-top:2px solid var(--bright) !important; opacity:1; margin:24px 0; }

/* Status badges (pill) */
.invoice-status span { display:inline-block; padding:4px 16px; border-radius:20px; font-weight:700; letter-spacing:.5px; }
.invoice-status .paid { background:#e3f7ee !important; color:#18935f !important; }
.invoice-status .unpaid { background:#fdecec !important; color:#cc4356 !important; }
.invoice-status .refunded,
.invoice-status .cancelled,
.invoice-status .collections { background:#f4f7fa !important; color:#61788c !important; }
.invoice-status .draft { background:#eef3f8 !important; color:#4ba2c9 !important; }

/* Buttons on the invoice: solid brand (your global .btn-default is dark inset) */
.invoice-container .btn-default {
  background:#166a99 !important; border:1px solid #166a99 !important; color:#fff !important;
}
.invoice-container .btn-default:hover { background:#4ba2c9 !important; border-color:#4ba2c9 !important; }

/* Print: ink-friendly, keep brand bars */
@media print {
  body { background:#fff !important; }
  .invoice-container { box-shadow:none; margin:0; padding:0; max-width:100%; }
  .invoice-container .card-header,
  .invoice-container .card-title,
  .invoice-container .bg-info {
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}
/* --- viewinvoice fixes: logo size + card-header strong --- */

/* Logo: force smaller regardless of wrapper/attributes */
.invoice-header img,
.invoice-container .invoice-header img,
.invoice-col img {
  max-width: 130px !important;
  width: 130px !important;
  height: auto !important;
}

/* Card-header title text (incl. the <strong>) must be white on the gradient.
   Overrides the earlier .invoice-container strong{color:deep} rule. */
.invoice-container .card-header h3,
.invoice-container .card-header h3 strong,
.invoice-container .card-header strong,
.invoice-container .card-title strong {
  color: #ffffff !important;
}
/* --- viewinvoice: smaller logo + wordmark beside it --- */
.invoice-header img,
.invoice-container .invoice-header img,
.invoice-col img {
  max-width: 95px !important;
  width: 95px !important;
  height: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Wordmark injected next to the logo */
.invoice-header .invoice-col:first-child p:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.invoice-header .invoice-col:first-child p:first-child::after {
  content: "Vantage Servers";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #166a99;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* --- viewinvoice: even rounded corners on both card headers --- */

/* Both cards: consistent radius + clip children to it */
.invoice-container .card {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Both header bars: round top corners to match the card */
.invoice-container .card-header,
.invoice-container .card > .card-title,
.invoice-container .card-title.bg-info {
  border-radius: 10px 10px 0 0 !important;
}