/* =========================================================================
   Mazehost theme for Hostbill — custom layer (loaded after app.min.css)
   Target: Bootstrap 4.4.1 (confirmed in Hostbill 2019 theme)
   Aesthetic: paper + ink + burnt-orange accent, editorial serif + mono caps
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------- Tokens -- */
:root {
  --mh-paper:       #F4EFE4;
  --mh-paper-deep:  #ECE5D3;
  --mh-ink:         #111111;
  --mh-ink-soft:    #2A2623;
  --mh-muted:       #7A716A;
  --mh-rule:        #DCD5C4;
  --mh-accent:      #FF4A1C;
  --mh-accent-deep: #C6350E;

  --mh-font-display: 'Fraunces', Georgia, serif;
  --mh-font-sans:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --mh-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --mh-tracking-mono: 0.14em;
  --mh-tracking-display: -0.04em;
}

/* ----------------------------------------------------------------- Base -- */
html, body {
  background-color: var(--mh-paper) !important;
  color: var(--mh-ink) !important;
  font-family: var(--mh-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(255, 74, 28, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(17, 17, 17, 0.04), transparent 60%) !important;
  background-attachment: fixed;
}

/* Paper grain overlay — sits behind all content via negative z-index
   Do NOT add position/z-index rules to Hostbill structural containers —
   that breaks the 2019 theme's sidebar + navbar layout */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--mh-ink); color: var(--mh-paper); }

/* ----------------------------------- Preserve icon fonts & ligatures -- */
/* Material Icons uses case-sensitive text ligatures (e.g. "shopping_cart"
   must stay lowercase to render as an icon, not as the literal word).
   Exclude icon elements from our uppercase/mono/spacing rules. */
.material-icons, i.material-icons,
.material-icons-outlined, .material-icons-round,
.material-icons-sharp, .material-icons-two-tone,
i[class*="material-icons"],
.fa, .fas, .far, .fal, .fab, .fad, .fass, .fasr,
[class^="fa-"], [class*=" fa-"],
[class^="icon-"]:not(.icon-link), [class*=" icon-"]:not(.icon-link) {
  font-family: 'Material Icons', 'FontAwesome', 'Font Awesome 5 Free',
               'Font Awesome 6 Free', inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  font-style: normal !important;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Material Icons specifically always uses the Material Icons font */
.material-icons, i.material-icons {
  font-family: 'Material Icons' !important;
}

/* ----------------------------------------------------------- Typography -- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .section-title {
  font-family: var(--mh-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
  color: var(--mh-ink);
  line-height: 1.1;
}

h1, .h1 { font-size: 2.75rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }

a {
  color: var(--mh-ink);
  text-decoration: none !important;
  transition: color 0.18s ease;
}
a:hover, a:focus, a:active {
  color: var(--mh-accent);
  text-decoration: none !important;
  outline: none;
}
/* Kill Bootstrap/HostBill leftover primary-blue */
.text-primary, a.text-primary, .btn-link, .page-link {
  color: var(--mh-ink) !important;
}
.text-primary:hover, a.text-primary:hover, .btn-link:hover, .page-link:hover {
  color: var(--mh-accent) !important;
}
/* HostBill's own ".ptabs" tab pattern (in-page tabs on some pages) */
.ptabs, .ptabs ul, .ptabs .nav {
  border-bottom: 1px solid var(--mh-rule) !important;
  background: transparent !important;
}
.ptabs a, .ptabs .nav-link {
  color: var(--mh-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.9rem 1.25rem !important;
}
.ptabs a:hover, .ptabs .nav-link:hover { color: var(--mh-ink) !important; }
.ptabs a.active, .ptabs .nav-link.active,
.ptabs li.active a {
  color: var(--mh-ink) !important;
  border-bottom-color: var(--mh-accent) !important;
  background: transparent !important;
}

p { color: var(--mh-ink-soft); }
small, .small, .text-muted { color: var(--mh-muted) !important; }

hr {
  border: none;
  border-top: 1px solid var(--mh-rule);
  margin: 2rem 0;
}

/* Mono caps label — editorial signature */
.text-caps, .text-mono, .label-caps,
.form-group > label, .form-label, .control-label,
.card-header .card-title, .panel-heading, .section-subtitle,
.nav-tabs > li > a, .nav-pills > li > a {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-mono);
  font-weight: 500;
  color: var(--mh-muted);
}

/* --------------------------------------------------------------- Buttons -- */
.btn, button.btn, input[type="submit"].btn, a.btn {
  border-radius: 0 !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-mono);
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  line-height: 1.2;
  box-shadow: none !important;
}
.btn:focus, .btn:active { box-shadow: none !important; outline: none; }

