/* =====================================================
   Velocity Hosting — Dark Theme
   Target: WHMCS Twenty-One base
   ===================================================== */

/* --- Design Tokens --- */
:root {
    --vel-bg:              #1b1c22;
    --vel-card:            #1e1e20;
    --vel-card-hover:      #2b2b40;
    --vel-card-deep:       #1d1d20;
    --vel-border:          rgba(66, 66, 91, 0.4);
    --vel-border-strong:   #42425b;
    --vel-accent:          #96d35f;
    --vel-accent-hover:    #82bf4a;
    --vel-accent-dim:      rgba(150, 211, 95, 0.15);
    --vel-teal:            #56aa2b;
    --vel-teal-dim:        rgba(86, 170, 43, 0.15);
    --vel-red:             #aa2a2a;
    --vel-red-dim:         rgba(170, 42, 42, 0.2);
    --vel-gold:            #f59e0b;
    --vel-gold-dim:        rgba(245, 158, 11, 0.15);
    --vel-text:            #f4f4f4;
    --vel-text-secondary:  #b2b2c1;
    --vel-text-muted:      #808090;
    --vel-radius:          8px;
    --vel-radius-lg:       14px;
    --vel-shadow:          0 2px 8px rgba(0, 0, 0, 0.4);
    --vel-shadow-lg:       0 4px 24px rgba(0, 0, 0, 0.5);
    --vel-white:           #fff;
}

/* =====================================================
   Base
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
.primary-bg-color {
    background-color: var(--vel-bg) !important;
    color: var(--vel-text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vel-text) !important;
    font-family: 'Inter', sans-serif !important;
}

p { color: var(--vel-text-secondary) !important; }

a {
    color: var(--vel-accent) !important;
    text-decoration: none !important;
}
a:hover { color: var(--vel-accent-hover) !important; }

hr { border-color: var(--vel-border) !important; }

.text-muted     { color: var(--vel-text-muted)     !important; }
.text-secondary { color: var(--vel-text-secondary)  !important; }
.text-white     { color: var(--vel-text)            !important; }

.bg-white  { background-color: var(--vel-card)     !important; }
.bg-light  { background-color: var(--vel-card-deep) !important; }
.bg-dark   { background-color: var(--vel-bg)       !important; }
.border    { border-color: var(--vel-border)        !important; }

/* =====================================================
   Scrollbars
   ===================================================== */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--vel-bg); }
::-webkit-scrollbar-thumb        { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255, 255, 255, 0.25); }

/* =====================================================
   Header & Navbar
   ===================================================== */

#header,
.header {
    background-color: var(--vel-card) !important;
    border-bottom: 1px solid var(--vel-border) !important;
    box-shadow: 0 1px 0 var(--vel-border) !important;
}

.topbar {
    background-color: #17171a !important;
    border-bottom: 1px solid var(--vel-border) !important;
}
.topbar .btn          { color: var(--vel-text-secondary) !important; }
.topbar .btn:hover    { color: var(--vel-text) !important; }
.topbar .input-group-text,
.active-client .input-group-text {
    background-color: transparent !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text-muted) !important;
}
.btn-active-client {
    background-color: transparent !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text-secondary) !important;
}
.btn-active-client:hover { color: var(--vel-text) !important; }

.navbar {
    background-color: var(--vel-card) !important;
    border: none !important;
}

.main-navbar-wrapper {
    background-color: var(--vel-card-deep) !important;
    border-bottom: 1px solid var(--vel-border) !important;
}
.main-navbar-wrapper .navbar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navbar-brand {
    color: var(--vel-text) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.02em !important;
}

