/*
 * Hostable WHMCS Nexus Child Theme — custom.css
 *
 * Bridges Bootstrap 4.5 / Nexus with the Tailwind design used on
 * the main site (www.hostable.co.nz). Loaded automatically by the
 * Nexus parent via includes/head.tpl.
 *
 * Sections:
 *   1. CSS Custom Properties
 *   2. Tailwind + Bootstrap conflict resolution
 *   3. Hide Nexus default navigation
 *   4. Account dropdown
 *   5. Typography
 *   6. Buttons
 *   7. Forms
 *   8. Cards & Panels
 *   9. Tables
 *  10. Alerts
 *  11. Badges
 *  12. Modals
 *  13. Pagination
 *  14. Nav Tabs & Pills
 *  15. Breadcrumbs
 *  16. List Groups
 *  17. Dropdown Menus
 *  18. Progress Bars
 *  19. Tooltips & Popovers
 *  20. Well / Jumbotron
 *  21. Links
 *  22. WHMCS page-specific overrides
 *  23. Close / Loading
 *  24. Responsive
 *  25. Print
 */


/* ================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
    /* Hostable design tokens */
    --hostable-blue: #0263e0;
    --hostable-blue-hover: #0150b5;
    --hostable-red: #D71F38;
    --hostable-radius: 0.5rem;
    --hostable-radius-sm: 0.375rem;
    --hostable-radius-lg: 0.75rem;
    --hostable-radius-xl: 1rem;
    --hostable-shadow: 0 1px 3px 0 rgba(0,0,0,0.04), 0 1px 2px -1px rgba(0,0,0,0.03);
    --hostable-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --hostable-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Override Nexus neutral palette with Tailwind slate */
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* Override Nexus semantic colours */
    --primary: #0263e0;
    --primary-lifted: #3b82f6;
    --primary-accented: #0150b5;
    --success: #16a34a;
    --info: #0ea5e9;
    --warning: #f59e0b;
    --error: #dc2626;

    /* Override Nexus rounding */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;
}


/* ================================================================
   2. TAILWIND + BOOTSTRAP CONFLICT RESOLUTION
   ================================================================ */

/* Match Tailwind max-w-7xl (1280px) used by header/footer/client-nav */
#main-body .container {
    max-width: 80rem; /* 1280px — same as max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Prevent Tailwind list-reset from breaking BS lists in content */
#main-body ul,
#main-body ol {
    list-style: revert;
    padding-left: revert;
}

/* Restore Bootstrap box model inside content area */
#main-body *,
#main-body *::before,
#main-body *::after {
    box-sizing: border-box;
}

/* Bootstrap row negative margins */
#main-body .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

#main-body .row > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/*
 * hostable-custom.css sets `.relative { border: none !important; }` for
 * dropdown cleanup — undo this inside the WHMCS content area so BS4
 * bordered components (tables, cards, inputs) keep their borders.
 */
#main-body .relative {
    border: revert !important;
    outline: revert !important;
}

/* hostable-custom.css sets `.hidden { display: none !important }` which
   conflicts with BS4 d-none/d-lg-block utility pattern. Scope it. */
#main-body .d-none { display: none !important; }
#main-body .d-lg-block { }
@media (min-width: 992px) {
    #main-body .d-lg-block { display: block !important; }
    #main-body .d-lg-none  { display: none !important; }
}


/* ================================================================
   2b. WHMCS-SPECIFIC OVERRIDES FOR MAIN SITE CSS
   ================================================================
   hostable-custom.css and compat.css are loaded from the Flask site
   and set position:fixed + body padding for the notification banner
   system.  On the WHMCS side we need the header static (not fixed)
   with no body padding, so we override those specific rules here.
   This section MUST load after the main site CSS files.
   ================================================================ */

/* Override position:fixed from hostable-custom.css / compat.css.
   compat.css uses body:not(.has-banner) header.nav-ps (specificity 0,2,1)
   so we must match that specificity to win. */
body:not(.has-banner) header.nav-ps,
body.has-banner header.nav-ps,
header.nav-ps {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000 !important;
    height: 5rem !important; /* Exact 80px — matches Flask compat.css so h-full children resolve identically */
}

/* Remove body padding added for fixed header on Flask site */
body,
body.has-banner,
body:not(.has-banner) {
    padding-top: 0 !important;
}

/* Content area must not create a competing stacking context */
#main-body {
    position: relative;
    z-index: 1;
}

/* Notification banner is not used in WHMCS */
.notification-banner {
    display: none !important;
}


/* ================================================================
   2c. FONT AWESOME — UNIFIED FA7 PRO
   ================================================================
   compat.css forces FA7 Pro on all FA elements globally.  The FA7
   Pro font files load from the main site (www.hostable.co.nz) with
   CORS headers, so they work on the WHMCS subdomain too.  FA7 is
   fully backwards-compatible with FA5 class names (.fas .fa-user,
   .far .fa-lock, etc.) — same glyph codepoints, same aliases.

   We let FA7 handle ALL icons uniformly (header, footer, AND
   #main-body content).  No FA5 font-family override is needed.

   The only fix: compat.css sets box-sizing:content-box and
   border:none on [class*="fa-"] which breaks BS4 layout inside
   the content area.  We restore sane defaults here.
   ================================================================ */
#main-body [class*="fa-"] {
    box-sizing: border-box !important;
    border: revert !important;
}


/* ================================================================
   3. HIDE NEXUS DEFAULT NAVIGATION
   ================================================================ */
#header,
.header,
header.header,
.navbar.navbar-light,
.main-navbar-wrapper,
.topbar,
nav.master-breadcrumb {
    display: none !important;
}


