/* =============================================================================
   CLUBMAN ERP — Global Theme Enhancement Layer
   Loads after UX.new.css — enhances AdminLTE 2.x across all 24+ modules
   Color palette:  Crimson #a22427  |  Dark #1B1C1E  |  Gold #f0a500  |  Green #10b981
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --cm-primary:   #a22427;
    --cm-primary-dk:#7d1a1d;
    --cm-primary-lt:#c93136;
    --cm-dark:      #1B1C1E;
    --cm-dark-mid:  #2d2f31;
    --cm-gold:      #f0a500;
    --cm-gold-lt:   #f7c84a;
    --cm-green:     #10b981;
    --cm-green-dk:  #059669;
    --cm-blue:      #3b82f6;
    --cm-blue-dk:   #1d4ed8;
    --cm-orange:    #f97316;
    --cm-purple:    #8b5cf6;
    --cm-white:     #ffffff;
    --cm-off-white: #f8fafc;
    --cm-gray-50:   #f9fafb;
    --cm-gray-100:  #f1f5f9;
    --cm-gray-200:  #e2e8f0;
    --cm-gray-400:  #94a3b8;
    --cm-gray-600:  #475569;
    --cm-gray-800:  #1e293b;
    --cm-radius:    10px;
    --cm-radius-lg: 14px;
    --cm-shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --cm-shadow:    0 4px 12px rgba(0,0,0,.12);
    --cm-shadow-lg: 0 10px 30px rgba(0,0,0,.15);
    --cm-transition: all .2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BODY & GLOBAL TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Standard font-size scale — inherited by ALL content pages ──────────────
   Define once here; per-page :root blocks MUST use these same values.
   Base: content-wrapper = 15px. Scale is rem-relative to that.
   xs   = 12px   sm  = 13px   base = 15px
   md   = 17px   lg  = 22px   xl   = 28px
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --font-xs:   .8rem;
    --font-sm:   .867rem;
    --font-base: 1rem;
    --font-md:   1.133rem;
    --font-lg:   1.467rem;
    --font-xl:   1.867rem;
    --font-2xl:  2.2rem;
    --font-3xl:  2.667rem;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 14px;
    color: var(--cm-gray-800);
    background-color: #f0f2f5 !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
}

a { transition: color .15s ease; }
a:hover { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   3. CONTENT WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.content-wrapper {
    background-color: #f0f2f5 !important;
    min-height: calc(100vh - 100px);
    font-size: 15px; /* content-area base — all rem tokens resolve against this */
}

.content {
    padding: 20px 24px;
    width: 100% !important;
    font-size: inherit;
}

/* ── Ensure all standard text elements in content inherit the larger base ── */
.content-wrapper td,
.content-wrapper th,
.content-wrapper label,
.content-wrapper input,
.content-wrapper select,
.content-wrapper textarea,
.content-wrapper p,
.content-wrapper span:not(.label):not(.badge) {
    font-size: inherit;
}

/* ── Table global defaults inside content ──────────────────────────────── */
.content-wrapper .table > thead > tr > th {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.content-wrapper .table > tbody > tr > td {
    font-size: 14px;
    vertical-align: middle;
}

/* ── Form controls ─────────────────────────────────────────────────────── */
.content-wrapper .form-control {
    font-size: 14px;
}
.content-wrapper label.control-label {
    font-size: 14px;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. PAGE HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.content-header {
    padding: 16px 24px 8px !important;
    background: transparent;
}

.content-header h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--cm-dark) !important;
    margin: 0 !important;
    line-height: 1.3;
}

.content-header h1 small {
    font-size: 13px;
    font-weight: 400;
    color: var(--cm-gray-400);
    margin-left: 8px;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
    font-size: 12px;
}

.breadcrumb > li + li::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    color: var(--cm-gray-400);
    padding: 0 6px;
}

.breadcrumb > .active {
    color: var(--cm-primary);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. CARDS / BOX COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */
.box {
    border-radius: var(--cm-radius-lg) !important;
    border: none !important;
    box-shadow: var(--cm-shadow) !important;
    background: var(--cm-white) !important;
    margin-bottom: 20px;
    transition: box-shadow .2s ease;
    overflow: hidden;
}

.box:hover {
    box-shadow: var(--cm-shadow-lg) !important;
}

/* Box top border accent */
.box.box-primary   { border-top: 3px solid var(--cm-primary) !important; }
.box.box-info      { border-top: 3px solid var(--cm-blue) !important; }
.box.box-success   { border-top: 3px solid var(--cm-green) !important; }
.box.box-warning   { border-top: 3px solid var(--cm-gold) !important; }
.box.box-danger    { border-top: 3px solid #ef4444 !important; }
.box.box-default   { border-top: 3px solid var(--cm-gray-400) !important; }

.box-header {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--cm-gray-200) !important;
    background: var(--cm-white) !important;
    border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0 !important;
    display: flex;
    align-items: center;
}

.box-header.with-border {
    border-bottom: 1px solid var(--cm-gray-200) !important;
}

.box-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--cm-dark) !important;
    font-family: 'Segoe UI', sans-serif !important;
    margin: 0 !important;
}

.box-body {
    padding: 18px !important;
    background: var(--cm-white) !important;
}

.box-footer {
    padding: 12px 18px !important;
    border-top: 1px solid var(--cm-gray-200) !important;
    background: var(--cm-gray-50) !important;
    border-radius: 0 0 var(--cm-radius-lg) var(--cm-radius-lg) !important;
}

/* Collapsible box tools */
.box-tools .btn {
    background: transparent !important;
    border: none !important;
    color: var(--cm-gray-600) !important;
    padding: 2px 6px !important;
    font-size: 13px;
}
.box-tools .btn:hover { color: var(--cm-dark) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. DASHBOARD SMALL-BOXES
   ───────────────────────────────────────────────────────────────────────────── */
.small-box {
    border-radius: var(--cm-radius-lg) !important;
    box-shadow: var(--cm-shadow) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    overflow: hidden;
    cursor: pointer;
}

.small-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--cm-shadow-lg) !important;
}

.small-box > .inner {
    padding: 16px 18px 10px !important;
}

.small-box > .inner h3 {
    font-size: 34px !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
    line-height: 1;
}

.small-box > .inner p {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    opacity: .9;
}

.small-box > .icon {
    top: 10px !important;
    right: 14px !important;
    font-size: 70px !important;
    opacity: .18 !important;
}

.small-box-footer {
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    background: rgba(0,0,0,.15) !important;
    transition: background .2s;
}

.small-box-footer:hover,
.small-box-footer:focus {
    background: rgba(0,0,0,.28) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. TABLES
   ───────────────────────────────────────────────────────────────────────────── */
.table {
    font-size: 13px;
    color: var(--cm-gray-800);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--cm-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 11px 14px !important;
    border: none !important;
    white-space: nowrap;
}

.table > thead > tr > th:first-child { border-radius: 0; }

.table > tbody > tr > td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--cm-gray-200) !important;
    color: var(--cm-gray-800);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--cm-gray-50) !important;
}

.table-hover > tbody > tr:hover > td {
    background-color: #fff3f3 !important;
    transition: background-color .15s;
}

.table-bordered {
    border: 1px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius);
    overflow: hidden;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--cm-gray-200) !important;
}

/* Table inside box — remove double borders */
.box .table-responsive { border: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   8. DATATABLES ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input {
    border: 2px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius) !important;
    padding: 6px 12px !important;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--cm-primary) !important;
    box-shadow: 0 0 0 3px rgba(162,36,39,.12) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 2px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius) !important;
    padding: 4px 8px !important;
}

.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border: 1px solid var(--cm-gray-200) !important;
    margin: 0 2px !important;
    color: var(--cm-gray-600) !important;
    transition: all .15s !important;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--cm-primary) !important;
    color: #fff !important;
    border-color: var(--cm-primary) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--cm-primary) !important;
    color: #fff !important;
    border-color: var(--cm-primary) !important;
    font-weight: 700 !important;
}

.dataTables_info {
    font-size: 12px !important;
    color: var(--cm-gray-600) !important;
    padding-top: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. FORM CONTROLS
   ───────────────────────────────────────────────────────────────────────────── */
.form-control {
    border: 2px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius) !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    font-family: 'Segoe UI', sans-serif !important;
    color: var(--cm-gray-800) !important;
    background: var(--cm-white) !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    height: auto !important;
}

.form-control:focus {
    border-color: var(--cm-primary) !important;
    box-shadow: 0 0 0 3px rgba(162,36,39,.12) !important;
    background: var(--cm-white) !important;
    outline: none !important;
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--cm-gray-100) !important;
    color: var(--cm-gray-400) !important;
    cursor: not-allowed;
}

label {
    font-weight: 600 !important;
    font-size: 12.5px !important;
    color: var(--cm-gray-600) !important;
    margin-bottom: 5px;
}

.form-group { margin-bottom: 16px !important; }

/* Input groups */
.input-group-addon {
    background: var(--cm-gray-100) !important;
    border: 2px solid var(--cm-gray-200) !important;
    border-right: none !important;
    border-radius: var(--cm-radius) 0 0 var(--cm-radius) !important;
    color: var(--cm-gray-600);
    font-size: 13px;
}

.input-group .form-control:last-child,
.input-group-addon:last-child + .form-control {
    border-left: none !important;
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0 !important;
}

.input-group .form-control:not(:last-child) {
    border-radius: var(--cm-radius) 0 0 var(--cm-radius) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    border: 2px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius) !important;
    height: 38px !important;
    line-height: 34px !important;
    font-family: 'Segoe UI', sans-serif;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 10px !important;
    font-size: 13.5px;
    color: var(--cm-gray-800);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--cm-primary) !important;
    box-shadow: 0 0 0 3px rgba(162,36,39,.12) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--cm-primary) !important;
}
.select2-dropdown {
    border: 2px solid var(--cm-gray-200) !important;
    border-radius: var(--cm-radius) !important;
    box-shadow: var(--cm-shadow-lg) !important;
    font-size: 13.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--cm-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', sans-serif !important;
    padding: 7px 16px !important;
    transition: all .2s ease !important;
    border: none !important;
    letter-spacing: .2px;
    cursor: pointer;
}

.btn:focus, .btn:active:focus { outline: none !important; }

.btn-primary,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--cm-primary-lt), var(--cm-primary-dk)) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(162,36,39,.35) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--cm-primary), var(--cm-primary-dk)) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(162,36,39,.45) !important;
}

.btn-success,
.btn-success:focus {
    background: linear-gradient(135deg, #34d399, var(--cm-green-dk)) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(16,185,129,.3) !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--cm-green), #047857) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(16,185,129,.4) !important;
}

.btn-info,
.btn-info:focus {
    background: linear-gradient(135deg, #60a5fa, var(--cm-blue-dk)) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(59,130,246,.3) !important;
}
.btn-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(59,130,246,.4) !important;
}

.btn-warning,
.btn-warning:focus {
    background: linear-gradient(135deg, var(--cm-gold-lt), var(--cm-gold)) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(240,165,0,.3) !important;
}
.btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(240,165,0,.4) !important;
}

.btn-danger,
.btn-danger:focus {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(220,38,38,.3) !important;
}
.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(220,38,38,.4) !important;
}

.btn-default {
    background: var(--cm-white) !important;
    color: var(--cm-gray-800) !important;
    border: 2px solid var(--cm-gray-200) !important;
    box-shadow: var(--cm-shadow-sm) !important;
}
.btn-default:hover {
    background: var(--cm-gray-100) !important;
    border-color: var(--cm-gray-400) !important;
}

.btn-xs { padding: 3px 9px !important; font-size: 11px !important; border-radius: 6px !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 11px 22px !important; font-size: 15px !important; }

/* Print button override */
.btn-print {
    background: linear-gradient(135deg, var(--cm-primary-lt), var(--cm-primary-dk)) !important;
    border-radius: var(--cm-radius) !important;
    box-shadow: 0 3px 10px rgba(162,36,39,.3) !important;
}
.btn-print:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(162,36,39,.4) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. BADGES & LABELS
   ───────────────────────────────────────────────────────────────────────────── */
.label, .badge {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    letter-spacing: .3px;
}

.label-primary, .badge-primary  { background: var(--cm-primary) !important; }
.label-success, .badge-success  { background: var(--cm-green) !important; }
.label-info, .badge-info        { background: var(--cm-blue) !important; }
.label-warning, .badge-warning  { background: var(--cm-gold) !important; color: #fff !important; }
.label-danger, .badge-danger    { background: #ef4444 !important; }
.label-default, .badge-default  { background: var(--cm-gray-400) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. ALERTS
   ───────────────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--cm-radius) !important;
    border: none !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500;
}

.alert-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-left: 4px solid var(--cm-green) !important;
}
.alert-danger, .alert-error {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-left: 4px solid #ef4444 !important;
}
.alert-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-left: 4px solid var(--cm-gold) !important;
}
.alert-info {
    background: #dbeafe !important;
    color: #1e40af !important;
    border-left: 4px solid var(--cm-blue) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. MODALS
   ───────────────────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--cm-radius-lg) !important;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.25) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--cm-dark), var(--cm-dark-mid)) !important;
    color: #fff !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
    border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0 !important;
}

.modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.modal-header .close {
    color: rgba(255,255,255,.7) !important;
    opacity: 1 !important;
    font-size: 22px !important;
    text-shadow: none !important;
    transition: color .15s;
}
.modal-header .close:hover { color: #fff !important; }

.modal-body {
    padding: 24px !important;
    font-size: 14px;
}

.modal-footer {
    padding: 14px 20px !important;
    border-top: 1px solid var(--cm-gray-200) !important;
    background: var(--cm-gray-50) !important;
    border-radius: 0 0 var(--cm-radius-lg) var(--cm-radius-lg) !important;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-backdrop.in { opacity: .45 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   14. NAV TABS & PILLS
   ───────────────────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--cm-gray-200) !important;
}

.nav-tabs > li > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cm-gray-600) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    transition: all .2s;
    margin-right: 0 !important;
}

.nav-tabs > li > a:hover {
    color: var(--cm-primary) !important;
    background: transparent !important;
    border-bottom-color: var(--cm-gray-200) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--cm-primary) !important;
    border-bottom: 3px solid var(--cm-primary) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.nav-pills > li > a {
    border-radius: var(--cm-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cm-gray-600) !important;
    padding: 7px 14px !important;
    transition: all .2s;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--cm-primary) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. PANELS (legacy Bootstrap 3)
   ───────────────────────────────────────────────────────────────────────────── */