.btn-primary, .btn-success, .btn-info,
button[type="submit"]:not(.btn-default):not(.btn-secondary):not(.btn-danger) {
  background: var(--mh-ink) !important;
  color: var(--mh-paper) !important;
  border-color: var(--mh-ink) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
button[type="submit"]:not(.btn-default):not(.btn-secondary):not(.btn-danger):hover {
  background: var(--mh-accent) !important;
  color: var(--mh-ink) !important;
  border-color: var(--mh-accent) !important;
}

.btn-default, .btn-secondary, .btn-outline,
.btn-outline-primary, .btn-outline-secondary {
  background: transparent !important;
  color: var(--mh-ink) !important;
  border: 1px solid var(--mh-ink) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  background: var(--mh-ink) !important;
  color: var(--mh-paper) !important;
}

.btn-danger {
  background: var(--mh-accent-deep) !important;
  color: var(--mh-paper) !important;
  border-color: var(--mh-accent-deep) !important;
}
.btn-danger:hover { background: var(--mh-ink) !important; border-color: var(--mh-ink) !important; }

.btn-link {
  color: var(--mh-ink) !important;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--mh-font-sans) !important;
  font-size: inherit;
}
.btn-link:hover { color: var(--mh-accent) !important; }

.btn-lg { padding: 1.1rem 1.8rem; font-size: 0.75rem; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.625rem; }

/* ---------------------------------------------------------------- Forms -- */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="url"], input[type="search"],
select, textarea {
  border-radius: 0 !important;
  background: var(--mh-paper) !important;
  border: 1px solid var(--mh-rule) !important;
  color: var(--mh-ink) !important;
  font-family: var(--mh-font-sans) !important;
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  box-shadow: none !important;
  transition: border-color 0.18s ease;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--mh-ink) !important;
  box-shadow: none !important;
  outline: none;
}
.form-control::placeholder, input::placeholder { color: var(--mh-muted); opacity: 1; }

.input-group-addon, .input-group-text, .input-group-prepend .input-group-text,
.input-group-append .input-group-text {
  background: var(--mh-paper-deep) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  font-family: var(--mh-font-mono);
  font-size: 0.75rem;
  color: var(--mh-muted);
}

.checkbox label, .radio label { color: var(--mh-ink); font-family: var(--mh-font-sans); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--mh-accent); }

.has-error .form-control, .is-invalid { border-color: var(--mh-accent-deep) !important; }
.help-block, .form-text { color: var(--mh-muted); font-size: 0.8125rem; }

/* ---------------------------------------------------- Cards & Panels -- */
.card, .panel, .panel-default, .box, .widget, .tile, .content-box {
  background: var(--mh-paper) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card-header, .panel-heading, .box-header, .widget-header {
  background: var(--mh-paper-deep) !important;
  border-bottom: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-mono);
  color: var(--mh-muted) !important;
  padding: 0.9rem 1.25rem;
}

.card-body, .panel-body, .box-body { padding: 1.5rem; }

.card-footer, .panel-footer, .box-footer {
  background: transparent !important;
  border-top: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem;
}