/* ================================================================
   4. ACCOUNT DROPDOWN (logged-in user mega-menu)
   ================================================================ */
.account-dropdown {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border: 1px solid rgba(226,232,240,0.8);
    overflow: hidden;
}

.account-dropdown-header {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #0263e0, #3B82F6);
    border-radius: 0.75rem 0.75rem 0 0;
}

.account-dropdown-header a:hover {
    color: white !important;
}

.account-dropdown-body {
    max-height: 22rem;
    overflow-y: auto;
}

.account-dropdown-body::-webkit-scrollbar {
    width: 4px;
}

.account-dropdown-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.account-dropdown-section {
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.account-dropdown-link {
    display: flex;
    align-items: center;
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    color: #475569;
    transition: background-color 0.15s, color 0.15s;
    gap: 0.5rem;
}

.account-dropdown-link:hover {
    background-color: #eff6ff;
    color: #1d4ed8;
}

.account-dropdown-icon {
    font-size: 0.6875rem;
    color: #94a3b8;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.account-dropdown-link:hover .account-dropdown-icon {
    color: #3b82f6;
}

.account-dropdown-divider {
    border-top: 1px solid #e2e8f0;
}

/* Show first name only on wider screens */
.account-btn-name {
    display: none;
}

@media (min-width: 1280px) {
    .account-btn-name {
        display: inline;
    }
}


/* ================================================================
   5. TYPOGRAPHY
   ================================================================ */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1e293b;
    background-color: white !important;
}

#main-body {
    color: #334155;
    padding-top: 4.5rem !important;
    padding-bottom: 4rem !important;
}

#main-body p,
#main-body .panel-body,
#main-body .card-body {
    color: #334155;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #0f172a;
}

#main-body h1 { font-size: 1.875rem; margin-bottom: 1rem; }
#main-body h2 { font-size: 1.5rem;   margin-bottom: 0.75rem; }
#main-body h3 { font-size: 1.25rem;  margin-bottom: 0.5rem; }
#main-body h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }

/* Nexus section headers */
.header-lined {
    border-bottom: 2px solid #cbd5e1;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}


/* ================================================================
   6. BUTTONS
   ================================================================ */

/* Base */
.btn {
    border-radius: var(--hostable-radius) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    transition: all 0.15s ease !important;
    line-height: 1.5 !important;
    cursor: pointer;
}

.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(2, 99, 224, 0.25) !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Primary — gradient matches Flask .btn-ps-primary */
.btn-primary {
    background: linear-gradient(135deg, #0263e0, #3B82F6) !important;
    color: white !important;
    box-shadow: 0 4px 14px 0 rgba(2, 99, 224, 0.25) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0250C8, #2563EB) !important;
    color: white !important;
    box-shadow: 0 8px 25px 0 rgba(2, 99, 224, 0.35) !important;
}

/* Success */
.btn-success {
    background-color: #16a34a !important;
    color: white !important;
}
.btn-success:hover { background-color: #15803d !important; }

/* Danger */
.btn-danger {
    background-color: #dc2626 !important;
    color: white !important;
}
.btn-danger:hover { background-color: #b91c1c !important; }

/* Warning */
.btn-warning {
    background-color: #f59e0b !important;
    color: white !important;
}
.btn-warning:hover { background-color: #d97706 !important; }

/* Info */
.btn-info {
    background-color: #0ea5e9 !important;
    color: white !important;
}
.btn-info:hover { background-color: #0284c7 !important; }

/* Secondary / Default */
.btn-default,
.btn-secondary {
    background-color: white !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-default:hover,
.btn-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

/* Link */
.btn-link {
    color: var(--hostable-blue) !important;
    text-decoration: none !important;
    background: transparent !important;
}
.btn-link:hover { text-decoration: underline !important; }

/* Outline variants */
.btn-outline-primary {
    background-color: transparent !important;
    color: var(--hostable-blue) !important;
    border: 1px solid var(--hostable-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--hostable-blue) !important;
    color: white !important;
}

.btn-outline-secondary {
    background-color: transparent !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}
.btn-outline-secondary:hover {
    background-color: #475569 !important;
    color: white !important;
}

.btn-outline-success {
    background-color: transparent !important;
    color: #16a34a !important;
    border: 1px solid #16a34a !important;
}
.btn-outline-success:hover {
    background-color: #16a34a !important;
    color: white !important;
}

.btn-outline-danger {
    background-color: transparent !important;
    color: #dc2626 !important;
    border: 1px solid #dc2626 !important;
}
.btn-outline-danger:hover {
    background-color: #dc2626 !important;
    color: white !important;
}

.btn-outline-warning {
    background-color: transparent !important;
    color: #d97706 !important;
    border: 1px solid #f59e0b !important;
}
.btn-outline-warning:hover {
    background-color: #f59e0b !important;
    color: white !important;
}

.btn-outline-info {
    background-color: transparent !important;
    color: #0284c7 !important;
    border: 1px solid #0ea5e9 !important;
}
.btn-outline-info:hover {
    background-color: #0ea5e9 !important;
    color: white !important;
}

/* Sizes */
.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: var(--hostable-radius-lg) !important;
}

.btn-sm {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.btn-block {
    display: block !important;
    width: 100% !important;
}

/* Button group border-radius */
.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* ================================================================
   7. FORMS
   ================================================================ */

/* Text inputs */
.form-control {
    border-radius: var(--hostable-radius) !important;
    border: 1px solid #cbd5e1 !important;
    padding-top: 0.625rem !important;
    padding-right: 0.875rem !important;
    padding-bottom: 0.625rem !important;
    padding-left: 0.875rem !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
    background-color: white !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--hostable-blue) !important;
    box-shadow: 0 0 0 3px rgba(2, 99, 224, 0.1) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #94a3b8 !important;
}

.form-control-lg {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border-radius: var(--hostable-radius-lg) !important;
}

.form-control-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--hostable-radius-sm) !important;
}

/* intl-tel-input phone number field.
   Tailwind v4 preflight sets padding:0 and border:0 solid on *, which
   collapses intl-tel-input's internal layout.  Restore the essential
   structure here. Covers both old (.intl-tel-input) and new (.iti) class names. */
.iti,
.intl-tel-input {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* Remove our padding-left !important so intl-tel-input's JS-set inline
   style can take effect.  The 90px fallback handles pre-JS rendering. */
.iti input.form-control,
.iti input[type="tel"],
.intl-tel-input input.form-control,
.intl-tel-input input[type="tel"] {
    padding-left: 90px !important;
    width: 100% !important;
}

.iti__flag-container,
.intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    padding: 0 !important;
}

.iti__selected-flag,
.intl-tel-input .selected-flag {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 6px 0 8px !important;
    cursor: pointer !important;
    gap: 4px !important;
}

.iti__selected-dial-code {
    padding-left: 4px !important;
}

.iti__arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #555 !important;
    margin-left: 4px !important;
}

/* Select */
select.form-control {
    appearance: none;
    height: auto !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem !important;
}

/* BS4 custom-select */
.custom-select {
    border-radius: var(--hostable-radius) !important;
    border: 1px solid #cbd5e1 !important;
    height: auto !important;
    padding: 0.625rem 2.5rem 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
    background-color: white !important;
}

.custom-select:focus {
    border-color: var(--hostable-blue) !important;
    box-shadow: 0 0 0 3px rgba(2, 99, 224, 0.1) !important;
    outline: none !important;
}

/* Textarea */
textarea.form-control {
    min-height: 5rem;
}

/* Labels */
.form-group label,
label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #334155;
    margin-bottom: 0.375rem;
}

/* Form help text */
.form-text,
.help-block {
    font-size: 0.75rem !important;
    color: #64748b !important;
    margin-top: 0.25rem !important;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--hostable-blue);
}

/* BS4 custom controls */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hostable-blue) !important;
    border-color: var(--hostable-blue) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hostable-blue) !important;
    border-color: var(--hostable-blue) !important;
}

