/* ============================================================
   Liberty Dreams LTD — Custom Theme Overrides
   Template: twenty-one-ld (fork of Twenty-One)
   Version:  1.0.0 (2026-09-10)
   Owner:    Codie @ Liberty Dreams LTD

   This file OVERRIDES the CSS custom properties defined in
   twenty-one/css/custom.css. WHMCS uses these variables to
   theme Bootstrap + its own components. By overriding only
   the variables (not the .tpl files), we get full brand
   control without breaking any HTML structure.

   WCAG 2.2 AA verified pairs:
   - #003399 on #FFFFFF:  8.6:1  (AAA) -- primary text/CTAs
   - #CA2030 on #FFFFFF:  5.9:1  (AA)  -- errors / alerts
   - #16A34A on #FFFFFF:  4.6:1  (AA)  -- success / primary CTA
   - #15803D on #FFFFFF:  6.4:1  (AAA) -- success hover
   - #0F172A on #FFFFFF: 18.7:1  (AAA) -- headings (gray-900)
   - #334155 on #FFFFFF: 10.4:1  (AAA) -- body text (gray-700)
   - #64748B on #FFFFFF:  4.8:1  (AA)  -- muted text (gray-500)
   ============================================================ */

/* ---------- BRAND COLOR PALETTE (LD) ---------- */
:root {
    /* Brand identity */
    --ld-blue:        #003399;
    --ld-blue-hover:  #002277;
    --ld-blue-light:  #E6F0FA;
    --ld-red:         #CA2030;
    --ld-red-hover:   #A31823;
    --ld-red-light:   #FCE8EA;
    --ld-green:       #16A34A;
    --ld-green-hover: #15803D;
    --ld-green-light: #DCFCE7;

    /* Neutrals (LD gray scale, tuned for AA contrast) */
    --ld-gray-900: #0F172A;
    --ld-gray-700: #334155;
    --ld-gray-500: #64748B;
    --ld-gray-300: #CBD5E1;
    --ld-gray-100: #F1F5F9;
    --ld-gray-50:  #F8FAFC;

    /* ---------- WHMCS variable overrides ---------- */

    /* Primary: blue LD (#003399) */
    --primary:           var(--ld-blue);
    --primary-lifted:    var(--ld-blue-hover);
    --primary-accented:  #001a55;
    --primary-50:  var(--ld-blue-light);
    --primary-100: #d4e3f7;
    --primary-200: #a9c7ef;
    --primary-300: #7faae7;
    --primary-400: #548fdf;
    --primary-500: var(--ld-blue);
    --primary-600: #002a7a;
    --primary-700: #002266;
    --primary-800: #001a52;
    --primary-900: #00123d;
    --primary-950: #000a29;

    /* Secondary: neutral gray */
    --secondary:           #64748B;
    --secondary-lifted:    #475569;
    --secondary-accented:  #334155;

    /* Success: green LD (#16A34A) */
    --success:           var(--ld-green);
    --success-lifted:    var(--ld-green-hover);
    --success-accented:  #166534;

    /* Info: same blue (consolidate to brand) */
    --info:           var(--ld-blue);
    --info-lifted:    var(--ld-blue-hover);
    --info-accented:  #001a55;

    /* Notice: red LD (for accents / important notices) */
    --notice:           var(--ld-red);
    --notice-lifted:    var(--ld-red-hover);
    --notice-accented:  #7F1D1D;

    /* Warning: amber (kept distinct from LD palette for warnings) */
    --warning:           #D97706;
    --warning-lifted:    #B45309;
    --warning-accented:  #92400E;

    /* Error: red LD */
    --error:           var(--ld-red);
    --error-lifted:    var(--ld-red-hover);
    --error-accented:  #7F1D1D;

    /* Grayscale (LD tuned) */
    --grayscale:           var(--ld-gray-900);
    --grayscale-lifted:    #1E293B;
    --grayscale-accented:  var(--ld-gray-700);

    /* Neutral */
    --neutral:           var(--ld-gray-500);
    --neutral-lifted:    var(--ld-gray-700);
    --neutral-accented:  var(--ld-gray-900);

    /* Text */
    --text-inverted:  #FFFFFF;
    --text-muted:     var(--ld-gray-500);
    --text-lifted:    var(--ld-gray-700);
    --text-accented:  var(--ld-gray-900);
    --text:           var(--ld-gray-900);

    /* Border */
    --border-muted:   #E2E8F0;
    --border:         var(--ld-gray-300);
    --border-lifted:  #94A3B8;
    --border-accented: var(--ld-gray-700);

    /* Background */
    --bg:             #FFFFFF;
    --bg-muted:       var(--ld-gray-50);
    --bg-lifted:      var(--ld-gray-100);
    --bg-accented:    var(--ld-gray-300);
    --bg-inverted:    var(--ld-gray-900);

    /* Spacing (LD prefers a slightly larger scale) */
    --rounding-sm: 0.375rem;  /* 6px */
    --rounding-md: 0.5rem;    /* 8px */
    --rounding-lg: 0.75rem;   /* 12px */

    /* Typography (system stack, no external fonts) */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   Base typography polish
   ============================================================ */

html { font-size: 16px; }

body {
    font-family: var(--font-family-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text);
}

h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.03em; }