/* ---------------------------------------------------------- Navigation -- */
/* Whole top bar — uniform paper, hairline bottom rule */
.navbar.fixed-top,
.navbar, .header-top, #header, .menu-top,
nav.navbar-default, nav.navbar-inverse, nav.navbar-expand-lg {
  background: var(--mh-paper) !important;
  border-bottom: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Kill the dark left block the 2019 theme uses behind the logo */
.navbar .navbar-left {
  background: var(--mh-paper) !important;
  border-right: 1px solid var(--mh-rule) !important;
  color: var(--mh-ink) !important;
}
.navbar .navbar-body {
  background: var(--mh-paper) !important;
}

/* Brand — inline mark + wordmark */
.navbar-brand.mh-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  color: var(--mh-ink) !important;
  padding: 0.5rem 1rem !important;
}
.navbar-brand.mh-brand:hover { color: var(--mh-ink) !important; }
.mh-mark { color: var(--mh-ink); flex-shrink: 0; }
.mh-wordmark {
  font-family: var(--mh-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--mh-ink);
}

/* Fallback for legacy logo img (if any template still renders it) */
.navbar-left .navbar-brand img { filter: none !important; }

/* Navbar icon buttons — ink on paper */
.navbar .btn-left-navbar,
.navbar .btn-left-navbar i,
.navbar-body .nav-link,
.navbar-body .nav-link i {
  color: var(--mh-ink-soft) !important;
  background: transparent !important;
}
.navbar .btn-left-navbar:hover,
.navbar-body .nav-link:hover {
  color: var(--mh-accent) !important;
  background: transparent !important;
}

/* Navbar nav links — mono caps */
.navbar-nav > li > a, .navbar-body .nav-link {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1rem 0.85rem !important;
  border-radius: 0 !important;
}
/* Icons inside navbar must NOT inherit uppercase/mono */
.navbar-nav > li > a i.material-icons,
.navbar-body .nav-link i.material-icons,
.navbar-brand i.material-icons {
  font-size: 1.25rem;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* "Order" CTA in navbar — burnt-orange pill */
.navbar .navbar-order .btn,
.navbar .navbar-order-toggler,
.navbar .btn.btn-success {
  background: var(--mh-ink) !important;
  color: var(--mh-paper) !important;
  border: 1px solid var(--mh-ink) !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.55rem 1.1rem !important;
  box-shadow: none !important;
}
.navbar .navbar-order .btn:hover,
.navbar .navbar-order-toggler:hover,
.navbar .btn.btn-success:hover {
  background: var(--mh-accent) !important;
  border-color: var(--mh-accent) !important;
  color: #fff !important;
}

/* Navbar search — paper-deep block, matches sidebar; no border */
.navbar-search .input-group {
  background: var(--mh-paper-deep) !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 320px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.15s ease;
}
.navbar-search .input-group:focus-within {
  box-shadow: inset 0 -2px 0 0 var(--mh-accent);
}
.navbar-search .form-control,
.navbar-search input.prompt {
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-ink) !important;
  font-family: var(--mh-font-sans) !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0.5rem 0.6rem !important;
}
.navbar-search .form-control::placeholder {
  color: var(--mh-muted) !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.navbar-search .input-group-text,
.navbar-search-icon {
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-ink-soft) !important;
  padding-left: 0.75rem !important;
}
.navbar-search .input-group-text i.material-icons { font-size: 1.05rem; }

/* Sub-bar on mobile */
.navbar.sub-bar {
  background: var(--mh-paper) !important;
  border-bottom: 1px solid var(--mh-rule) !important;
}