/* Input group */
.input-group .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
}

.input-group-prepend .input-group-text {
    border-right: none !important;
    border-radius: var(--hostable-radius) 0 0 var(--hostable-radius) !important;
}

.input-group-append .input-group-text {
    border-left: none !important;
    border-radius: 0 var(--hostable-radius) var(--hostable-radius) 0 !important;
}

.input-group-append .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group-prepend .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Validation states */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc2626 !important;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #16a34a !important;
}

.invalid-feedback {
    color: #dc2626 !important;
    font-size: 0.75rem !important;
}

.valid-feedback {
    color: #16a34a !important;
    font-size: 0.75rem !important;
}

/* Custom file input */
.custom-file-label {
    border-radius: var(--hostable-radius) !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
}
.custom-file-label::after {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-left: 1px solid #cbd5e1 !important;
}


/* ================================================================
   8. CARDS & PANELS
   ================================================================ */

/* Legacy BS3 panels (still used in some WHMCS pages) */
.panel {
    border: 1px solid #e5e7eb !important;
    border-radius: var(--hostable-radius-xl) !important;
    box-shadow: var(--hostable-shadow) !important;
    background: white !important;
    margin-bottom: 1.5rem !important;
}

.panel-heading {
    background: white !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius-xl) var(--hostable-radius-xl) 0 0 !important;
    padding: 1rem 1.5rem !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.panel-body {
    padding: 1.5rem !important;
}

.panel-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 var(--hostable-radius-xl) var(--hostable-radius-xl) !important;
    padding: 1rem 1.5rem !important;
}

.panel-default > .panel-heading {
    color: #0f172a !important;
}

/* BS4 cards */
.card {
    border: 1px solid #e5e7eb !important;
    border-radius: var(--hostable-radius-xl) !important;
    box-shadow: var(--hostable-shadow) !important;
    background: white !important;
    margin-bottom: 1.5rem;
}

.card-header {
    background: white !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #0f172a !important;
    border-radius: var(--hostable-radius-xl) var(--hostable-radius-xl) 0 0 !important;
}

.card-body {
    padding: 1.5rem !important;
}

.card-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 var(--hostable-radius-xl) var(--hostable-radius-xl) !important;
}

.card-title {
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 0.5rem;
}

.card-subtitle {
    color: #475569 !important;
    font-size: 0.875rem;
}

.card-link {
    color: var(--hostable-blue) !important;
}
.card-link:hover {
    color: var(--hostable-blue-hover) !important;
}

.card-img-top {
    border-radius: var(--hostable-radius-xl) var(--hostable-radius-xl) 0 0 !important;
}


/* ================================================================
   9. TABLES
   ================================================================ */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table > thead > tr > th,
.table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem !important;
}

.table > tbody > tr > td,
.table tbody td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover > td,
.table-hover tbody tr:hover td {
    background-color: #f8fafc !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped tbody tr:nth-of-type(odd) td {
    background-color: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background-color: #f8fafc !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 1px solid #e2e8f0 !important;
}

.table-sm th,
.table-sm td {
    padding: 0.5rem 0.75rem !important;
}

