/* ==========================================================================
   PERFEX CRM - LUXURY BLACK & GOLDEN THEME
   ========================================================================== */

:root {
    --bg-dark-obsidian: #0c0e12;
    --bg-dark-surface: #14171f;
    --bg-dark-card: #1c202a;
    --gold-primary: #d4af37;
    --gold-light: #f3d36b;
    --gold-bright: #ffd700;
    --gold-dark: #aa7c11;
    --gold-deep: #8a6408;
    --gold-gradient: linear-gradient(135deg, #f5d77f 0%, #d4af37 50%, #aa7c11 100%);
    --gold-gradient-hover: linear-gradient(135deg, #fae59a 0%, #e6be48 50%, #bd8c13 100%);
    --gold-gradient-dark: linear-gradient(135deg, #2a2415 0%, #171510 100%);
    --gold-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    --gold-glow: 0 0 12px rgba(212, 175, 55, 0.45);
    --gold-border: 1px solid rgba(212, 175, 55, 0.35);
}

/* --------------------------------------------------------------------------
   1. TOP NAVIGATION / HEADER (#header)
   -------------------------------------------------------------------------- */
#header {
    background: #111318 !important;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

#header .hide-menu {
    color: #d4af37 !important;
    transition: all 0.3s ease;
}
#header .hide-menu:hover {
    color: #ffd700 !important;
    transform: scale(1.1);
}

#header .navbar-nav > li > a {
    color: #e2e8f0 !important;
    transition: color 0.2s ease;
}
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li > a:focus,
#header .navbar-nav > li.open > a {
    color: #d4af37 !important;
    background: transparent !important;
}

#header .navbar-nav > li > a > span > svg {
    color: #d4af37 !important;
}

/* Header search input */
#top_search input#search_input {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: #f8fafc !important;
    border-radius: 20px !important;
    padding-left: 15px !important;
    transition: all 0.3s ease;
}
#top_search input#search_input::placeholder {
    color: rgba(212, 175, 55, 0.6) !important;
}
#top_search input#search_input:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffd700 !important;
    box-shadow: var(--gold-glow) !important;
}
#top_search_button button {
    color: #d4af37 !important;
}

/* Header Quick Create (+) Button */
#header .tw-bg-primary-600,
#header a .tw-bg-primary-600 {
    background: var(--gold-gradient) !important;
    color: #0b0d11 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;
    border: 1px solid #ffd700 !important;
    transition: all 0.3s ease;
}
#header .tw-bg-primary-600:hover,
#header a:hover .tw-bg-primary-600 {
    background: var(--gold-gradient-hover) !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.8) !important;
    transform: rotate(90deg);
}

/* Header notification / unread badge */
#header .badge,
.header-notifications .badge {
    background-color: #d4af37 !important;
    color: #0c0e12 !important;
    font-weight: 700 !important;
    border: 1px solid #000;
}

/* --------------------------------------------------------------------------
   2. SIDEBAR (#menu, .sidebar)
   -------------------------------------------------------------------------- */
.admin .sidebar,
.sidebar {
    background: #0f1116 !important;
    border-right: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.35) !important;
}

/* Logo container in sidebar */
#side-menu > li:first-child,
.sidebar #logo {
    background: #0a0b0f !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}
.sidebar #logo img {
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.company-logo img {
    max-height: 64px !important;
    width: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.3));
}
.navbar-brand.logo img,
.navbar-brand img {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain;
}
.sidebar .logo-text,
.sidebar a.logo-text {
    color: #d4af37 !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Sidebar Menu Items */
.sidebar li a {
    color: #d1d5db !important;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
    font-weight: 500;
}

/* Menu icons */
.sidebar li a i.menu-icon,
.sidebar li a .fa,
.sidebar li a .fa-solid,
.sidebar li a .fa-regular {
    color: #d4af37 !important;
    opacity: 0.9 !important;
    transition: all 0.25s ease;
}

/* Menu hover */
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus,
#setup-menu > li > a:hover,
#setup-menu > li > a:focus {
    background: rgba(212, 175, 55, 0.1) !important;
    color: #ffffff !important;
    border-left: 3px solid #d4af37 !important;
    border-radius: 0 6px 6px 0;
}
.sidebar .nav > li > a:hover i.menu-icon,
#setup-menu > li > a:hover i.menu-icon {
    color: #ffd700 !important;
    text-shadow: var(--gold-glow);
    transform: translateX(2px);
}

/* Active menu item */
.admin #side-menu li.active > a,
.admin #setup-menu li.active > a,
.sidebar li.active > a {
    background: var(--gold-gradient) !important;
    color: #0b0d11 !important;
    font-weight: 700 !important;
    border-left: 3px solid #ffd700 !important;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4) !important;
}
.admin #side-menu li.active > a i.menu-icon,
.admin #setup-menu li.active > a i.menu-icon,
.sidebar li.active > a i.menu-icon {
    color: #0b0d11 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.admin #side-menu li.active > a .arrow,
.sidebar li.active > a .arrow {
    color: #0b0d11 !important;
}

/* Submenu container */
.sidebar li .nav-second-level {
    background: #080a0d !important;
    border-left: 2px solid rgba(212, 175, 55, 0.2) !important;
    margin-left: 15px;
}
.sidebar li .nav-second-level li a {
    color: #9ca3af !important;
    padding-left: 25px !important;
}
.sidebar li .nav-second-level li a:hover {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.08) !important;
}
.sidebar li .nav-second-level li.active a {
    background: var(--gold-gradient) !important;
    color: #0b0d11 !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35) !important;
}

/* Setup menu & customizer toggle */
.setup-menu-wrapper,
#setup-menu {
    background: #0f1116 !important;
    border-right: 1px solid rgba(212, 175, 55, 0.25) !important;
}