/* ------------------------------------------------------------ Sidebar -- */
aside.sidebar,
.sidebar,
.sidebar-wrap,
.sidebar .collapse,
.sidebar .collapsing,
.sidebar .nav,
.sidebar .nav-item,
.sidebar .dropdown-menu,
.sidebar ul, .sidebar li,
#sidebar, .side-menu, .menu-left {
  background: var(--mh-paper-deep) !important;
  border-right-color: var(--mh-rule) !important;
  color: var(--mh-ink) !important;
  box-shadow: none !important;
}
aside.sidebar, .sidebar, .sidebar-wrap,
#sidebar, .side-menu, .menu-left {
  border-right: 1px solid var(--mh-rule) !important;
}
/* Expanded submenu — kill dark fill from HostBill base CSS */
.sidebar .sub-nav,
.sidebar .sidebar-services-menu,
.sidebar .nav-subnav,
.sidebar .collapse,
.sidebar .collapsing,
.sidebar .collapse.show,
.sidebar .nav .nav,
.sidebar ul ul {
  background: var(--mh-paper-deep) !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Single hairline above only the outer collapse wrapper */
.sidebar .collapse.show,
.sidebar .collapsing {
  border-top: 1px solid var(--mh-rule) !important;
}
.sidebar .sub-nav .nav-item,
.sidebar .sidebar-services-menu .nav-item,
.sidebar .nav-subnav .nav-item,
.sidebar .sub-nav .nav-link,
.sidebar .sidebar-services-menu .nav-link,
.sidebar .nav-subnav .nav-link,
.sidebar .nav-link-dropdown {
  background: transparent !important;
  box-shadow: none !important;
}
/* Parent dropdown toggle */
.sidebar .nav-link-dropdown {
  color: var(--mh-ink-soft) !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.sidebar .nav-link-dropdown[aria-expanded="true"] {
  color: var(--mh-ink) !important;
}
.sidebar .nav-link-dropdown[aria-expanded="true"] .icon-expand {
  transform: rotate(180deg);
  color: var(--mh-accent) !important;
}
.sidebar .nav-link-dropdown .icon-expand {
  transition: transform 0.18s ease, color 0.18s ease;
}
/* Nested items inside submenu */
.sidebar .sub-nav .nav-link,
.sidebar .sidebar-services-menu .nav-link,
.sidebar .nav-subnav .nav-link {
  padding: 0.55rem 1.1rem 0.55rem 2.2rem !important;
  font-size: 0.68rem !important;
  color: var(--mh-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 0 !important;
}
.sidebar .sub-nav .nav-link:hover,
.sidebar .sub-nav .nav-link.active,
.sidebar .sidebar-services-menu .nav-link:hover,
.sidebar .nav-subnav .nav-link:hover {
  color: var(--mh-accent) !important;
  background: transparent !important;
  border-left: 2px solid var(--mh-accent) !important;
  padding-left: calc(2.2rem - 2px) !important;
}
.sidebar .sub-nav .nav-link i.material-icons {
  font-size: 0.4rem !important;
  opacity: 0.5;
  color: var(--mh-muted) !important;
}
.sidebar .sub-nav .badge,
.sidebar .nav-subnav .badge {
  background: transparent !important;
  border: 0 !important;
  color: var(--mh-muted) !important;
  padding: 0 !important;
  font-size: 0.6rem !important;
}

.sidebar-heading {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mh-muted) !important;
  padding-top: 1.25rem !important;
  padding-bottom: 0.25rem !important;
  border-bottom: 0 !important;
}

.sidebar .nav-link,
.sidebar a {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mh-ink-soft) !important;
  padding: 0.7rem 1.1rem !important;
  border-radius: 0 !important;
  border-bottom: 1px solid transparent !important;
  display: flex;
  align-items: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sidebar .nav-link i.material-icons {
  color: var(--mh-ink-soft) !important;
  font-size: 1.1rem;
  opacity: 0.8;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.sidebar .nav-item.active > .nav-link {
  background: transparent !important;
  color: var(--mh-accent) !important;
  border-left: 2px solid var(--mh-accent) !important;
  padding-left: calc(1.1rem - 2px) !important;
}
.sidebar .nav-link:hover i.material-icons,
.sidebar .nav-link.active i.material-icons {
  color: var(--mh-accent) !important;
  opacity: 1;
}

/* Order dropdown panel — paper */
.navbar .dropdown-menu.dropdown-order-items,
.navbar .dropdown-menu-shoppingcart,
.navbar .dropdown-menu {
  background: var(--mh-paper) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 32px rgba(17,17,17,0.08) !important;
}
.navbar-dropdown-item {
  font-family: var(--mh-font-sans) !important;
  color: var(--mh-ink) !important;
  display: block;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--mh-rule);
}
.navbar-dropdown-item:hover { color: var(--mh-accent) !important; }

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.5rem 0;
  font-family: var(--mh-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-muted);
}
.breadcrumb a { color: var(--mh-muted); }
.breadcrumb a:hover { color: var(--mh-ink); }

/* --------------------------------------------------------------- Tables -- */
.table, table.table, .dataTable {
  background: transparent !important;
  color: var(--mh-ink);
  border-collapse: collapse;
}
.table thead th, table.table thead th {
  background: transparent !important;
  border-bottom: 1.5px solid var(--mh-ink) !important;
  border-top: none !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mh-ink) !important;
  font-weight: 500;
  padding: 0.9rem 0.75rem;
}
.table tbody td, table.table tbody td {
  border-top: 1px solid var(--mh-rule) !important;
  padding: 1.1rem 0.75rem;
  vertical-align: middle;
  font-size: 0.92rem;
  color: var(--mh-ink) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }
.table-hover > tbody > tr:hover > td { background: var(--mh-paper-deep) !important; }

/* Row-end arrow (services list, invoices, etc.) — accent on row hover */
.table tbody tr i.material-icons.arrow_forward,
.table tbody tr a[href] i.material-icons:last-child,
.table tbody tr .row-action-arrow {
  color: var(--mh-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}
.table tbody tr:hover i.material-icons,
.table tbody tr:hover .row-action-arrow,
.table-hover tbody tr:hover a i.material-icons {
  color: var(--mh-accent) !important;
}
.table tbody tr:hover a i.material-icons {
  transform: translateX(2px);
}

/* ------------------------------------------------- Alerts / callouts -- */
.alert {
  border-radius: 0 !important;
  border: 1px solid var(--mh-rule);
  background: var(--mh-paper-deep);
  color: var(--mh-ink-soft);
  padding: 1rem 1.25rem;
}
.alert-success {
  border-color: var(--mh-ink);
  background: var(--mh-paper);
}
.alert-success::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mh-accent);
  margin-right: 10px;
  vertical-align: middle;
}
.alert-danger, .alert-error {
  border-color: var(--mh-accent-deep);
  background: rgba(198, 53, 14, 0.06);
  color: var(--mh-accent-deep);
}
.alert-warning { border-color: var(--mh-accent); background: rgba(255, 74, 28, 0.06); }
.alert-info { border-color: var(--mh-rule); }

/* ------------------------------------------------ Badges / labels -- */
/* Default: quiet pill — paper-deep bg, ink text, status dot */
.badge, .label, .tag,
.table .badge, .table .label,
td .badge, td .label,
.status, .service-status, .status-label {
  border-radius: 0 !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.625rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  padding: 4px 10px !important;
  background: var(--mh-paper-deep) !important;
  color: var(--mh-ink) !important;
  border: 1px solid var(--mh-rule) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
/* Dot before status badges — muted by default */
.badge::before, .label::before,
.status::before, .service-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mh-muted);
}
.badge-success, .label-success,
.status-active, .status-1,
td.text-success, .text-success.badge, .text-success.label {
  background: var(--mh-paper-deep) !important;
  color: var(--mh-ink) !important;
  border: 1px solid var(--mh-rule) !important;
}
.badge-success::before, .label-success::before,
.status-active::before,
td.text-success::before { background: #2F7A3E !important; }

.badge-danger, .label-danger,
.status-suspended, .status-terminated,
td.text-danger {
  background: var(--mh-paper-deep) !important;
  color: var(--mh-accent-deep) !important;
  border: 1px solid var(--mh-rule) !important;
}
.badge-danger::before, .label-danger::before,
td.text-danger::before { background: var(--mh-accent-deep) !important; }

.badge-warning, .label-warning,
.status-pending,
td.text-warning {
  background: var(--mh-paper-deep) !important;
  color: var(--mh-accent) !important;
  border: 1px solid var(--mh-rule) !important;
}
.badge-warning::before, .label-warning::before,
td.text-warning::before { background: var(--mh-accent) !important; }

.badge-default, .label-default {
  background: var(--mh-paper-deep) !important;
  color: var(--mh-ink) !important;
  border: 1px solid var(--mh-rule) !important;
}
/* Plain text success/danger utility — when not a badge, just recolor */
.text-success:not(.badge):not(.label) { color: #2F7A3E !important; }
.text-danger:not(.badge):not(.label)  { color: var(--mh-accent-deep) !important; }
.text-warning:not(.badge):not(.label) { color: var(--mh-accent) !important; }

/* -------------------------------------------- Navbar balance + user chips -- */
.navbar .nav-link .navbar-menu-balance,
.navbar .nav-link .navbar-menu-user {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  margin-left: 0.6rem;
}
.navbar .navbar-menu-balance > span:first-child small,
.navbar .navbar-menu-user > span:first-child small {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.58rem !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mh-muted) !important;
  font-weight: 500;
}
.navbar .navbar-menu-balance > span:last-child small,
.navbar .navbar-menu-user > span:last-child small {
  font-family: var(--mh-font-sans) !important;
  font-size: 0.82rem !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mh-ink) !important;
  font-weight: 600;
}
/* Balance neg value stays subtle, not alarming red */
.navbar .navbar-menu-balance .text-danger { color: var(--mh-ink) !important; }
.navbar .navbar-menu-balance .text-gray,
.navbar .navbar-menu-user .text-gray {
  color: var(--mh-muted) !important;
}