.panel {
    border-radius: var(--cm-radius-lg) !important;
    border: 1px solid var(--cm-gray-200) !important;
    box-shadow: var(--cm-shadow-sm) !important;
    overflow: hidden;
}

.panel-heading {
    border-radius: var(--cm-radius-lg) var(--cm-radius-lg) 0 0 !important;
    padding: 12px 16px !important;
    font-weight: 700;
    font-size: 14px;
}

.panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--cm-primary-lt), var(--cm-primary-dk)) !important;
    border: none !important;
    color: #fff !important;
}

.panel-success > .panel-heading {
    background: linear-gradient(135deg, #34d399, var(--cm-green-dk)) !important;
    border: none !important;
    color: #fff !important;
}

.panel-info > .panel-heading {
    background: linear-gradient(135deg, #60a5fa, var(--cm-blue-dk)) !important;
    border: none !important;
    color: #fff !important;
}

.panel-warning > .panel-heading {
    background: linear-gradient(135deg, var(--cm-gold-lt), var(--cm-gold)) !important;
    border: none !important;
    color: #fff !important;
}

.panel-danger > .panel-heading {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    border: none !important;
    color: #fff !important;
}

.panel-default > .panel-heading {
    background: var(--cm-dark) !important;
    border: none !important;
    color: #fff !important;
}

.panel-body {
    padding: 16px !important;
    background: var(--cm-white) !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. TOP NAVBAR (HEADER)
   ───────────────────────────────────────────────────────────────────────────── */
.main-header .navbar {
    min-height: 50px;
}

.main-header .navbar .nav > li > a {
    color: rgba(255,255,255,.85) !important;
    font-size: 13px;
    padding: 12px 14px !important;
    transition: background .15s;
}

.main-header .navbar .nav > li > a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

/* Notification badges in nav */
.main-header .navbar .nav > li > a .label {
    font-size: 10px !important;
    padding: 2px 5px !important;
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. SIDEBAR ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.sidebar-menu > li > a {
    font-size: 13px !important;
    font-weight: 500;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 9px 14px !important;
    transition: all .2s ease !important;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    margin-right: 8px;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
    border-radius: 8px !important;
}

.treeview-menu {
    border-radius: 8px !important;
    overflow: hidden;
    margin: 0 8px !important;
}

.treeview-menu > li > a {
    padding: 7px 12px 7px 26px !important;
    font-size: 12.5px !important;
    transition: background .15s !important;
    border-radius: 6px !important;
    margin: 1px 4px !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(255,255,255,.12) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. FORM HORIZONTAL LAYOUT IMPROVEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.form-horizontal .control-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--cm-gray-600) !important;
    padding-top: 8px !important;
    text-align: right !important;
}

@media (max-width: 768px) {
    .form-horizontal .control-label {
        text-align: left !important;
        padding-top: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. CHECKBOXES & RADIO (iCheck style)
   ───────────────────────────────────────────────────────────────────────────── */
.icheckbox_square-blue.checked,
.icheckbox_square-blue.checked.disabled {
    background-color: var(--cm-primary) !important;
    border-color: var(--cm-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. RESPONSIVE TABLE WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.table-responsive {
    border-radius: var(--cm-radius) !important;
    border: 1px solid var(--cm-gray-200) !important;
    overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
}
.status-badge.success { background: #d1fae5; color: #065f46; }
.status-badge.pending { background: #fef3c7; color: #92400e; }
.status-badge.danger  { background: #fee2e2; color: #991b1b; }
.status-badge.info    { background: #dbeafe; color: #1e40af; }
.status-badge.gray    { background: var(--cm-gray-100); color: var(--cm-gray-600); }

/* Amount display */
.cm-amount {
    font-weight: 700;
    font-size: 14px;
    color: var(--cm-dark);
    font-variant-numeric: tabular-nums;
}
.cm-amount.positive { color: var(--cm-green-dk); }
.cm-amount.negative { color: #dc2626; }

/* Section heading */
.cm-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cm-dark);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cm-gray-200);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cm-section-title i {
    color: var(--cm-primary);
    font-size: 16px;
}

/* Empty state */
.cm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--cm-gray-400);
}
.cm-empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}
.cm-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* Stat card (for report/summary sections) */
.cm-stat-card {
    background: var(--cm-white);
    border-radius: var(--cm-radius-lg);
    padding: 16px 20px;
    box-shadow: var(--cm-shadow-sm);
    border-left: 4px solid var(--cm-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cm-stat-card .stat-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cm-gray-600);
}
.cm-stat-card .stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--cm-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cm-stat-card.green  { border-left-color: var(--cm-green); }
.cm-stat-card.blue   { border-left-color: var(--cm-blue); }
.cm-stat-card.gold   { border-left-color: var(--cm-gold); }
.cm-stat-card.purple { border-left-color: var(--cm-purple); }

/* ─────────────────────────────────────────────────────────────────────────────
   22. PRINT STYLES
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    .main-sidebar,
    .main-header,
    .btn-print,
    .content-header .breadcrumb,
    .box-tools { display: none !important; }

    .content-wrapper {
        margin-left: 0 !important;
        background: #fff !important;
    }

    .box {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .table > thead > tr > th {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. SCROLLBAR STYLING
   ───────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cm-gray-100); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--cm-gray-400); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--cm-primary); }

/* ─────────────────────────────────────────────────────────────────────────────
   24. LOADER OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */
#loader-wrapper {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(3px);
}

#loader {
    z-index: 9999 !important;
}

#loader label {
    background: linear-gradient(135deg, var(--cm-primary-lt), var(--cm-primary-dk)) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: .4em 1.5em !important;
    box-shadow: 0 4px 16px rgba(162,36,39,.3);
}

#loader-wrapper .loader-section {
    background: rgba(255,255,255,.5) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. TRANSITION ANIMATION — page slide-in
   ───────────────────────────────────────────────────────────────────────────── */
.content-wrapper {
    animation: cm-fadein .25s ease forwards;
}

@keyframes cm-fadein {
    from { opacity: .6; transform: translateY(8px); }
    to   { opacity: 1;  transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   26. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .content { padding: 14px 16px; }
    .box-body { padding: 14px !important; }
}

@media (max-width: 767px) {
    .content { padding: 12px; }
    .content-header h1 { font-size: 18px !important; }
    .small-box > .inner h3 { font-size: 26px !important; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 8px 10px !important; font-size: 12px; }
    .btn { padding: 6px 12px !important; font-size: 12px !important; }
    .modal-footer { flex-wrap: wrap; }
}

/* =============================================================================
   27. PREMIUM HEADER — World-class top navigation bar
   ============================================================================= */

/* ── Main header strip ──────────────────────────────────────────────────────── */
.main-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1040;
    box-shadow: 0 2px 20px rgba(0,0,0,.45) !important;
}

/* OLD section-16 navbar gradient — DISABLED: now handled by section 30 .cm-navbar-shell */
/*
.skin-blue .main-header .navbar,
.main-header .navbar {
    background: linear-gradient(110deg, #0d0e12 0%, #1a1b21 38%, #9f2427 100%) !important;
}
*/
.main-header .navbar {
    border: none !important;
    min-height: 56px !important;
    padding: 0 !important;
    position: relative;
}

/* ── Sidebar toggle (hamburger) ─────────────────────────────────────────────── */
.skin-blue .main-header .navbar .sidebar-toggle,
.main-header .navbar .sidebar-toggle {
    width: 54px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 18px !important;
    color: rgba(255,255,255,.75) !important;
    padding: 0 !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    transition: background .2s, color .2s !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .sidebar-toggle:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}
.main-header .navbar .sidebar-toggle::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f0c9';
    font-size: 16px;
}
/* Hide default AdminLTE bars icon since we're using ::before */
.main-header .navbar .sidebar-toggle .icon-bar { display: none !important; }

/* ── Club branding centre box ────────────────────────────────────────────────── */
.club-name-box {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 10;
}

.clubLogo {
    flex-shrink: 0;
}

.clubLogo img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    border: 2px solid rgba(240,165,0,.55) !important;
    box-shadow: 0 0 12px rgba(240,165,0,.3), 0 0 0 4px rgba(240,165,0,.1) !important;
    background: rgba(255,255,255,.08);
    padding: 1px;
    vertical-align: middle !important;
    float: none !important;
    margin: 0 !important;
}

/* TSGC override for larger logo */
.clubLogo img[style*="86px"] {
    width: 44px !important;
    height: 44px !important;
}

.club-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    color: #fff !important;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
    font-family: 'Segoe UI', system-ui, sans-serif;
    line-height: 1;
}

/* Gear icon inside club-name */
.club-name a[data-toggle="control-sidebar"] {
    display: none !important; /* Relocated to right nav */
}

/* ── Right navbar actions ────────────────────────────────────────────────────── */
.navbar-custom-menu {
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

.skin-blue .main-header .navbar .nav > li > a,
.navbar-custom-menu .nav > li > a {
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 16px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 13.5px !important;
    transition: background .2s, color .2s !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.skin-blue .main-header .navbar .nav > li > a:hover,
.navbar-custom-menu .nav > li > a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

/* User dropdown trigger */
.navbar-custom-menu .user-menu > a.dropdown-toggle {
    padding: 0 18px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 56px !important;
}

/* User avatar in header */
.navbar-custom-menu .user-image {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(240,165,0,.7) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,.18) !important;
    object-fit: cover !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* User name text in header */
.navbar-custom-menu .hidden-xs {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.88) !important;
    letter-spacing: .1px;
}

/* ── User dropdown menu ──────────────────────────────────────────────────────── */
.navbar-custom-menu .dropdown-menu {
    background: #1a1b21 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
    min-width: 220px !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-top: 2px !important;
}

/* Dropdown user-header block */
.navbar-custom-menu .user-header {
    background: linear-gradient(135deg, #0d0e12, #9f2427) !important;
    padding: 18px 16px !important;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.navbar-custom-menu .user-header .img-circle {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid rgba(240,165,0,.6) !important;
    box-shadow: 0 0 0 5px rgba(240,165,0,.15) !important;
    object-fit: cover;
    border-radius: 50% !important;
}
.navbar-custom-menu .user-header p {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 10px 0 2px !important;
}
.navbar-custom-menu .user-header small {
    color: rgba(255,255,255,.55) !important;
    font-size: 11.5px !important;
}

/* Dropdown footer actions */
.navbar-custom-menu .user-footer {
    background: #1a1b21 !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px;
}
.navbar-custom-menu .user-footer .btn {
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    transition: background .2s !important;
}
.navbar-custom-menu .user-footer .btn:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}


/* =============================================================================
   28. PREMIUM SIDEBAR — World-class left navigation panel
   ============================================================================= */

/* ── Sidebar shell ──────────────────────────────────────────────────────────── */
.skin-blue .main-sidebar,
.main-sidebar {
    background: linear-gradient(180deg, #0d0e12 0%, #121418 60%, #0f1015 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 3px 0 24px rgba(0,0,0,.35) !important;
    width: 230px !important;
    position: fixed !important;
    top: 64px !important;           /* START below the 64px fixed header — clean separation */
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1030 !important;
    overflow: visible !important;   /* MUST be visible so collapsed flyout menus aren't clipped */
}

.sidebar,
section.sidebar,
.skin-blue .sidebar,
body.skin-blue .sidebar,
.main-sidebar .sidebar,
.main-sidebar .slimScrollDiv .sidebar {
    /* ── Kill UX.new.css purple/red gradient on .sidebar ── */
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    padding-top: 0 !important;     /* no extra padding needed — sidebar already starts at 64px */
    padding-bottom: 16px;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* slimScrollDiv wrapper — let AdminLTE handle its height, just fix overflow */
.main-sidebar .slimScrollDiv {
    padding-top: 0 !important;
    overflow: auto !important;
    height: 100% !important;
}
.main-sidebar .slimScrollDiv .sidebar {
    padding-top: 0 !important;
}

/* Thin custom scrollbar */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(240,165,0,.4); }

/* ── User panel (sidebar top) ────────────────────────────────────────────────── */
.skin-blue .user-panel,
.user-panel {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 16px 14px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.user-panel .pull-left.image {
    float: none !important;
    position: relative;
    flex-shrink: 0;
}

.user-panel .img-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2.5px solid rgba(240,165,0,.55) !important;
    box-shadow: 0 0 0 4px rgba(240,165,0,.12) !important;
}

/* Online status dot */
.user-panel .status-dot {
    display: block !important;
    position: absolute;
    bottom: 1px; right: 1px;
    width: 10px; height: 10px;
    background: #22c55e !important;
    border-radius: 50% !important;
    border: 2px solid #0d0e12 !important;
    box-shadow: 0 0 6px rgba(34,197,94,.6);
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,.5); }
    50%       { box-shadow: 0 0 10px rgba(34,197,94,.9), 0 0 18px rgba(34,197,94,.3); }
}

/* ── Sidebar search bar ─────────────────────────────────────────────────────── */
.cm-sidebar-search {
    position: relative;
    margin: 12px 12px 6px;
}
.cm-sidebar-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 13px;
    color: rgba(255,255,255,.35);
    pointer-events: none;
    -webkit-transition: color .2s;
    transition: color .2s;
}
.cm-sidebar-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    font-weight: 500;
    outline: none;
    -webkit-transition: border-color .2s, background .2s, -webkit-box-shadow .2s;
    transition: border-color .2s, background .2s, box-shadow .2s;
    box-sizing: border-box;
}
.cm-sidebar-search-input::-webkit-input-placeholder { color: rgba(255,255,255,.35); font-weight: 400; }
.cm-sidebar-search-input::-moz-placeholder           { color: rgba(255,255,255,.35); font-weight: 400; }
.cm-sidebar-search-input::placeholder                { color: rgba(255,255,255,.35); font-weight: 400; }
.cm-sidebar-search-input:focus {
    border-color: var(--cm-gold, #f0a500);
    background: rgba(255,255,255,.10);
    -webkit-box-shadow: 0 0 0 3px rgba(240,165,0,.12);
    box-shadow: 0 0 0 3px rgba(240,165,0,.12);
}
.cm-sidebar-search-input:focus ~ .cm-sidebar-search-icon {
    color: var(--cm-gold, #f0a500);
}
/* Light theme overrides */
body[data-cm-theme="light"] .cm-sidebar-search-input {
    background: #fff !important; border-color: #cbd5e1 !important; color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-input::-webkit-input-placeholder { color: #94a3b8 !important; }
body[data-cm-theme="light"] .cm-sidebar-search-input::placeholder                { color: #94a3b8 !important; }
body[data-cm-theme="light"] .cm-sidebar-search-icon { color: #94a3b8 !important; }
body[data-cm-theme="light"] .cm-sidebar-search-input:focus {
    border-color: #3b82f6 !important;
    -webkit-box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-input:focus ~ .cm-sidebar-search-icon { color: #3b82f6 !important; }
/* Hide non-matching items during search */
.sidebar-menu > li.cm-search-hidden { display: none !important; }

/* ── Sidebar menu list ────────────────────────────────────────────────────────── */
/* ── Sidebar search bar ────────────────────────────────────────────────────── */
.cm-sidebar-search {
    position: relative;
    margin: 12px 12px 6px;
}
.cm-sidebar-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: rgba(255,255,255,.35);
    pointer-events: none;
    transition: color .2s;
}
.cm-sidebar-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    font-weight: 500;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.cm-sidebar-search-input::placeholder {
    color: rgba(255,255,255,.35);
    font-weight: 400;
}
.cm-sidebar-search-input:focus {
    border-color: var(--cm-gold, #f0a500);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 3px rgba(240,165,0,.1);
}
.cm-sidebar-search-input:focus + .cm-sidebar-search-icon,
.cm-sidebar-search-input:focus ~ .cm-sidebar-search-icon {
    color: var(--cm-gold, #f0a500);
}
/* Light theme */
body[data-cm-theme="light"] .cm-sidebar-search-input {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-input::placeholder {
    color: #94a3b8 !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-icon {
    color: #94a3b8 !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
body[data-cm-theme="light"] .cm-sidebar-search-input:focus ~ .cm-sidebar-search-icon {
    color: #3b82f6 !important;
}
/* Hidden menu items during search */
.sidebar-menu > li.cm-search-hidden { display: none !important; }

.sidebar-menu {
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 8px !important;
}

/* Top-level item */
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
    padding: 11px 14px !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.7) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 2px !important;
    transition: background .18s ease, color .18s ease, padding-left .18s ease !important;
    position: relative;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    letter-spacing: .1px;
}

.sidebar-menu > li > a > i {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.45) !important;
    flex-shrink: 0;
    transition: color .18s ease !important;
}

.sidebar-menu > li > a > span {
    flex: 1;
    line-height: 1.3;
}

/* Hover state */
.skin-blue .sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > a {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    padding-left: 18px !important;
    border-left-color: rgba(240,165,0,.5) !important;
}
.sidebar-menu > li:hover > a > i {
    color: var(--cm-gold) !important;
}

/* Active state */
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
    background: linear-gradient(90deg, rgba(240,165,0,.14) 0%, rgba(240,165,0,.04) 100%) !important;
    color: #fff !important;
    border-left-color: var(--cm-gold) !important;
    padding-left: 18px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(240,165,0,.12);
}
.sidebar-menu > li.active > a > i {
    color: var(--cm-gold) !important;
}

/* ── Treeview expand arrow ──────────────────────────────────────────────────── */
.sidebar-menu > li.treeview > a .pull-right-container {
    margin-left: auto !important;
    float: none !important;
}
.sidebar-menu > li.treeview > a .fa-angle-left {
    transition: transform .22s ease !important;
    color: rgba(255,255,255,.35) !important;
    font-size: 12px !important;
}
.sidebar-menu > li.treeview.menu-open > a .fa-angle-left {
    transform: rotate(-90deg) !important;
}
.sidebar-menu > li.treeview.menu-open > a {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    border-left-color: rgba(159,36,39,.7) !important;
}
.sidebar-menu > li.treeview.menu-open > a > i {
    color: #e57373 !important;
}

/* ── Sub-menu (treeview-menu) ────────────────────────────────────────────────── */
.skin-blue .sidebar-menu > li > .treeview-menu,
.sidebar-menu .treeview-menu {
    background: rgba(0,0,0,.25) !important;
    border-radius: 0 0 10px 10px !important;
    padding: 4px 0 6px !important;
    margin: -2px 0 4px 0 !important;
    border-left: none !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    padding: 8px 14px 8px 44px !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.52) !important;
    font-weight: 400 !important;
    border-radius: 8px !important;
    margin: 1px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    transition: background .15s, color .15s, padding-left .15s !important;
}

.sidebar-menu .treeview-menu > li > a > i {
    font-size: 6px !important;
    border-radius: 50% !important;
    width: 6px !important; height: 6px !important;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background .15s, box-shadow .15s;
    background: rgba(255,255,255,.3);
    /* override FA text-* colour classes */
}

.sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.9) !important;
    padding-left: 50px !important;
}
.sidebar-menu .treeview-menu > li > a:hover > i {
    background: var(--cm-gold) !important;
    box-shadow: 0 0 6px rgba(240,165,0,.6) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    color: #fff !important;
    font-weight: 600 !important;
}
.sidebar-menu .treeview-menu > li.active > a > i {
    background: var(--cm-gold) !important;
}

/* ── "New" badge pill on menu items ─────────────────────────────────────────── */
.sidebar-menu .label.bg-red,
.sidebar-menu .small.label.bg-red {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
    border-radius: 20px !important;
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    letter-spacing: .3px !important;
    box-shadow: 0 2px 6px rgba(192,57,43,.4);
    animation: pulse-badge 2s ease-in-out infinite;
    font-weight: 700;
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 2px 6px rgba(192,57,43,.4); }
    50%       { box-shadow: 0 2px 12px rgba(192,57,43,.7); }
}

/* ── Count badge (e.g. "89") ─────────────────────────────────────────────────── */
.sidebar-menu .label {
    border-radius: 20px !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    font-weight: 700 !important;
}

/* ── Sidebar search form (if shown) ─────────────────────────────────────────── */
.skin-blue .sidebar-form,
.sidebar-form {
    background: rgba(255,255,255,.05) !important;
    border: none !important;
    border-radius: 10px !important;
    margin: 8px 10px !important;
}
.skin-blue .sidebar-form input[type="text"],
.sidebar-form input[type="text"] {
    background: transparent !important;
    color: rgba(255,255,255,.8) !important;
    border: none !important;
    font-size: 13px !important;
}
.skin-blue .sidebar-form input[type="text"]::placeholder { color: rgba(255,255,255,.35) !important; }
.skin-blue .sidebar-form .btn,
.sidebar-form .btn {
    background: rgba(240,165,0,.3) !important;
    color: var(--cm-gold) !important;
    border: none !important;
}

/* ── Logo strip (admin header left block) ─────────────────────────────────────── */
.skin-blue .main-header .logo,
.main-header .logo {
    background: linear-gradient(135deg, #0a0b0f 0%, #151619 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    width: 230px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    color: #fff !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.main-footer {
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 24px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    letter-spacing: .2px;
}
.main-footer a { color: var(--cm-primary) !important; font-weight: 600; }

/* ── Sidebar collapsed state (sidebar-mini) ──────────────────────────────────── */
.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 56px !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    padding: 14px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    margin: 2px 4px !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a .pull-right-container {
    display: none !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i {
    width: auto !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* Hide user panel in collapsed sidebar so avatar doesn't overlap header */
.sidebar-mini.sidebar-collapse .user-panel {
    display: none !important;
}
/* Collapsed sidebar: allow flyout menus to overflow */
.sidebar-mini.sidebar-collapse .sidebar {
    overflow: visible !important;
    height: auto !important;
    padding-top: 0 !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar {
    overflow: visible !important;
}

/* ── Override slimScrollDiv — AdminLTE wraps .sidebar in this div with overflow:hidden
      which clips our flyout submenus in collapsed mode ──────────────────────────── */
.sidebar-mini.sidebar-collapse .slimScrollDiv {
    overflow: visible !important;
    height: 100% !important;
}
.sidebar-mini.sidebar-collapse .slimScrollDiv .sidebar {
    overflow: visible !important;
    padding-top: 0 !important;
}
/* Also hide the slimScroll scrollbar in collapsed mode (not needed for 56px icons) */
.sidebar-mini.sidebar-collapse .slimScrollBar,
.sidebar-mini.sidebar-collapse .slimScrollRail {
    display: none !important;
}

/* ── Collapsed-mode flyout submenus (treeview popup to right of icon bar) ──── */
.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    position: relative !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    position: absolute !important;
    top: 0 !important;
    left: 56px !important;
    width: 220px !important;
    min-width: 200px !important;
    z-index: 1050 !important;
    background: #12141a !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 6px 4px 24px rgba(0,0,0,.55) !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-left: 2px solid rgba(240,165,0,.35) !important;
    display: none;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-open > .treeview-menu {
    display: block !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
    padding: 9px 16px 9px 20px !important;
    margin: 1px 6px !important;
}
/* Show menu-item text label as tooltip-style flyout on hover */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
    display: block !important;
    position: absolute !important;
    left: 56px !important;
    top: 0 !important;
    background: #12141a !important;
    color: #fff !important;
    padding: 11px 18px !important;
    border-radius: 0 8px 8px 0 !important;
    white-space: nowrap !important;
    z-index: 1050 !important;
    box-shadow: 4px 2px 16px rgba(0,0,0,.45) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-left: 2px solid rgba(240,165,0,.4) !important;
    min-height: 100% !important;
    line-height: 1.5 !important;
}
/* Hide the pull-right-container arrow in flyout label */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a .pull-right-container {
    display: none !important;
}

/* ── Page body offset (account for fixed header height) ─────────────────────── */
.skin-blue .wrapper,
.wrapper {
    padding-top: 0;
}
.skin-blue .content-wrapper,
.content-wrapper {
    margin-top: 64px !important;
    margin-left: 230px !important;
}
.skin-blue.sidebar-collapse .content-wrapper,
.sidebar-collapse .content-wrapper {
    margin-left: 56px !important;
}

/* ── Control sidebar gear ──────────────────────────────────────────────────── */
.control-sidebar-bg,
.control-sidebar {
    top: 64px !important;
}

@media (max-width: 767px) {
    .main-header .navbar { min-height: 50px !important; }
    .club-name-box { display: none !important; }
    .skin-blue .main-header .navbar .sidebar-toggle,
    .main-header .navbar .sidebar-toggle { height: 50px !important; line-height: 50px !important; }
    .content-wrapper { margin-top: 50px !important; margin-left: 0 !important; }
    .main-sidebar { top: 50px !important; }
}

/* =============================================================================
   29. PRECISION FIXES — Alignment, colour cohesion, panel truncation
   ============================================================================= */

/* ── FIX 1: Club-name pill border / outline removal ────────────────────────────
   UX.new.css or AdminLTE skin adds a border/background to .showTop / .club-name-box.
   We strip every visual artefact and rebuild cleanly.                           */
.club-name-box,
.club-name-box .club-name,
nav.navbar .club-name-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
/* Keep only the logo ring, nothing else */
.club-name-box .clubLogo img {
    border: 2px solid rgba(240,165,0,.6) !important;
    box-shadow: 0 0 10px rgba(240,165,0,.25), 0 0 0 3px rgba(240,165,0,.1) !important;
    outline: none !important;
}

/* ── FIX 2: Sidebar toggle — remove the large dark circle ──────────────────────
   AdminLTE wraps the toggle in a round button via UX.new.css; strip that.       */
.main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    /* Refined size — clean 44×56 hit-area */
    width: 44px !important;
    padding: 0 !important;
}
.main-header .navbar .sidebar-toggle:hover {
    background: rgba(255,255,255,.08) !important;
}

/* ── FIX 3: Sidebar user-panel — beat Bootstrap .pull-left float !important ────
   Bootstrap 3: .pull-left { float:left !important }  ← breaks our flex layout.
   We target every float-clearing path to enforce flex.                          */
.sidebar .user-panel,
#user-panel.user-panel,
.skin-blue .user-panel {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow: hidden !important;   /* clip long names, don't scroll */
    padding: 14px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
}
/* Kill every float inside the panel so it becomes a flex child */
.sidebar .user-panel > *,
.sidebar .user-panel .pull-left,
.sidebar .user-panel .pull-right,
#user-panel > *,
#user-panel .pull-left {
    float: none !important;
    clear: none !important;
}
/* Avatar wrapper — fixed size, never shrinks */
.sidebar .user-panel .pull-left.image,
#user-panel .pull-left.image {
    flex: 0 0 44px !important;
    width: 44px !important;
    position: relative !important;
    margin: 0 !important;
}
/* Info block — takes remaining space, truncates cleanly */
.sidebar .user-panel .user-panel-info,
#user-panel .user-panel-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.sidebar .user-panel .user-panel-info p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* ── FIX 4: Sidebar mini — user-panel text visible in expanded state ────────────
   In expanded sidebar, keep user-panel-info visible.
   In collapsed sidebar, the entire user-panel is hidden (see above).             */
.sidebar-mini .sidebar .user-panel .user-panel-info {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    overflow: hidden !important;
}

/* ── FIX 5: Content-wrapper — precise alignment with sidebar & fixed header ───── */
.content-wrapper,
.skin-blue .content-wrapper {
    margin-left: 230px !important;
    margin-top: 56px !important;
    background: #f0f2f5 !important;
    min-height: calc(100vh - 56px) !important;
}
/* Dashboard padding tightened — banner and cards start flush */
.content-wrapper > .content {
    padding: 20px 22px 28px !important;
}
.dash-wrap {
    padding: 0 0 24px !important;
}

/* ── FIX 6: Welcome banner — full-width, no orphan gap ────────────────────────── */
.dash-welcome {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── FIX 7: Card grid — tighter, more uniform colour harmony ──────────────────
   Slight desaturation on the brightest cards so they read as premium, not toy.
   We shift the greens/reds to richer, darker base hues.                         */

/* Tee Time — deeper forest → emerald (less cartoon green) */
.dash-card[style*="1a7431"] {
    background: linear-gradient(135deg, #14532d 0%, #166534 60%, #15803d 100%) !important;
}
/* Newsletter — deeper wine-red to match header */
.dash-card[style*="9f2427"] {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 55%, #b91c1c 100%) !important;
}
/* Profile Authorize — indigo depth */
.dash-card[style*="0d47a1"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%) !important;
}
/* Card Reprint — warm saffron-copper */
.dash-card[style*="bf360c"] {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 55%, #ea580c 100%) !important;
}
/* Address Authorize — royal plum */
.dash-card[style*="4a148c"] {
    background: linear-gradient(135deg, #3b0764 0%, #6d28d9 100%) !important;
}
/* Auth Reports — rich amber */
.dash-card[style*="e65100"] {
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%) !important;
}
/* Pending Payments — deep ocean teal */
.dash-card[style*="004d40"] {
    background: linear-gradient(135deg, #042f2e 0%, #0f766e 100%) !important;
}
/* Events Navy */
.dash-card[style*="1a237e"] {
    background: linear-gradient(135deg, #172554 0%, #1e40af 100%) !important;
}
/* Events maroon */
.dash-card[style*="880e4f"] {
    background: linear-gradient(135deg, #4a044e 0%, #a21caf 100%) !important;
}

/* ── FIX 8: Card footer — unified glass-dark treatment ────────────────────────── */
.dc-footer {
    background: rgba(0,0,0,.22) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    letter-spacing: .25px !important;
}
.dc-footer:hover { background: rgba(0,0,0,.36) !important; }

/* ── FIX 9: Sidebar item spacing — remove compressed look ─────────────────────── */
.sidebar-menu { padding: 8px 8px 0 !important; }
.sidebar-menu > li > a {
    margin-bottom: 1px !important;
    gap: 10px !important;
}
/* Softer icon colour on normal state */
.sidebar-menu > li > a > i { color: rgba(255,255,255,.38) !important; }

/* ── FIX 10: DISABLED — header gradient now in section 30 + theme system ────────── */
/* Old gradient removed to prevent theme override conflicts */

/* ── FIX 11: Body expand — ensure no horizontal scroll ────────────────────────── */
body { overflow-x: hidden !important; }
.wrapper { overflow: hidden !important; }

/* ── FIX 12: Sidebar — force true charcoal (prevent skin-blue colour bleed) ──── */
.skin-blue .main-sidebar,
body.skin-blue .main-sidebar,
.main-sidebar,
.left-side {
    background: #0d0e12 !important;
    background-image: linear-gradient(180deg, #0d0e12 0%, #111318 50%, #0d0e12 100%) !important;
    /* kill any AdminLTE skin-blue purple/red gradient */
    background-color: #0d0e12 !important;
}
.skin-blue .sidebar-menu > li.treeview-menu > li > a,
.skin-blue .sidebar-menu .treeview-menu {
    background: rgba(0,0,0,.28) !important;
}
/* Sidebar left-side alias — same treatment */
.left-side,
.skin-blue .left-side {
    background: #0d0e12 !important;
    background-image: none !important;
}

/* =============================================================================
   30. A+++ PREMIUM HEADER — Complete 3-zone redesign
   Three zones: [Toggle] | [Brand: Icon + Name + Sub] | [User: Avatar + Dropdown]
   Height: 64 px  ·  Gradient: Deep Navy → Royal Blue  ·  Gold + Cyan accents
   ============================================================================= */

/* ── 30.1  Header shell ───────────────────────────────────────────────────────── */
.cm-hdr {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    /* Lower than dropdown (1060) so dropdown escapes above header */
    z-index: 1040 !important;
    height: 64px !important;
    box-shadow: 0 4px 28px rgba(0,0,10,.65) !important;
    /* MUST be visible so dropdown is not clipped */
    overflow: visible !important;
}
.cm-navbar-shell {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    /* ── Premium Navy-Gold gradient ── */
    background: linear-gradient(
        108deg,
        #03040c  0%,
        #07091a  16%,
        #0d1230  38%,
        #172454  68%,
        #1d3480  88%,
        #1e40af  100%
    ) !important;
    position: relative !important;
    /* CRITICAL: must be visible — overflow:hidden clips the dropdown */
    overflow: visible !important;
    margin: 0 !important;
}

/* Animated gold-to-cyan shimmer line at the very bottom */
.cm-navbar-shell::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    /* MUST NOT clip: use z-index below dropdown */
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent          0%,
        rgba(240,165,0,.0)   8%,
        rgba(240,165,0,.8)  30%,
        rgba(56,189,248,1)  50%,
        rgba(30, 80,200,.7) 70%,
        transparent         100%
    );
    animation: cm-shimmer 4s ease-in-out infinite;
}
@keyframes cm-shimmer {
    0%, 100% { opacity: .55; }
    50%       { opacity: 1;   }
}

/* Subtle right-side radial glow — navy/indigo bloom */
.cm-navbar-shell::before {
    content: '';
    position: absolute;
    top: -40px; right: -50px;
    width: 260px; height: 160px;
    border-radius: 50%;
    /* Clipped to the header height via the header's own box — no overflow needed */
    background: radial-gradient(ellipse, rgba(30,64,175,.55) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── 30.2  Sidebar toggle ─────────────────────────────────────────────────────── */
.cm-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.55) !important;
    font-size: 17px !important;
    cursor: pointer !important;
    transition: background .18s ease, color .18s ease !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.cm-toggle:hover,
.cm-toggle:focus {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    text-decoration: none !important;
}
/* Hide AdminLTE's .icon-bar spans — we use FA icon */
.cm-toggle .icon-bar { display: none !important; }
.cm-toggle .sr-only { position: absolute !important; }

/* ── 30.3  Brand block ── Icon + Name + Sub ───────────────────────────────────── */
.cm-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
    height: 64px !important;
    padding: 0 20px 0 16px !important;
    text-decoration: none !important;
    transition: background .2s !important;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}
.cm-brand:hover { background: rgba(255,255,255,.05) !important; text-decoration: none !important; }

/* Circular icon badge */
.cm-brand-badge {
    position: relative;
    width: 44px; height: 44px;
    flex-shrink: 0;
}
.cm-brand-img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    background: rgba(255,255,255,.07) !important;
    padding: 3px !important;
    /* Dual-ring: inner gold + outer glow */
    border: 2.5px solid rgba(240,165,0,.7) !important;
    box-shadow:
        0 0 0 4px rgba(240,165,0,.14),
        0 0 18px rgba(240,165,0,.22),
        0 2px 12px rgba(0,0,0,.5) !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
    /* Kill any float that admin classes might add */
    float: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
.cm-brand-img--lg { width: 44px !important; height: 44px !important; } /* TSGC override */

.cm-brand:hover .cm-brand-img {
    transform: scale(1.07) rotate(3deg) !important;
    box-shadow:
        0 0 0 5px rgba(240,165,0,.22),
        0 0 28px rgba(240,165,0,.38),
        0 2px 14px rgba(0,0,0,.55) !important;
}

/* Outer pulsing ring */
.cm-brand-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(240,165,0,.28);
    animation: ring-pulse 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ring-pulse {
    0%, 100% { transform: scale(1);    opacity: .28; }
    50%       { transform: scale(1.12); opacity: .55; }
}

/* Text copy */
.cm-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cm-brand-name {
    display: block !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: .25px !important;
    color: #fff !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.55) !important;
    /* Remove any border or outline from old .showTop styles */
    border: none !important; outline: none !important; background: transparent !important;
}
.cm-brand-sub {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    /* Cyan accent on navy = premium luxury feel */
    color: rgba(125,211,252,.88) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: none !important; outline: none !important; background: transparent !important;
}
.cm-brand-sub i { font-size: 8.5px !important; }

/* Kill legacy .club-name-box  (if rendered elsewhere) */
.club-name-box,
.club-name-box .club-name {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── 30.4  Right zone ─────────────────────────────────────────────────────────── */
.cm-hdr-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-right: 12px !important;
    height: 64px !important;
    float: none !important;
}

/* ── 30.5  Icon-only action buttons (Gallery, Phone, Lock) ──────────────────────── */
.cm-icon-btn,
.cm-icon-btn > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    transition: background .18s, color .18s, border-color .18s !important;
    cursor: pointer;
}
.cm-icon-btn:hover,
.cm-icon-btn > a:hover {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* ── 30.6  User nav wrapper ───────────────────────────────────────────────────── */
.cm-user-nav {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.cm-user-drop { list-style: none !important; }

/* ── 30.7  User pill button ───────────────────────────────────────────────────── */
.cm-user-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 6px 10px 6px 6px !important;
    height: 46px !important;
    border-radius: 13px !important;
    border: 1.5px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.07) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}
.cm-user-pill:hover,
.cm-user-pill:focus,
.open > .cm-user-pill {
    background: rgba(255,255,255,.13) !important;
    border-color: rgba(240,165,0,.4) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,.12) !important;
    text-decoration: none !important;
}

/* Avatar ring */
.cm-av-ring {
    position: relative;
    width: 32px; height: 32px;
    flex-shrink: 0;
}
/* ── AVATAR FIX — defeat every AdminLTE/Bootstrap rule on .user-image ───────────
   AdminLTE adds:  .navbar .nav > li > a img { margin-top:-10px; float:left; }
   Bootstrap adds: .pull-left { float:left !important; }
   We need the highest specificity possible.                                     */
.skin-blue .main-header .cm-navbar-shell .cm-av-img,
.main-header .cm-navbar-shell .cm-av-img,
.cm-hdr .cm-av-img,
img.cm-av-img {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(240,165,0,.65) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,.16) !important;
    /* Kill every AdminLTE positional override */
    float: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
.cm-av-online {
    position: absolute;
    bottom: 0; right: 0;
    width: 9px; height: 9px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #0f1116;
    box-shadow: 0 0 6px rgba(34,197,94,.75);
    animation: dot-glow 2.5s ease-in-out infinite;
}
@keyframes dot-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,.5); }
    50%       { box-shadow: 0 0 10px rgba(34,197,94,.9), 0 0 18px rgba(34,197,94,.3); }
}