/* --------------------------------------------------------------------------
   3. BUTTONS (ROYAL GOLD, LUXURY BLACK & HIGH-CONTRAST HOVER STATES)
   -------------------------------------------------------------------------- */
/* Common button transitions & styling */
.admin .btn,
.admin a.btn,
.admin button.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Primary Button (Gold Gradient) */
.admin .btn-primary,
.admin a.btn-primary,
.admin button.btn-primary,
.admin input[type="submit"].btn-primary,
.admin .tw-bg-primary-600 {
    background: var(--gold-gradient) !important;
    border: 1px solid #d4af37 !important;
    color: #0b0d11 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35) !important;
}

.admin .btn-primary i,
.admin .btn-primary svg,
.admin a.btn-primary i,
.admin a.btn-primary svg {
    color: #0b0d11 !important;
    transition: color 0.2s ease !important;
}

/* Primary Button Hover / Focus / Active */
.admin .btn-primary:hover,
.admin a.btn-primary:hover,
.admin button.btn-primary:hover,
.admin .btn-primary:focus,
.admin a.btn-primary:focus,
.admin button.btn-primary:focus,
.admin .btn-primary:active,
.admin a.btn-primary:active,
.admin button.btn-primary:active,
.admin .btn-primary.active,
.admin .open > .dropdown-toggle.btn-primary,
.admin .tw-bg-primary-600:hover,
.admin .tw-bg-primary-700 {
    background: var(--gold-gradient-hover) !important;
    border-color: #ffd700 !important;
    color: #000000 !important;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.6) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.admin .btn-primary:hover i,
.admin .btn-primary:hover svg,
.admin a.btn-primary:hover i,
.admin a.btn-primary:hover svg,
.admin .btn-primary:focus i,
.admin .btn-primary:focus svg {
    color: #000000 !important;
}

/* Default / Secondary / Card Buttons (Filters, Export, Close, Cancel) */
.admin .btn-default,
.admin a.btn-default,
.admin button.btn-default,
.admin .dt-button,
.admin .dt-button.btn-default {
    background-color: #1a1e2b !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.admin .btn-default i,
.admin .btn-default svg,
.admin a.btn-default i,
.admin a.btn-default svg,
.admin .dt-button i,
.admin .dt-button svg {
    color: #f5d77f !important;
    transition: color 0.2s ease !important;
}

/* Default Button Hover / Focus / Active */
.admin .btn-default:hover,
.admin a.btn-default:hover,
.admin button.btn-default:hover,
.admin .btn-default:focus,
.admin a.btn-default:focus,
.admin button.btn-default:focus,
.admin .btn-default:active,
.admin a.btn-default:active,
.admin button.btn-default:active,
.admin .btn-default.active,
.admin .open > .dropdown-toggle.btn-default,
.admin .dt-button:hover,
.admin .dt-button.btn-default:hover {
    background-color: #24293a !important;
    border-color: #d4af37 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 12px rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.admin .btn-default:hover i,
.admin .btn-default:hover svg,
.admin a.btn-default:hover i,
.admin a.btn-default:hover svg,
.admin .dt-button:hover i {
    color: #ffd700 !important;
}

/* Success Button */
.admin .btn-success,
.admin a.btn-success,
.admin button.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid #059669 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.admin .btn-success:hover,
.admin a.btn-success:hover,
.admin button.btn-success:hover,
.admin .btn-success:focus,
.admin a.btn-success:focus,
.admin .btn-success:active,
.admin a.btn-success:active {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.55) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.admin .btn-success i,
.admin .btn-success svg,
.admin a.btn-success i,
.admin a.btn-success svg {
    color: #ffffff !important;
}

/* Danger Button (Delete / Cancel) */
.admin .btn-danger,
.admin a.btn-danger,
.admin button.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
}

.admin .btn-danger:hover,
.admin a.btn-danger:hover,
.admin button.btn-danger:hover,
.admin .btn-danger:focus,
.admin a.btn-danger:focus,
.admin .btn-danger:active,
.admin a.btn-danger:active {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.55) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.admin .btn-danger i,
.admin .btn-danger svg,
.admin a.btn-danger i,
.admin a.btn-danger svg {
    color: #ffffff !important;
}

/* Info Button */
.admin .btn-info,
.admin a.btn-info,
.admin button.btn-info {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

.admin .btn-info:hover,
.admin a.btn-info:hover,
.admin button.btn-info:hover,
.admin .btn-info:focus,
.admin a.btn-info:focus,
.admin .btn-info:active,
.admin a.btn-info:active {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.55) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.admin .btn-info i,
.admin .btn-info svg,
.admin a.btn-info i,
.admin a.btn-info svg {
    color: #ffffff !important;
}

/* Warning Button */
.admin .btn-warning,
.admin a.btn-warning,
.admin button.btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border: 1px solid #b45309 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.admin .btn-warning:hover,
.admin a.btn-warning:hover,
.admin button.btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.55) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Close & Dismiss Buttons */
.admin .close,
.admin button.close {
    color: #d4af37 !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}
.admin .close:hover,
.admin button.close:hover,
.admin .close:focus,
.admin button.close:focus {
    color: #ffd700 !important;
    opacity: 1 !important;
    transform: scale(1.15);
}

.tw-border-primary-600 {
    border-color: #d4af37 !important;
}
.tw-text-primary-600 {
    color: #d4af37 !important;
}
.tw-ring-primary-500 {
    --tw-ring-color: #d4af37 !important;
}

/* --------------------------------------------------------------------------
   4. TABS & BREADCRUMBS
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 2px solid rgba(212, 175, 55, 0.25) !important;
}
.nav-tabs > li > a {
    color: #4b5563 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: #b8860b !important;
    border-color: transparent !important;
    background: rgba(212, 175, 55, 0.05) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #9a6f08 !important;
    border-bottom: 3px solid #d4af37 !important;
    font-weight: 700 !important;
    background: transparent !important;
}
.nav-tabs > li.active > a i.menu-icon,
.nav-tabs > li > a:hover i.menu-icon {
    color: #d4af37 !important;
}

/* --------------------------------------------------------------------------
   5. PANELS, CARDS & WIDGETS (LUXURY BLACK & GOLDEN DARK THEME)
   -------------------------------------------------------------------------- */
/* Admin Canvas & Workspace Background */
html,
html.admin,
body.admin,
body.admin #wrapper,
body.show-sidebar,
body.page-small,
body.page-small.show-sidebar,
body.show-sidebar #wrapper,
body.page-small.show-sidebar #wrapper,
#wrapper,
.admin .content,
.admin #content {
    background-color: #0b0d14 !important;
    color: #e2e8f0;
}

/* Dark Cards, Panels & Widgets */
.admin .panel,
.admin .panel_s,
.admin .panel-body,
.admin .panel-default,
.admin .widget,
.admin .todo-panel,
.admin .card,
.admin .tw-bg-white,
.admin .bg-white,
.admin .kan-ban-col {
    background-color: #141722 !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: #e2e8f0 !important;
}

.admin .panel,
.admin .panel_s,
.admin .widget {
    border-radius: 10px !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

.admin .panel-heading {
    border-top: 3px solid #d4af37 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    font-weight: 600 !important;
    background: #0e1017 !important;
    color: #f3d36b !important;
}

.admin .panel-footer {
    background: #0e1017 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: #cbd5e1 !important;
}

.admin .hr-panel-heading,
.admin .hr-panel-separator {
    border-color: rgba(212, 175, 55, 0.15) !important;
}

/* Dashboard Summary / Top KPI Cards */
.admin .top_stats_wrapper {
    background: #161926 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.22) !important;
    border-left: 4px solid #d4af37 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
    color: #e2e8f0 !important;
    transition: all 0.25s ease;
}
.admin .top_stats_wrapper:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.55), 0 0 15px rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-2px);
    border-left-color: #ffd700 !important;
}
.admin .top_stats_wrapper .tw-text-neutral-800,
.admin .top_stats_wrapper .tw-text-neutral-700,
.admin .top_stats_wrapper .tw-text-neutral-600,
.admin .top_stats_wrapper .text-neutral-600,
.admin .top_stats_wrapper span.tw-truncate {
    color: #cbd5e1 !important;
}
.admin .top_stats_wrapper .tw-font-semibold {
    color: #f5d77f !important;
}
.admin .top_stats_wrapper svg {
    color: #d4af37 !important;
}
.admin .top_stats_wrapper .progress {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
}