/* Icons on balance + user chips — smaller, ink-muted */
.navbar .nav-link > i.material-icons:first-child {
  font-size: 1.15rem;
  color: var(--mh-ink-soft) !important;
  margin-right: 0.2rem;
}

/* Hairline separators between top-right chips */
.navbar-body .navbar-menu > .navbar-nav > .nav-item + .nav-item {
  border-left: 1px solid var(--mh-rule);
}
.navbar-body .navbar-menu > .navbar-nav > .nav-item .nav-link {
  padding: 0.85rem 1rem !important;
}

/* Cart-count badge inside navbar — small ink pill */
.navbar .badge-pill.badge-primary {
  background: var(--mh-accent) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 0.58rem !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
}
.navbar .badge-pill.badge-primary::before { display: none; }

/* -------------------------------------------------------------- Modals -- */
.modal-content {
  border-radius: 0 !important;
  border: 1px solid var(--mh-ink);
  background: var(--mh-paper);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.15);
}
.modal-header {
  background: var(--mh-paper-deep);
  border-bottom: 1px solid var(--mh-rule);
  border-radius: 0 !important;
  padding: 1.25rem 1.5rem;
}
.modal-title {
  font-family: var(--mh-font-display);
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
}
.modal-footer { border-top: 1px solid var(--mh-rule); padding: 1rem 1.5rem; }
.modal-backdrop { background: var(--mh-ink); }
.modal-backdrop.in, .modal-backdrop.show { opacity: 0.6; }

/* ----------------------------------------------------- Dropdown menus -- */
.dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--mh-ink);
  background: var(--mh-paper);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.1);
  padding: 0.5rem 0;
}
.dropdown-menu > li > a, .dropdown-item {
  font-family: var(--mh-font-sans);
  font-size: 0.875rem;
  padding: 0.6rem 1.25rem;
  color: var(--mh-ink-soft);
}
.dropdown-menu > li > a:hover, .dropdown-item:hover {
  background: var(--mh-ink);
  color: var(--mh-paper);
}
.dropdown-divider { border-top: 1px solid var(--mh-rule); margin: 0.4rem 0; }

/* ------------------------------------------------------- Pagination -- */
.pagination > li > a, .pagination > li > span, .page-link {
  border-radius: 0 !important;
  border-color: var(--mh-rule) !important;
  color: var(--mh-ink) !important;
  background: transparent !important;
  font-family: var(--mh-font-mono);
  font-size: 0.75rem;
  padding: 0.5rem 0.9rem;
}
.pagination > li > a:hover, .page-link:hover {
  background: var(--mh-paper-deep) !important;
}
.pagination > .active > a, .pagination > .active > span,
.page-item.active .page-link {
  background: var(--mh-ink) !important;
  border-color: var(--mh-ink) !important;
  color: var(--mh-paper) !important;
}

/* -------------------------------------------------- Progress / spinners -- */
.progress {
  background: var(--mh-paper-deep);
  border: 1px solid var(--mh-rule);
  border-radius: 0 !important;
  height: 6px;
  box-shadow: none;
}
.progress-bar {
  background: var(--mh-accent);
  border-radius: 0 !important;
}