/* Name + status stacked */
.cm-user-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    max-width: 120px;
}
.cm-u-name {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.92) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
}
.cm-u-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.42) !important;
    letter-spacing: .2px !important;
    line-height: 1 !important;
}

/* Dropdown caret */
.cm-caret {
    font-size: 9px !important;
    color: rgba(255,255,255,.38) !important;
    transition: transform .22s ease !important;
    flex-shrink: 0;
}
.open > .cm-user-pill .cm-caret { transform: rotate(180deg); }

/* ── 30.8  Premium dropdown panel ────────────────────────────────────────────── */

/* The parent <li> must be the positioning context */
.cm-user-drop,
.cm-user-drop.dropdown {
    position: relative !important;
    list-style: none !important;
}

/* Right zone must NOT clip overflow */
.cm-hdr-right,
.navbar-custom-menu.cm-hdr-right,
.cm-user-nav,
.cm-user-drop {
    overflow: visible !important;
}

.cm-drop {
    display: none;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    /* Sit just below the pill button */
    top: calc(100% + 10px) !important;
    width: 260px !important;
    background: #0d1117 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    box-shadow:
        0 28px 72px rgba(0,0,0,.8),
        0  6px 20px rgba(0,0,0,.45),
        0  0   0  1px rgba(255,255,255,.05),
        /* Blue glow echo from header */
        0  0  40px rgba(30,64,175,.18) !important;
    padding: 8px !important;
    list-style: none !important;
    /* High enough to beat AdminLTE modals (1050) but we only need above header (1040) */
    z-index: 1060 !important;
    transform-origin: top right;
    margin: 0 !important;
    /* Prevent ANY parent clipping */
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
}