.navbar-nav .nav-link,
.navbar-nav a {
    color: var(--vel-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav a:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item.active > a,
.navbar-nav .nav-link.active {
    color: #fff !important;
}

.navbar-nav .dropdown-toggle::after { border-top-color: var(--vel-text) !important; }

.cart-btn { color: var(--vel-text) !important; border: none !important; }
.cart-btn:hover { color: #fff !important; }

.toolbar-icon-btn { color: var(--vel-text) !important; border: none !important; padding: 0.375rem 0.5rem !important; }
.toolbar-icon-btn:hover { color: #fff !important; }
.toolbar-badge { position: absolute !important; top: 2px !important; right: 2px !important; font-size: 0.6rem !important; padding: 2px 4px !important; }

/* Search bar in header */
.input-group.search .form-control,
.input-group.search .btn {
    background-color: var(--vel-card-deep) !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text-secondary) !important;
}
.input-group.search .form-control::placeholder { color: var(--vel-text-muted) !important; }
.input-group.search .form-control:focus {
    border-color: var(--vel-accent) !important;
    box-shadow: none !important;
    color: var(--vel-text) !important;
}

/* Notification popover */
.client-alerts { list-style: none; margin: 0; padding: 0; }
.client-alerts li a {
    color: var(--vel-text-secondary) !important;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.client-alerts li a:hover { color: var(--vel-text) !important; }
.client-alerts li.none { color: var(--vel-text-muted) !important; font-size: 0.875rem; padding: 0.5rem 0; }

/* =====================================================
   Breadcrumb
   ===================================================== */

.master-breadcrumb {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0.5rem 0 !important;
}

.breadcrumb {
    background-color: transparent !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumb-item a           { color: var(--vel-text-secondary) !important; font-size: 0.8rem !important; }
.breadcrumb-item a:hover     { color: var(--vel-text) !important; }
.breadcrumb-item.active      { color: var(--vel-text-muted) !important; font-size: 0.8rem !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vel-text-muted) !important; }

/* =====================================================
   Cards
   ===================================================== */

.card {
    background-color: var(--vel-card) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius-lg) !important;
    box-shadow: var(--vel-shadow) !important;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--vel-border) !important;
    color: var(--vel-text) !important;
    padding: 1rem 1.25rem !important;
}

.card-body   { color: var(--vel-text) !important; }
.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--vel-border) !important;
}

.card-title {
    color: var(--vel-text) !important;
    font-weight: 600 !important;
    font-size: 0.925rem !important;
    margin-bottom: 0 !important;
}

.card-accent-blue   { border-top: 2px solid var(--vel-accent) !important; }
.card-accent-green  { border-top: 2px solid var(--vel-teal) !important; }
.card-accent-red    { border-top: 2px solid var(--vel-red) !important; }
.card-accent-gold,
.card-accent-yellow { border-top: 2px solid var(--vel-gold) !important; }

/* =====================================================
   Dashboard Tiles
   ===================================================== */

.tiles { margin-bottom: 1.5rem !important; }

.tile {
    display: block !important;
    background-color: var(--vel-card) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius-lg) !important;
    padding: 1.5rem 1.25rem 1rem !important;
    text-decoration: none !important;
    color: var(--vel-text) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.tile:hover {
    background-color: var(--vel-card-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--vel-shadow-lg) !important;
    color: var(--vel-text) !important;
    text-decoration: none !important;
}
.tile i {
    font-size: 1.5rem !important;
    color: var(--vel-text-muted) !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}
.tile .stat {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--vel-text) !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
}
.tile .title {
    font-size: 0.8rem !important;
    color: var(--vel-text-secondary) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
}
.tile .highlight.bg-color-blue  { background-color: var(--vel-accent) !important; }
.tile .highlight.bg-color-green { background-color: var(--vel-teal) !important; }
.tile .highlight.bg-color-red   { background-color: var(--vel-red) !important; }
.tile .highlight.bg-color-gold  { background-color: var(--vel-gold) !important; }

/* =====================================================
   Sidebar
   ===================================================== */

.sidebar { /* transparent container — individual cards handle bg */ }

.card-sidebar {
    border-radius: var(--vel-radius-lg) !important;
    overflow: hidden !important;
}

.card-sidebar .card-header {
    padding: 0.75rem 1rem !important;
}