/* --------------------------------------------------------- Tabs / pills -- */
.nav-tabs,
.nav-tabs-wrapper,
.nav-tabs.nav-slider { border-bottom: 1px solid var(--mh-rule) !important; background: transparent !important; }
.nav-tabs > li > a,
.nav-tabs .nav-link,
.nav-tabs-wrapper .nav-link,
.nav-slider .nav-link {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--mh-muted) !important;
  background: transparent !important;
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.9rem 1.25rem !important;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover,
.nav-tabs-wrapper .nav-link:hover,
.nav-slider .nav-link:hover { color: var(--mh-ink) !important; }

/* HostBill puts .active on the <li>, not on the <a>. Cover both. */
.nav-tabs > li.active > a,
.nav-tabs .nav-item.active > .nav-link,
.nav-tabs .nav-item.active a,
.nav-tabs .nav-link.active,
.nav-tabs-wrapper .nav-item.active > .nav-link,
.nav-tabs-wrapper .nav-item.active a,
.nav-slider .nav-item.active > .nav-link,
.nav-slider .nav-item.active a {
  color: var(--mh-ink) !important;
  border-bottom-color: var(--mh-accent) !important;
  background: transparent !important;
}

/* HostBill's sliding-indicator tabs: track + indicator recolored to palette */
.nav-tabs-wrapper .nav-tabs .slider {
  background: var(--mh-rule) !important;
  height: 1px !important;
}
.nav-tabs-wrapper .nav-tabs .slider .indicator,
.nav-slider .nav-slider-indicator,
.nav-slider-indicator,
.nav-tabs-wrapper .slider-indicator {
  background: var(--mh-accent) !important;
  background-color: var(--mh-accent) !important;
  height: 2px !important;
  border-radius: 0 !important;
}
/* Inside .nav-tabs-wrapper the slider draws the active line — so drop our own
   per-link border-bottom there to avoid the double line. */
.nav-tabs-wrapper .nav-tabs li.nav-item > a.nav-link,
.nav-tabs-wrapper .nav-tabs li.nav-item.active > a.nav-link {
  border-bottom: 0 !important;
}

/* Vertical page-side nav (service details left column, billing left column, etc.)
   Scoped to .body-content so it doesn't leak into the .sidebar (which also
   uses .nav.flex-column for its items). */
