/* ========================================
   GLOBAL DARK MODE & UI CUSTOMIZATION
   Applied across ALL pages
   ======================================== */

/* Dark Mode Base Styles */
body.dark-mode {
    background: #0f1419 !important;
    color: #e4e6eb !important;
}

/* Dark Mode - Cards, Panels, Sections */
body.dark-mode .panel,
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .widget,
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .form-control,
body.dark-mode .input-group-addon {
    background: #1a1f2e !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

/* Dark Mode - Headers and Titles */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .page-title,
body.dark-mode .panel-title {
    color: #e4e6eb !important;
}

/* Dark Mode - Text Colors */
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode td,
body.dark-mode th,
body.dark-mode label {
    color: #e4e6eb !important;
}

body.dark-mode .text-muted,
body.dark-mode .help-block,
body.dark-mode .small,
body.dark-mode small {
    color: #9ca3af !important;
}

/* Dark Mode - Tables */
body.dark-mode .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #242936 !important;
}

body.dark-mode .table-hover>tbody>tr:hover {
    background-color: #2d3441 !important;
}

body.dark-mode .table>thead>tr>th {
    border-bottom-color: #2d3441 !important;
    color: #e4e6eb !important;
}

/* Dark Mode - Forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode textarea,
body.dark-mode select {
    background: #242936 !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #6b7280 !important;
}

/* Dark Mode - Buttons */
body.dark-mode .btn-default,
body.dark-mode .btn-secondary {
    background: #242936 !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

body.dark-mode .btn-default:hover,
body.dark-mode .btn-secondary:hover {
    background: #2d3441 !important;
    border-color: #3b4150 !important;
    color: #fff !important;
}

/* Dark Mode - Dropdowns */
body.dark-mode .dropdown-menu {
    background: #1a1f2e !important;
    border-color: #2d3441 !important;
}

body.dark-mode .dropdown-menu>li>a {
    color: #e4e6eb !important;
}

body.dark-mode .dropdown-menu>li>a:hover,
body.dark-mode .dropdown-menu>li>a:focus {
    background: #242936 !important;
    color: #fff !important;
}

/* Dark Mode - Pagination */
body.dark-mode .pagination>li>a,
body.dark-mode .pagination>li>span {
    background: #242936 !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

body.dark-mode .pagination>li>a:hover,
body.dark-mode .pagination>li>a:focus {
    background: #2d3441 !important;
    color: #fff !important;
}

body.dark-mode .pagination>.active>a,
body.dark-mode .pagination>.active>span {
    background: #3F51B5 !important;
    border-color: #3F51B5 !important;
}

/* Dark Mode - Modals */
body.dark-mode .modal-content {
    background: #1a1f2e !important;
    border-color: #2d3441 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #2d3441 !important;
}

body.dark-mode .modal-footer {
    border-top-color: #2d3441 !important;
}

body.dark-mode .close {
    color: #e4e6eb !important;
    opacity: 0.8 !important;
}

body.dark-mode .close:hover {
    opacity: 1 !important;
}

/* Dark Mode - Alerts */
body.dark-mode .alert-info {
    background: #1e3a5f !important;
    border-color: #2d4a6f !important;
    color: #93c5fd !important;
}

body.dark-mode .alert-success {
    background: #1f4b3a !important;
    border-color: #2d5a47 !important;
    color: #86efac !important;
}

body.dark-mode .alert-warning {
    background: #5a4a1f !important;
    border-color: #6b5a2f !important;
    color: #fde047 !important;
}

body.dark-mode .alert-danger {
    background: #5a1f1f !important;
    border-color: #6b2f2f !important;
    color: #fca5a5 !important;
}

/* Dark Mode - Badges and Labels */
body.dark-mode .badge,
body.dark-mode .label {
    background: #3F51B5 !important;
    color: #fff !important;
}

/* Dark Mode - Breadcrumbs */
body.dark-mode .breadcrumb {
    background: #242936 !important;
}

body.dark-mode .breadcrumb>li>a {
    color: #9ca3af !important;
}

body.dark-mode .breadcrumb>.active {
    color: #e4e6eb !important;
}

/* Dark Mode - Nav Tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: #2d3441 !important;
}

body.dark-mode .nav-tabs>li>a {
    color: #9ca3af !important;
}

body.dark-mode .nav-tabs>li>a:hover,
body.dark-mode .nav-tabs>li>a:focus {
    background: #242936 !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

body.dark-mode .nav-tabs>li.active>a,
body.dark-mode .nav-tabs>li.active>a:hover,
body.dark-mode .nav-tabs>li.active>a:focus {
    background: #1a1f2e !important;
    border-color: #2d3441 #2d3441 transparent !important;
    color: #e4e6eb !important;
}

/* Dark Mode - List Groups */
body.dark-mode .list-group-item {
    background: #242936 !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

body.dark-mode .list-group-item:hover {
    background: #2d3441 !important;
}

body.dark-mode .list-group-item.active {
    background: #3F51B5 !important;
    border-color: #3F51B5 !important;
    color: #fff !important;
}

/* Dark Mode - Progress Bars */
body.dark-mode .progress {
    background: #242936 !important;
}

/* Dark Mode - Well */
body.dark-mode .well {
    background: #1a1f2e !important;
    border-color: #2d3441 !important;
    color: #e4e6eb !important;
}

/* Dark Mode - Code */
body.dark-mode code,
body.dark-mode pre {
    background: #242936 !important;
    color: #e4e6eb !important;
}

/* Dark Mode - Blockquote */
body.dark-mode blockquote {
    border-left-color: #3F51B5 !important;
    color: #9ca3af !important;
}

/* Compact Mode - Reduced Spacing */
body.compact-mode .panel,
body.compact-mode .card,
body.compact-mode .box {
    padding: 12px !important;
    margin-bottom: 15px !important;
}

body.compact-mode h1,
body.compact-mode .page-title {
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
}

body.compact-mode h2 {
    font-size: 1.5rem !important;
}

body.compact-mode h3 {
    font-size: 1.2rem !important;
}

body.compact-mode .form-group {
    margin-bottom: 15px !important;
}

/* High Contrast Mode */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
    color: #000 !important;
    font-weight: 700 !important;
}

body.high-contrast .panel,
body.high-contrast .card,
body.high-contrast table,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    border: 2px solid #000 !important;
}

body.high-contrast body.dark-mode h1,
body.high-contrast body.dark-mode h2,
body.high-contrast body.dark-mode h3 {
    color: #fff !important;
}

body.high-contrast body.dark-mode .panel,
body.high-contrast body.dark-mode .card,
body.high-contrast body.dark-mode table {
    border-color: #fff !important;
}

/* ========================================
   FACEBOOK THEME - Applied Globally
   ======================================== */

/* Facebook Theme - Main Background (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) {
    background: #F0F2F5 !important;
}

/* Facebook Theme - Cards and Panels (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) .panel,
body.facebook-theme:not(.dark-mode) .card,
body.facebook-theme:not(.dark-mode) .box,
body.facebook-theme:not(.dark-mode) .widget,
body.facebook-theme:not(.dark-mode) table {
    background: #FFFFFF !important;
    border: 1px solid #DADDE1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Facebook Theme - Text Colors (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) h1,
body.facebook-theme:not(.dark-mode) h2,
body.facebook-theme:not(.dark-mode) h3,
body.facebook-theme:not(.dark-mode) h4,
body.facebook-theme:not(.dark-mode) h5,
body.facebook-theme:not(.dark-mode) h6,
body.facebook-theme:not(.dark-mode) .page-title,
body.facebook-theme:not(.dark-mode) .panel-title,
body.facebook-theme:not(.dark-mode) p,
body.facebook-theme:not(.dark-mode) span,
body.facebook-theme:not(.dark-mode) div,
body.facebook-theme:not(.dark-mode) td,
body.facebook-theme:not(.dark-mode) th,
body.facebook-theme:not(.dark-mode) label,
body.facebook-theme:not(.dark-mode) li,
body.facebook-theme:not(.dark-mode) a:not(.btn),
body.facebook-theme:not(.dark-mode) .text-default,
body.facebook-theme:not(.dark-mode) * {
    color: #050505 !important;
}

/* Don't override button text */
body.facebook-theme:not(.dark-mode) .btn,
body.facebook-theme:not(.dark-mode) button,
body.facebook-theme:not(.dark-mode) .btn-primary,
body.facebook-theme:not(.dark-mode) .btn-default {
    color: #FFFFFF !important;
}

/* Facebook Theme - Buttons (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) .btn-primary,
body.facebook-theme:not(.dark-mode) .btn-default {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #FFFFFF !important;
}

body.facebook-theme:not(.dark-mode) .btn-primary:hover,
body.facebook-theme:not(.dark-mode) .btn-default:hover {
    background: #166FE5 !important;
    border-color: #166FE5 !important;
}

/* Facebook Theme - Forms (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) .form-control,
body.facebook-theme:not(.dark-mode) input[type="text"],
body.facebook-theme:not(.dark-mode) input[type="email"],
body.facebook-theme:not(.dark-mode) input[type="password"],
body.facebook-theme:not(.dark-mode) input[type="number"],
body.facebook-theme:not(.dark-mode) textarea,
body.facebook-theme:not(.dark-mode) select {
    background: #F0F2F5 !important;
    border: none !important;
    border-radius: 6px !important;
}

body.facebook-theme:not(.dark-mode) .form-control:focus,
body.facebook-theme:not(.dark-mode) input:focus,
body.facebook-theme:not(.dark-mode) textarea:focus,
body.facebook-theme:not(.dark-mode) select:focus {
    background: #FFFFFF !important;
    border: 1px solid #DADDE1 !important;
}

/* Facebook Theme - Sidebar (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) #sidebar-nav {
    background: #FFFFFF !important;
    border-right: 1px solid #DADDE1 !important;
}

body.facebook-theme:not(.dark-mode) .sidebar-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #DADDE1 !important;
}

body.facebook-theme:not(.dark-mode) .company-name {
    color: #050505 !important;
}

body.facebook-theme:not(.dark-mode) .nav-link {
    color: #050505 !important;
}

body.facebook-theme:not(.dark-mode) .nav-item.active .nav-link {
    background: #F0F2F5 !important;
    color: #1877F2 !important;
}

body.facebook-theme:not(.dark-mode) .nav-link:hover {
    background: #F0F2F5 !important;
}

/* Facebook Theme - Navbar (only if not in dark mode) */
body.facebook-theme:not(.dark-mode) .navbar-default {
    background: #FFFFFF !important;
    border-bottom: 1px solid #DADDE1 !important;
}

body.facebook-theme:not(.dark-mode) .navbar-default .brand {
    background: #FFFFFF !important;
}

/* Sidebar Toggle Global Support */
.layout-fullwidth #sidebar-nav {
    left: -280px !important;
}

.layout-fullwidth .main,
.layout-fullwidth .dashboard-container {
    width: 100% !important;
    margin-left: 0 !important;
}

@media (max-width: 1024px) {
    #sidebar-nav {
        transform: translateX(-100%);
        left: 0 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .offcanvas-active #sidebar-nav {
        transform: translateX(0);
    }

    .offcanvas-active .main,
    .offcanvas-active .dashboard-container {
        transform: translateX(280px);
    }
}

#sidebar-nav,
.main,
.dashboard-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}