/* Modern Admin & Dashboard Overhaul - MavenMusic (MavenS3 Node Style - Electric Cyan 73c2e2) */

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary-color: #73c2e2;
    --primary-hover: #52aed4;
    --primary-dark: #2a7da3;
    --primary-gradient: linear-gradient(135deg, #73c2e2, #3b8eb5);
    --primary-gradient-hover: linear-gradient(135deg, #8ad0ed, #52aed4);
    --primary-glow: rgba(115, 194, 226, 0.25);
    
    --bg-main: #030303;
    --bg-card: #0a0a0e;
    --bg-header: #121218;
    --bg-sidebar: #06070a;
    --border-color: #1a1a24;
    --border-light: rgba(255, 255, 255, 0.08);
    
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-cyan: #73c2e2;
}

body[data-bs-theme="dark"], body {
    --primary-color: #73c2e2;
    --primary-hover: #52aed4;
    --bg-main: #030303;
    --bg-card: #0a0a0e;
    --bg-header: #121218;
    --border-color: #1a1a24;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
}

body {
    font-family: 'Maven Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* ==========================================================================
   Page Layout & Wrapper
   ========================================================================== */
.page, .page-wrapper, .main-content, .page-content {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* ==========================================================================
   Sidebar Styling
   ========================================================================== */
.page-sidebar, .navbar-vertical, aside.navbar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color) !important;
}

.page-sidebar .sidebar-menu > li > a,
.navbar-vertical .navbar-nav .nav-link {
    color: var(--text-muted) !important;
    font-weight: 600;
    transition: all 0.2s ease;
    border-radius: 12px;
    margin: 4px 8px;
    padding: 10px 14px;
    background: transparent;
}

.page-sidebar .sidebar-menu > li > a:hover,
.navbar-vertical .navbar-nav .nav-link:hover {
    background: rgba(115, 194, 226, 0.08) !important;
    color: var(--primary-color) !important;
}

.page-sidebar .sidebar-menu > li.active > a,
.page-sidebar .sidebar-menu > li:hover > a,
.navbar-vertical .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 14px var(--primary-glow) !important;
    font-weight: 700 !important;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-icon,
.page-sidebar .sidebar-menu > li > a i {
    color: inherit !important;
}

/* ==========================================================================
   Header & Navbar Styling
   ========================================================================== */
.page-header.navbar, header.navbar, .navbar-top {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle,
.navbar .nav-link {
    color: var(--text-main) !important;
}

.navbar-brand, .navbar-brand-autodark {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff !important;
}

/* ==========================================================================
   Cards & Dashboard Panels
   ========================================================================== */
.portlet, .card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-main) !important;
    overflow: hidden;
    margin-bottom: 24px;
}

.portlet-title, .card-header {
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--bg-header) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
}

.card-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.portlet-body, .card-body {
    padding: 24px !important;
    color: var(--text-main) !important;
}

.card-footer {
    background: var(--bg-header) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 16px 24px !important;
}

/* ==========================================================================
   Dashboard Stat Widgets & Numbers
   ========================================================================== */
.dashboard-stat2, .dashboard-widget-item, .dashboard-widget-item > a, .dashboard-widget-item > div {
    background: var(--bg-card) !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}

.dashboard-widget-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 30px rgba(115, 194, 226, 0.15) !important;
}

.dashboard-stat2 .display .number h3,
.dashboard-widget-item .number span,
.dashboard-widget-item .desc,
.dashboard-stat .details .number,
.stat-number {
    color: #ffffff !important;
    white-space: nowrap !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

.dashboard-widget-item .desc {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dashboard-widget-item .visual i,
.dashboard-widget-item .visual svg {
    color: var(--primary-color) !important;
    opacity: 0.25 !important;
}

/* Override color backgrounds for dashboard stat widgets */
.dashboard-widget-item [class*="bg-"] {
    background: linear-gradient(135deg, rgba(115, 194, 226, 0.12), rgba(10, 10, 14, 0.95)) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
}

.dashboard-widget-item .bg-primary {
    background: linear-gradient(135deg, rgba(115, 194, 226, 0.15), rgba(10, 10, 14, 0.95)) !important;
    border-color: rgba(115, 194, 226, 0.3) !important;
}

.dashboard-widget-item .bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(10, 10, 14, 0.95)) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.dashboard-widget-item .bg-info {
    background: linear-gradient(135deg, rgba(115, 194, 226, 0.2), rgba(10, 10, 14, 0.95)) !important;
    border-color: rgba(115, 194, 226, 0.4) !important;
}

.dashboard-widget-item .bg-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(10, 10, 14, 0.95)) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dashboard-widget-item .bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(10, 10, 14, 0.95)) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary, .btn-gold, button.btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'Maven Pro', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover, .btn-gold:hover, button.btn-primary:hover {
    background: var(--primary-gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(115, 194, 226, 0.4) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
}

.btn-info {
    background: var(--bg-header) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--primary-color) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: var(--accent-red) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.btn-success {
    background: rgba(34, 197, 94, 0.2) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Badges & Labels
   ========================================================================== */
.badge, .badge-outline {
    font-weight: 700;
    border-radius: 50px;
    padding: 6px 12px;
}

.badge.bg-primary, .badge-outline.text-primary, .bg-primary-lt {
    background: rgba(115, 194, 226, 0.15) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(115, 194, 226, 0.3) !important;
}

.badge.bg-success, .badge-outline.text-success, .bg-success-lt {
    background: rgba(34, 197, 94, 0.15) !important;
    color: var(--accent-green) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.badge.bg-danger, .badge-outline.text-danger, .bg-danger-lt {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--accent-red) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* ==========================================================================
   Inputs & Forms
   ========================================================================== */
.form-control, .form-select {
    background: var(--bg-header) !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(115, 194, 226, 0.2) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.table thead th {
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-header) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.table tbody td {
    border-top: 1px solid var(--border-color) !important;
    color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-header) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(115, 194, 226, 0.06) !important;
}

/* ==========================================================================
   Dropdowns & Modals
   ========================================================================== */
.dropdown-menu, .modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    color: var(--text-main) !important;
}

.dropdown-item {
    color: var(--text-muted) !important;
    border-radius: 8px;
    margin: 2px 6px;
    padding: 8px 12px;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(115, 194, 226, 0.12) !important;
    color: #ffffff !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-header) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
    background-color: var(--bg-header) !important;
}

/* ==========================================================================
   Media Manager Overrides
   ========================================================================== */
.rv-media-wrapper .rv-media-main,
.rv-media-wrapper .rv-media-header,
.rv-media-wrapper .rv-media-aside {
    background-color: var(--bg-main) !important;
    border-color: var(--border-color) !important;
}

.rv-media-list .no-items {
    background-color: var(--bg-card) !important;
    border: 2px dashed var(--primary-color) !important;
    border-radius: 24px !important;
    color: var(--text-main) !important;
    margin: 40px auto;
    width: 60%;
    max-width: 400px;
    height: auto !important;
    padding: 40px 20px !important;
}

.rv-media-list .no-items h3, .rv-media-list .no-items p {
    color: #ffffff !important;
}

.rv-media-list .no-items i {
    color: var(--primary-color) !important;
}

.rv-media-details {
    background-color: var(--bg-card) !important;
    border-left: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.rv-media-details .rv-media-thumbnail img {
    border-radius: 12px;
}

.rv-media-grid ul li {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

.rv-media-grid ul li .rv-media-item {
    color: var(--text-main) !important;
}

/* ==========================================================================
   Scrollbar customization
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-header);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}