/*!
 * Everon brand override for the stock WHMCS "Twenty-One" theme.
 *
 * The Hostina skin (html/css/globals.css, html/css/dashb.css) already
 * carries Everon's real palette (--color-primary:#000000,
 * --color-secondary:#28a745 - see everon.one's own globals.css, same
 * values) and covers most of what a client actually sees day to day.
 * This file exists only for the parts Hostina's skin doesn't reach:
 * WHMCS's own stock Bootstrap components (theme.min.css), which still
 * ship hardcoded to WHMCS's default blue (#336699) wherever a .tpl uses
 * a plain Bootstrap class rather than a Hostina-custom one - ticket
 * priority badges, pagination, checkout terms checkbox, form-control
 * focus rings, plain buttons/alerts, etc.
 *
 * Loaded via WHMCS's own {assetExists file="custom.css"} hook in
 * includes/head.tpl, after all.min.css/theme.min.css and before the
 * Hostina vendor/global/dashboard stylesheets - so this is purely
 * additive, touches no vendor file, and can be deleted with zero
 * impact if it ever needs rolling back.
 *
 * Brand primary is pure black, which has no natural lighter/darker
 * Bootstrap-style tint pair the way a hue-based color would - hover/
 * active/focus states below use a dark neutral gray (#262626) instead
 * of trying to darken black further, so interactive states stay
 * visually distinct rather than reading as "nothing happened".
 */

a {
  color: #000000;
}
a:hover {
  color: #262626;
}

.btn-primary {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-primary:hover {
  color: #fff;
  background-color: #262626;
  border-color: #1a1a1a;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #262626;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #000000;
  border-color: #000000;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #1a1a1a;
  border-color: #000000;
}

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

.badge-primary {
  background-color: #000000;
}

.alert-primary {
  color: #1a1a1a;
  background-color: #ebebebb2; /* var(--color-light-gray) from the Hostina skin */
  border-color: #d9d9d9;
}
.alert-primary hr {
  border-top-color: #c9c9c9;
}
.alert-primary .alert-link {
  color: #000000;
}

.bg-primary {
  background-color: #000000 !important;
}
.border-primary {
  border-color: #000000 !important;
}
.text-primary {
  color: #000000 !important;
}

.page-link {
  color: #000000;
}
.page-link:hover {
  color: #000000;
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}
.page-item.active .page-link {
  background-color: #000000;
  border-color: #000000;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #000000;
}

.list-group-item.active {
  background-color: #000000;
  border-color: #000000;
}

.progress-bar {
  background-color: #000000;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #000000;
  background-color: #000000;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #808080;
}
.custom-range::-webkit-slider-thumb {
  background-color: #000000;
}
.custom-range::-moz-range-thumb {
  background-color: #000000;
}
.custom-range::-ms-thumb {
  background-color: #000000;
}

.form-control:focus {
  border-color: #808080;
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
  color: #000000;
}

/* ------------------------------------------------------------------ *
 * Restore meaning to status colours
 *
 * The theme's "monochrome cleanup" flattens every semantic state to one
 * grey - success, warning, danger, and all six invoice states. The vendor's
 * own screenshot shows the result: "You have an overdue invoice." rendered
 * in the same neutral tone as an ordinary notice.
 *
 * In a billing panel that is not a style choice, it is a loss of
 * information. A customer scanning their invoice list cannot tell paid from
 * overdue, and the one message that needs to interrupt them does not.
 *
 * This restores colour ONLY where colour carries meaning. The design stays
 * monochrome everywhere else - no buttons, headings, links or surfaces are
 * touched. The values are the theme's own originals, taken from the rules
 * the cleanup overrode.
 * ------------------------------------------------------------------ */

/* Amber for "needs attention", red for "something is wrong". */
body.whmcs-dashboard-body[data-theme="hostina"] .status-pill.warning,
body.whmcs-dashboard-body[data-theme="hostina"] .alert-warning,
body.whmcs-dashboard-body[data-theme="hostina"] .dashboard-overview-alert--warning {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.38) !important;
}

body.whmcs-dashboard-body[data-theme="hostina"] .status-pill.danger,
body.whmcs-dashboard-body[data-theme="hostina"] .alert-danger,
body.whmcs-dashboard-body[data-theme="hostina"] .alert-error,
body.whmcs-dashboard-body[data-theme="hostina"] .dashboard-overview-alert--danger {
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.38) !important;
}

/* Green only for success. Kept muted so it reads as confirmation rather
   than decoration, and so the page does not turn into a traffic light. */
body.whmcs-dashboard-body[data-theme="hostina"] .status-pill.success,
body.whmcs-dashboard-body[data-theme="hostina"] .alert-success {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.34) !important;
}

/* Invoice status cards. Unpaid and overdue are the two a customer must be
   able to spot at a glance; the rest stay neutral so the two that matter
   are the ones that stand out. */
body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--overdue .dashboard-invoice-status-card__header,
body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--collections .dashboard-invoice-status-card__header {
  background: rgba(239, 68, 68, 0.10) !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.34) !important;
}

body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--overdue .dashboard-invoice-status-card__icon,
body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--collections .dashboard-invoice-status-card__icon {
  color: #b91c1c !important;
}

body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--unpaid .dashboard-invoice-status-card__header {
  background: rgba(245, 158, 11, 0.10) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.34) !important;
}

body.invoice-dashboard-body[data-theme="hostina"] .dashboard-invoice-status-card--unpaid .dashboard-invoice-status-card__icon {
  color: #b45309 !important;
}

/* Text contrast is deliberately darker than the theme's original #d97706 /
   #ef4444: those were chosen for a dark surface, and these sit on a near
   white card. Same hues, enough contrast to read. */

/* ------------------------------------------------------------------ *
 * Inline icon size after the Phosphor conversion
 *
 * iconify-icon renders at 1em, and a Phosphor glyph carries more internal
 * padding than the Font Awesome one it replaced - so the drawn shape fills
 * less of that em box. Swapping 692 icons therefore made every icon that
 * sits inline with text optically smaller, even though nothing about the
 * CSS changed.
 *
 * The topbar controls escaped it because their container is a fixed 2.5rem
 * with the icon centred in it - there was room, so nobody noticed. That is
 * why those three looked right while the search magnifier, the button
 * arrows, the card markers and the footnote shields all looked shrunken.
 *
 * One rule, deliberately low specificity: any icon that already has an
 * explicit size from a more specific selector - the sidebar nav, the table
 * sort arrows, anything given width/height inline - keeps it and is not
 * touched. This only reaches the icons that were relying on 1em, which are
 * exactly the ones that came out too small.
 * ------------------------------------------------------------------ */
body.whmcs-dashboard-body iconify-icon {
  font-size: 1.2em;
  /* Nudges the glyph onto the text baseline in inline contexts. Flex
     containers ignore vertical-align, so centred layouts are unaffected. */
  vertical-align: -0.14em;
}

/* The topbar controls were already the right size. Left at 1em so this
   rule cannot make the one group that was correct too large. */
body.whmcs-dashboard-body .hostique-order-control iconify-icon,
body.whmcs-dashboard-body .hostique-order-topbar__back iconify-icon {
  font-size: 1em;
  vertical-align: middle;
}