/* Typography & Headings inside Dark Cards */
.admin .panel_s h1, .admin .panel_s h2, .admin .panel_s h3, .admin .panel_s h4, .admin .panel_s h5, .admin .panel_s h6,
.admin .panel h1, .admin .panel h2, .admin .panel h3, .admin .panel h4, .admin .panel h5, .admin .panel h6,
.admin .widget h1, .admin .widget h2, .admin .widget h3, .admin .widget h4, .admin .widget h5, .admin .widget h6 {
    color: #ffffff !important;
}

.admin .panel_s .text-muted,
.admin .panel .text-muted,
.admin .widget .text-muted {
    color: #94a3b8 !important;
}

.admin .panel_s .tw-text-neutral-800,
.admin .panel_s .tw-text-neutral-700,
.admin .panel_s .tw-text-neutral-600,
.admin .panel-body .tw-text-neutral-800,
.admin .panel-body .tw-text-neutral-700,
.admin .panel-body .tw-text-neutral-600 {
    color: #cbd5e1 !important;
}

.admin .panel_s .tw-text-neutral-900,
.admin .panel-body .tw-text-neutral-900 {
    color: #ffffff !important;
}

.admin .widget-dragger {
    color: #d4af37 !important;
}

/* Links inside Admin & Cards (excluding buttons, labels, badges, tabs, and brand) */
.admin #wrapper a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle),
.admin .panel a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle),
.admin .panel_s a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle),
.admin .table a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle) {
    color: #f5d77f;
    transition: color 0.2s ease;
}
.admin #wrapper a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle):hover,
.admin .panel a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle):hover,
.admin .panel_s a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle):hover,
.admin .table a:not(.btn):not(.label):not(.badge):not(.logo):not([role="tab"]):not(.dropdown-toggle):hover {
    color: #ffd700 !important;
}

/* Progress bar in Golden gradient */
.progress-bar-success,
.progress-bar-primary,
.progress-bar {
    background: var(--gold-gradient) !important;
}

/* --------------------------------------------------------------------------
   6. TABLES & DATATABLES IN DARK CARDS
   -------------------------------------------------------------------------- */