/* Bootstrap toggles .open on the parent li */
.open > .cm-drop,
.cm-user-drop.open > .cm-drop {
    display: block !important;
    animation: cm-drop-in .22s cubic-bezier(.34,1.56,.64,1) forwards !important;
}

@keyframes cm-drop-in {
    from { opacity: 0; transform: scale(.94) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Profile card ───── */
.cm-drop-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    background: rgba(255,255,255,.04) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    list-style: none;
}
.cm-drop-av-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px; height: 48px;
}
.cm-drop-av {
    display: block !important;
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2.5px solid rgba(240,165,0,.55) !important;
    box-shadow: 0 0 0 4px rgba(240,165,0,.12) !important;
}
.cm-drop-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 12px; height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: 2.5px solid #14161d;
    box-shadow: 0 0 8px rgba(34,197,94,.8);
}
.cm-drop-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.cm-drop-uname {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.cm-drop-club {
    display: block !important;
    font-size: 11.5px !important;
    color: rgba(255,255,255,.42) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
}

/* ── Dividers ───── */
.cm-drop-divider {
    height: 1px !important;
    background: rgba(255,255,255,.08) !important;
    margin: 5px 2px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── Action rows ───── */
.cm-drop-item {
    list-style: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 2px !important;
}
.cm-drop-item > a,
.cm-drop-item > span,
.cm-drop-item > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}
.cm-drop-item > a:hover,
.cm-drop-item > span:hover,
.cm-drop-item > div:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Icon chip */
.cm-di-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    flex-shrink: 0;
}
.cm-di-icon--blue { background: rgba(59,130,246,.18) !important; color: #60a5fa !important; }
.cm-di-icon--gray { background: rgba(148,163,184,.14) !important; color: #94a3b8 !important; }
.cm-di-icon--red  { background: rgba(239, 68, 68,.16) !important; color: #f87171 !important; }

.cm-di-label { flex: 1; }

/* Logout row */
.cm-drop-item--danger > a:hover,
.cm-drop-item--danger > div:hover {
    background: rgba(239,68,68,.1) !important;
    color: #f87171 !important;
}
.cm-logout-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    transition: background .15s !important;
}
.cm-logout-wrap:hover { background: rgba(239,68,68,.1) !important; }

/* Style the _LogOut partial (usually a link or form button) inside our wrap */
.cm-logout-wrap a,
.cm-logout-wrap button,
.cm-logout-wrap input[type="submit"] {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.72) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.cm-logout-wrap:hover a,
.cm-logout-wrap:hover button { color: #f87171 !important; }

/* ── 30.9  Content wrapper — updated for 64 px header height ────────────────── */
.content-wrapper,
.skin-blue .content-wrapper {
    margin-top: 64px !important;
    margin-left: 230px !important;
}
.skin-blue.sidebar-collapse .content-wrapper,
.sidebar-collapse .content-wrapper { margin-left: 56px !important; }
.control-sidebar-bg, .control-sidebar { top: 64px !important; }
.main-footer { margin-left: 230px !important; }
.sidebar-collapse .main-footer { margin-left: 56px !important; }

/* ── 30.10  Kill ALL legacy header overrides that may conflict ─────────────────── */
/* These selectors target the old classes we no longer use in the HTML            */
.main-header .navbar .sidebar-toggle .icon-bar { display: none !important; }
.main-header .navbar .sidebar-toggle::before   { content: none !important; }
/* Old club-name-box float trick — neutralised */
.showTop { background: transparent !important; border: none !important; box-shadow: none !important; }
/* Remove AdminLTE user-image top offset */
.navbar-custom-menu .user-image,
.cm-av-img { margin-top: 0 !important; top: auto !important; }

/* ── 30.11  Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .cm-brand-copy { display: none !important; }
    .cm-brand { border-right: none !important; padding: 0 10px !important; }
    .cm-user-stack, .cm-caret { display: none !important; }
}
@media (max-width: 767px) {
    .cm-hdr, .cm-navbar-shell { height: 54px !important; }
    .cm-toggle { height: 54px !important; width: 46px !important; }
    .cm-brand { height: 54px !important; }
    .content-wrapper, .skin-blue .content-wrapper { margin-top: 54px !important; margin-left: 0 !important; }
    .main-footer { margin-left: 0 !important; }
    .main-sidebar { top: 54px !important; }
}

/* =============================================================================
   31. THEME SWITCHER — 3 Themes: Dark (default) | Light | Blue
   Body attribute: data-cm-theme="light" | "blue"  (no attr = dark)
   ============================================================================= */

/* ── 31.1  Theme picker button in header ───────────────────────────────────────── */
.cm-theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.7) !important;
    font-size: 15px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    position: relative !important;
    text-decoration: none !important;
}
.cm-theme-btn:hover {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
    transform: rotate(30deg);
}

/* ── 31.2  Theme dropdown panel ─────────────────────────────────────────────────── */
.cm-theme-panel {
    display: none;
    position: absolute;
    top: 52px;
    right: 0;
    width: 268px;
    background: #14161e;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    padding: 16px;
    z-index: 1080;
    animation: cm-fadeIn .2s ease;
}
.cm-theme-panel.show { display: block; }

@keyframes cm-fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cm-theme-panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.4);
    margin: 0 0 12px 2px;
}

