/* ==========================================================================
   The Mediasite — store.themediasite.co.uk brand override
   Ports the mediasite-enterprise WordPress theme's palette/typography onto
   the stock WHMCS "twenty-one" client area so the two sites read as one
   continuous journey. Loaded last, after all core WHMCS CSS.
   ========================================================================== */

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

:root {
  --tms-bg: #0c0e13;
  --tms-bg-alt: #14171e;
  --tms-panel: #1a1d24;
  --tms-ink: #eceef2;
  --tms-ink-muted: #929aa6;
  --tms-line: rgba(255,255,255,0.10);
  --tms-red: #e5453f;
  --tms-red-ink: #ff685f;
  --tms-orange: #eb9b52;
  --tms-teal: #3fb8d4;
  --tms-header-bg: rgba(12,14,19,0.9);
  --tms-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html, body {
  background: var(--tms-bg) !important;
  color: var(--tms-ink) !important;
  font-family: var(--tms-font) !important;
}

body, .form-control, .btn, .card, .panel, table {
  font-family: var(--tms-font) !important;
}

a { color: var(--tms-teal); }
a:hover { color: var(--tms-red-ink); }

h1, h2, h3, h4, h5, h6 { color: var(--tms-ink); font-weight: 700; }

/* Header / navbar */
.header {
  background: var(--tms-header-bg) !important;
  border-bottom: 1px solid var(--tms-line);
  backdrop-filter: saturate(180%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.header .navbar,
.header .topbar {
  background: transparent !important;
}
.header .navbar-brand.tms-logo img.logo-img {
  height: 46px;
  width: auto;
  filter: invert(1) brightness(1.6);
}
@media (max-width: 860px) {
  .header .navbar-brand.tms-logo img.logo-img { height: 36px; }
}
.header #nav > li > a,
.header .navbar-nav .nav-link,
.header .btn.nav-link {
  color: var(--tms-ink-muted) !important;
  font-weight: 500;
}
.header #nav > li > a:hover,
.header .navbar-nav .nav-link:hover {
  color: var(--tms-ink) !important;
}
.header .search .form-control,
.header .form-control {
  background: var(--tms-panel);
  border: 1px solid var(--tms-line);
  color: var(--tms-ink);
}
.header .btn-active-client,
.header .input-group-text {
  background: var(--tms-panel) !important;
  color: var(--tms-ink) !important;
  border-color: var(--tms-line) !important;
}
.master-breadcrumb {
  background: var(--tms-bg-alt) !important;
  border-bottom: 1px solid var(--tms-line);
}
.master-breadcrumb a { color: var(--tms-ink-muted); }
.master-breadcrumb .breadcrumb { background: transparent; }

/* Buttons */
.btn-primary,
.btn-danger {
  background-color: var(--tms-red) !important;
  border-color: var(--tms-red) !important;
  color: #fff !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-danger:hover {
  background-color: var(--tms-red-ink) !important;
  border-color: var(--tms-red-ink) !important;
}
.btn-default,
.btn-secondary {
  background-color: var(--tms-panel) !important;
  border-color: var(--tms-line) !important;
  color: var(--tms-ink) !important;
}
.btn-default:hover,
.btn-secondary:hover {
  background-color: var(--tms-bg-alt) !important;
}
.btn-success { background-color: var(--tms-teal) !important; border-color: var(--tms-teal) !important; }
.btn-info { background-color: var(--tms-orange) !important; border-color: var(--tms-orange) !important; color: #1a1200 !important; }

/* Cards / panels / list groups */
.card,
.panel,
.list-group-item,
.summary-box,
.summary-widget,
.product-listing,
.pricing-table,
.well {
  background-color: var(--tms-panel) !important;
  border-color: var(--tms-line) !important;
  color: var(--tms-ink) !important;
}
.card-header,
.panel-heading {
  background-color: var(--tms-bg-alt) !important;
  border-color: var(--tms-line) !important;
  color: var(--tms-ink) !important;
}
.text-muted,
.text-secondary,
.card-footer {
  color: var(--tms-ink-muted) !important;
}

/* Tables */
.table {
  color: var(--tms-ink);
}
.table th,
.table td {
  border-color: var(--tms-line) !important;
}
.table thead th {
  background-color: var(--tms-bg-alt) !important;
  color: var(--tms-ink) !important;
  border-bottom: 1px solid var(--tms-line) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.03);
}
.table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
  color: var(--tms-ink);
}

/* Forms */
.form-control,
select.form-control,
textarea.form-control {
  background-color: var(--tms-panel) !important;
  border: 1px solid var(--tms-line) !important;
  color: var(--tms-ink) !important;
}
.form-control:focus {
  border-color: var(--tms-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(229,69,63,0.25) !important;
  background-color: var(--tms-panel) !important;
  color: var(--tms-ink) !important;
}
.form-control::placeholder { color: var(--tms-ink-muted); }
label { color: var(--tms-ink); }
.input-group-text {
  background-color: var(--tms-bg-alt) !important;
  border-color: var(--tms-line) !important;
  color: var(--tms-ink-muted) !important;
}

/* Alerts */
.alert-success { background-color: rgba(63,184,212,0.12) !important; border-color: var(--tms-teal) !important; color: var(--tms-ink) !important; }
.alert-danger { background-color: rgba(229,69,63,0.12) !important; border-color: var(--tms-red) !important; color: var(--tms-ink) !important; }
.alert-warning { background-color: rgba(235,155,82,0.12) !important; border-color: var(--tms-orange) !important; color: var(--tms-ink) !important; }
.alert-info { background-color: rgba(63,184,212,0.12) !important; border-color: var(--tms-teal) !important; color: var(--tms-ink) !important; }

/* Modals */
.modal-content {
  background-color: var(--tms-panel) !important;
  color: var(--tms-ink) !important;
  border-color: var(--tms-line) !important;
}
.modal-header,
.modal-footer {
  border-color: var(--tms-line) !important;
}

/* Sidebar / account menu */
.sidebar,
.sidebar .list-group-item {
  background-color: var(--tms-panel) !important;
  color: var(--tms-ink) !important;
  border-color: var(--tms-line) !important;
}
.sidebar .list-group-item.active {
  background-color: var(--tms-red) !important;
  border-color: var(--tms-red) !important;
  color: #fff !important;
}

/* Footer */
.footer {
  background-color: var(--tms-bg-alt) !important;
  border-top: 1px solid var(--tms-line);
  color: var(--tms-ink-muted) !important;
}
.footer .nav-link,
.footer a { color: var(--tms-ink-muted) !important; }
.footer .nav-link:hover,
.footer a:hover { color: var(--tms-ink) !important; }
.footer .copyright { color: var(--tms-ink-muted) !important; }

/* Badges */
.badge-info { background-color: var(--tms-teal) !important; }
.badge-danger { background-color: var(--tms-red) !important; }
.badge-warning { background-color: var(--tms-orange) !important; color: #1a1200 !important; }
.badge-success { background-color: var(--tms-teal) !important; }

/* Pagination */
.page-link {
  background-color: var(--tms-panel) !important;
  border-color: var(--tms-line) !important;
  color: var(--tms-ink) !important;
}
.page-item.active .page-link {
  background-color: var(--tms-red) !important;
  border-color: var(--tms-red) !important;
}