.admin table.dataTable thead th,
.admin .table thead th {
    background: #0e1017 !important;
    color: #f5d77f !important;
    border-bottom: 2px solid #d4af37 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}
.admin table.dataTable thead th a,
.admin .table thead th a {
    color: #f5d77f !important;
}
.admin .table > tbody > tr > td,
.admin .table > tbody > tr > th,
.admin .table > tfoot > tr > td,
.admin .table > tfoot > tr > th {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #e2e8f0 !important;
}
.admin .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
.admin .table tbody tr:hover td {
    background-color: rgba(212, 175, 55, 0.08) !important;
}

/* DataTables pagination & controls */
.admin .dataTables_wrapper .dataTables_info,
.admin .dataTables_wrapper .dataTables_length,
.admin .dataTables_wrapper .dataTables_paginate {
    color: #94a3b8 !important;
}
.admin .dataTables_wrapper .dataTables_filter input {
    background-color: #0c0e14 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 4px;
    padding: 4px 8px;
}
.admin .dataTables_paginate .pagination > li > a,
.admin .dataTables_paginate .pagination > li > span {
    background-color: #10121a !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: #cbd5e1 !important;
}
.admin .dataTables_paginate .pagination > li > a:hover {
    background-color: rgba(212, 175, 55, 0.2) !important;
    color: #ffd700 !important;
}
.admin .dataTables_paginate .pagination > .active > a,
.admin .dataTables_paginate .pagination > .active > span,
.admin .dataTables_paginate .pagination > .active > a:hover,
.admin .dataTables_paginate .pagination > .active > span:hover {
    background: var(--gold-gradient) !important;
    border-color: #d4af37 !important;
    color: #0b0d11 !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   7. FORM CONTROLS, MODALS & ALERTS IN DARK CARDS
   -------------------------------------------------------------------------- */
.admin .form-control,
.admin select.form-control,
.admin textarea.form-control {
    background-color: #0c0e14 !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    color: #f8fafc !important;
}
.admin .form-control::placeholder {
    color: #64748b !important;
}
.admin .form-control:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25) !important;
}
.admin .control-label {
    color: #e2e8f0 !important;
}
.admin .bootstrap-select .btn {
    background-color: #0c0e14 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}
.admin .bootstrap-select .dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}
.admin .bootstrap-select .dropdown-menu li a {
    color: #e2e8f0 !important;
}
.admin .bootstrap-select .dropdown-menu li a:hover,
.admin .bootstrap-select .dropdown-menu li.selected a {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #ffd700 !important;
}

/* Modals & Popovers */
.admin .modal-content {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}
.admin .modal-header {
    background-color: #0e1017 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-top: 3px solid #d4af37 !important;
}
.admin .modal-header .modal-title {
    color: #f3d36b !important;
}
.admin .modal-header .close {
    color: #d4af37 !important;
    opacity: 0.8;
}
.admin .modal-footer {
    background-color: #0e1017 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
}

/* Dropdowns */
.admin .dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.admin .dropdown-menu > li > a {
    color: #cbd5e1 !important;
}
.admin .dropdown-menu > li > a:hover,
.admin .dropdown-menu > li > a:focus {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #ffd700 !important;
}
.admin .dropdown-menu .divider {
    background-color: rgba(212, 175, 55, 0.15) !important;
}

/* Activity Feed & Lists */
.admin .activity-feed .feed-item {
    border-left-color: #d4af37 !important;
    color: #cbd5e1 !important;
}
.admin .activity-feed .feed-item:after {
    background-color: #d4af37 !important;
}
.admin .activity-feed .feed-item .date {
    color: #94a3b8 !important;
}
.admin .list-group-item {
    background-color: #141722 !important;
    border-color: rgba(212, 175, 55, 0.15) !important;
    color: #e2e8f0 !important;
}
.admin .scroller {
    color: #d4af37 !important;
    background: #0e1017 !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

/* Alerts in Dark */
.admin .alert-warning {
    background-color: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    color: #f5d77f !important;
}
.admin .alert-info {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}
.admin .alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}
.admin .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

/* Checkboxes & Radios */
.admin .checkbox label,
.admin .radio label {
    color: #cbd5e1 !important;
}

/* Screen Options (Dashboard options toggle) */
.admin .screen-options-btn {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    color: #f3d36b !important;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
.admin .screen-options-btn:hover {
    color: #ffd700 !important;
    background-color: #1c202e !important;
}
.admin .screen-options-area {
    background-color: #141722 !important;
    border-bottom: 2px solid #d4af37 !important;
    color: #e2e8f0 !important;
}

/* Date/Time Picker in Dark */
.admin .xdsoft_datetimepicker {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: #e2e8f0 !important;
}
.admin .xdsoft_datetimepicker .xdsoft_calendar td,
.admin .xdsoft_datetimepicker .xdsoft_calendar th {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.admin .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.admin .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--gold-gradient) !important;
    color: #0b0d11 !important;
}

/* Badges, Labels & Tags */
.label-primary {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #f3d36b !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    font-weight: 600 !important;
}
a.label-primary:hover {
    background-color: rgba(212, 175, 55, 0.3) !important;
    color: #ffd700 !important;
}

/* --------------------------------------------------------------------------
   8. MODERN DARK SAAS / BOX OFFICE ADMIN LOGIN (MATCHING REFERENCE DESIGN)
   -------------------------------------------------------------------------- */
body.login_admin.modern-auth-page {
    background: #0b0c16 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 30px 15px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ambient glowing orbs */
.ambient-glow {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.glow-top-left {
    width: 500px;
    height: 500px;
    left: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%);
    filter: blur(60px);
}

.glow-bottom-right {
    width: 550px;
    height: 550px;
    right: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.22) 0%, rgba(168, 85, 247, 0.08) 45%, transparent 70%);
    filter: blur(70px);
}

.glow-bottom-left {
    width: 400px;
    height: 400px;
    left: 5%;
    bottom: 0%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 65%);
    filter: blur(60px);
}

/* Container */
.auth-center-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}

/* Main Card */
.auth-card {
    position: relative;
    background: rgba(16, 20, 38, 0.88) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: 
        0 25px 60px -10px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(99, 102, 241, 0.12) !important;
    padding: 38px 36px 30px 36px !important;
    overflow: hidden;
}

/* Neon Gradient Top Line */
.card-accent-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9d4edd 0%, #6366f1 45%, #00f5d4 100%);
    box-shadow: 0 0 16px rgba(0, 245, 212, 0.55);
}

/* Logo */
.auth-logo-wrap {
    margin-bottom: 4px;
}
.auth-logo-wrap img {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* Super Admin Portal Pill Badge */
.auth-portal-badge-wrap {
    margin-top: 14px;
    margin-bottom: 16px;
}
.auth-portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(49, 46, 129, 0.45);
    border: 1px solid rgba(129, 140, 248, 0.35);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(49, 46, 129, 0.3);
}
.portal-shield-icon {
    color: #38bdf8;
    flex-shrink: 0;
}