.card-sidebar .card-title {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--vel-text-muted) !important;
    font-weight: 600 !important;
}

.card-sidebar .card-title i {
    color: var(--vel-accent) !important;
    margin-right: 0.4rem !important;
}

.card-minimise {
    color: var(--vel-text-muted) !important;
    cursor: pointer !important;
    font-size: 0.75rem !important;
    transition: transform 0.2s ease !important;
}
.card-minimise.minimised { transform: rotate(180deg) !important; }

/* =====================================================
   List Groups (sidebar nav + home panels)
   ===================================================== */

.list-group-item {
    background-color: var(--vel-card) !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text-secondary) !important;
    font-size: 0.875rem !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--vel-card-hover) !important;
    color: var(--vel-text) !important;
    border-color: var(--vel-border) !important;
}

.list-group-item.active {
    background-color: var(--vel-accent-dim) !important;
    border-color: var(--vel-accent) !important;
    color: var(--vel-accent) !important;
}

.list-group-flush .list-group-item { border-radius: 0 !important; }

.sidebar-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}
.sidebar-menu-item-icon-wrapper { color: var(--vel-text-muted) !important; width: 1.25rem !important; text-align: center !important; }
.list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--vel-accent) !important; }
.sidebar-menu-item-label { flex: 1 !important; }
.sidebar-menu-item-badge { margin-left: auto !important; }

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

.table {
    color: var(--vel-text) !important;
    border-color: var(--vel-border) !important;
}

.table thead th {
    background-color: var(--vel-card-deep) !important;
    color: var(--vel-text-muted) !important;
    border-bottom: 2px solid var(--vel-border) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.table td {
    background-color: var(--vel-card) !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text) !important;
    vertical-align: middle !important;
}

tbody { background-color: var(--vel-card) !important; }
tr    { background-color: transparent !important; }

.table-striped tbody tr:nth-of-type(odd) td { background-color: #222224 !important; }
.table-hover tbody tr:hover td              { background-color: var(--vel-card-hover) !important; }

/* DataTables box-shadow striping override */
.table-striped tbody tr.odd  td { box-shadow: none !important; }
.table-striped tbody tr.even td { background-color: var(--vel-card) !important; }

.table-list > tbody > tr > td { background-color: var(--vel-card) !important; }

/* =====================================================
   DataTables
   ===================================================== */

.dataTables_wrapper { color: var(--vel-text) !important; }

.dataTables_length label,
.dataTables_filter label {
    color: var(--vel-text-secondary) !important;
    font-size: 0.85rem !important;
}

.dataTables_length select,
.dataTables_filter input {
    background-color: var(--vel-card-deep) !important;
    border: 1px solid var(--vel-border) !important;
    color: var(--vel-text) !important;
    border-radius: var(--vel-radius) !important;
    padding: 0.25rem 0.5rem !important;
}

.dataTables_info { color: var(--vel-text-muted) !important; font-size: 0.8rem !important; }

.dataTables_paginate .paginate_button {
    color: var(--vel-text-secondary) !important;
    border-radius: var(--vel-radius) !important;
    border: 1px solid transparent !important;
}
.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--vel-accent) !important;
    border-color: var(--vel-accent) !important;
    color: #1b1c22 !important;
    box-shadow: none !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    color: var(--vel-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.listtable { overflow: hidden !important; border-radius: var(--vel-radius-lg) !important; }

/* =====================================================
   Forms
   ===================================================== */

.form-control {
    background-color: var(--vel-card-deep) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--vel-text) !important;
    border-radius: var(--vel-radius) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus {
    background-color: var(--vel-card-deep) !important;
    border-color: var(--vel-accent) !important;
    box-shadow: 0 0 0 3px var(--vel-accent-dim) !important;
    color: var(--vel-text) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--vel-text-muted) !important; }
.form-control:disabled,
.form-control[readonly] {
    background-color: #17171a !important;
    opacity: 0.6 !important;
}

label {
    color: var(--vel-text-secondary) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.35rem !important;
}