/* ── 31.3  Theme swatch grid ─────────────────────────────────────────────────── */
.cm-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cm-theme-swatch {
    position: relative;
    border-radius: 12px;
    height: 64px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6px;
}
.cm-theme-swatch::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 36px;
    border-radius: 10px 10px 0 0;
}
.cm-theme-swatch:hover {
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.cm-theme-swatch.active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,.25), 0 6px 20px rgba(0,0,0,.3);
}
.cm-theme-swatch.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    top: 4px; right: 4px;
    width: 18px; height: 18px;
    background: #3b82f6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-swatch-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    letter-spacing: .3px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Individual swatch colors — 3 themes only */
.cm-swatch--dark         { background: #0d0e14; }
.cm-swatch--dark::before         { background: linear-gradient(135deg, #07091a, #1a1d2e); }

.cm-swatch--light        { background: #e8eaed; }
.cm-swatch--light::before        { background: linear-gradient(135deg, #ffffff, #e2e8f0); }
.cm-swatch--light .cm-swatch-label { color: rgba(0,0,0,.55); }

.cm-swatch--blue         { background: #0a1628; }
.cm-swatch--blue::before         { background: linear-gradient(135deg, #0c2d6b, #1e40af); }

/* ── 31.4  Theme: DARK (default — no body attribute needed) ──────────────────── */
/* Already the base theme — no overrides needed */

/* ── 31.5  Theme: LIGHT ─────────────────────────────────────────────────────── */
/* Header */
body[data-cm-theme="light"] .cm-navbar-shell {
    background: linear-gradient(108deg,
        #f8fafc 0%, #e2e8f0 38%, #cbd5e1 68%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-navbar-shell::after {
    background: linear-gradient(90deg,
        transparent 0%, rgba(59,130,246,.0) 8%, rgba(59,130,246,.4) 30%,
        rgba(59,130,246,.6) 50%, rgba(37,99,235,.4) 70%, transparent 100%) !important;
}
body[data-cm-theme="light"] .cm-navbar-shell::before {
    background: radial-gradient(ellipse, rgba(59,130,246,.08) 0%, transparent 70%) !important;
}
body[data-cm-theme="light"] .cm-brand-sub {
    color: #64748b !important;
}
body[data-cm-theme="light"] .cm-brand-img {
    border-color: rgba(59,130,246,.3) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.08), 0 2px 12px rgba(0,0,0,.1) !important;
}
body[data-cm-theme="light"] .cm-brand-ring {
    border-color: rgba(59,130,246,.2) !important;
}
body[data-cm-theme="light"] .cm-brand-name,
body[data-cm-theme="light"] .cm-navbar-shell .cm-brand-name {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-user-pill {
    border-color: rgba(0,0,0,.1) !important;
    color: #334155 !important;
}
body[data-cm-theme="light"] .cm-user-pill:hover {
    border-color: rgba(59,130,246,.3) !important;
    background: rgba(59,130,246,.06) !important;
}
body[data-cm-theme="light"] .cm-user-pill .cm-av-ring img {
    border-color: rgba(59,130,246,.25) !important;
}
body[data-cm-theme="light"] .cm-user-name,
body[data-cm-theme="light"] .cm-u-name {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-user-role,
body[data-cm-theme="light"] .cm-u-status {
    color: #64748b !important;
}
/* Toggle hamburger + caret on light header */
body[data-cm-theme="light"] .cm-toggle {
    color: #475569 !important;
    border-right-color: rgba(0,0,0,.08) !important;
}
body[data-cm-theme="light"] .cm-toggle:hover {
    color: #1e293b !important;
    background: rgba(0,0,0,.05) !important;
}
body[data-cm-theme="light"] .cm-caret {
    color: #64748b !important;
}
/* Icon buttons (gallery etc.) on light header */
body[data-cm-theme="light"] .cm-icon-btn,
body[data-cm-theme="light"] .cm-icon-btn > a {
    background: rgba(0,0,0,.04) !important;
    color: #475569 !important;
    border-color: rgba(0,0,0,.08) !important;
}
body[data-cm-theme="light"] .cm-icon-btn:hover,
body[data-cm-theme="light"] .cm-icon-btn > a:hover {
    background: rgba(0,0,0,.08) !important;
    color: #1e293b !important;
}
/* Header avatar ring on light */
body[data-cm-theme="light"] .cm-av-online {
    border-color: #e2e8f0 !important;
}
/* Brand border on light */
body[data-cm-theme="light"] .cm-brand {
    border-right-color: rgba(0,0,0,.06) !important;
}
/* Theme picker button */
body[data-cm-theme="light"] .cm-theme-btn {
    background: rgba(0,0,0,.05) !important;
    color: #475569 !important;
    border-color: rgba(0,0,0,.1) !important;
}
body[data-cm-theme="light"] .cm-theme-btn:hover {
    background: rgba(0,0,0,.1) !important;
    color: #1e293b !important;
}
/* Sidebar */
body[data-cm-theme="light"] .main-sidebar,
body[data-cm-theme="light"] .skin-blue .main-sidebar,
body[data-cm-theme="light"] .skin-blue .wrapper,
body[data-cm-theme="light"] .skin-blue .left-side {
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
}
body[data-cm-theme="light"] .sidebar,
body[data-cm-theme="light"] section.sidebar {
    background: transparent !important;
}
body[data-cm-theme="light"] .sidebar-menu > li > a {
    color: #475569 !important;
}
body[data-cm-theme="light"] .sidebar-menu > li > a > i {
    color: #94a3b8 !important;
}
body[data-cm-theme="light"] .skin-blue .sidebar-menu > li.active > a,
body[data-cm-theme="light"] .sidebar-menu > li.active > a {
    background: linear-gradient(90deg, rgba(59,130,246,.1) 0%, rgba(59,130,246,.02) 100%) !important;
    border-left-color: #3b82f6 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .skin-blue .sidebar-menu > li.active > a > i,
body[data-cm-theme="light"] .sidebar-menu > li.active > a > i {
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .skin-blue .sidebar-menu > li:hover > a,
body[data-cm-theme="light"] .sidebar-menu > li:hover > a {
    background: rgba(0,0,0,.03) !important;
    border-left-color: rgba(59,130,246,.5) !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .skin-blue .sidebar-menu > li:hover > a > i,
body[data-cm-theme="light"] .sidebar-menu > li:hover > a > i {
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu {
    background: rgba(0,0,0,.02) !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu > li > a {
    color: #64748b !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu > li > a:hover {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu > li > a > i {
    background: #94a3b8 !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu > li > a:hover > i {
    background: #3b82f6 !important;
}
body[data-cm-theme="light"] .sidebar-menu .treeview-menu > li.active > a > i {
    background: #3b82f6 !important;
}
body[data-cm-theme="light"] .user-panel .img-circle {
    border-color: rgba(59,130,246,.3) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.08) !important;
}
body[data-cm-theme="light"] .user-panel .status-dot {
    background: #22c55e !important;
    border-color: #f8fafc !important;
}
body[data-cm-theme="light"] .sidebar-menu .label.bg-red {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}
/* Content wrapper */
body[data-cm-theme="light"] .content-wrapper,
body[data-cm-theme="light"] .right-side {
    background: #f1f5f9 !important;
}
/* Panels, boxes, general containers */
body[data-cm-theme="light"] .box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
body[data-cm-theme="light"] .box-header {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .box-title {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .box-body {
    color: #334155 !important;
}
body[data-cm-theme="light"] .panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .panel-heading {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body[data-cm-theme="light"] .panel-body {
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
}
body[data-cm-theme="light"] .panel-group {
    border-color: #e2e8f0 !important;
}
/* Form controls */
body[data-cm-theme="light"] .form-control {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
body[data-cm-theme="light"] .input-group-addon {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}
/* Buttons */
body[data-cm-theme="light"] .btn-primary,
body[data-cm-theme="light"] .btn-info {
    background: #3b82f6 !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
body[data-cm-theme="light"] .btn-primary:hover,
body[data-cm-theme="light"] .btn-info:hover {
    background: #2563eb !important;
}
body[data-cm-theme="light"] .btn-default {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
/* Tables */
body[data-cm-theme="light"] .table > thead > tr > th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .table > tbody > tr > td {
    color: #334155 !important;
    border-bottom-color: #f1f5f9 !important;
}
body[data-cm-theme="light"] .table > tbody > tr:hover > td {
    background: rgba(59,130,246,.04) !important;
}
body[data-cm-theme="light"] .table-body thead th,
body[data-cm-theme="light"] #footer {
    background: #f8fafc !important;
    color: #475569 !important;
}
/* Headings, text */
body[data-cm-theme="light"] h1, body[data-cm-theme="light"] h2,
body[data-cm-theme="light"] h3, body[data-cm-theme="light"] h4 {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .text-muted {
    color: #94a3b8 !important;
}
/* Dropdown menus */
body[data-cm-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
body[data-cm-theme="light"] .dropdown-menu > li > a {
    color: #334155 !important;
}
body[data-cm-theme="light"] .dropdown-menu > li > a:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .skin-blue .main-header li.user-header {
    background-color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
body[data-cm-theme="light"] .skin-blue .main-header li.user-header p {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .user-footer {
    background-color: #f1f5f9 !important;
    box-shadow: 0 -1px 0 #e2e8f0 !important;
}
body[data-cm-theme="light"] .user-footer a {
    color: #3b82f6 !important;
}
/* Dashboard cards */
body[data-cm-theme="light"] .dash-welcome {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 60%, #bfdbfe 100%) !important;
    box-shadow: 0 4px 16px rgba(59,130,246,.12) !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cal-head {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .event-box-icon {
    background: linear-gradient(135deg, #3b82f6, #1e40af) !important;
}
/* Card divs */
body[data-cm-theme="light"] #cardDiv {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cardInner {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .divCalen {
    background-color: #f8fafc !important;
    color: #475569 !important;
}
/* Small-box widgets */
body[data-cm-theme="light"] .small-box {
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
/* Scrollbar */
body[data-cm-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}
body[data-cm-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}
/* Theme panel itself in light mode */
body[data-cm-theme="light"] .cm-theme-panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.12) !important;
}
body[data-cm-theme="light"] .cm-theme-panel-title {
    color: #64748b !important;
}

/* ── 31.6  Theme: BLUE ──────────────────────────────────────────────────────── */
/* Header */
body[data-cm-theme="blue"] .cm-navbar-shell {
    background: linear-gradient(108deg,
        #0a1628 0%, #0c2d6b 16%, #1e40af 38%,
        #2563eb 68%, #3b82f6 88%, #1d4ed8 100%) !important;
}
body[data-cm-theme="blue"] .cm-navbar-shell::after {
    background: linear-gradient(90deg,
        transparent 0%, rgba(96,165,250,.0) 8%, rgba(96,165,250,.6) 30%,
        rgba(147,197,253,1) 50%, rgba(37,99,235,.6) 70%, transparent 100%) !important;
}
body[data-cm-theme="blue"] .cm-navbar-shell::before {
    background: radial-gradient(ellipse, rgba(59,130,246,.45) 0%, transparent 70%) !important;
}
body[data-cm-theme="blue"] .cm-brand-sub {
    color: rgba(147,197,253,.85) !important;
}
body[data-cm-theme="blue"] .cm-brand-img {
    border-color: rgba(96,165,250,.6) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.14), 0 0 18px rgba(59,130,246,.22), 0 2px 12px rgba(0,0,0,.5) !important;
}
body[data-cm-theme="blue"] .cm-brand-ring {
    border-color: rgba(96,165,250,.28) !important;
}
body[data-cm-theme="blue"] .cm-user-pill {
    border-color: rgba(96,165,250,.18) !important;
}
body[data-cm-theme="blue"] .cm-user-pill:hover {
    border-color: rgba(96,165,250,.35) !important;
    background: rgba(59,130,246,.1) !important;
}
/* Sidebar */
body[data-cm-theme="blue"] .main-sidebar,
body[data-cm-theme="blue"] .skin-blue .main-sidebar {
    background: linear-gradient(180deg, #0a1628 0%, #0f1d3a 50%, #0a1628 100%) !important;
}
body[data-cm-theme="blue"] .skin-blue .sidebar-menu > li.active > a,
body[data-cm-theme="blue"] .sidebar-menu > li.active > a {
    background: linear-gradient(90deg, rgba(59,130,246,.18) 0%, rgba(59,130,246,.04) 100%) !important;
    border-left-color: #60a5fa !important;
}
body[data-cm-theme="blue"] .skin-blue .sidebar-menu > li.active > a > i,
body[data-cm-theme="blue"] .skin-blue .sidebar-menu > li:hover > a > i,
body[data-cm-theme="blue"] .sidebar-menu > li.active > a > i,
body[data-cm-theme="blue"] .sidebar-menu > li:hover > a > i {
    color: #60a5fa !important;
}
body[data-cm-theme="blue"] .skin-blue .sidebar-menu > li:hover > a,
body[data-cm-theme="blue"] .sidebar-menu > li:hover > a {
    border-left-color: rgba(96,165,250,.5) !important;
}
body[data-cm-theme="blue"] .sidebar-menu > li.treeview.menu-open > a {
    border-left-color: rgba(96,165,250,.6) !important;
}
body[data-cm-theme="blue"] .sidebar-menu > li.treeview.menu-open > a > i {
    color: #93c5fd !important;
}
body[data-cm-theme="blue"] .sidebar-menu .treeview-menu > li > a:hover > i {
    background: #3b82f6 !important;
    box-shadow: 0 0 6px rgba(59,130,246,.6) !important;
}
body[data-cm-theme="blue"] .sidebar-menu .treeview-menu > li.active > a > i {
    background: #3b82f6 !important;
}
body[data-cm-theme="blue"] .user-panel .img-circle {
    border-color: rgba(96,165,250,.5) !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12) !important;
}
body[data-cm-theme="blue"] .user-panel .status-dot {
    background: #60a5fa !important;
    border-color: #0a1628 !important;
    box-shadow: 0 0 6px rgba(96,165,250,.6) !important;
}
body[data-cm-theme="blue"] .sidebar-menu .label.bg-red {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
}
/* Content wrapper */
body[data-cm-theme="blue"] .content-wrapper,
body[data-cm-theme="blue"] .right-side {
    background: #0c1220 !important;
}
/* Dashboard */
body[data-cm-theme="blue"] .dash-welcome {
    background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 60%, #1e40af 100%) !important;
    box-shadow: 0 8px 28px rgba(30,64,175,.35) !important;
}
body[data-cm-theme="blue"] .cal-head {
    background: linear-gradient(135deg, #0a1628, #1e40af) !important;
}
body[data-cm-theme="blue"] .event-box-icon {
    background: linear-gradient(135deg, #2563eb, #0a1628) !important;
}
/* Buttons */
body[data-cm-theme="blue"] .btn-primary,
body[data-cm-theme="blue"] .btn-info {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    border-color: #2563eb !important;
}
/* Panels / Boxes */
body[data-cm-theme="blue"] .box {
    border-color: rgba(96,165,250,.1) !important;
}
body[data-cm-theme="blue"] .panel-heading {
    background-color: #0f1d3a !important;
}
/* Tables */
body[data-cm-theme="blue"] .table > tbody > tr:hover > td {
    background: rgba(59,130,246,.06) !important;
}
body[data-cm-theme="blue"] .table-body thead th,
body[data-cm-theme="blue"] #footer {
    background: #0f1d3a !important;
}
/* Form controls */
body[data-cm-theme="blue"] .form-control {
    border-color: rgba(96,165,250,.15) !important;
}
body[data-cm-theme="blue"] .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

/* =============================================================================
   32. THEME-AWARE DASHBOARD CARDS — Light & Blue theme overrides
   ============================================================================= */

/* ── 32.1  Card animation enhancements ────────────────────────────────────────── */
.dash-card {
    transition: transform .28s cubic-bezier(.34,1.56,.64,1),
                box-shadow .28s ease,
                filter .28s ease !important;
}
.dash-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.28) !important;
}
/* Shimmer overlay on cards */
.dash-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 50% !important; height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.08) 40%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.08) 60%,
        transparent 100%) !important;
    transition: left .6s ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
}
.dash-card:hover::after {
    left: 100% !important;
}

/* Icon wrap pulse on hover */
.dc-icon-wrap {
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.dash-card:hover .dc-icon-wrap {
    transform: scale(1.12) rotate(-5deg) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}

/* Image cards — zoom background on hover */
.dc-img-card {
    transition: transform .28s cubic-bezier(.34,1.56,.64,1),
                box-shadow .28s ease !important;
    background-transition: transform .4s ease;
}
.dc-img-card:hover {
    transform: translateY(-8px) scale(1.015) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.32) !important;
}

/* ── 32.2  Light theme — dashboard cards ──────────────────────────────────────── */
body[data-cm-theme="light"] .dash-card {
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04) !important;
}
body[data-cm-theme="light"] .dash-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
}
body[data-cm-theme="light"] .dash-card::after {
    background: linear-gradient(90deg,
        transparent 0%, rgba(255,255,255,.3) 40%,
        rgba(255,255,255,.5) 50%, rgba(255,255,255,.3) 60%,
        transparent 100%) !important;
}

/* ── 32.3  Blue theme — dashboard cards use blue-gradient tints ──────────────── */
body[data-cm-theme="blue"] .dash-card {
    box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(96,165,250,.08) !important;
}

/* =============================================================================
   33. MEMBER LEDGER — Premium Single-View Redesign
   Compact hero bar + full-height table + payment strip
   ============================================================================= */

/* ── 33.1  Wrapper ────────────────────────────────────────────────────────────── */
.cm-ldg {
    padding: 16px 20px 8px !important;
    max-width: 100%;
}

/* ── 33.2  Hero Card ──────────────────────────────────────────────────────── */
.cm-ldg-hero {
    background: linear-gradient(145deg, #0c1022 0%, #111636 40%, #0f1528 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    padding: 0;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}
/* Animated gold-to-blue shimmer line at bottom */
.cm-ldg-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(240,165,0,.6) 25%, rgba(59,130,246,.6) 50%, rgba(240,165,0,.6) 75%, transparent 100%);
    background-size: 200% 100%;
    animation: cmLdgShimmer 4s linear infinite;
}
@keyframes cmLdgShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Row 1: Avatar + Name + Balance + Button ── */
.cm-ldg-hero-row1 {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px 14px;
}

/* ── Avatar ── */
.cm-ldg-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.cm-ldg-avatar {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(240,165,0,.35);
    box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 20px rgba(240,165,0,.1);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cm-ldg-avatar:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 28px rgba(240,165,0,.2);
    border-color: rgba(240,165,0,.5);
}
.cm-ldg-av-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 14px; height: 14px;
    background: #22c55e;
    border: 2.5px solid #0c1022;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34,197,94,.5);
}

/* ── Identity (name + tags) ── */
.cm-ldg-identity {
    flex: 1;
    min-width: 0;
}
.cm-ldg-name {
    margin: 0 0 5px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    letter-spacing: .2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cm-ldg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cm-ldg-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    font-size: 11px;
    color: rgba(255,255,255,.6);
    letter-spacing: .2px;
}
.cm-ldg-tag i { font-size: 9px; opacity: .6; }
.cm-ldg-tag--accent {
    background: rgba(240,165,0,.08);
    border-color: rgba(240,165,0,.18);
    color: #f0a500;
    font-weight: 600;
}
.cm-ldg-tag--accent i { color: #f0a500; opacity: .8; }

/* ── Balance Card ── */
.cm-ldg-bal-card {
    flex-shrink: 0;
    padding: 10px 22px;
    border-radius: 12px;
    text-align: center;
    min-width: 180px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}
.cm-ldg-bal--dr {
    background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.04));
    border: 1px solid rgba(239,68,68,.22);
    box-shadow: inset 0 0 30px rgba(239,68,68,.04);
}
.cm-ldg-bal--cr {
    background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.04));
    border: 1px solid rgba(34,197,94,.22);
    box-shadow: inset 0 0 30px rgba(34,197,94,.04);
}
.cm-ldg-bal-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.45);
    margin-bottom: 3px;
    font-weight: 700;
}
.cm-ldg-bal-amount {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.cm-ldg-bal--dr .cm-ldg-bal-amount { color: #f87171; }
.cm-ldg-bal--dr .cm-ldg-bal-amount i { color: #ef4444; font-size: 16px; }
.cm-ldg-bal--cr .cm-ldg-bal-amount { color: #4ade80; }
.cm-ldg-bal--cr .cm-ldg-bal-amount i { color: #22c55e; font-size: 16px; }

/* ── Action column ── */
.cm-ldg-action-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Row 2: Input fields ── */
.cm-ldg-fields-row {
    display: flex;
    gap: 14px;
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 0;
    background: rgba(0,0,0,.15);
    border-radius: 0 0 18px 18px;
}
.cm-ldg-field {
    flex: 1;
    min-width: 0;
}
.cm-ldg-field--wide {
    flex: 1.5;
}
.cm-ldg-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: rgba(255,255,255,.55);
    font-weight: 700;
    margin-bottom: 6px;
    padding-left: 2px;
}
.cm-ldg-field-label i {
    font-size: 10px;
    color: #60a5fa;
}
.cm-ldg-field-box {
    position: relative;
}
.cm-ldg-input,
.cm-ldg-field-box .form-control {
    width: 100% !important;
    background: rgba(15,20,35,.85) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: auto !important;
    transition: all .2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25) !important;
    -webkit-appearance: none;
}
.cm-ldg-input:focus,
.cm-ldg-field-box .form-control:focus {
    border-color: rgba(59,130,246,.5) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12), inset 0 2px 4px rgba(0,0,0,.2) !important;
    outline: none !important;
    background: rgba(15,20,35,.95) !important;
    color: #f8fafc !important;
}
.cm-ldg-input[readonly],
.cm-ldg-field-box .form-control[readonly] {
    color: rgba(226,232,240,.65) !important;
    cursor: default;
    background: rgba(15,20,35,.7) !important;
}
.cm-ldg-input--editable,
.cm-ldg-field-box .form-control.cm-ldg-input--editable {
    border-color: rgba(59,130,246,.3) !important;
    background: rgba(15,23,50,.9) !important;
    color: #f1f5f9 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 0 0 1px rgba(59,130,246,.08) !important;
}
.cm-ldg-input--editable:focus,
.cm-ldg-field-box .form-control.cm-ldg-input--editable:focus {
    border-color: rgba(59,130,246,.55) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12), inset 0 2px 4px rgba(0,0,0,.15) !important;
}
.cm-ldg-input::placeholder,
.cm-ldg-field-box .form-control::placeholder {
    color: rgba(255,255,255,.28);
    font-style: italic;
    font-weight: 400;
}

/* ── Buttons ── */
.cm-ldg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none !important;
    white-space: nowrap;
}
.cm-ldg-btn--primary {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.3);
}
.cm-ldg-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59,130,246,.45);
    color: #fff !important;
}
.cm-ldg-btn--pay {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.3);
}
.cm-ldg-btn--pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,.45);
    color: #fff !important;
}
.cm-ldg-hint {
    color: rgba(255,255,255,.45);
    font-size: 11px;
    font-style: italic;
}
.cm-ldg-dateinput {
    width: 130px !important;
    display: inline-block !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    margin-right: 6px;
}

/* ── 33.3  Table Shell ─────────────────────────────────────────────────────── */
.cm-ldg-table-shell {
    background: linear-gradient(180deg, #0e1120 0%, #11142a 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* Toolbar */
.cm-ldg-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.015);
}
.cm-ldg-table-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
}
.cm-ldg-table-title i {
    color: rgba(240,165,0,.7);
    font-size: 15px;
}
.cm-ldg-rec-count {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.05);
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 6px;
    letter-spacing: .3px;
}
.cm-ldg-table-actions {
    display: flex;
    gap: 8px;
}
.cm-ldg-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,.65) !important;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none !important;
}
.cm-ldg-tool-btn:hover {
    background: rgba(255,255,255,.1);
    color: #fff !important;
    transform: translateY(-1px);
}
.cm-ldg-tool-btn--accent {
    background: rgba(59,130,246,.08) !important;
    border-color: rgba(59,130,246,.15) !important;
    color: #60a5fa !important;
}

/* Scroll container */
.cm-ldg-scroll {
    max-height: calc(100vh - 340px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.cm-ldg-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.cm-ldg-scroll::-webkit-scrollbar-track { background: transparent; }
.cm-ldg-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.1);
    border-radius: 4px;
}
.cm-ldg-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ── 33.4  Table ───────────────────────────────────────────────────────────── */
.cm-ldg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.cm-ldg-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}
.cm-ldg-table thead tr {
    background: linear-gradient(135deg, #101530, #171d3a) !important;
}
.cm-ldg-table thead th {
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(240,165,0,.8);
    border-bottom: 2px solid rgba(240,165,0,.12);
    white-space: nowrap;
    background: linear-gradient(135deg, #101530, #171d3a) !important;
}
.cm-ldg-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: all .15s ease;
    border-left: 3px solid transparent;
}
.cm-ldg-table tbody tr:hover {
    background: rgba(59,130,246,.05) !important;
    border-left-color: rgba(59,130,246,.5);
}
.cm-ldg-row-alt {
    background: rgba(255,255,255,.012);
}
.cm-ldg-table tbody td {
    padding: 11px 16px;
    color: rgba(255,255,255,.75);
    vertical-align: middle;
}

/* Column types */
.cm-ldg-col-date {
    width: 105px;
    color: rgba(255,255,255,.5) !important;
    font-size: 11.5px;
    font-weight: 500;
}
.cm-ldg-col-voucher { width: 160px; }
.cm-ldg-col-voucher code {
    background: rgba(255,255,255,.04);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    border: 1px solid rgba(255,255,255,.04);
}
.cm-ldg-col-narr {
    min-width: 120px;
    font-weight: 500;
    color: rgba(255,255,255,.85) !important;
}
.cm-ldg-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
}
.cm-ldg-col-action { width: 44px; text-align: center !important; }

/* Dr / Cr colors */
.cm-ldg-dr { color: #f87171 !important; font-weight: 700 !important; }
.cm-ldg-cr { color: #4ade80 !important; font-weight: 700 !important; }

/* Info button */
.cm-ldg-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,.15);
    background: rgba(59,130,246,.08);
    color: #60a5fa;
    cursor: pointer;
    transition: all .2s;
    font-size: 13px;
}
.cm-ldg-info-btn:hover {
    background: rgba(59,130,246,.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,.2);
    border-color: rgba(59,130,246,.3);
}

/* Empty state */
.cm-ldg-empty {
    text-align: center !important;
    padding: 48px 20px !important;
    color: rgba(255,255,255,.25) !important;
    font-size: 14px !important;
}
.cm-ldg-empty i {
    display: block;
    font-size: 36px;
    margin-bottom: 12px;
    opacity: .35;
}

/* Closing balance row */
.cm-ldg-closing-row {
    background: rgba(240,165,0,.03) !important;
    border-top: 2px solid rgba(240,165,0,.12) !important;
    border-left-color: rgba(240,165,0,.5) !important;
}
.cm-ldg-closing-row:hover {
    background: rgba(240,165,0,.05) !important;
}
.cm-ldg-closing-label {
    text-align: right !important;
    font-weight: 700 !important;
    color: rgba(240,165,0,.75) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.cm-ldg-closing-val {
    text-align: right !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #f0a500 !important;
    letter-spacing: .3px;
}

.cm-ldg-muted {
    color: rgba(255,255,255,.3) !important;
    font-size: 11px;
    font-style: italic;
}
.cm-ldg-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59,130,246,.12);
    color: #60a5fa !important;
    text-decoration: none !important;
    transition: all .15s;
}
.cm-ldg-link-btn:hover { background: rgba(59,130,246,.2); }