/* Headings */
.auth-main-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

.auth-subtitle {
    color: #8b92b2 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto 24px auto !important;
    max-width: 330px;
}

/* Form Styles */
.auth-form-group {
    margin-bottom: 18px !important;
}

.auth-label {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 7px !important;
    display: block !important;
    text-align: left !important;
}

/* Input Fields - Soft Light Periwinkle / Off-White */
.auth-input-wrapper {
    position: relative;
    width: 100%;
}

.auth-input {
    width: 100% !important;
    height: 48px !important;
    background: #edf2f7 !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    color: #0f172a !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    padding-left: 44px !important;
    padding-right: 42px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s ease !important;
}

.auth-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}

.auth-input:focus {
    background: #ffffff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
}

/* Icons inside input */
.auth-input-icon.left-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #818cf8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.auth-input-icon.right-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    z-index: 2;
    transition: color 0.2s ease;
}

.auth-input-icon.right-icon:hover {
    color: #6366f1;
}

/* Options Row (Remember me + TLS) */
.auth-options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 22px;
}

.auth-remember-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8b92b2 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.auth-checkbox {
    accent-color: #6366f1 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    cursor: pointer;
    margin: 0 !important;
}

.auth-tls-secured {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
}

/* Gradient Submit Button */
.auth-submit-btn {
    width: 100% !important;
    height: 48px !important;
    background: linear-gradient(90deg, #5b5bf0 0%, #8b5cf6 45%, #ec4899 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.auth-submit-btn:hover {
    background: linear-gradient(90deg, #6868f7 0%, #9969f8 45%, #f45ca7 100%) !important;
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.65) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

.auth-submit-btn:active {
    transform: translateY(0);
}

/* Forgot Password */
.auth-fp-wrap {
    margin-top: 14px;
}

.auth-fp-link {
    color: #818cf8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.auth-fp-link:hover {
    color: #a5b4fc !important;
    text-decoration: underline !important;
}

/* Footer Section */
.auth-footer-security {
    margin-top: 24px;
}

.ssl-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(6, 78, 59, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(6, 78, 59, 0.25);
    margin-bottom: 12px;
}

.auth-copyright-text {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.auth-copyright-text strong {
    color: #94a3b8;
}

/* Alerts inside modern card */
.auth-card .alert {
    border-radius: 10px !important;
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
}
.auth-card .alert-danger {
    background: rgba(185, 28, 28, 0.3) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}
.auth-card .alert-success {
    background: rgba(6, 78, 59, 0.4) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #86efac !important;
}
.auth-card .alert-warning {
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.6) !important;
    color: #f3d36b !important;
    border-radius: 8px !important;
    backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   9. DISABLE ALL LOADERS IN ADMIN PANEL
   -------------------------------------------------------------------------- */
.admin .dt-loader,
.admin .dt-loader:not(:required),
.admin .dt-loader:not(:required):before,
.admin .dt-loader:not(:required):after,
.admin .dataTables_processing,
.admin div.dataTables_processing,
.admin .table-loading,
.admin .dt-table-loading:before,
.admin .dt-table-loading:after,
.admin #loading,
.admin .loader,
.admin .preloader,
.admin .loading-spinner,
.admin .table-loading-spinner,
.admin [class*="dt-loader"],
div.dt-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -99999 !important;
    animation: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* --------------------------------------------------------------------------
   10. MOBILE VIEW & ALL DROPDOWNS LUXURY DARK THEME OVERHAUL
   -------------------------------------------------------------------------- */

/* Mobile Header Controls & Toggle Buttons */
.admin .mobile-menu-toggle,
.mobile-menu-toggle,
#header .mobile-menu-toggle {
    display: block !important;
    color: #d4af37 !important;
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin-right: 10px !important;
    line-height: 25px !important;
    transition: all 0.25s ease !important;
}

.admin .mobile-menu-toggle:hover,
.admin .mobile-menu-toggle:focus,
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    color: #ffd700 !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

/* Mobile Icon Menu (Header Icons on Mobile) */
.admin ul.mobile-icon-menu,
ul.mobile-icon-menu {
    position: relative !important;
    margin-bottom: 0 !important;
}

.admin ul.mobile-icon-menu > li > a,
ul.mobile-icon-menu > li > a,
#header ul.mobile-icon-menu > li > a {
    color: #d4af37 !important;
    padding: 4px 6px !important;
    transition: color 0.2s ease !important;
}

.admin ul.mobile-icon-menu > li > a:hover,
.admin ul.mobile-icon-menu > li > a:focus,
ul.mobile-icon-menu > li > a:hover,
ul.mobile-icon-menu > li > a:focus {
    color: #ffd700 !important;
}

.admin ul.mobile-icon-menu > li > a svg,
ul.mobile-icon-menu > li > a svg {
    color: #d4af37 !important;
    transition: color 0.2s ease !important;
}

.admin ul.mobile-icon-menu > li > a:hover svg,
ul.mobile-icon-menu > li > a:hover svg {
    color: #ffd700 !important;
}

/* Mobile Badges */
.admin ul.mobile-icon-menu .icon-notifications,
.admin ul.mobile-icon-menu .icon-started-timers,
.admin ul.mobile-icon-menu .icon-total-indicator {
    background-color: #d4af37 !important;
    color: #0b0d11 !important;
    font-weight: 700 !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.6) !important;
}

/* Mobile Navbar (The Top Menu Dropdown on Mobile) */
.admin .mobile-navbar,
.mobile-navbar,
#header .mobile-navbar {
    background-color: #12151e !important;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.9) !important;
    z-index: 1000 !important;
}