.input-group-text {
    background-color: var(--vel-card-deep) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--vel-text-muted) !important;
    font-size: 0.875rem !important;
}

.form-group { margin-bottom: 1.25rem !important; }

.form-check-input { background-color: var(--vel-card-deep) !important; border-color: var(--vel-border-strong) !important; }
.form-check-label { color: var(--vel-text-secondary) !important; }
.form-check-input:checked { background-color: var(--vel-accent) !important; border-color: var(--vel-accent) !important; }

/* Select2 */
.select2-container--default .select2-selection--single {
    background-color: var(--vel-card-deep) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--vel-text) !important;
    border-radius: var(--vel-radius) !important;
    height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vel-text) !important;
    line-height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-dropdown {
    background-color: var(--vel-card-deep) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--vel-radius) !important;
    box-shadow: var(--vel-shadow-lg) !important;
}
.select2-search--dropdown .select2-search__field {
    background-color: var(--vel-card) !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text) !important;
}
.select2-container--default .select2-results__option { color: var(--vel-text-secondary) !important; font-size: 0.875rem !important; }
.select2-container--default .select2-results__option--highlighted { background-color: var(--vel-accent) !important; color: #1b1c22 !important; }
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--vel-accent-dim) !important;
    color: var(--vel-accent) !important;
}

/* =====================================================
   Buttons
   ===================================================== */

.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--vel-radius) !important;
    transition: all 0.15s ease !important;
}

.btn-primary {
    background-color: var(--vel-accent) !important;
    border-color: var(--vel-accent) !important;
    color: #1b1c22 !important;
}
.btn-primary:hover {
    background-color: var(--vel-accent-hover) !important;
    border-color: var(--vel-accent-hover) !important;
}

.btn-default,
.btn-secondary {
    background-color: var(--vel-card-hover) !important;
    border-color: var(--vel-border-strong) !important;
    color: var(--vel-text-secondary) !important;
}
.btn-default:hover,
.btn-secondary:hover {
    background-color: #2f2f45 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--vel-text) !important;
}

.btn-success {
    background-color: var(--vel-teal) !important;
    border-color: var(--vel-teal) !important;
    color: #f4f4f4 !important;
}
.btn-success:hover {
    background-color: #3d8f1f !important;
    border-color: #3d8f1f !important;
    color: #f4f4f4 !important;
}

.btn-danger {
    background-color: var(--vel-red) !important;
    border-color: var(--vel-red) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #8f1f20 !important;
    border-color: #8f1f20 !important;
}

.btn-warning {
    background-color: var(--vel-gold) !important;
    border-color: var(--vel-gold) !important;
    color: #1b1c22 !important;
}

.btn-info {
    background-color: var(--vel-accent) !important;
    border-color: var(--vel-accent) !important;
    color: #1b1c22 !important;
}

.btn-link { color: var(--vel-accent) !important; }
.btn-link:hover { color: var(--vel-accent-hover) !important; }

.btn-xs { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }
.btn-sm { font-size: 0.8rem !important; }
.btn-lg { font-size: 1rem !important; }

/* =====================================================
   Dropdowns
   ===================================================== */

.dropdown-menu {
    background-color: var(--vel-card-deep) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius) !important;
    box-shadow: var(--vel-shadow-lg) !important;
    padding: 0.4rem !important;
}

.dropdown-item {
    color: var(--vel-text-secondary) !important;
    border-radius: calc(var(--vel-radius) - 2px) !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.75rem !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--vel-card-hover) !important;
    color: var(--vel-text) !important;
}
.dropdown-item.active {
    background-color: var(--vel-accent-dim) !important;
    color: var(--vel-accent) !important;
}

.dropdown-divider { border-color: var(--vel-border) !important; }
.dropdown-header  { color: var(--vel-text-muted) !important; font-size: 0.72rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }

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

.alert {
    border-radius: var(--vel-radius) !important;
    border-width: 0 0 0 3px !important;
    font-size: 0.875rem !important;
}