.table-responsive {
    border: none !important;
    border-radius: var(--hostable-radius) !important;
}


/* ================================================================
   10. ALERTS
   ================================================================ */
.alert {
    border-radius: var(--hostable-radius) !important;
    border: 1px solid !important;
    font-size: 0.875rem !important;
    padding: 1rem !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.alert-danger,
.alert-error {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.alert .close,
.alert-dismissible .close {
    color: inherit !important;
    opacity: 0.5 !important;
    font-size: 1.25rem !important;
    padding: 0.75rem 1rem !important;
}
.alert .close:hover {
    opacity: 0.8 !important;
}

.alert a {
    font-weight: 600;
    text-decoration: underline;
    color: inherit !important;
}


/* ================================================================
   11. BADGES
   ================================================================ */
.badge,
.label {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

.badge-primary, .label-primary { background-color: var(--hostable-blue) !important; color: white !important; }
.badge-success, .label-success { background-color: #16a34a !important; color: white !important; }
.badge-danger,  .label-danger  { background-color: #dc2626 !important; color: white !important; }
.badge-warning, .label-warning { background-color: #f59e0b !important; color: white !important; }
.badge-info,    .label-info    { background-color: #0ea5e9 !important; color: white !important; }
.badge-secondary { background-color: #64748b !important; color: white !important; }

.badge-pill {
    border-radius: 9999px !important;
}


/* ================================================================
   12. MODALS
   ================================================================ */
.modal-content {
    border: none !important;
    border-radius: var(--hostable-radius-xl) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important;
}

.modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-header .modal-title {
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    color: #0f172a !important;
}

.modal-header .close {
    font-size: 1.5rem !important;
    color: #64748b !important;
    opacity: 0.7 !important;
}
.modal-header .close:hover {
    opacity: 1 !important;
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
}

.modal-lg  { max-width: 800px !important; }
.modal-sm  { max-width: 300px !important; }
.modal-xl  { max-width: 1140px !important; }

.modal-backdrop.show {
    opacity: 0.5 !important;
}


/* ================================================================
   13. PAGINATION
   ================================================================ */

/* BS4 pagination selectors */
.page-item .page-link {
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
    transition: all 0.15s ease;
}

.page-item .page-link:hover {
    background-color: #f1f5f9 !important;
    color: var(--hostable-blue) !important;
}

.page-item.active .page-link {
    background-color: var(--hostable-blue) !important;
    border-color: var(--hostable-blue) !important;
    color: white !important;
}

.page-item.disabled .page-link {
    color: #94a3b8 !important;
    background-color: white !important;
}

.page-item:first-child .page-link {
    border-radius: var(--hostable-radius) 0 0 var(--hostable-radius) !important;
}

.page-item:last-child .page-link {
    border-radius: 0 var(--hostable-radius) var(--hostable-radius) 0 !important;
}

/* Legacy BS3 selectors (compatibility) */
.pagination > li > a,
.pagination > li > span {
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-radius: var(--hostable-radius) 0 0 var(--hostable-radius) !important;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0 var(--hostable-radius) var(--hostable-radius) 0 !important;
}

.pagination > li > a:hover {
    background-color: #f1f5f9 !important;
    color: var(--hostable-blue) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--hostable-blue) !important;
    border-color: var(--hostable-blue) !important;
    color: white !important;
}


/* ================================================================
   14. NAV TABS & PILLS
   ================================================================ */

/* Tabs */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: -2px !important;
    transition: all 0.15s ease !important;
    border-radius: 0 !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover {
    border-color: transparent !important;
    border-bottom-color: #94a3b8 !important;
    background: transparent !important;
    color: #0f172a !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none !important;
    border-bottom: 2px solid var(--hostable-blue) !important;
    color: var(--hostable-blue) !important;
    background: transparent !important;
}

/* Pills */
.nav-pills .nav-link {
    border-radius: var(--hostable-radius) !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
}

.nav-pills .nav-link:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--hostable-blue) !important;
    color: white !important;
}

/* Tab content */
.tab-content {
    padding-top: 1rem;
}


/* ================================================================
   15. BREADCRUMBS
   ================================================================ */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
}

/* BS4 breadcrumb-item */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: #94a3b8 !important;
    padding: 0 0.5rem !important;
}

.breadcrumb-item.active {
    color: #64748b !important;
}

/* Legacy BS3 selectors */
.breadcrumb > li + li::before {
    content: "/" !important;
    color: #94a3b8 !important;
    padding: 0 0.5rem !important;
}

.breadcrumb > .active {
    color: #64748b !important;
}

.breadcrumb a {
    color: var(--hostable-blue) !important;
    text-decoration: none !important;
}
.breadcrumb a:hover {
    text-decoration: underline !important;
}


/* ================================================================
   16. LIST GROUPS
   ================================================================ */
.list-group-item {
    border: 1px solid #e2e8f0 !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    background-color: white !important;
}

.list-group-item:first-child {
    border-top-left-radius: var(--hostable-radius) !important;
    border-top-right-radius: var(--hostable-radius) !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--hostable-radius) !important;
    border-bottom-right-radius: var(--hostable-radius) !important;
}

.list-group-item.active {
    background-color: var(--hostable-blue) !important;
    border-color: var(--hostable-blue) !important;
    color: white !important;
}

.list-group-item-action:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Sidebar list groups (legacy fallback — non-dark-sidebar pages) */
.sidebar .list-group-item {
    border: none !important;
    border-radius: var(--hostable-radius) !important;
    padding: 0.625rem 1rem !important;
    margin-bottom: 0.125rem !important;
    color: #1e293b !important;
}

.sidebar .list-group-item:hover {
    background-color: #eff6ff !important;
    color: var(--hostable-blue) !important;
}

.sidebar .list-group-item.active {
    background-color: #eff6ff !important;
    color: var(--hostable-blue) !important;
    font-weight: 500 !important;
}


/* ================================================================
   17. DROPDOWN MENUS
   ================================================================ */
.dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius) !important;
    box-shadow: var(--hostable-shadow-md) !important;
    padding: 0.25rem !important;
}