.admin .mobile-navbar .navbar-nav,
.mobile-navbar .navbar-nav {
    background-color: #12151e !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.admin .mobile-navbar .navbar-nav > li,
.mobile-navbar .navbar-nav > li {
    background-color: #12151e !important;
}

.admin .mobile-navbar .navbar-nav > li > a,
.mobile-navbar .navbar-nav > li > a,
#header .mobile-navbar .navbar-nav > li > a {
    background-color: #12151e !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

.admin .mobile-navbar .navbar-nav > li > a:hover,
.admin .mobile-navbar .navbar-nav > li > a:focus,
.mobile-navbar .navbar-nav > li > a:hover,
.mobile-navbar .navbar-nav > li > a:focus,
#header .mobile-navbar .navbar-nav > li > a:hover {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: #ffd700 !important;
    padding-left: 24px !important;
    text-decoration: none !important;
}

.admin .mobile-navbar .navbar-nav > li:last-child > a,
.mobile-navbar .navbar-nav > li:last-child > a {
    border-bottom: none !important;
}

/* All Dropdowns Universal Luxury Dark Theme (Desktop & Mobile) */
.admin .dropdown-menu,
.dropdown-menu,
.admin #header .dropdown-menu,
#header .dropdown-menu,
ul.mobile-icon-menu .dropdown-menu,
.mobile-menu .dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
}

.admin .dropdown-menu > li > a,
.dropdown-menu > li > a,
.admin .dropdown-menu li a,
.dropdown-menu li a,
.admin #header .dropdown-menu > li > a,
#header .dropdown-menu > li > a {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.admin .dropdown-menu > li > a:hover,
.admin .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.admin .dropdown-menu li a:hover,
.dropdown-menu li a:hover {
    background-color: rgba(212, 175, 55, 0.18) !important;
    color: #ffd700 !important;
    text-decoration: none !important;
}

.admin .dropdown-menu .divider,
.dropdown-menu .divider {
    background-color: rgba(212, 175, 55, 0.18) !important;
    height: 1px !important;
    margin: 6px 0 !important;
    border: none !important;
}

.admin .dropdown-header,
.dropdown-header {
    color: #f3d36b !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    padding-bottom: 6px !important;
}

/* Quick Create Dropdown Menu Links */
.admin #header .dropdown-menu a.tw-group,
.admin #header .dropdown-menu a.tw-group span,
.admin #header .dropdown-menu a[class*="tw-text-neutral-700"] {
    color: #e2e8f0 !important;
}

.admin #header .dropdown-menu a.tw-group:hover,
.admin #header .dropdown-menu a.tw-group:hover span {
    color: #ffd700 !important;
}

.admin #header .dropdown-menu a.tw-group i,
.admin #header .dropdown-menu a.tw-group svg {
    color: #f5d77f !important;
    transition: color 0.2s ease !important;
}

.admin #header .dropdown-menu a.tw-group:hover i,
.admin #header .dropdown-menu a.tw-group:hover svg {
    color: #ffd700 !important;
}

/* Notifications Dropdown Overhaul */
.admin .notifications,
.admin .dropdown-menu.notifications,
.mobile-menu .dropdown-menu.notifications,
ul.mobile-icon-menu .notifications {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9) !important;
}

/* "Mark all as read" link in notifications */
.admin .notifications .tw-text-right a,
.admin .notifications [onclick*="mark_all_notifications_as_read"],
.admin .notifications a.tw-text-right {
    color: #f5d77f !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.admin .notifications .tw-text-right a:hover,
.admin .notifications [onclick*="mark_all_notifications_as_read"]:hover {
    color: #ffd700 !important;
    text-decoration: underline !important;
}

/* Individual notification rows */
.admin .notification-box,
.admin .notification-wrapper,
.admin .notification-handler,
.admin li.notification-wrapper {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    transition: background-color 0.2s ease !important;
}

.admin .notification-box:hover,
.admin .notification-handler:hover,
.admin li.notification-wrapper:hover {
    background-color: rgba(212, 175, 55, 0.12) !important;
}

/* Unread notification items */
.admin .unread-notification,
.unread-notification,
.admin .notification-handler.unread-notification {
    background-color: rgba(212, 175, 55, 0.08) !important;
    border-left: 3px solid #d4af37 !important;
}

.admin .unread-notification:hover,
.unread-notification:hover,
.admin .notification-handler.unread-notification:hover {
    background-color: rgba(212, 175, 55, 0.16) !important;
}

/* Notification text & timestamps */
.admin .notifications .media-body,
.admin .notifications .description,
.admin .notifications .notification-title,
.admin .notifications a {
    color: #e2e8f0 !important;
}

.admin .notifications .media-body a {
    color: #f5d77f !important;
    font-weight: 600 !important;
}

.admin .notifications .media-body a:hover {
    color: #ffd700 !important;
    text-decoration: underline !important;
}

.admin .notifications .text-muted,
.admin .notifications small,
.admin .notifications .notification-time,
.admin .notifications .not-mark-as-read-inline {
    color: #94a3b8 !important;
}

.admin .notifications .not-mark-as-read-inline:hover {
    color: #ffd700 !important;
}

/* Bottom footer in notifications (View all notifications) */
.admin .notifications .tw-bg-neutral-50,
.admin .notifications div[class*="tw-bg-neutral-50"] {
    background-color: #0c0e14 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: #cbd5e1 !important;
}

.admin .notifications .tw-bg-neutral-50 p,
.admin .notifications .tw-text-neutral-500 {
    color: #94a3b8 !important;
}

/* Started Timers Dropdown */
.admin .started-timers-top,
#started-timers-top,
ul.mobile-icon-menu #started-timers-top,
.admin ul.started-timers-top {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9) !important;
    padding: 14px !important;
}