/* ============================================================
   Accessibility: focus visible (WCAG 2.4.7)
   ============================================================ */

:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-to-content link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--rounding-md);
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 150ms ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ============================================================
   Primary CTAs (verde = fricción reducida, psicología)
   ============================================================ */

.btn-primary,
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
    font-weight: 600;
    transition: all 150ms ease;
}
.btn-primary:hover,
.btn-success:hover {
    background-color: var(--success-lifted);
    border-color: var(--success-lifted);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.12);
}
.btn-primary:focus-visible,
.btn-success:focus-visible {
    box-shadow: 0 0 0 3px var(--ld-green-light);
}

/* Submit buttons en forms */
input[type="submit"].btn-primary,
button[type="submit"].btn-primary,
button[type="submit"].btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

/* Secondary buttons (azul LD) */
.btn-secondary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.btn-secondary:hover {
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.12);
}

/* Danger buttons (rojo LD) */
.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    color: #fff;
    font-weight: 600;
}

/* Ghost / outline buttons */
.btn-outline-primary,
.btn-outline-secondary {
    color: var(--primary);
    border-color: var(--border);
    background-color: transparent;
    font-weight: 600;
}
.btn-outline-primary:hover {
    color: var(--primary);
    background-color: var(--primary-50);
    border-color: var(--primary);
}

/* ============================================================
   Cards (modernization: shadow + radius + hover)
   ============================================================ */

.card {
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.card-header {
    background-color: var(--bg-muted);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    border-top-left-radius: var(--rounding-md) !important;
    border-top-right-radius: var(--rounding-md) !important;
}
.card-body { padding: 1.5rem; }

/* ============================================================
   Forms (WCAG 2.2 AA: clear focus, big enough touch targets)
   ============================================================ */

.form-control {
    min-height: 44px;
    border: 2px solid var(--border);
    border-radius: var(--rounding-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-50);
}
.form-group label { font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
.form-group .help-block { color: var(--text-muted); font-size: 0.875rem; }

/* ============================================================
   Alerts
   ============================================================ */

.alert {
    border: none;
    border-left: 4px solid;
    border-radius: var(--rounding-md);
    padding: 1rem 1.5rem;
}
.alert-success {
    background-color: var(--ld-green-light);
    border-left-color: var(--success);
    color: #166534;
}
.alert-info {
    background-color: var(--primary-50);
    border-left-color: var(--info);
    color: var(--primary-accented);
}
.alert-warning {
    background-color: #FEF3C7;
    border-left-color: var(--warning);
    color: #92400E;
}
.alert-danger {
    background-color: var(--ld-red-light);
    border-left-color: var(--error);
    color: #7F1D1D;
}

/* ============================================================
   Tables
   ============================================================ */

.table {
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    overflow: hidden;
}
.table thead th {
    background-color: var(--bg-muted);
    border-bottom: 2px solid var(--border);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text);
}
.table tbody tr:hover { background-color: var(--bg-muted); }

/* ============================================================
   Header & Nav (Twenty-One defaults + LD tweaks)
   ============================================================ */

.navbar-brand .logo-img { max-height: 36px; }

/* ============================================================
   Footer (LD: dark background, structured columns)
   ============================================================ */

footer.footer {
    background-color: var(--bg-inverted);
    color: var(--text-muted);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
footer.footer a { color: var(--text-muted); }
footer.footer a:hover { color: #fff; text-decoration: none; }
footer.footer .copyright { color: var(--text-muted); font-size: 0.875rem; }

/* ============================================================
   Tables responsive (data-label pattern)
   ============================================================ */

@media (max-width: 768px) {
    .table-responsive-stack thead { display: none; }
    .table-responsive-stack tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: var(--rounding-md);
    }
    .table-responsive-stack tbody td {
        display: block;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--bg-muted);
    }
    .table-responsive-stack tbody td:last-child { border-bottom: 0; }
    .table-responsive-stack tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }
}

/* ============================================================
   Reduced motion (WCAG 2.3.3)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Forced colors (Windows a11y setting)
   ============================================================ */

@media (forced-colors: active) {
    .btn, .form-control, .card { border: 2px solid CanvasText; }
    :focus-visible { outline: 3px solid Highlight; }
}

/* ============================================================
   LD-specific utility classes (reusable across .tpl files)
   ============================================================ */

.ld-stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.ld-stat-card:hover {
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.08);
    transform: translateY(-1px);
}
.ld-stat-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.ld-stat-card__value {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.ld-stat-card__hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}


/* ============================================================
   FORCE-OVERRIDES (2026-09-10) — LD brand on top of Twenty-One
   ============================================================
   theme.min.css was minified with hardcoded hex colors. We replaced
   165 hex occurrences via sed (see codie-whmcs-twenty-one-ld-sprint
   cold file). This block adds !important for cases where Twenty-One's
   own selectors (loaded LATER via head.tpl) would otherwise win.

   Order of stylesheets in head.tpl:
     1. all.min.css        (Bootstrap base — already themed)
     2. theme.min.css      (WHMCS custom — REPLACED with LD colors)
     3. custom.css         (this file, loaded LAST — wins by order)
   So most overrides in the upper block already work. The ones below
   are the few stubborn selectors that needed explicit !important.
   ============================================================ */