/* ── 33.5  Payment Strip ──────────────────────────────────────────────────── */
.cm-ldg-pay-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(5,150,105,.03));
    border: 1px solid rgba(16,185,129,.15);
    border-radius: 12px;
    padding: 12px 20px;
    margin-top: 14px;
}
.cm-ldg-pay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    color: #4ade80;
    white-space: nowrap;
}
.cm-ldg-pay-label i { font-size: 16px; }
.cm-ldg-pay-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}
.cm-ldg-pay-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cm-ldg-currency-icon {
    position: absolute;
    left: 10px;
    color: rgba(255,255,255,.4);
    font-size: 13px;
    z-index: 1;
    pointer-events: none;
}
.cm-ldg-pay-input {
    padding-left: 30px !important;
    width: 150px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 38px !important;
}
.cm-ldg-pay-input:focus {
    border-color: rgba(16,185,129,.4) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,.1) !important;
    outline: none !important;
}
.cm-ldg-pay-select {
    width: 160px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
    height: 38px !important;
}

/* Info banner (CC club) */
.cm-ldg-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    margin-top: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.03));
    border: 1px solid rgba(59,130,246,.15);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
}
.cm-ldg-info-banner i { font-size: 18px; color: #60a5fa; }

/* ── 33.6  Theme-aware hero bar — Light & Blue ────────────────────────────── */

/* LIGHT theme — ledger */
body[data-cm-theme="light"] .cm-ldg {
    background: #f1f5f9 !important;
}
body[data-cm-theme="light"] .cm-ldg-hero {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 40%, #eff6ff 100%) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body[data-cm-theme="light"] .cm-ldg-hero::after {
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.3), rgba(37,99,235,.3), transparent) !important;
}
body[data-cm-theme="light"] .cm-ldg-avatar { border-color: rgba(59,130,246,.25) !important; }
body[data-cm-theme="light"] .cm-ldg-name { color: #1e293b !important; }
body[data-cm-theme="light"] .cm-ldg-tag { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; }
body[data-cm-theme="light"] .cm-ldg-tag--accent { background: rgba(59,130,246,.08) !important; border-color: rgba(59,130,246,.2) !important; color: #2563eb !important; }
body[data-cm-theme="light"] .cm-ldg-bal-card {
    background: rgba(59,130,246,.06) !important;
    border-color: rgba(59,130,246,.15) !important;
}
body[data-cm-theme="light"] .cm-ldg-bal-label { color: #64748b !important; }
body[data-cm-theme="light"] .cm-ldg-bal-val { color: #1e293b !important; }
body[data-cm-theme="light"] .cm-ldg-btn--primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.2) !important;
}
body[data-cm-theme="light"] .cm-ldg-field-label { color: #475569 !important; }
body[data-cm-theme="light"] .cm-ldg-field-label i { color: #3b82f6 !important; }
body[data-cm-theme="light"] .cm-ldg-fields-row {
    background: rgba(241,245,249,.6) !important;
    border-top-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-ldg-field input,
body[data-cm-theme="light"] .cm-ldg-field .form-control,
body[data-cm-theme="light"] .cm-ldg-field-box .form-control {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
body[data-cm-theme="light"] .cm-ldg-field input[readonly],
body[data-cm-theme="light"] .cm-ldg-field .form-control[readonly] {
    background: #f8fafc !important;
    color: #64748b !important;
}
body[data-cm-theme="light"] .cm-ldg-field .cm-ldg-input--editable,
body[data-cm-theme="light"] .cm-ldg-field-box .form-control.cm-ldg-input--editable {
    border-color: rgba(59,130,246,.4) !important;
    background: #eff6ff !important;
    color: #1e293b !important;
}
/* Table */
body[data-cm-theme="light"] .cm-ldg-table-shell {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
body[data-cm-theme="light"] .cm-ldg-table-toolbar {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-ldg-table-title { color: #1e293b !important; }
body[data-cm-theme="light"] .cm-ldg-table-title i { color: #3b82f6 !important; }
body[data-cm-theme="light"] .cm-ldg-table thead th {
    color: #475569 !important;
    border-bottom-color: #e2e8f0 !important;
    background: #f8fafc !important;
}
body[data-cm-theme="light"] .cm-ldg-table tbody tr {
    border-bottom-color: #f1f5f9 !important;
}
body[data-cm-theme="light"] .cm-ldg-table tbody td { color: #334155 !important; }
body[data-cm-theme="light"] .cm-ldg-table tbody tr:hover {
    background: rgba(59,130,246,.04) !important;
    border-left-color: #3b82f6 !important;
}
body[data-cm-theme="light"] .cm-ldg-closing-row {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-ldg-closing-label { color: #475569 !important; }
body[data-cm-theme="light"] .cm-ldg-closing-val { color: #1e293b !important; }
/* Payment strip */
body[data-cm-theme="light"] .cm-ldg-pay-strip {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,.04) !important;
}
body[data-cm-theme="light"] .cm-ldg-pay-label { color: #475569 !important; }
body[data-cm-theme="light"] .cm-ldg-pay-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-ldg-info-banner {
    background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(59,130,246,.02)) !important;
    border-color: rgba(59,130,246,.12) !important;
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .cm-ldg-info-banner i { color: #2563eb !important; }

/* BLUE theme — ledger */
body[data-cm-theme="blue"] .cm-ldg {
    background: #0c1220 !important;
}
body[data-cm-theme="blue"] .cm-ldg-hero {
    background: linear-gradient(145deg, #0c1e3e 0%, #122a54 40%, #0f2244 100%) !important;
    border-color: rgba(96,165,250,.12) !important;
}
body[data-cm-theme="blue"] .cm-ldg-hero::after {
    background: linear-gradient(90deg, transparent, rgba(96,165,250,.5), rgba(59,130,246,.5), transparent) !important;
}
body[data-cm-theme="blue"] .cm-ldg-avatar { border-color: rgba(96,165,250,.4) !important; }
body[data-cm-theme="blue"] .cm-ldg-tag--accent { background: rgba(59,130,246,.12) !important; border-color: rgba(96,165,250,.2) !important; color: #60a5fa !important; }
body[data-cm-theme="blue"] .cm-ldg-bal-card { border-color: rgba(96,165,250,.12) !important; }
body[data-cm-theme="blue"] .cm-ldg-table-shell { border-color: rgba(96,165,250,.08) !important; }
body[data-cm-theme="blue"] .cm-ldg-table thead th { color: rgba(147,197,253,.85) !important; border-bottom-color: rgba(96,165,250,.15) !important; }
body[data-cm-theme="blue"] .cm-ldg-table-title i { color: rgba(96,165,250,.7) !important; }
body[data-cm-theme="blue"] .cm-ldg-closing-label { color: rgba(147,197,253,.8) !important; }
body[data-cm-theme="blue"] .cm-ldg-closing-val { color: #93c5fd !important; }
body[data-cm-theme="blue"] .cm-ldg-closing-row { background: rgba(59,130,246,.04) !important; border-top-color: rgba(96,165,250,.15) !important; }
body[data-cm-theme="blue"] .cm-ldg-btn--primary { background: linear-gradient(135deg, #1e40af, #3b82f6) !important; box-shadow: 0 4px 14px rgba(59,130,246,.3) !important; }
body[data-cm-theme="blue"] .cm-ldg-field-label { color: rgba(147,197,253,.6) !important; }
body[data-cm-theme="blue"] .cm-ldg-field-label i { color: #60a5fa !important; }
body[data-cm-theme="blue"] .cm-ldg-fields-row {
    background: rgba(10,22,40,.6) !important;
    border-top-color: rgba(96,165,250,.08) !important;
}
body[data-cm-theme="blue"] .cm-ldg-field-box .form-control,
body[data-cm-theme="blue"] .cm-ldg-input {
    background: rgba(10,22,50,.85) !important;
    border-color: rgba(96,165,250,.15) !important;
    color: #e2e8f0 !important;
}
body[data-cm-theme="blue"] .cm-ldg-field-box .form-control.cm-ldg-input--editable {
    border-color: rgba(96,165,250,.3) !important;
    background: rgba(15,30,65,.9) !important;
}
body[data-cm-theme="blue"] .cm-ldg-table tbody tr:hover { border-left-color: rgba(96,165,250,.5) !important; }
body[data-cm-theme="blue"] .cm-ldg-pay-strip { border-color: rgba(96,165,250,.08) !important; }

/* ── 33.7  Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .cm-ldg-hero-row1 { flex-wrap: wrap; gap: 12px; }
    .cm-ldg-bal-card { min-width: 150px; }
    .cm-ldg-fields-row { flex-wrap: wrap; gap: 10px; }
    .cm-ldg-field { min-width: calc(50% - 6px); }
}
@media (max-width: 768px) {
    .cm-ldg-hero-row1 {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px 10px;
    }
    .cm-ldg-fields-row {
        flex-direction: column;
        padding: 12px 16px 14px;
    }
    .cm-ldg-field, .cm-ldg-field--wide { flex: auto; width: 100%; }
    .cm-ldg-bal-card { min-width: auto; width: 100%; }
    .cm-ldg-action-col { width: 100%; }
    .cm-ldg-btn { width: 100%; justify-content: center; }
    .cm-ldg-pay-strip {
        flex-direction: column;
        align-items: stretch;
    }
    .cm-ldg-pay-fields {
        flex-direction: column;
        align-items: stretch;
    }
    .cm-ldg-pay-input { width: 100% !important; }
    .cm-ldg-scroll { max-height: 50vh; }
    .cm-ldg-name { font-size: 17px !important; }
}

/* ── 33.8  Dark content background for ledger page ───────────────────────── */
.cm-ldg {
    background: #0b0d14;
    margin: -20px -22px -28px !important;
    padding: 20px 22px 28px !important;
    min-height: calc(100vh - 64px);
}
.cm-ldg .panel, .cm-ldg .panel-group, .cm-ldg .box,
.cm-ldg .panel-body, .cm-ldg .panel-default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── 33.9  Entrance animation ─────────────────────────────────────────────── */
@keyframes cmLdgSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cm-ldg-hero {
    animation: cmLdgSlideUp .4s ease-out both;
}
.cm-ldg-table-shell {
    animation: cmLdgSlideUp .4s ease-out .1s both;
}
.cm-ldg-pay-strip {
    animation: cmLdgSlideUp .4s ease-out .2s both;
}

/* =============================================================================
   34. CLUB OFFERS — Premium Create / Edit Form
   ============================================================================= */

/* ── 34.1  Page wrapper ──────────────────────────────────────────────────── */
.cm-offer-page {
    padding: 20px 24px 40px !important;
    max-width: 900px;
    margin: 0 auto;
    background: #0b0d14;
    margin: -20px -22px -28px !important;
    padding: 24px 22px 40px !important;
    min-height: calc(100vh - 64px);
}
.cm-offer-page .panel, .cm-offer-page .box,
.cm-offer-page .panel-body, .cm-offer-page .box-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── 34.2  Page header ───────────────────────────────────────────────────── */
.cm-offer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.cm-offer-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-offer-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(59,130,246,.3);
    flex-shrink: 0;
}
.cm-offer-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
}
.cm-offer-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin: 0;
    font-weight: 400;
}
.cm-offer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.6) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .2s ease;
}
.cm-offer-back-btn:hover {
    background: rgba(255,255,255,.1);
    color: #fff !important;
    border-color: rgba(255,255,255,.15);
}

/* ── 34.3  Main card ─────────────────────────────────────────────────────── */
.cm-offer-card {
    background: linear-gradient(145deg, #10142a 0%, #141836 40%, #101428 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 0;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
    animation: cmOfferFadeIn .4s ease-out both;
}
@keyframes cmOfferFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 34.4  Info banner ───────────────────────────────────────────────────── */
.cm-offer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(59,130,246,.06);
    border-bottom: 1px solid rgba(59,130,246,.1);
    color: #93c5fd;
    font-size: 12px;
    font-weight: 400;
}
.cm-offer-info i {
    font-size: 16px;
    color: #60a5fa;
    flex-shrink: 0;
}
.cm-offer-info strong {
    color: #bfdbfe;
    font-weight: 600;
}

/* ── 34.5  Sections ──────────────────────────────────────────────────────── */
.cm-offer-section {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.cm-offer-section:last-of-type {
    border-bottom: none;
}
.cm-offer-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.45);
    margin-bottom: 18px;
}
.cm-offer-section-label i {
    font-size: 13px;
    color: #60a5fa;
}

/* ── 34.6  Labels & inputs ───────────────────────────────────────────────── */
.cm-offer-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.5);
    margin-bottom: 7px;
}
.cm-offer-input,
.cm-offer-page .form-control {
    background: rgba(15,20,40,.8) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 10px !important;
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    height: auto !important;
    transition: all .2s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.2) !important;
    width: 100%;
}
.cm-offer-input:focus,
.cm-offer-page .form-control:focus {
    border-color: rgba(59,130,246,.5) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1), inset 0 2px 4px rgba(0,0,0,.15) !important;
    outline: none !important;
    background: rgba(15,20,40,.95) !important;
    color: #f8fafc !important;
}
.cm-offer-input::placeholder {
    color: rgba(255,255,255,.2);
    font-style: italic;
    font-weight: 400;
}
.cm-offer-textarea {
    min-height: 140px !important;
    resize: vertical;
}
.cm-offer-field {
    margin-bottom: 18px;
}
.cm-offer-field:last-child {
    margin-bottom: 0;
}

/* ── 34.7  Date/time row ─────────────────────────────────────────────────── */
.cm-offer-date-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.cm-offer-date-group {
    flex: 1;
    min-width: 0;
}
.cm-offer-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.25);
    font-size: 12px;
    flex-shrink: 0;
}
.cm-offer-input-pair {
    display: flex;
    gap: 10px;
}
.cm-offer-input-icon-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}
.cm-offer-input-icon-wrap > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(255,255,255,.25);
    z-index: 2;
    pointer-events: none;
}
.cm-offer-input-icon-wrap > input {
    padding-left: 34px !important;
}
/* Hide Bootstrap input-group-addon since we use icon overlay */
.cm-offer-page .input-group-addon { display: none !important; }
.cm-offer-page .input-group { display: block !important; }

/* ── 34.8  Image upload zone ─────────────────────────────────────────────── */
.cm-offer-upload-zone {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
    border: 2px dashed rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(0,0,0,.15);
    transition: all .25s ease;
}
.cm-offer-upload-zone:hover {
    border-color: rgba(59,130,246,.2);
    background: rgba(59,130,246,.03);
}
.cm-offer-upload-zone.has-image {
    border-color: rgba(59,130,246,.2);
    border-style: solid;
}
.cm-offer-upload-preview {
    width: 200px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-offer-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.cm-offer-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cm-offer-file-input {
    display: none !important;
}
.cm-offer-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    border: none;
    box-shadow: 0 4px 14px rgba(59,130,246,.25);
    text-decoration: none !important;
}
.cm-offer-upload-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59,130,246,.35);
    color: #fff !important;
}
.cm-offer-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.15);
    color: #f87171;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}
.cm-offer-remove-btn:hover {
    background: rgba(239,68,68,.15);
    border-color: rgba(239,68,68,.25);
}

/* ── 34.9  Actions bar ───────────────────────────────────────────────────── */
.cm-offer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.1);
}
.cm-offer-cancel-btn {
    padding: 10px 24px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none !important;
}
.cm-offer-cancel-btn:hover {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.8) !important;
    border-color: rgba(255,255,255,.15);
}
.cm-offer-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 16px rgba(59,130,246,.3);
    letter-spacing: .3px;
}
.cm-offer-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(59,130,246,.4);
}