.alert-info {
    background-color: var(--vel-accent-dim) !important;
    border-color: var(--vel-accent) !important;
    color: var(--vel-text) !important;
}
.alert-success {
    background-color: var(--vel-teal-dim) !important;
    border-color: var(--vel-teal) !important;
    color: var(--vel-text) !important;
}
.alert-danger {
    background-color: var(--vel-red-dim) !important;
    border-color: var(--vel-red) !important;
    color: var(--vel-text) !important;
}
.alert-warning {
    background-color: var(--vel-gold-dim) !important;
    border-color: var(--vel-gold) !important;
    color: var(--vel-text) !important;
}

.alert-dismissible .close { color: var(--vel-text-muted) !important; opacity: 1 !important; }
.alert-dismissible .close:hover { color: var(--vel-text) !important; }

/* Flash messages */
#flashmessage { border-radius: var(--vel-radius) !important; }

/* =====================================================
   Badges
   ===================================================== */

.badge {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important;
    border-radius: 4px !important;
    padding: 0.25em 0.5em !important;
}

.badge-primary,
.badge-info    { background-color: var(--vel-accent) !important; color: #1b1c22 !important; }
.badge-success { background-color: var(--vel-teal) !important; color: #f4f4f4 !important; }
.badge-danger  { background-color: var(--vel-red) !important; color: #f4f4f4 !important; }
.badge-warning { background-color: var(--vel-gold) !important; color: #1b1c22 !important; }
.badge-secondary,
.badge-default { background-color: var(--vel-card-hover) !important; color: var(--vel-text-secondary) !important; }

/* Status label colours */
.label-active, .label-success { background-color: var(--vel-teal-dim) !important; color: var(--vel-teal) !important; }
.label-suspended, .label-danger { background-color: var(--vel-red-dim) !important; color: var(--vel-red) !important; }
.label-pending, .label-warning  { background-color: var(--vel-gold-dim) !important; color: var(--vel-gold) !important; }

/* =====================================================
   Modals
   ===================================================== */

.modal-content {
    background-color: var(--vel-card) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius-lg) !important;
    box-shadow: var(--vel-shadow-lg) !important;
}
.modal-header {
    border-bottom-color: var(--vel-border) !important;
    background-color: transparent !important;
}
.modal-footer  { border-top-color: var(--vel-border) !important; background-color: transparent !important; }
.modal-title   { color: var(--vel-text) !important; font-weight: 600 !important; font-size: 1rem !important; }
.modal-body    { color: var(--vel-text-secondary) !important; }
.modal-backdrop.show { opacity: 0.7 !important; }

.close         { color: var(--vel-text-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover   { color: var(--vel-text) !important; }

/* =====================================================
   Tabs
   ===================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--vel-border) !important;
}
.nav-tabs .nav-link {
    color: var(--vel-text-secondary) !important;
    border: 1px solid transparent !important;
    border-radius: var(--vel-radius) var(--vel-radius) 0 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1rem !important;
    transition: color 0.15s ease !important;
}
.nav-tabs .nav-link:hover {
    color: var(--vel-text) !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link.active {
    color: var(--vel-accent) !important;
    background-color: var(--vel-card) !important;
    border-color: var(--vel-border) var(--vel-border) var(--vel-card) !important;
}

.nav-pills .nav-link {
    color: var(--vel-text-secondary) !important;
    border-radius: var(--vel-radius) !important;
    font-size: 0.875rem !important;
}
.nav-pills .nav-link:hover  { color: var(--vel-text) !important; background-color: var(--vel-card-hover) !important; }
.nav-pills .nav-link.active { background-color: var(--vel-accent) !important; color: #1b1c22 !important; }

.tab-content { color: var(--vel-text) !important; }

/* =====================================================
   Pagination
   ===================================================== */

.page-link {
    background-color: var(--vel-card) !important;
    border-color: var(--vel-border) !important;
    color: var(--vel-text-secondary) !important;
}
.page-link:hover { background-color: var(--vel-card-hover) !important; color: var(--vel-text) !important; border-color: var(--vel-border) !important; }
.page-item.active .page-link { background-color: var(--vel-accent) !important; border-color: var(--vel-accent) !important; color: #1b1c22 !important; }
.page-item.disabled .page-link { background-color: var(--vel-card) !important; color: var(--vel-text-muted) !important; border-color: var(--vel-border) !important; }

/* =====================================================
   Footer
   ===================================================== */

#footer,
.footer {
    background-color: var(--vel-card-deep) !important;
    border-top: 1px solid var(--vel-border) !important;
    padding: 1.5rem 0 !important;
    margin-top: 3rem !important;
}

.footer .nav-link { color: var(--vel-text-muted) !important; font-size: 0.8rem !important; }
.footer .nav-link:hover { color: var(--vel-text-secondary) !important; }
.footer .copyright { color: var(--vel-text-muted) !important; font-size: 0.8rem !important; }

/* =====================================================
   Panels (home page cards)
   ===================================================== */

.client-home-cards .card { margin-bottom: 1.25rem !important; }
.client-home-cards .card-body { padding: 0 !important; }

/* =====================================================
   Full-page overlay
   ===================================================== */

#fullpage-overlay { background-color: rgba(27, 28, 34, 0.85) !important; }
#fullpage-overlay .msg { color: var(--vel-text-secondary) !important; }

/* =====================================================
   Popover / Tooltip
   ===================================================== */

.popover {
    background-color: var(--vel-card-deep) !important;
    border-color: var(--vel-border) !important;
    border-radius: var(--vel-radius) !important;
    box-shadow: var(--vel-shadow-lg) !important;
}
.popover-header { background-color: transparent !important; border-bottom-color: var(--vel-border) !important; color: var(--vel-text) !important; }
.popover-body   { color: var(--vel-text-secondary) !important; }

.bs-popover-bottom > .arrow::after  { border-bottom-color: var(--vel-card-deep) !important; }
.bs-popover-top    > .arrow::after  { border-top-color:    var(--vel-card-deep) !important; }
.bs-popover-left   > .arrow::after  { border-left-color:   var(--vel-card-deep) !important; }
.bs-popover-right  > .arrow::after  { border-right-color:  var(--vel-card-deep) !important; }

.tooltip-inner { background-color: #17171a !important; color: var(--vel-text) !important; border-radius: var(--vel-radius) !important; font-size: 0.8rem !important; }
.bs-tooltip-top    .arrow::before { border-top-color:    #17171a !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #17171a !important; }
.bs-tooltip-left   .arrow::before { border-left-color:   #17171a !important; }
.bs-tooltip-right  .arrow::before { border-right-color:  #17171a !important; }

/* =====================================================
   Misc / Utility overrides
   ===================================================== */

pre, code {
    background-color: var(--vel-card-deep) !important;
    color: var(--vel-teal) !important;
    border-radius: var(--vel-radius) !important;
    border: 1px solid var(--vel-border) !important;
}

.panel { background-color: var(--vel-card) !important; border-color: var(--vel-border) !important; }
.panel-heading { background-color: var(--vel-card-deep) !important; color: var(--vel-text) !important; border-color: var(--vel-border) !important; }

/* Item selector (language/currency modal) */
.item-selector .item {
    display: block !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--vel-radius) !important;
    color: var(--vel-text-secondary) !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
}
.item-selector .item:hover { background-color: var(--vel-card-hover) !important; color: var(--vel-text) !important; }
.item-selector .item.active { background-color: var(--vel-accent-dim) !important; color: var(--vel-accent) !important; }

/* Return-to-admin — shared style */
.btn-return-to-admin {
    background-color: rgba(199, 32, 62, 0.15) !important;
    border-color: var(--vel-red) !important;
    color: var(--vel-red) !important;
    border-radius: var(--vel-radius) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}
.btn-return-to-admin:hover {
    background-color: var(--vel-red) !important;
    color: #fff !important;
}

/* Return-to-admin — floating version rendered outside header (logged-out admin view) */
body > .btn-return-to-admin {
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    top: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    box-shadow: var(--vel-shadow-lg) !important;
}

/* =====================================================
   Dashboard — Welcome Banner
   ===================================================== */

.vel-welcome {
    background: linear-gradient(135deg, var(--vel-card) 0%, #252537 100%) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius-lg) !important;
    padding: 1.5rem !important;
}

.vel-welcome-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--vel-text) !important;
    letter-spacing: -0.02em !important;
}

.vel-welcome-sub {
    color: var(--vel-text-secondary) !important;
    font-size: 0.875rem !important;
}

/* =====================================================
   Dashboard — Stat Cards
   ===================================================== */

.vel-stat-card {
    display: block !important;
    background-color: var(--vel-card) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius-lg) !important;
    padding: 1.25rem !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.vel-stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
}

.vel-stat-card--blue::before  { background: var(--vel-accent) !important; }
.vel-stat-card--teal::before  { background: var(--vel-teal)   !important; }
.vel-stat-card--red::before   { background: var(--vel-red)    !important; }
.vel-stat-card--gold::before  { background: var(--vel-gold)   !important; }

.vel-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--vel-shadow-lg) !important;
    border-color: var(--vel-border-strong) !important;
    text-decoration: none !important;
}

.vel-stat-icon {
    font-size: 1.1rem !important;
    margin-bottom: 0.9rem !important;
}

.vel-stat-card--blue .vel-stat-icon { color: var(--vel-accent) !important; }
.vel-stat-card--teal .vel-stat-icon { color: var(--vel-teal)   !important; }
.vel-stat-card--red  .vel-stat-icon { color: var(--vel-red)    !important; }
.vel-stat-card--gold .vel-stat-icon { color: var(--vel-gold)   !important; }

.vel-stat-number {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: var(--vel-text) !important;
    line-height: 1 !important;
    margin-bottom: 0.3rem !important;
    letter-spacing: -0.03em !important;
}

.vel-stat-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--vel-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

/* =====================================================
   Dashboard — Quick Actions
   ===================================================== */

.vel-quick-actions {
    display: flex !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
}

.vel-quick-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.5rem 0.9rem !important;
    background-color: var(--vel-card) !important;
    border: 1px solid var(--vel-border) !important;
    border-radius: var(--vel-radius) !important;
    color: var(--vel-text-secondary) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.vel-quick-action i {
    color: var(--vel-accent) !important;
    font-size: 0.8rem !important;
}

.vel-quick-action:hover {
    background-color: var(--vel-card-hover) !important;
    border-color: var(--vel-border-strong) !important;
    color: var(--vel-text) !important;
    text-decoration: none !important;
}

/* =====================================================
   Dashboard — Home Panel Cards
   ===================================================== */

.vel-panel .card-footer:empty { display: none !important; }

.vel-panel-icon--blue  { color: var(--vel-accent) !important; }
.vel-panel-icon--green { color: var(--vel-teal)   !important; }
.vel-panel-icon--teal  { color: var(--vel-teal)   !important; }
.vel-panel-icon--red   { color: var(--vel-red)    !important; }
.vel-panel-icon--gold,
.vel-panel-icon--yellow { color: var(--vel-gold)  !important; }
.vel-panel-icon--info  { color: var(--vel-accent) !important; }

/* =====================================================
   Responsive tweaks
   ===================================================== */

@media (max-width: 991.98px) {
    .sidebar { margin-bottom: 1.5rem !important; }
    .tile    { margin-bottom: 0.5rem !important; }
    .vel-welcome-title { font-size: 1.1rem !important; }
}

@media (max-width: 575.98px) {
    .vel-stat-number { font-size: 1.75rem !important; }
    .vel-quick-actions { gap: 0.4rem !important; }
    .vel-quick-action  { font-size: 0.78rem !important; padding: 0.4rem 0.7rem !important; }
}