.admin .started-timers-top li,
.admin .started-timers-top p,
.admin .started-timers-top span,
.admin .started-timers-top .tw-text-gray-900,
.admin .started-timers-top .tw-text-neutral-600 {
    color: #cbd5e1 !important;
}

.admin .started-timers-top a._timer {
    color: #f5d77f !important;
    font-weight: 600 !important;
}

.admin .started-timers-top a._timer:hover {
    color: #ffd700 !important;
}

.admin .started-timers-top .text-success {
    color: #34d399 !important;
    font-weight: 600 !important;
}

.admin .started-timers-top hr {
    border-color: rgba(212, 175, 55, 0.2) !important;
    margin: 10px 0 !important;
}

.admin .started-timers-top .unfinished-timesheet-delete {
    color: #f87171 !important;
    transition: color 0.2s ease !important;
}

.admin .started-timers-top .unfinished-timesheet-delete:hover {
    color: #ef4444 !important;
}

/* Header Top Search Results & History Dropdowns */
.admin #top_search .dropdown-menu,
.admin #search-history,
.admin #search_results,
.admin .search-results {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85) !important;
    color: #e2e8f0 !important;
}

.admin #top_search .dropdown-menu li a,
.admin #search-history li a,
.admin #search_results a,
.admin .search-results a {
    color: #e2e8f0 !important;
    padding: 8px 14px !important;
}

.admin #top_search .dropdown-menu li a:hover,
.admin #search-history li a:hover,
.admin #search_results a:hover,
.admin .search-results a:hover {
    background-color: rgba(212, 175, 55, 0.16) !important;
    color: #ffd700 !important;
}

/* Submenu & Nested Dropdowns */
.admin .dropdown-submenu > a,
.dropdown-submenu > a {
    color: #e2e8f0 !important;
}

.admin .dropdown-submenu > a:after,
.dropdown-submenu > a:after {
    border-left-color: #d4af37 !important;
}

.admin .dropdown-submenu:hover > a,
.admin .dropdown-submenu:focus > a,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
    background-color: rgba(212, 175, 55, 0.18) !important;
    color: #ffd700 !important;
}

.admin .dropdown-submenu > .dropdown-menu,
.dropdown-submenu > .dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

@media (max-width: 768px) {
    .admin .dropdown-submenu > a,
    .dropdown-submenu > a {
        background-color: transparent !important;
        color: #e2e8f0 !important;
    }
    .admin .dropdown-submenu.pull-left > .dropdown-menu,
    .dropdown-submenu.pull-left > .dropdown-menu {
        background-color: #0e111a !important;
        border-left: 2px solid #d4af37 !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }
}

/* Dashboard Options Panel & Button (.screen-options-area, .screen-options-btn) */
.admin .screen-options-area,
.screen-options-area {
    background: #12151e !important;
    border-bottom: 2px solid #d4af37 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
    color: #e2e8f0 !important;
    padding: 12px 30px !important;
}

.admin .screen-options-area label,
.screen-options-area label {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.admin .screen-options-area label:hover,
.screen-options-area label:hover {
    color: #ffd700 !important;
}

.admin .screen-options-area input[type="checkbox"],
.screen-options-area input[type="checkbox"] {
    accent-color: #d4af37 !important;
}

.admin .screen-options-btn,
.screen-options-btn {
    background: #1a1e2b !important;
    color: #d4af37 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-top: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s ease !important;
}

.admin .screen-options-btn:hover,
.admin .screen-options-btn:focus,
.screen-options-btn:hover,
.screen-options-btn:focus {
    background: #24293a !important;
    color: #ffd700 !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3) !important;
}

.admin .screen-options-btn svg,
.screen-options-btn svg {
    color: #d4af37 !important;
    transition: color 0.2s ease !important;
}

.admin .screen-options-btn:hover svg,
.screen-options-btn:hover svg {
    color: #ffd700 !important;
}

/* DataTables Button Collection Dropdowns (.dt-button-collection) */
div.dt-button-collection,
div.dt-button-collection ul.dropdown-menu,
.admin div.dt-button-collection ul.dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85) !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
}

div.dt-button-collection div.dt-button-collection-title {
    background-color: #0e1017 !important;
    color: #f3d36b !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
}

div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button,
div.dt-button-collection .dt-button {
    background: #141722 !important;
    color: #e2e8f0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 8px 16px !important;
    text-align: left !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
}

div.dt-button-collection a.dt-button:hover,
div.dt-button-collection button.dt-button:hover,
div.dt-button-collection .dt-button:hover,
div.dt-button-collection a.dt-button.active,
div.dt-button-collection button.dt-button.active {
    background: rgba(212, 175, 55, 0.18) !important;
    color: #ffd700 !important;
}

/* Bootstrap Select Dropdown Menus & Searchbox */
.admin .bootstrap-select .bs-searchbox input,
.admin .bootstrap-select .bs-searchbox input.form-control {
    background-color: #0c0e14 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 6px !important;
}

.admin .bootstrap-select .bs-searchbox input:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
}

.admin .bootstrap-select .dropdown-menu .inner li a {
    color: #e2e8f0 !important;
    padding: 8px 14px !important;
}

.admin .bootstrap-select .dropdown-menu .inner li a:hover,
.admin .bootstrap-select .dropdown-menu .inner li.active a,
.admin .bootstrap-select .dropdown-menu .inner li.selected a {
    background-color: rgba(212, 175, 55, 0.18) !important;
    color: #ffd700 !important;
}

.admin .bootstrap-select .dropdown-menu .inner li.disabled a {
    color: #64748b !important;
}