/* ── 34.10  Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cm-offer-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cm-offer-date-row { flex-direction: column; }
    .cm-offer-date-divider { display: none; }
    .cm-offer-input-pair { flex-direction: column; }
    .cm-offer-upload-zone { flex-direction: column; align-items: stretch; }
    .cm-offer-upload-preview { width: 100%; height: 160px; }
    .cm-offer-section { padding: 18px 16px; }
    .cm-offer-actions { padding: 16px; }
    .cm-offer-card { border-radius: 14px; }
}

/* ── 34.11  Light theme overrides ────────────────────────────────────────── */
body[data-cm-theme="light"] .cm-offer-page {
    background: #f1f5f9 !important;
}
body[data-cm-theme="light"] .cm-offer-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body[data-cm-theme="light"] .cm-offer-title { color: #1e293b !important; }
body[data-cm-theme="light"] .cm-offer-subtitle { color: #64748b !important; }
body[data-cm-theme="light"] .cm-offer-back-btn {
    background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important;
}
body[data-cm-theme="light"] .cm-offer-info {
    background: rgba(59,130,246,.04) !important;
    border-bottom-color: #e2e8f0 !important;
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .cm-offer-info strong { color: #1e40af !important; }
body[data-cm-theme="light"] .cm-offer-section { border-bottom-color: #f1f5f9 !important; }
body[data-cm-theme="light"] .cm-offer-section-label { color: #64748b !important; }
body[data-cm-theme="light"] .cm-offer-section-label i { color: #3b82f6 !important; }
body[data-cm-theme="light"] .cm-offer-label { color: #475569 !important; }
body[data-cm-theme="light"] .cm-offer-input,
body[data-cm-theme="light"] .cm-offer-page .form-control {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
body[data-cm-theme="light"] .cm-offer-input:focus,
body[data-cm-theme="light"] .cm-offer-page .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
body[data-cm-theme="light"] .cm-offer-upload-zone {
    border-color: #e2e8f0 !important; background: #f8fafc !important;
}
body[data-cm-theme="light"] .cm-offer-upload-preview { background: #e2e8f0 !important; }
body[data-cm-theme="light"] .cm-offer-date-divider { background: #f1f5f9 !important; color: #94a3b8 !important; }
body[data-cm-theme="light"] .cm-offer-actions { background: #f8fafc !important; border-top-color: #e2e8f0 !important; }
body[data-cm-theme="light"] .cm-offer-cancel-btn { border-color: #cbd5e1 !important; color: #64748b !important; }
body[data-cm-theme="light"] .cm-offer-input-icon-wrap > i { color: #94a3b8 !important; }
body[data-cm-theme="light"] .cm-offer-remove-btn {
    background: rgba(239,68,68,.06) !important; border-color: rgba(239,68,68,.15) !important;
}

/* ── 34.12  Blue theme overrides ─────────────────────────────────────────── */
body[data-cm-theme="blue"] .cm-offer-page { background: #0c1220 !important; }
body[data-cm-theme="blue"] .cm-offer-card {
    background: linear-gradient(145deg, #0c1e3e 0%, #122a54 40%, #0f2244 100%) !important;
    border-color: rgba(96,165,250,.1) !important;
}
body[data-cm-theme="blue"] .cm-offer-info { background: rgba(59,130,246,.08) !important; border-bottom-color: rgba(96,165,250,.12) !important; }
body[data-cm-theme="blue"] .cm-offer-section { border-bottom-color: rgba(96,165,250,.06) !important; }
body[data-cm-theme="blue"] .cm-offer-input,
body[data-cm-theme="blue"] .cm-offer-page .form-control {
    background: rgba(10,22,50,.85) !important; border-color: rgba(96,165,250,.15) !important;
}
body[data-cm-theme="blue"] .cm-offer-upload-zone { border-color: rgba(96,165,250,.12) !important; background: rgba(10,22,50,.4) !important; }
body[data-cm-theme="blue"] .cm-offer-actions { background: rgba(10,22,50,.3) !important; border-top-color: rgba(96,165,250,.08) !important; }

/* =============================================================================
   35. PORTED STYLES — btn-pay (from UX.new.css)
   ============================================================================= */
.btn-pay {
    position: relative;
    background: linear-gradient(90deg, #1093df 2%, #59afabc7 100%);
    color: white;
    float: right;
    margin: .5%;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-pay:hover { opacity: .85; color: #fff; }

/* =============================================================================
   36. LIGHT THEME — Dropdown, Header & Sidebar label fixes
   ============================================================================= */

/* ── cm-drop panel (user dropdown) ─────────────────────────────────────────── */
body[data-cm-theme="light"] .cm-drop {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04) !important;
}
body[data-cm-theme="light"] .cm-drop-profile {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-drop-uname {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-drop-club {
    color: #64748b !important;
}
body[data-cm-theme="light"] .cm-drop-divider {
    background: #e2e8f0 !important;
}
body[data-cm-theme="light"] .cm-drop-item > a,
body[data-cm-theme="light"] .cm-drop-item > span,
body[data-cm-theme="light"] .cm-drop-item > div {
    color: #334155 !important;
}
body[data-cm-theme="light"] .cm-drop-item > a:hover,
body[data-cm-theme="light"] .cm-drop-item > span:hover,
body[data-cm-theme="light"] .cm-drop-item > div:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
body[data-cm-theme="light"] .cm-di-icon--blue { background: rgba(59,130,246,.1) !important; color: #3b82f6 !important; }
body[data-cm-theme="light"] .cm-di-icon--gray { background: rgba(100,116,139,.1) !important; color: #64748b !important; }
body[data-cm-theme="light"] .cm-di-icon--red  { background: rgba(239,68,68,.08) !important; color: #ef4444 !important; }

/* Sign out button/link in dropdown */
body[data-cm-theme="light"] .cm-logout-wrap a,
body[data-cm-theme="light"] .cm-logout-wrap button,
body[data-cm-theme="light"] .cm-logout-wrap input[type="submit"] {
    color: #334155 !important;
}
body[data-cm-theme="light"] .cm-logout-wrap:hover a,
body[data-cm-theme="light"] .cm-logout-wrap:hover button,
body[data-cm-theme="light"] .cm-logout-wrap:hover input[type="submit"] {
    color: #ef4444 !important;
}
body[data-cm-theme="light"] .cm-drop-item--danger > a:hover,
body[data-cm-theme="light"] .cm-drop-item--danger > div:hover {
    background: rgba(239,68,68,.06) !important;
    color: #ef4444 !important;
}

/* ── cm-drop avatar ring ───────────────────────────────────────────────────── */
body[data-cm-theme="light"] .cm-drop-av {
    border-color: rgba(59,130,246,.4) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
body[data-cm-theme="light"] .cm-drop-dot {
    border-color: #fff !important;
}

/* ── Header labels & links in light theme ──────────────────────────────────── */
body[data-cm-theme="light"] .cm-theme-btn {
    color: rgba(255,255,255,.6) !important;
}
body[data-cm-theme="light"] .cm-theme-panel {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
body[data-cm-theme="light"] .cm-theme-panel-title {
    color: #475569 !important;
}

/* ── General label, heading, link visibility on light backgrounds ──────────── */
body[data-cm-theme="light"] label,
body[data-cm-theme="light"] .control-label {
    color: #334155 !important;
}
body[data-cm-theme="light"] a {
    color: #2563eb;
}
body[data-cm-theme="light"] a:hover {
    color: #1d4ed8;
}
body[data-cm-theme="light"] .content-header h1 {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .content-header .breadcrumb > li > a {
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .main-footer {
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

/* ── Sidebar user panel info text ──────────────────────────────────────────── */
body[data-cm-theme="light"] .user-panel > .info,
body[data-cm-theme="light"] .user-panel > .info > a {
    color: #334155 !important;
}
body[data-cm-theme="light"] .user-panel > .info > p {
    color: #64748b !important;
}
/* Sidebar user name & status (custom classes) */
.cm-sidebar-uname { color: rgba(255,255,255,.88); }
.cm-sidebar-status { color: rgba(34,197,94,.85); }
body[data-cm-theme="light"] .cm-sidebar-uname { color: #1e293b !important; }
body[data-cm-theme="light"] .cm-sidebar-status { color: #22c55e !important; }

/* ── ClubOffers hero banner on light theme ─────────────────────────────────── */
body[data-cm-theme="light"] .offer-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #dbeafe 100%) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
body[data-cm-theme="light"] .offer-hero h2 {
    color: #1e293b !important;
}
body[data-cm-theme="light"] .offer-hero h2 i {
    color: #3b82f6 !important;
}
body[data-cm-theme="light"] .offer-hero p {
    color: #64748b !important;
}
body[data-cm-theme="light"] .offer-hero .badge-offer {
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.2) !important;
    color: #2563eb !important;
}

/* ── CreateUser hero on light theme ────────────────────────────────────────── */
body[data-cm-theme="light"] .cu-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #dbeafe 100%) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
body[data-cm-theme="light"] .cu-hero h2 { color: #1e293b !important; }
body[data-cm-theme="light"] .cu-hero h2 i { color: #3b82f6 !important; }
body[data-cm-theme="light"] .cu-hero p { color: #64748b !important; }
body[data-cm-theme="light"] .cu-hero .badge-cu {
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.2) !important;
    color: #2563eb !important;
}

/* ── Fix generic .btn-pay in light dropdown context ────────────────────────── */
body[data-cm-theme="light"] .cm-drop .btn-pay,
body[data-cm-theme="light"] .cm-logout-wrap .btn-pay {
    background: transparent !important;
    color: #334155 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
body[data-cm-theme="light"] .cm-logout-wrap:hover .btn-pay {
    color: #ef4444 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL PAGE LOADER  (#cm-page-loader)
   All loader CSS lives HERE (pure .css) — NEVER in .cshtml <style> blocks,
   because Razor treats @keyframes as a C# expression and breaks the build.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────────────────────── */
#cm-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 20, 45, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.22s ease;
    transition: opacity 0.22s ease;
}
#cm-page-loader.active {
    opacity: 1;
    pointer-events: all;
}

/* ── Spinner ring ───────────────────────────────────────────────────────────── */
.cm-loader-ring {
    width: 58px; height: 58px;
    border: 4px solid rgba(201, 168, 76, 0.18);
    border-top-color: #c9a84c;
    border-radius: 50%;
    -webkit-animation: cm-spin 0.82s linear infinite;
    animation: cm-spin 0.82s linear infinite;
}
@-webkit-keyframes cm-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes cm-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ── Bouncing dots ──────────────────────────────────────────────────────────── */
.cm-loader-dots {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    gap: 7px;
}
.cm-loader-dots span {
    width: 8px; height: 8px;
    background: #c9a84c;
    border-radius: 50%;
    -webkit-animation: cm-bounce 1.3s ease-in-out infinite;
    animation: cm-bounce 1.3s ease-in-out infinite;
}
.cm-loader-dots span:nth-child(2) { -webkit-animation-delay: 0.22s; animation-delay: 0.22s; }
.cm-loader-dots span:nth-child(3) { -webkit-animation-delay: 0.44s; animation-delay: 0.44s; }
@-webkit-keyframes cm-bounce {
    0%, 80%, 100% { -webkit-transform: scale(0.55); transform: scale(0.55); opacity: 0.35; }
    40%            { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
}
@keyframes cm-bounce {
    0%, 80%, 100% { -webkit-transform: scale(0.55); transform: scale(0.55); opacity: 0.35; }
    40%            { -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }
}

/* ── Message text ───────────────────────────────────────────────────────────── */
.cm-loader-msg {
    margin: 0;
    font-size: 1.02rem; font-weight: 600; letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.88);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
}
.cm-loader-sub {
    margin: -6px 0 0;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Top progress bar ───────────────────────────────────────────────────────── */
.cm-loader-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #c9a84c, #e2c97e, #c9a84c);
    background-size: 200% 100%;
    z-index: 100000;
    opacity: 0;
    -webkit-transition: opacity 0.18s ease;
    transition: opacity 0.18s ease;
    -webkit-animation: cm-bar-slide 1.6s linear infinite;
    animation: cm-bar-slide 1.6s linear infinite;
}
#cm-page-loader.active .cm-loader-bar {
    opacity: 1; width: 100%;
    -webkit-transition: opacity 0.18s ease, width 12s ease-out;
    transition: opacity 0.18s ease, width 12s ease-out;
}
@-webkit-keyframes cm-bar-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes cm-bar-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}