/* WPlex WHMCS theme: styles layered on top of twenty-one's theme.min.css */

:root {
  --navy: #011A3C;
  --accent: #0160FF;
  --accent-hover: #0047C2;
  --ground: #F6F6F2;
  --surface: #FFFFFF;
  --text: #011A3C;
  --text-body: #3A403C;
  --text-muted: #4F5652;
  --line: #D5D8D2;
  --line-strong: #A9AEA7;
  --on-dark: #F6F6F2;
  --on-dark-body: #D3D6D0;
  --on-dark-muted: #B9BEB8;
  --placeholder: #E6E8E3;
  --radius: 8px;
  --radius-sm: 6px;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Bootstrap's own custom properties */
  --primary: #0160FF;
  --font-family-sans-serif: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Base */
body {
  font-family: var(--sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
.primary-bg-color { background-color: var(--ground); }

/* Keep the footer at the bottom of short pages (login, errors) */
body.primary-bg-color { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
body.primary-bg-color > section#main-body { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
h1, .h1 { letter-spacing: -0.025em; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

code, kbd, pre, samp { font-family: var(--mono); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.text-primary { color: var(--accent) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--accent-hover) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Buttons */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn-lg, .btn-group-lg > .btn { border-radius: var(--radius-sm); }
.btn-sm, .btn-group-sm > .btn { border-radius: 4px; }

.btn-primary,
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover,
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(1, 96, 255, 0.35); }

.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { background-color: var(--accent); border-color: var(--accent); color: #fff; }

.btn-default { background-color: var(--surface); border-color: var(--line-strong); color: var(--navy); }
.btn-default:hover,
.btn-default:focus, .btn-default.focus,
.btn-default:active, .btn-default.active { background-color: var(--ground); border-color: var(--navy); color: var(--navy); }

.btn-link { color: var(--accent); }
.btn-link:hover { color: var(--accent-hover); }

/* Badges and labels */
.badge { font-weight: 500; }
.badge-primary, .badge-info { background-color: var(--accent); color: #fff; }

/* Forms */
.form-control,
.custom-select {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(1, 96, 255, 0.2);
}
.input-group-text { background-color: var(--ground); border-color: var(--line-strong); color: var(--text-muted); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent); border-color: var(--accent); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(1, 96, 255, 0.2); }
label, .col-form-label { color: var(--text); font-weight: 500; }

/* Cards (also used for twenty-one's panels) */
.card,
.mc-promo-manage,
.mc-promo-login {
  border-color: var(--line);
  border-radius: var(--radius);
}
.card-header { background-color: var(--surface); border-bottom-color: var(--line); }
.card-header:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-footer { background-color: var(--ground); border-top-color: var(--line); }
.card-footer:last-child { border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.card-title { color: var(--text); font-weight: 600; }

/* Alerts */
.alert { border-radius: var(--radius); }
.alert-info { background-color: #E6EFFF; border-color: #B3CEFF; color: var(--navy); }

/* Tables */
.table { color: var(--text-body); }
.table thead th {
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.table td, .table th { border-top-color: var(--line); }
.table-hover tbody tr:hover { background-color: var(--ground); }

/* Pagination */
.page-link { color: var(--accent); border-color: var(--line); }
.page-link:hover { color: var(--accent-hover); background-color: var(--ground); border-color: var(--line); }
.page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }

/* Nav, tabs, list groups, dropdowns */
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { color: var(--navy); border-color: var(--line) var(--line) var(--surface); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--accent); }

.list-group-item { border-color: var(--line); }
.list-group-item.active { background-color: var(--accent); border-color: var(--accent); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ground); }

.dropdown-menu { border-color: var(--line); border-radius: var(--radius-sm); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--accent); color: #fff; }

.progress { border-radius: 999px; background-color: var(--placeholder); }
.progress-bar { background-color: var(--accent); }

.modal-content { border-radius: var(--radius); border-color: var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }

/* Header */
header.header {
  background-color: var(--ground);
  border-bottom: 1px solid var(--line);
}
header.header .topbar { background-color: var(--navy); color: var(--on-dark-muted); }
header.header .topbar .btn,
header.header .topbar .active-client .btn { color: var(--on-dark-body); }
header.header .topbar .btn:hover,
header.header .topbar .active-client .btn:hover { color: #fff; }
header.header .topbar .active-client .input-group-text { color: var(--on-dark-muted); }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--on-dark-muted); }

header.header .navbar { padding-top: 16px; padding-bottom: 16px; }
header.header .logo-img { height: 40px; max-height: 40px; width: auto; }
header.header .navbar a { color: var(--navy); }
header.header .navbar a:hover { color: var(--accent); }
header.header .navbar-nav a { font-size: 15px; font-weight: 500; }
header.header .dropdown-item.active,
header.header .dropdown-item:active { background-color: var(--accent); color: #fff; }

header.header .toolbar .nav-link {
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-sm);
  color: var(--navy);
}
header.header .toolbar .nav-link:hover { background-color: var(--navy); color: #fff; }
header.header .toolbar .nav-link .badge { background-color: var(--accent); opacity: 1; }

header.header .search {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}
header.header .search:focus-within { border-color: var(--accent); }
header.header .search .btn { color: var(--text-muted); background-color: transparent; }

/* Below 1200px the main nav is collapsed behind the menu button, so the wrapper is empty */
header.header .main-navbar-wrapper { padding-top: 0; padding-bottom: 0; }
@media (min-width: 1200px) {
  header.header .main-navbar-wrapper { border-top: 1px solid var(--line); }
  header.header .main-navbar-wrapper .navbar-collapse { padding-left: 0; padding-right: 0; }
  header.header .main-navbar-wrapper .navbar-nav .nav-link { padding-left: 0; padding-right: 0; margin-right: 24px; }
}

/* Breadcrumb */
.master-breadcrumb { background-color: var(--ground); border-bottom: 1px solid var(--line); }
.master-breadcrumb .breadcrumb {
  background-color: transparent;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.master-breadcrumb .breadcrumb-item.active { color: var(--text-muted); }
.master-breadcrumb:not(:has(.breadcrumb-item)) { display: none; }

/* Main body */
section#main-body { padding-top: 40px; padding-bottom: 40px; }

/* Sidebar */
.sidebar .list-group-item { border-color: var(--line); color: var(--text-body); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus { background-color: var(--navy); border-color: var(--navy); color: #fff; }
.sidebar .list-group-item .badge { background-color: var(--ground); color: var(--text-muted); }
.sidebar .list-group-item > i.far.fa-circle { color: var(--line-strong); }

/* Homepage domain search */
.home-domain-search { border-bottom: 1px solid var(--line); }
.home-domain-search h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.025em; }
.home-domain-search .tld-logos { color: var(--text-muted); font-family: var(--mono); font-size: 1.1em; }
.home-domain-search .input-group-wrapper { border-color: var(--line-strong); border-radius: var(--radius); }
.home-domain-search .input-group-wrapper:focus-within { border-color: var(--accent); }
.home-domain-search .input-group-wrapper .btn { border-radius: var(--radius-sm) !important; }
/* Transfer is a secondary action here, not a success state */
.home-domain-search .btn-success { background-color: var(--navy); border-color: var(--navy); color: #fff; }
.home-domain-search .btn-success:hover,
.home-domain-search .btn-success:focus,
.home-domain-search .btn-success:not(:disabled):not(.disabled):active { background-color: #0B2C5C; border-color: #0B2C5C; color: #fff; }

/* Homepage action icons */
.action-icon-btns a { border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); font-weight: 500; }
.action-icon-btns a .ico-container i { color: var(--accent); }
.action-icon-btns a:hover { border-color: var(--navy); color: var(--navy); }

/* Client area home: tiles and cards */
.tiles { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tiles .tile { background-color: var(--surface); border-right-color: var(--line); }
.tiles .tile:hover { background-color: var(--ground); }
.tiles .tile .stat { color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.tiles .tile .title {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tiles .tile i { color: var(--placeholder); }
.tiles .tile:hover i { color: var(--line-strong); }

.client-home-cards .card-header { background-color: var(--surface); }
.client-home-cards .card-title { color: var(--text); }
.client-home-cards .list-group .list-group-item { border-color: var(--line); }

/* Footer */
footer.footer {
  background-color: var(--navy);
  color: var(--on-dark-body);
  font-size: 14px;
}
footer.footer .nav-link { color: var(--on-dark); }
footer.footer .nav-link:hover { color: #fff; text-decoration: underline; }
footer.footer .btn { background-color: rgba(255, 255, 255, 0.1); color: #fff; border-radius: var(--radius-sm); }
footer.footer .btn:hover { background-color: rgba(255, 255, 255, 0.2); }
footer.footer .copyright { color: var(--on-dark-muted); }
@media (min-width: 992px) {
  footer.footer .nav-link { padding-left: 0; padding-right: 24px; }
  footer.footer .copyright { text-align: left; }
}

/* Invoices and quotes */
.invoice-container {
  border-color: var(--line);
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  section#main-body { padding-top: 24px; padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .tiles .tile, .tiles .tile i, .action-icon-btns a, .action-icon-btns a .ico-container { transition: none; }
}