/* BS4 dropdown-item */
.dropdown-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
    color: #334155 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--hostable-blue) !important;
    color: white !important;
}

.dropdown-divider {
    border-color: #e2e8f0 !important;
    margin: 0.25rem 0 !important;
}

/* Legacy BS3 selectors */
.dropdown-menu > li > a {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
    color: #334155 !important;
}

.dropdown-menu > li > a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}


/* ================================================================
   18. PROGRESS BARS
   ================================================================ */
.progress {
    height: 0.75rem !important;
    border-radius: 9999px !important;
    background-color: #e2e8f0 !important;
    overflow: hidden !important;
}

.progress-bar {
    background-color: var(--hostable-blue) !important;
    border-radius: 9999px !important;
    transition: width 0.4s ease !important;
}

.progress-bar-success { background-color: #16a34a !important; }
.progress-bar-info    { background-color: #0ea5e9 !important; }
.progress-bar-warning { background-color: #f59e0b !important; }
.progress-bar-danger  { background-color: #dc2626 !important; }


/* ================================================================
   19. TOOLTIPS & POPOVERS
   ================================================================ */
.tooltip-inner {
    background-color: #1e293b !important;
    border-radius: var(--hostable-radius-sm) !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
}

.bs-tooltip-top .arrow::before    { border-top-color: #1e293b !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #1e293b !important; }
.bs-tooltip-left .arrow::before   { border-left-color: #1e293b !important; }
.bs-tooltip-right .arrow::before  { border-right-color: #1e293b !important; }

.popover {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius) !important;
    box-shadow: var(--hostable-shadow-lg) !important;
}

.popover-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.popover-body {
    font-size: 0.875rem !important;
    color: #334155 !important;
}


/* ================================================================
   20. WELL / JUMBOTRON
   ================================================================ */
.well {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius-lg) !important;
    box-shadow: none !important;
    padding: 1.5rem !important;
}

.jumbotron {
    background: #f8fafc !important;
    border-radius: var(--hostable-radius-xl) !important;
    padding: 2rem !important;
}


/* ================================================================
   21. LINKS
   ================================================================ */
#main-body a {
    color: var(--hostable-blue);
    text-decoration: none;
}
#main-body a:hover {
    color: var(--hostable-blue-hover);
    text-decoration: underline;
}

/* Don't style buttons as link colour */
#main-body a.btn { text-decoration: none !important; }
#main-body a.btn:hover { text-decoration: none !important; }


/* ================================================================
   22. WHMCS PAGE-SPECIFIC OVERRIDES
   ================================================================ */

/* Login page — styled to match Flask site aesthetic */
#login .login-container,
.login-container {
    max-width: 28rem;
    margin: 2rem auto 3rem;
}

.login-container .card,
.login-container .panel {
    border: 1px solid #e5e7eb !important;
    box-shadow: var(--hostable-shadow-md) !important;
    border-radius: var(--hostable-radius-xl) !important;
}

.login-container .header-lined,
.login-container h1,
.login-container h2 {
    text-align: center !important;
    border-bottom: none !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1.5rem !important;
}

.login-container .btn-primary {
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--hostable-radius) !important;
    margin-top: 0.5rem !important;
}

.login-container .form-group label {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.login-container .form-control {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
}

.login-container .input-group-text {
    background-color: #f8fafc !important;
    color: #64748b !important;
}

/* Forgot password and register links */
.login-container a:not(.btn) {
    color: var(--hostable-blue) !important;
    font-weight: 500 !important;
}

.login-container a:not(.btn):hover {
    color: var(--hostable-blue-hover) !important;
}

/* Domain checker */
.domain-checker-container .btn-primary {
    border-radius: 0 var(--hostable-radius) var(--hostable-radius) 0 !important;
}

.domain-checker-container .form-control {
    border-radius: var(--hostable-radius) 0 0 var(--hostable-radius) !important;
}

/* Homepage domain search */
.domain-search-homepage {
    border-radius: var(--hostable-radius-xl) !important;
    overflow: hidden;
}

.domain-search-homepage .input-group {
    box-shadow: var(--hostable-shadow-lg);
    border-radius: var(--hostable-radius-lg);
    overflow: hidden;
}

/* Order forms */
.order-form .panel,
.order-form .card {
    margin-bottom: 1.5rem;
}

.product-group .product {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius-xl) !important;
    padding: 1.5rem !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-group .product:hover {
    box-shadow: var(--hostable-shadow-md) !important;
    transform: translateY(-2px);
}

.product-group .product.featured {
    border-color: var(--hostable-blue) !important;
    box-shadow: 0 0 0 1px var(--hostable-blue) !important;
}

/* Invoice */
.invoice-container {
    background: white;
    border-radius: var(--hostable-radius-xl);
    box-shadow: var(--hostable-shadow);
    padding: 2rem;
}

/* Tickets */
.ticket-reply {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--hostable-radius-lg) !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    background: white !important;
}

.ticket-reply-operator {
    border-left: 3px solid var(--hostable-blue) !important;
    background: #f8fafc !important;
}

/* Sidebar cards (legacy — hidden when .hst-sidebar is present) */
.sidebar .card {
    border-radius: var(--hostable-radius-lg) !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
}

.sidebar .card-header {
    border-radius: var(--hostable-radius-lg) var(--hostable-radius-lg) 0 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: white !important;
    border-bottom: 2px solid #e2e8f0 !important;
}


/* ================================================================
   UNIFIED DARK SIDEBAR (.hst-sidebar)
   ================================================================
   Matches the dashboard welcome-banner gradient and Flask site hero
   sections. All sidebar panels merge into one dark container.
   ================================================================ */

/* ── Welcome / Return to Dashboard button above sidebar ─────────── */
.hst-sidebar-greeting {
    margin-bottom: 1rem;
}

/* Shared base for both welcome and return buttons */
.hst-sg-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.875rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Welcome button — dark blue matching stats banner accent */
.hst-sg-welcome {
    background: #33416D;
    color: white !important;
    box-shadow: 0 2px 8px rgba(51,65,109,0.35), 0 1px 3px rgba(51,65,109,0.2);
}

.hst-sg-welcome::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hst-sg-welcome .hst-sg-icon {
    font-size: 0.9375rem;
    color: #60A5FA;
}

.hst-sg-welcome .hst-sg-text {
    color: white;
}

/* Return to Dashboard button — same dark blue as Welcome */
.hst-sg-return {
    background: #33416D;
    color: white !important;
    box-shadow: 0 2px 8px rgba(51,65,109,0.35), 0 1px 3px rgba(51,65,109,0.2);
}

.hst-sg-return::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,165,250,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hst-sg-return .hst-sg-icon {
    font-size: 0.875rem;
    color: #60A5FA;
    transition: transform 0.2s ease;
}

.hst-sg-return .hst-sg-text {
    color: white;
}

.hst-sg-return:hover {
    background: #3d4d80;
    color: white !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(51,65,109,0.4), 0 2px 4px rgba(51,65,109,0.25);
    transform: translateY(-1px);
}

.hst-sg-return:hover .hst-sg-icon {
    transform: translateX(-3px);
    color: #93bbfd;
}

.hst-sg-return:hover .hst-sg-text {
    color: white;
}

/* Unified wrapper — one dark container around both sidebars */
.hst-sidebar-wrap {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 1.25rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Subtle radial glows — matches welcome banner */
.hst-sidebar-wrap::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hst-sidebar-wrap::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -15%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(134,16,67,0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Inner sidebar — transparent, sits inside the wrapper */
.hst-sidebar {
    position: relative;
    z-index: 1;
}

/* Divider between primary and secondary sidebar within the wrapper */
.hst-sidebar-wrap > .sidebar + .sidebar .hst-sidebar {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Panel section */
.hst-sb-section {
    position: relative;
    z-index: 1;
}

.hst-sb-section + .hst-sb-section {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Section header */
.hst-sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
}

/* Only collapsible headers get pointer + hover */
.hst-sb-toggle {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.hst-sb-toggle:hover {
    background: rgba(255,255,255,0.05);
}

.hst-sb-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 !important;
}

.hst-sb-title-icon {
    font-size: 0.6875rem;
    color: #64748b;
}

/* Chevron (collapsible sections only) */
.hst-sb-chevron {
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hst-sb-section.collapsed .hst-sb-chevron {
    transform: rotate(-90deg);
}

.hst-sb-section.collapsed .hst-sb-content {
    display: none;
}

/* Body HTML (e.g. Your Info address block) */
.hst-sb-body {
    padding: 0.5rem 0.75rem 0.75rem;
    font-size: 0.8125rem;
    color: #cbd5e1;
    line-height: 1.5;
}

/* Ensure all text inside body HTML is bright */
.hst-sb-body p,
.hst-sb-body span,
.hst-sb-body div,
.hst-sb-body address {
    color: #cbd5e1 !important;
}

/* Override buttons inside sidebar (body + footer, e.g. "Update" button) */
.hst-sidebar-wrap .btn,
.hst-sidebar-wrap .btn-success,
.hst-sidebar-wrap .btn-primary,
.hst-sidebar-wrap .btn-default,
.hst-sidebar-wrap input.btn {
    background-color: rgba(255,255,255,0.1) !important;
    background-image: none !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.15s ease !important;
}

.hst-sidebar-wrap .btn:hover,
.hst-sidebar-wrap .btn-success:hover,
.hst-sidebar-wrap .btn-primary:hover,
.hst-sidebar-wrap .btn-default:hover,
.hst-sidebar-wrap input.btn:hover {
    background-color: rgba(255,255,255,0.18) !important;
    background-image: none !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: white !important;
}

/* Links inside body */
.hst-sb-body a {
    color: #60a5fa !important;
    text-decoration: none !important;
}
.hst-sb-body a:hover {
    color: #93bbfd !important;
    text-decoration: underline !important;
}

/* List items */
.hst-sb-list {
    padding: 0.125rem 0;
}

.hst-sb-item {
    display: block;
    text-decoration: none !important;
    color: inherit;
    border-radius: 0.5rem;
    margin: 0.0625rem 0;
    transition: all 0.15s ease;
}

.hst-sb-item-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.75rem;
}

.hst-sb-item-icon {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #64748b;
    transition: color 0.15s ease;
}

.hst-sb-item-label {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    transition: color 0.15s ease;
}

/* Hover state */
a.hst-sb-item:hover {
    background: rgba(255,255,255,0.06);
    text-decoration: none !important;
}

a.hst-sb-item:hover .hst-sb-item-icon {
    color: #60a5fa;
}

a.hst-sb-item:hover .hst-sb-item-label {
    color: white;
}

/* Active / current page */
.hst-sb-item.active {
    background: rgba(59,130,246,0.15);
}

.hst-sb-item.active .hst-sb-item-icon {
    color: #60a5fa;
}

.hst-sb-item.active .hst-sb-item-label {
    color: white;
    font-weight: 600;
}

/* Disabled state */
.hst-sb-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Badge (count pill) */
.hst-sb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
    flex-shrink: 0;
}

/* Footer */
.hst-sb-footer {
    padding: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.8125rem;
    color: #64748b;
}

.hst-sb-footer a {
    color: #60a5fa !important;
    text-decoration: none !important;
}
.hst-sb-footer a:hover {
    color: #93bbfd !important;
    text-decoration: underline !important;
}

/* Mobile select dropdown */
.hst-sb-select {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
}

.hst-sb-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}

/* Mobile footer secondary sidebar (not inside wrapper — needs own bg) */
.sidebar-secondary .hst-sidebar {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 1rem;
    padding: 1.25rem;
    overflow: hidden;
}

/* ── Mobile sidebar stacking ──────────────────────────────────────── */
@media (max-width: 991px) {
    .hst-sidebar-wrap {
        border-radius: 1rem;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    .hst-sidebar-greeting {
        margin-bottom: 0.75rem;
    }
}

/* ── Hide Nexus default .card-sidebar when dark sidebar is active ── */
.sidebar .card.card-sidebar {
    display: none !important;
}

/* Client home panels / quick-action cards */
.client-home-panels .card,
.client-home-panels .panel {
    transition: box-shadow 0.2s ease;
}
.client-home-panels .card:hover,
.client-home-panels .panel:hover {
    box-shadow: var(--hostable-shadow-md) !important;
}


/* ================================================================
   23. CLOSE / LOADING
   ================================================================ */
.close {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #64748b !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}
.close:hover {
    opacity: 1 !important;
    color: #0f172a !important;
}

/* Fullpage overlay spinner (Nexus) */
#fullpage-overlay {
    background: rgba(255, 255, 255, 0.85) !important;
}

#fullpage-overlay .fa-spinner,
#fullpage-overlay .fa-circle-notch {
    color: var(--hostable-blue) !important;
}


/* ================================================================
   24. RESPONSIVE
   ================================================================ */

/* ── Mobile (< 768px) ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    #main-body .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Reduce top/bottom padding on content area */
    #main-body {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .panel-body,
    .card-body {
        padding: 1rem !important;
    }

    .panel-heading,
    .card-header {
        padding: 0.75rem 1rem !important;
    }

    #main-body h1 { font-size: 1.5rem; }
    #main-body h2 { font-size: 1.25rem; }
    #main-body h3 { font-size: 1.125rem; }

    .table-responsive {
        border: none !important;
        border-radius: var(--hostable-radius) !important;
    }

    /* Stack sidebar above content on mobile */
    .sidebar {
        margin-bottom: 1.25rem;
    }

    /* Dark sidebar wrapper — compact on mobile */
    .hst-sidebar-wrap {
        padding: 1rem;
        border-radius: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .hst-sb-item-inner {
        padding: 0.4375rem 0.625rem;
    }

    .hst-sb-item-label {
        font-size: 0.8125rem;
    }

    /* Row negative margins — prevent horizontal overflow */
    #main-body .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    #main-body .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Tables — horizontal scroll with visual hint */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Modals — near full width on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: var(--hostable-radius-lg) !important;
    }

    .modal-header {
        padding: 1rem !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 0.75rem 1rem !important;
    }

    /* Login page — full width on mobile */
    #login .login-container,
    .login-container {
        max-width: 100%;
        margin: 1rem auto 2rem;
    }

    /* Nav tabs — scrollable on mobile */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tabs .nav-link,
    .nav-tabs > li > a {
        white-space: nowrap !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Breadcrumbs — smaller on mobile */
    .breadcrumb {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem !important;
    }

    /* Alerts — compact */
    .alert {
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Buttons — prevent tiny tap targets (only in content area) */
    #main-body .btn {
        min-height: 2.5rem !important;
    }

    #main-body .btn-sm {
        min-height: 2rem !important;
    }

    /* Account dropdown — full width on mobile */
    .account-dropdown {
        width: calc(100vw - 2rem);
        max-width: 24rem;
    }
}

/* ── Small mobile (< 576px) ───────────────────────────────────── */
@media (max-width: 575.98px) {
    .btn-block-xs {
        display: block !important;
        width: 100% !important;
    }

    .invoice-container {
        padding: 1rem;
    }

    /* Even tighter content padding */
    #main-body .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Cards — reduce border radius on very small screens */
    .card,
    .panel {
        border-radius: var(--hostable-radius-lg) !important;
    }

    /* Sidebar secondary — compact */
    .sidebar-secondary .hst-sidebar {
        padding: 1rem;
        border-radius: 0.875rem;
    }

    /* Header-lined section headers */
    .header-lined {
        font-size: 1.125rem;
        padding-bottom: 0.625rem;
        margin-bottom: 1.25rem;
    }

    /* Standalone CTA buttons — full width on xs for tap targets.
       Only target direct children of form-group or card-footer so
       we don't break button pairs or inline groups.                */
    .form-group > .btn-primary:only-child,
    .card-footer > .btn-primary:only-child,
    .panel-footer > .btn-primary:only-child {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ── sm+ (640px): match header px-6 (1.5rem) ─────────────────── */
@media (min-width: 640px) {
    #main-body .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ── lg+ (1024px): match header px-8 (2rem) ──────────────────── */
@media (min-width: 1024px) {
    #main-body .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


/* ================================================================
   25. FOOTER + HEADER — Tailwind v4 @layer preflight restoration
   ================================================================
   Tailwind v4 puts preflight resets inside @layer base. CSS layers
   have LOWER cascade priority than un-layered styles. Since BS4 is
   un-layered, its element-level rules (h3 { font-size: 1.75rem },
   ul { margin-bottom: 1rem }, etc.) beat Tailwind's preflight.

   The footer and header live OUTSIDE #main-body, so they expect
   Tailwind preflight to be in effect. We replicate it here as
   un-layered CSS so it beats BS4.
   ================================================================ */

/* --- Footer resets ------------------------------------------------
   Use !important ONLY for properties where no Tailwind utility class
   needs to override (e.g. font-size on headings — they have no
   text-* size class). Properties like font-weight, margin, color are
   left without !important so Tailwind classes (.font-semibold, .mb-4,
   .text-white etc.) at specificity 0,1,0 can still override these
   element-level resets (specificity 0,0,2).
   ------------------------------------------------------------------ */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-size: inherit !important;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

footer ul,
footer ol,
footer menu {
    list-style: none !important;
    margin: 0;
    padding: 0 !important;
}

footer li {
    margin: 0;
    padding: 0;
}

footer p {
    margin: 0;
}

footer a {
    color: inherit;
    text-decoration: inherit;
}

footer img {
    display: block;
    max-width: 100%;
}

footer *,
footer *::before,
footer *::after {
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
    box-sizing: border-box;
}

/* --- Footer Tailwind utility restoration ------------------------------
   The element-level resets above are unlayered and beat Tailwind v4's
   @layer utilities. Restore the specific utilities used in the footer.
   ---------------------------------------------------------------------- */
footer a:hover,
footer a:focus {
    text-decoration: none !important;
}

footer .font-semibold { font-weight: 600 !important; }
footer .font-medium { font-weight: 500 !important; }
footer .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
footer .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
footer .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
footer .mb-2 { margin-bottom: 0.5rem !important; }
footer .mb-4 { margin-bottom: 1rem !important; }
footer .mb-6 { margin-bottom: 1.5rem !important; }
footer .border-t { border-top-width: 1px !important; }
footer .border-slate-800 { border-color: rgb(30, 41, 59) !important; }
footer .space-y-2 > * + * { margin-top: 0.5rem !important; }
footer .space-y-3 > * + * { margin-top: 0.75rem !important; }

/* --- Header resets ------------------------------------------------ */
header.nav-ps h1,
header.nav-ps h2,
header.nav-ps h3,
header.nav-ps h4,
header.nav-ps h5,
header.nav-ps h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

header.nav-ps ul,
header.nav-ps ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

header.nav-ps a {
    color: inherit;
    text-decoration: inherit;
}

/* Preserve white text on CTA buttons despite the link reset above */
header.nav-ps a.btn-ps-primary {
    color: white !important;
}

header.nav-ps img {
    display: block;
    max-width: 100%;
}

header.nav-ps *,
header.nav-ps *::before,
header.nav-ps *::after {
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
    box-sizing: border-box;
}

/* Reset buttons to match Tailwind preflight (layered preflight loses to BS4) */
header.nav-ps button {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-appearance: button;
    -webkit-tap-highlight-color: transparent;
}

/* Remove focus outlines, box-shadows, and tap highlights on all
   interactive elements — mirrors Tailwind preflight behaviour */
header.nav-ps button:focus,
header.nav-ps button:focus-visible,
header.nav-ps button:active,
header.nav-ps a:focus,
header.nav-ps a:focus-visible,
header.nav-ps a:active {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

header.nav-ps a {
    -webkit-tap-highlight-color: transparent;
}

/* --- Mobile nav utility overrides ---------------------------------
   Bootstrap 4 spacing utilities (pb-4, pt-4, mt-4) use !important with
   different values than Tailwind (1.5rem vs 1rem).  Tailwind's @layer
   utilities lose to BS4's un-layered !important declarations.
   The header preflight reset also sets border-color: currentColor which
   defeats Tailwind's layered border-color utilities.
   Scope to header.nav-ps so #main-body BS4 spacing is unaffected.
   ------------------------------------------------------------------ */
header.nav-ps .border-slate-100 { border-color: #f1f5f9 !important; }
header.nav-ps .border-slate-300 { border-color: #cbd5e1 !important; }
header.nav-ps .pb-4  { padding-bottom: 1rem !important; }
header.nav-ps .pt-4  { padding-top: 1rem !important; }
header.nav-ps .mt-4  { margin-top: 1rem !important; }
header.nav-ps .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
header.nav-ps .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
header.nav-ps .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
header.nav-ps .pl-9  { padding-left: 2.25rem !important; }
header.nav-ps .w-4   { width: 1rem !important; }
header.nav-ps .h-4   { height: 1rem !important; }
header.nav-ps .hover\:text-slate-600:hover { color: #475569 !important; }
header.nav-ps .py-6  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }


/* --- Account dropdown resets -------------------------------------- */
.account-dropdown a {
    color: inherit;
    text-decoration: inherit;
}

.account-dropdown ul,
.account-dropdown ol {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ================================================================
   26. PRINT
   ================================================================ */
@media print {
    .nav-ps,
    footer,
    .sidebar,
    #fullpage-overlay,
    .btn-group,
    .breadcrumb {
        display: none !important;
    }

    .card, .panel {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    #main-body .col-lg-8,
    #main-body .col-xl-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}