/**
 * Custom CSS Override
 * Overrides default Dason template styles
 */

/* Reduce page-content padding - equal top and bottom */
.page-content {
    padding: 24px 16px 60px !important;
}

@media (max-width: 768px) {
    .page-content {
        padding: 20px 12px 60px !important;
    }
}

@media (max-width: 480px) {
    .page-content {
        padding: 16px 12px 60px !important;
    }
}

/* ========================================
   Dark Mode for Portal Topbar & Sidebar
   Based on status.vidogarment color scheme
   ======================================== */

/* Dark Mode - Header/Topbar */
body[data-layout-mode="dark"] .portal-header {
    background-color: #282f36 !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3);
}

body[data-layout-mode="dark"] .portal-header-item,
body[data-layout-mode="dark"] .portal-menu-toggle {
    background-color: rgba(255,255,255,0.05);
    color: #e9ecef;
}

body[data-layout-mode="dark"] .portal-header-item:hover,
body[data-layout-mode="dark"] .portal-menu-toggle:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Dark Mode - Sidebar */
body[data-layout-mode="dark"] .portal-sidebar {
    background-color: #242a30 !important;
    color: #99a4b1;
    border-right: 1px solid transparent;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

body[data-layout-mode="dark"] .portal-menu-title {
    color: #858d98;
}

body[data-layout-mode="dark"] .portal-menu-item {
    color: #99a4b1;
}

body[data-layout-mode="dark"] .portal-menu-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
}

body[data-layout-mode="dark"] .portal-menu-item.active {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-right-color: #fff;
}

/* Dark Mode - Submenu */
body[data-layout-mode="dark"] .portal-submenu {
    background-color: rgba(0,0,0,0.2);
}

body[data-layout-mode="dark"] .portal-submenu-item {
    color: #858d98;
}

body[data-layout-mode="dark"] .portal-submenu-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
}

body[data-layout-mode="dark"] .portal-submenu-item.active {
    color: #fff;
}

/* Dark Mode - Apps Dropdown */
body[data-layout-mode="dark"] .portal-apps-dropdown-grid {
    background-color: #282f36 !important;
}

body[data-layout-mode="dark"] .portal-apps-dropdown-item {
    background-color: #2d343c;
    border-color: rgba(255,255,255,0.1);
    color: #99a4b1;
}

body[data-layout-mode="dark"] .portal-apps-dropdown-item:hover {
    background-color: #30373f;
    border-color: rgba(255,255,255,0.2);
}

/* Dark Mode - Scrollbar */
body[data-layout-mode="dark"] .portal-apps-dropdown-grid::-webkit-scrollbar-track {
    background: #2d343c;
}

body[data-layout-mode="dark"] .portal-sidebar::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

body[data-layout-mode="dark"] .portal-sidebar::-webkit-scrollbar-thumb {
    background: #3a4149;
    border-radius: 3px;
}

body[data-layout-mode="dark"] .portal-sidebar::-webkit-scrollbar-thumb:hover {
    background: #454d56;
}

/* Dark Mode - Page Header */
body[data-layout-mode="dark"] .portal-page-header {
    background: linear-gradient(135deg, #282f36 0%, #242a30 100%) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body[data-layout-mode="dark"] .portal-header-date {
    color: rgba(255,255,255,0.85);
}

body[data-layout-mode="dark"] .portal-page-title {
    color: #fff;
}

/* Dark Mode - Dashboard Grid Container */
body[data-layout-mode="dark"] .portal-dashboard-grid {
    background: transparent;
}

/* Dark Mode - Dashboard Items */
body[data-layout-mode="dark"] .portal-dashboard-item {
    background-color: #242a30;
    border-color: rgba(255,255,255,0.1);
}

body[data-layout-mode="dark"] .portal-dashboard-item:hover {
    background-color: #282f36;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Dark Mode - Footer */
body[data-layout-mode="dark"] .portal-footer {
    background-color: #242a30;
    border-top: 1px solid #293037;
    color: #adb5bd;
}