.body-content .nav-pills.flex-column,
.body-content .service-menu,
.body-content .service-details-menu,
.body-content .sidenav,
.body-content .page-side-nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.body-content .nav-pills.flex-column .nav-link,
.body-content .service-menu .nav-link,
.body-content .service-menu a,
.body-content .sidenav .nav-link {
  background: transparent !important;
  color: var(--mh-ink-soft) !important;
  font-family: var(--mh-font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  border-left: 2px solid transparent !important;
  padding: 0.55rem 0.9rem !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.body-content .nav-pills.flex-column .nav-link:hover,
.body-content .service-menu a:hover {
  color: var(--mh-ink) !important;
  background: transparent !important;
  border-left-color: var(--mh-rule) !important;
}
.body-content .nav-pills.flex-column .nav-link.active,
.body-content .nav-pills.flex-column .active > .nav-link,
.body-content .service-menu .active a,
.body-content .service-menu a.active {
  background: transparent !important;
  color: var(--mh-accent) !important;
  border-left-color: var(--mh-accent) !important;
  font-weight: 600;
}
/* Destructive item at end of list (e.g. Request Cancellation) stays red */
.body-content .nav-pills.flex-column .nav-link.text-danger,
.body-content .nav-pills.flex-column .text-danger a,
.body-content .nav-pills.flex-column a.text-danger {
  color: var(--mh-accent-deep) !important;
}

/* ------------------------------------------------ Hostbill product cards -- */
.product-box, .product-item, .pricing-box, .plan-box, .package {
  background: var(--mh-paper) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  transition: border-color 0.18s ease;
  box-shadow: none !important;
}
.product-box:hover, .product-item:hover,
.pricing-box:hover, .plan-box:hover {
  border-color: var(--mh-ink) !important;
}
.product-box .price, .pricing-box .price, .plan-box .price {
  font-family: var(--mh-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
  color: var(--mh-ink);
}
.product-box .product-name, .pricing-box .plan-name {
  font-family: var(--mh-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
}

/* ------------------------------------------------- Hostbill cart wizard -- */
#cart-wrapper { font-family: var(--mh-font-sans) !important; }

.cart-progress, .cart-steps, .progress-steps, .steps-nav {
  background: transparent !important;
  border-bottom: 1px solid var(--mh-rule);
  padding: 1rem 0;
}
.cart-progress .step, .cart-steps li, .progress-steps .step {
  font-family: var(--mh-font-mono) !important;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-muted);
}
.cart-progress .step.active, .cart-steps .active, .progress-steps .step.active {
  color: var(--mh-ink);
}
.cart-progress .step.active::before, .cart-steps .active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mh-accent);
  margin-right: 8px;
  vertical-align: middle;
}

.cart-sidebar, .cart-summary, .order-summary {
  background: var(--mh-paper-deep) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
  padding: 1.5rem;
}

/* --------------------------------------------- Service / invoice pages -- */
.service-info, .service-details, .invoice-items, .ticket-content,
.service-page, .service-box {
  background: var(--mh-paper) !important;
  border: 1px solid var(--mh-rule) !important;
  border-radius: 0 !important;
}

.invoice-header, .invoice-meta {
  font-family: var(--mh-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mh-muted);
}

.invoice-total, .total-amount {
  font-family: var(--mh-font-display) !important;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
}

/* ------------------------------------------------------------- Support -- */
.ticket-list .ticket, .kb-article, .announcement-item {
  border: 1px solid var(--mh-rule);
  padding: 1.25rem;
  background: var(--mh-paper);
  border-radius: 0;
}
.ticket-list .ticket:hover { border-color: var(--mh-ink); }

/* -------------------------------------------------------------- Footer -- */
.footer, #footer, footer.footer {
  background: transparent !important;
  border-top: 1px solid var(--mh-rule) !important;
  padding: 2rem 0;
  font-family: var(--mh-font-mono);
  font-size: 0.75rem;
  color: var(--mh-muted);
}
.footer a { color: var(--mh-muted); }
.footer a:hover { color: var(--mh-ink); }

/* ----------------------------------------------------- Utility classes -- */
.mh-mono-caps {
  font-family: var(--mh-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-mono);
  color: var(--mh-muted);
}

.mh-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mh-accent);
  vertical-align: middle;
  margin-right: 0.5rem;
}

.mh-hairline { height: 1px; background: var(--mh-rule); border: none; }

.mh-display {
  font-family: var(--mh-font-display);
  letter-spacing: var(--mh-tracking-display);
}

/* ------------------------------------------------ Override stubborn styles -- */
.text-primary { color: var(--mh-ink) !important; }
.text-success { color: var(--mh-accent) !important; }
.text-danger  { color: var(--mh-accent-deep) !important; }
.text-warning { color: var(--mh-accent) !important; }
.text-info    { color: var(--mh-ink-soft) !important; }

.bg-primary { background: var(--mh-ink) !important; color: var(--mh-paper) !important; }
.bg-success { background: var(--mh-ink) !important; color: var(--mh-paper) !important; }
.bg-danger  { background: var(--mh-accent-deep) !important; color: var(--mh-paper) !important; }
.bg-light   { background: var(--mh-paper-deep) !important; }
.bg-dark    { background: var(--mh-ink) !important; color: var(--mh-paper) !important; }

.rounded, .rounded-lg, .rounded-sm, .rounded-pill { border-radius: 0 !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Login form brand — inline SVG + Fraunces wordmark, matches navbar pattern */
.mh-brand-login {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  color: var(--mh-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 1.5rem;
  text-decoration: none !important;
}
.mh-brand-login .mh-mark { color: var(--mh-ink); flex-shrink: 0; }
.mh-brand-login .mh-wordmark {
  font-family: var(--mh-font-display) !important;
  font-weight: 600;
  letter-spacing: var(--mh-tracking-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--mh-ink);
}
.form-signin a:has(.mh-brand-login),
.form-signin .mh-brand-login {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}