/* Dashboard Filter & Chart Dropdowns */
.admin ._filter_data .dropdown-menu,
._filter_data .dropdown-menu,
.admin [id$="Chartmode"] + .dropdown-menu,
.admin [id$="-report-mode"] + .dropdown-menu {
    background-color: #141722 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.admin ._filter_data .dropdown-menu li a,
._filter_data .dropdown-menu li a,
.admin [id$="Chartmode"] + .dropdown-menu li a,
.admin [id$="-report-mode"] + .dropdown-menu li a {
    color: #e2e8f0 !important;
}

.admin ._filter_data .dropdown-menu li a:hover,
._filter_data .dropdown-menu li a:hover,
.admin [id$="Chartmode"] + .dropdown-menu li a:hover,
.admin [id$="-report-mode"] + .dropdown-menu li a:hover {
    background-color: rgba(212, 175, 55, 0.16) !important;
    color: #ffd700 !important;
}

/* --------------------------------------------------------------------------
   11. MOBILE SIDEBAR MENU OPEN & MAIN PAGE BACKDROP DARK THEME OVERHAUL
   -------------------------------------------------------------------------- */

/* Eliminate milky light/white overlay when sidebar opens on mobile */
@media (max-width: 768px) {
    body.show-sidebar #wrapper:after,
    body.page-small.show-sidebar #wrapper:after,
    body.admin.show-sidebar #wrapper:after,
    body.admin.page-small.show-sidebar #wrapper:after,
    .admin.show-sidebar #wrapper:after,
    .show-sidebar #wrapper:after {
        background-color: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        box-shadow: inset 8px 0 25px rgba(0, 0, 0, 0.9) !important;
    }
}

/* Universal selector fallback for the backdrop overlay */
body.show-sidebar #wrapper:after,
body.page-small.show-sidebar #wrapper:after {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Base canvas background on mobile when sidebar opens */
html,
body.show-sidebar,
body.page-small.show-sidebar,
body.show-sidebar #wrapper,
body.page-small.show-sidebar #wrapper {
    background-color: #0b0d14 !important;
    background: #0b0d14 !important;
}

/* Mobile Sidebar Menu (#menu) when opened */
@media (max-width: 768px) {
    body.page-small.show-sidebar #menu,
    body.show-sidebar #menu,
    .admin #menu {
        background-color: #0f1116 !important;
        border-right: 1px solid rgba(212, 175, 55, 0.35) !important;
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.9) !important;
        z-index: 1000 !important;
    }
}

/* Ensure text on main page remains high contrast and visible */
body.show-sidebar #wrapper,
body.show-sidebar .content,
body.show-sidebar .panel_s,
body.show-sidebar .panel-body,
body.show-sidebar .card,
body.show-sidebar .widget {
    color: #e2e8f0 !important;
}

body.show-sidebar #wrapper h1,
body.show-sidebar #wrapper h2,
body.show-sidebar #wrapper h3,
body.show-sidebar #wrapper h4,
body.show-sidebar #wrapper h5,
body.show-sidebar #wrapper h6,
body.show-sidebar #wrapper .tw-text-neutral-900,
body.show-sidebar #wrapper .tw-text-neutral-800 {
    color: #ffffff !important;
}

body.show-sidebar #wrapper a:not(.btn):not(.label):not(.badge):not(.dropdown-toggle) {
    color: #f5d77f !important;
}

/* --------------------------------------------------------------------------
   12. PROGRESSIVE WEB APP (PWA) INSTALL COMPONENTS & LUXURY UI
   -------------------------------------------------------------------------- */

/* Header Install App Pill */
.pwa-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.06) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    color: #ffd700 !important;
    border-radius: 9999px !important;
    padding: 5px 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.btn-install-pwa-trigger:hover .pwa-header-pill,
.pwa-header-pill:hover {
    background: var(--gold-gradient) !important;
    color: #0b0d11 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.6) !important;
    transform: translateY(-1px);
}

.pwa-header-pill i {
    font-size: 12px;
    color: inherit;
}

/* Floating Install Banner */
.pwa-floating-banner {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    max-width: 420px;
    width: calc(100% - 32px);
    background: rgba(18, 21, 30, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 14px 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .pwa-floating-banner {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
        padding: 12px 14px;
    }
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-banner-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pwa-banner-text {
    flex: 1;
    min-width: 0;
}

.pwa-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.pwa-banner-sub {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-btn-install {
    background: var(--gold-gradient);
    color: #0b0d11;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
    transition: all 0.2s ease;
}

.pwa-btn-install:hover {
    background: var(--gold-gradient-hover);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6);
    transform: translateY(-1px);
}

.pwa-btn-dismiss {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.pwa-btn-dismiss:hover {
    color: #ffffff;
}

/* PWA Modals (iOS & Desktop Help) */
.pwa-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pwa-modal-card {
    background: #141722;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.15);
    border-radius: 18px;
    max-width: 440px;
    width: 100%;
    overflow: hidden;
}

.pwa-modal-header {
    background: #0e1017;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    border-top: 3px solid #d4af37;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pwa-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #f3d36b;
    display: flex;
    align-items: center;
}

.pwa-modal-close {
    background: transparent;
    border: none;
    color: #d4af37;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.pwa-modal-close:hover {
    color: #ffd700;
}

.pwa-modal-body {
    padding: 20px;
}

.pwa-ios-steps {
    padding-left: 20px;
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.8;
}

.pwa-ios-steps li {
    margin-bottom: 10px;
}

.pwa-ios-steps strong {
    color: #ffffff;
}

.pwa-modal-footer {
    background: #0e1017;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding: 14px 20px;
    text-align: right;
}

.pwa-modal-btn {
    background: var(--gold-gradient);
    color: #0b0d11;
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pwa-modal-btn:hover {
    background: var(--gold-gradient-hover);
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.4);
}

/* Toast Notification */
.pwa-toast-notification {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background: #141722;
    border: 1px solid #10b981;
    color: #f8fafc;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(16, 185, 129, 0.3);
    display: inline-flex;
    align-items: center;
}