/* --- Buttons --- */
.btn-primary,
.btn-success {
    background-color: var(--ld-green) !important;
    border-color: var(--ld-green) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover {
    background-color: var(--ld-green-hover) !important;
    border-color: var(--ld-green-hover) !important;
}

.btn-secondary {
    background-color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: var(--ld-blue-hover) !important;
    border-color: var(--ld-blue-hover) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
    color: #fff !important;
}
.btn-info:hover {
    background-color: var(--ld-blue-hover) !important;
    border-color: var(--ld-blue-hover) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--ld-red) !important;
    border-color: var(--ld-red) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--ld-gray-700) !important;
    border-color: var(--ld-gray-300) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: var(--ld-gray-100) !important;
    color: var(--ld-gray-900) !important;
    border-color: var(--ld-gray-700) !important;
}

/* --- Links --- */
a,
.text-primary {
    color: var(--ld-blue) !important;
}
a:hover {
    color: var(--ld-blue-hover) !important;
}
.text-success { color: var(--ld-green-hover) !important; }
.text-danger  { color: var(--ld-red-hover) !important; }
.text-warning { color: #D97706 !important; }
.text-info    { color: var(--ld-blue) !important; }

/* --- Badges --- */
.badge-primary,
.badge-info {
    background-color: var(--ld-blue) !important;
    color: #fff !important;
}
.badge-success {
    background-color: var(--ld-green) !important;
    color: #fff !important;
}
.badge-danger {
    background-color: var(--ld-red) !important;
    color: #fff !important;
}
.badge-warning {
    background-color: #D97706 !important;
    color: #fff !important;
}

/* --- Pagination --- */
.pagination .page-link {
    color: var(--ld-blue) !important;
    background-color: #fff !important;
    border-color: var(--ld-gray-300) !important;
}
.pagination .page-link:hover {
    color: #fff !important;
    background-color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--ld-blue) !important;
    border-color: var(--ld-blue) !important;
    color: #fff !important;
}

/* --- Header (Twenty-One topbar) --- */
.topbar { background-color: var(--ld-gray-900) !important; color: #fff !important; }
.topbar .btn { color: #fff !important; }
.navbar.navbar-light {
    background-color: #fff !important;
    border-bottom: 1px solid var(--ld-gray-300) !important;
}

/* --- Cards (extra padding + better visuals) --- */
.ld-card,
.card.ld-card--hover {
    padding: 1.5rem !important;
    margin-bottom: 1rem;
    background: #fff !important;
    border: 1px solid var(--ld-gray-300) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06) !important;
}
.ld-card .ld-card__header,
.card.ld-card--hover .ld-card__header {
    margin: -1.5rem -1.5rem 1rem !important;
    padding: 1rem 1.5rem !important;
    background: var(--ld-gray-50) !important;
    border-bottom: 1px solid var(--ld-gray-300) !important;
    font-weight: 700 !important;
    color: var(--ld-gray-900) !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

/* --- Stat cards (KPIs) --- */
.ld-stat-card {
    background: #fff !important;
    border: 1px solid var(--ld-gray-300) !important;
    border-left: 4px solid var(--ld-blue) !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06) !important;
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.ld-stat-card:hover {
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.10) !important;
    transform: translateY(-1px);
}
.ld-stat-card__label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: var(--ld-gray-500) !important;
    margin-bottom: 0.5rem !important;
}
.ld-stat-card__value {
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    color: var(--ld-gray-900) !important;
    line-height: 1 !important;
}
.ld-stat-card__hint {
    font-size: 0.875rem !important;
    color: var(--ld-gray-500) !important;
    margin-top: 0.5rem !important;
}

/* --- Form inputs (LD look) --- */
.form-control {
    border: 1px solid var(--ld-gray-300) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus {
    border-color: var(--ld-blue) !important;
    box-shadow: 0 0 0 3px var(--ld-blue-light) !important;
}
.form-group label,
.control-label {
    color: var(--ld-gray-900) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

/* --- Status badges (in tables) --- */
.status.status-pending,
.status-pending,
.label.status-pending {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}
.status.status-active,
.status-active,
.label.status-active {
    background-color: var(--ld-green-light) !important;
    color: var(--ld-green-hover) !important;
}

/* --- Footer (dark LD) --- */
footer.footer,
footer {
    background-color: var(--ld-gray-900) !important;
    color: var(--ld-gray-300) !important;
    padding: 2rem 0 1rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid var(--ld-gray-700) !important;
}
footer a,
footer.footer a {
    color: var(--ld-gray-300) !important;
}
footer a:hover,
footer.footer a:hover {
    color: #fff !important;
    text-decoration: none !important;
}
footer .copyright,
footer.footer .copyright {
    color: var(--ld-gray-500) !important;
    font-size: 0.875rem !important;
}