/** * Admin panel light / dark theme (SkyDash tokens). * Controlled via data-theme on and body.sidebar-dark for chrome. */ :root, [data-theme="light"] { --tudu-content-bg: #F5F7FF; --tudu-body-bg: #ffffff; --tudu-body-color: #1F1F1F; --tudu-text-muted: #737F8B; --tudu-border-color: #CED4DA; --tudu-card-bg: #ffffff; --tudu-card-title: #010101; --tudu-card-description: #76838f; --tudu-input-bg: #ffffff; --tudu-input-color: #495057; --tudu-input-border: #CED4DA; --tudu-table-stripe: #F5F7FF; --tudu-table-hover: #eaeaf1; --tudu-dropdown-bg: #ffffff; --tudu-dropdown-color: #343a40; --tudu-dropdown-hover: #f8f9fa; --tudu-navbar-menu-bg: #ffffff; --tudu-navbar-menu-color: #6C7383; --tudu-auth-form-bg: #ffffff; --tudu-auth-page-bg: #F5F7FF; --tudu-placeholder: #606060; --tudu-shadow: rgba(30, 40, 90, 0.06); --tudu-primary: #4B49AC; --tudu-select-padding-right: 2.75rem; --tudu-select-chevron-inset: 1rem; --tudu-select-arrow-down: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --tudu-select-arrow-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); } [data-theme="dark"] { color-scheme: dark; --tudu-content-bg: #151419; --tudu-body-bg: #1e1d22; --tudu-body-color: #ffffff; --tudu-text-muted: #9c9fa6; --tudu-border-color: #575757; --tudu-card-bg: #1e1d22; --tudu-card-title: #ffffff; --tudu-card-description: #9c9fa6; --tudu-input-bg: #232227; --tudu-input-color: #e8e8e8; --tudu-input-border: #575757; --tudu-table-stripe: #1a191e; --tudu-table-hover: #2a2930; --tudu-dropdown-bg: #232227; --tudu-dropdown-color: #e8e8e8; --tudu-dropdown-hover: #2e2d33; --tudu-navbar-menu-bg: #232227; --tudu-navbar-menu-color: #ffffff; --tudu-auth-form-bg: #1e1d22; --tudu-auth-page-bg: #151419; --tudu-placeholder: #9c9fa6; --tudu-shadow: rgba(0, 0, 0, 0.25); --tudu-primary: #4B49AC; --tudu-card-surface: linear-gradient(155deg, #24232a 0%, #1c1b21 48%, #18171c 100%); --tudu-card-border: rgba(255, 255, 255, 0.07); --tudu-card-glow: 0 4px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 32px rgba(121, 118, 255, 0.1); --tudu-card-glow-hover: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(150, 148, 255, 0.18), 0 12px 40px rgba(121, 118, 255, 0.18); --tudu-select-padding-right: 2.75rem; --tudu-select-chevron-inset: 1rem; --tudu-select-arrow-down: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --tudu-select-arrow-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8e8e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); } /* ---------- Global ---------- */ [data-theme="dark"] body { background-color: var(--tudu-content-bg); color: var(--tudu-body-color); } [data-theme="dark"] .content-wrapper, [data-theme="dark"] .footer { background: var(--tudu-content-bg) !important; color: var(--tudu-body-color); } [data-theme="dark"] .footer { border-top-color: var(--tudu-border-color) !important; } /* Navbar (menu area stays light with sidebar-dark only on brand — extend here) */ [data-theme="dark"] .navbar .navbar-menu-wrapper { background: var(--tudu-navbar-menu-bg) !important; color: var(--tudu-navbar-menu-color) !important; } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link { color: var(--tudu-navbar-menu-color); } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control, [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .input-group-text { color: var(--tudu-navbar-menu-color) !important; } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .input-group-text i { color: var(--tudu-text-muted) !important; } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-toggler { color: var(--tudu-navbar-menu-color); } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { background: var(--tudu-dropdown-bg); border-color: var(--tudu-border-color); } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item { color: var(--tudu-dropdown-color); } [data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item:hover { background: var(--tudu-dropdown-hover); color: #fff; } /* ---------- Cards: elevation & glow (dark) ---------- */ [data-theme="dark"] .content-wrapper .card:not(.transparent):not(.bg-transparent):not(.tale-bg):not(.card-tale):not(.card-dark-blue):not(.card-light-blue):not(.card-light-danger):not([class*="data-icon-card-"]):not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-light):not([class*="card-inverse-"]), [data-theme="dark"] .main-panel .card:not(.transparent):not(.bg-transparent):not(.tale-bg):not(.card-tale):not(.card-dark-blue):not(.card-light-blue):not(.card-light-danger):not([class*="data-icon-card-"]):not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-light):not([class*="card-inverse-"]) { background: var(--tudu-card-surface); border: 1px solid var(--tudu-card-border); box-shadow: var(--tudu-card-glow); color: var(--tudu-body-color); transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } [data-theme="dark"] .content-wrapper .card:not(.transparent):not(.card-tale):not(.card-dark-blue):not(.card-light-blue):not(.card-light-danger):not(.tale-bg):not([class*="data-icon-card-"]):not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):hover, [data-theme="dark"] .main-panel .card:not(.transparent):not(.card-tale):not(.card-dark-blue):not(.card-light-blue):not(.card-light-danger):not(.tale-bg):not([class*="data-icon-card-"]):not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):hover { border-color: rgba(150, 148, 255, 0.14); } [data-theme="dark"] .card.transparent, [data-theme="dark"] .card.bg-transparent { background: transparent !important; border: none !important; box-shadow: none !important; } [data-theme="dark"] .card .card-title { color: var(--tudu-card-title) !important; } [data-theme="dark"] .card .card-description, [data-theme="dark"] .card .card-subtitle { color: var(--tudu-card-description) !important; } [data-theme="dark"] .card .card-body { color: var(--tudu-body-color); } [data-theme="dark"] .dashboard-metric-link:hover .card { box-shadow: var(--tudu-card-glow-hover) !important; transform: translateY(-1px); } /* Weather card: keep day tale-bg (#DAE7FF) in dark mode so people.svg blends correctly */ [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) { background: #dae7ff !important; border: none !important; box-shadow: none !important; color: #1f1f1f; } [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info h2, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info h4, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info h6, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info .weather-description, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .weather-info sup, [data-theme="dark"] .card.tale-bg:not(.dashboard-weather-card--night) .location { color: #1f1f1f !important; } [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night { background: #0c102b !important; border: none !important; box-shadow: none !important; } [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info h2, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info h4, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info h6, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info .weather-description, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .weather-info sup, [data-theme="dark"] .card.tale-bg.dashboard-weather-card--night .location { color: #fff !important; } /* Dashboard metric accent cards */ [data-theme="dark"] .card.card-tale { background: linear-gradient(145deg, rgba(125, 160, 250, 0.45) 0%, rgba(75, 73, 172, 0.62) 50%, rgba(48, 46, 110, 0.88) 100%) !important; border: 1px solid rgba(160, 185, 255, 0.32); box-shadow: 0 10px 40px rgba(125, 160, 250, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important; color: #fff !important; } [data-theme="dark"] .card.card-tale:hover { background: linear-gradient(145deg, rgba(125, 160, 250, 0.55) 0%, rgba(75, 73, 172, 0.72) 50%, rgba(48, 46, 110, 0.95) 100%) !important; box-shadow: 0 14px 48px rgba(125, 160, 250, 0.28) !important; } [data-theme="dark"] .card.card-dark-blue { background: linear-gradient(145deg, rgba(71, 71, 161, 0.55) 0%, rgba(55, 55, 130, 0.75) 55%, rgba(35, 35, 85, 0.92) 100%) !important; border: 1px solid rgba(130, 130, 220, 0.35); box-shadow: 0 10px 40px rgba(71, 71, 161, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important; color: #fff !important; } [data-theme="dark"] .card.card-dark-blue:hover { background: linear-gradient(145deg, rgba(71, 71, 161, 0.65) 0%, rgba(55, 55, 130, 0.85) 55%, rgba(35, 35, 85, 1) 100%) !important; box-shadow: 0 14px 48px rgba(71, 71, 161, 0.32) !important; } [data-theme="dark"] .card.card-light-blue { background: linear-gradient(145deg, rgba(121, 120, 233, 0.48) 0%, rgba(75, 73, 172, 0.65) 50%, rgba(45, 44, 105, 0.9) 100%) !important; border: 1px solid rgba(160, 158, 255, 0.32); box-shadow: 0 10px 40px rgba(121, 120, 233, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important; color: #fff !important; } [data-theme="dark"] .card.card-light-blue:hover { background: linear-gradient(145deg, rgba(121, 120, 233, 0.58) 0%, rgba(75, 73, 172, 0.75) 50%, rgba(45, 44, 105, 0.98) 100%) !important; box-shadow: 0 14px 48px rgba(121, 120, 233, 0.3) !important; } [data-theme="dark"] .card.card-light-danger { background: linear-gradient(145deg, rgba(243, 121, 126, 0.42) 0%, rgba(200, 70, 80, 0.62) 50%, rgba(120, 40, 50, 0.88) 100%) !important; border: 1px solid rgba(255, 150, 160, 0.3); box-shadow: 0 10px 40px rgba(243, 121, 126, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important; color: #fff !important; } [data-theme="dark"] .card.card-light-danger:hover { box-shadow: 0 14px 48px rgba(243, 121, 126, 0.28) !important; } /* Bootstrap bg-* stat cards */ [data-theme="dark"] .card.bg-primary { background: linear-gradient(145deg, rgba(75, 73, 172, 0.55) 0%, rgba(45, 43, 115, 0.82) 100%) !important; border: 1px solid rgba(140, 138, 240, 0.38); box-shadow: 0 10px 36px rgba(75, 73, 172, 0.3) !important; color: #fff !important; } [data-theme="dark"] .card.bg-success { background: linear-gradient(145deg, rgba(87, 182, 87, 0.45) 0%, rgba(40, 100, 45, 0.82) 100%) !important; border: 1px solid rgba(120, 220, 130, 0.35); box-shadow: 0 10px 36px rgba(87, 182, 87, 0.22) !important; color: #fff !important; } [data-theme="dark"] .card.bg-info { background: linear-gradient(145deg, rgba(36, 138, 253, 0.45) 0%, rgba(20, 80, 160, 0.82) 100%) !important; border: 1px solid rgba(100, 180, 255, 0.35); box-shadow: 0 10px 36px rgba(36, 138, 253, 0.22) !important; color: #fff !important; } [data-theme="dark"] .card.bg-warning { background: linear-gradient(145deg, rgba(255, 193, 0, 0.42) 0%, rgba(160, 120, 0, 0.78) 100%) !important; border: 1px solid rgba(255, 210, 80, 0.35); box-shadow: 0 10px 36px rgba(255, 193, 0, 0.18) !important; color: #fff !important; } [data-theme="dark"] .card.bg-danger { background: linear-gradient(145deg, rgba(255, 71, 71, 0.42) 0%, rgba(140, 35, 40, 0.82) 100%) !important; border: 1px solid rgba(255, 130, 130, 0.35); box-shadow: 0 10px 36px rgba(255, 71, 71, 0.2) !important; color: #fff !important; } [data-theme="dark"] .card.bg-light { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(35, 34, 42, 0.95) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--tudu-card-glow) !important; color: var(--tudu-body-color) !important; } /* Data icon cards (dashboard charts) */ [data-theme="dark"] .data-icon-card-primary { background: linear-gradient(145deg, rgba(75, 73, 172, 0.62) 0%, rgba(48, 46, 115, 0.9) 100%) !important; border: 1px solid rgba(140, 138, 240, 0.35); box-shadow: 0 12px 42px rgba(75, 73, 172, 0.32) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-secondary { background: linear-gradient(145deg, rgba(163, 164, 165, 0.4) 0%, rgba(80, 82, 88, 0.88) 100%) !important; border: 1px solid rgba(200, 200, 210, 0.25); box-shadow: 0 10px 36px rgba(120, 120, 130, 0.2) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-success { background: linear-gradient(145deg, rgba(87, 182, 87, 0.55) 0%, rgba(40, 110, 50, 0.88) 100%) !important; border: 1px solid rgba(130, 230, 140, 0.32); box-shadow: 0 12px 42px rgba(87, 182, 87, 0.26) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-info { background: linear-gradient(145deg, rgba(36, 138, 253, 0.55) 0%, rgba(20, 85, 170, 0.88) 100%) !important; border: 1px solid rgba(100, 180, 255, 0.32); box-shadow: 0 12px 42px rgba(36, 138, 253, 0.26) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-warning { background: linear-gradient(145deg, rgba(255, 193, 0, 0.5) 0%, rgba(170, 125, 0, 0.85) 100%) !important; border: 1px solid rgba(255, 215, 90, 0.35); box-shadow: 0 12px 42px rgba(255, 193, 0, 0.2) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-danger { background: linear-gradient(145deg, rgba(255, 71, 71, 0.52) 0%, rgba(150, 35, 45, 0.88) 100%) !important; border: 1px solid rgba(255, 130, 130, 0.32); box-shadow: 0 12px 42px rgba(255, 71, 71, 0.24) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-light { background: linear-gradient(145deg, rgba(248, 249, 250, 0.15) 0%, rgba(50, 50, 58, 0.9) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--tudu-card-glow) !important; color: #fff !important; } [data-theme="dark"] .data-icon-card-dark { background: linear-gradient(145deg, rgba(40, 47, 58, 0.75) 0%, rgba(20, 22, 30, 0.95) 100%) !important; border: 1px solid rgba(120, 125, 140, 0.3); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4) !important; color: #fff !important; } [data-theme="dark"] [class*="data-icon-card-"] .card-title, [data-theme="dark"] [class*="data-icon-card-"] .background-icon i { color: #fff !important; } /* Outline & inverse cards */ [data-theme="dark"] .card.card-outline-primary { border-color: rgba(130, 128, 230, 0.55) !important; box-shadow: 0 0 24px rgba(75, 73, 172, 0.15) !important; } [data-theme="dark"] .card.card-outline-success { border-color: rgba(120, 220, 130, 0.5) !important; box-shadow: 0 0 24px rgba(87, 182, 87, 0.12) !important; } [data-theme="dark"] .card.card-outline-warning { border-color: rgba(255, 210, 80, 0.5) !important; box-shadow: 0 0 24px rgba(255, 193, 0, 0.1) !important; } [data-theme="dark"] .card.card-outline-danger { border-color: rgba(255, 130, 130, 0.5) !important; box-shadow: 0 0 24px rgba(255, 71, 71, 0.12) !important; } [data-theme="dark"] .card-inverse-primary { background: rgba(75, 73, 172, 0.2) !important; border-color: rgba(140, 138, 240, 0.45) !important; color: #c5c3ff !important; box-shadow: 0 4px 20px rgba(75, 73, 172, 0.15) !important; } [data-theme="dark"] .card-inverse-secondary { background: rgba(163, 164, 165, 0.15) !important; border-color: rgba(180, 182, 190, 0.35) !important; color: #d0d2d8 !important; } [data-theme="dark"] .card-inverse-success { background: rgba(87, 182, 87, 0.18) !important; border-color: rgba(120, 220, 130, 0.4) !important; color: #a8e8a8 !important; box-shadow: 0 4px 20px rgba(87, 182, 87, 0.12) !important; } [data-theme="dark"] .card-inverse-info { background: rgba(36, 138, 253, 0.18) !important; border-color: rgba(100, 180, 255, 0.4) !important; color: #9ec8ff !important; box-shadow: 0 4px 20px rgba(36, 138, 253, 0.12) !important; } [data-theme="dark"] .card-inverse-warning { background: rgba(255, 193, 0, 0.15) !important; border-color: rgba(255, 210, 80, 0.4) !important; color: #ffe08a !important; } [data-theme="dark"] .card-inverse-danger { background: rgba(255, 71, 71, 0.18) !important; border-color: rgba(255, 130, 130, 0.4) !important; color: #ffb0b0 !important; box-shadow: 0 4px 20px rgba(255, 71, 71, 0.12) !important; } [data-theme="dark"] .card-inverse-light { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e8e8ec !important; } [data-theme="dark"] .card-inverse-dark { background: rgba(40, 47, 58, 0.35) !important; border-color: rgba(120, 125, 140, 0.35) !important; color: #c8ccd4 !important; } /* Dashboard filter panel */ .dashboard-period-filter { background: #fff; border: 1px solid #e3e7ef; border-radius: 12px; padding: 0.75rem 1rem; box-shadow: 0 1px 4px rgba(30, 40, 90, 0.06); gap: 0.75rem; } .dashboard-period-filter__icon { color: #4b49ac; font-size: 1.35rem; line-height: 1; } .dashboard-period-filter__label { display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a94a6; margin-bottom: 0.25rem; } .dashboard-period-filter__select { border-radius: 8px; border-color: #dce1e9; height: calc(1.5em + 0.65rem + 2px); font-size: 0.875rem; } .dashboard-period-filter__select:focus { border-color: #4b49ac; box-shadow: 0 0 0 0.15rem rgba(75, 73, 172, 0.15); } .dashboard-period-filter__badge { font-size: 0.75rem; font-weight: 600; padding: 0.45em 0.75em; border-radius: 20px; background: #eef0ff; color: #4b49ac; white-space: nowrap; align-self: center; } [data-theme="dark"] .dashboard-period-filter { background: linear-gradient(145deg, rgba(36, 35, 44, 0.95) 0%, rgba(26, 25, 32, 0.98) 100%) !important; border-color: rgba(130, 128, 230, 0.2) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 24px rgba(75, 73, 172, 0.12) !important; } [data-theme="dark"] .dashboard-period-filter__icon { color: #a8a6ff !important; } [data-theme="dark"] .dashboard-period-filter__label { color: var(--tudu-text-muted) !important; } [data-theme="dark"] .dashboard-period-filter__select { background-color: var(--tudu-input-bg) !important; border-color: var(--tudu-input-border) !important; color: var(--tudu-input-color) !important; } [data-theme="dark"] .dashboard-period-filter__badge { background: rgba(75, 73, 172, 0.28) !important; color: #c8c6ff !important; border: 1px solid rgba(140, 138, 240, 0.25); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .asColorPicker-input, [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--tudu-input-bg) !important; border-color: var(--tudu-input-border) !important; color: var(--tudu-input-color) !important; } [data-theme="dark"] .form-control:focus { background-color: var(--tudu-input-bg); border-color: var(--tudu-primary); color: var(--tudu-input-color); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] select::placeholder { color: var(--tudu-placeholder) !important; } [data-theme="dark"] select, [data-theme="dark"] select option { background-color: var(--tudu-input-bg); color: var(--tudu-input-color) !important; } [data-theme="dark"] label, [data-theme="dark"] .form-group label, [data-theme="dark"] .col-form-label { color: var(--tudu-body-color); } [data-theme="dark"] .text-muted { color: var(--tudu-text-muted) !important; } [data-theme="dark"] .text-black, [data-theme="dark"] .text-dark { color: var(--tudu-body-color) !important; } /* Tables */ [data-theme="dark"] { --tudu-thead-bg: linear-gradient(180deg, rgba(42, 41, 50, 0.98) 0%, rgba(30, 29, 36, 1) 100%); --tudu-thead-color: #ececf0; --tudu-thead-border: rgba(130, 128, 230, 0.28); } [data-theme="dark"] .table, [data-theme="dark"] .jsgrid .jsgrid-table { color: var(--tudu-body-color); } /* Default & plain thead */ [data-theme="dark"] .table thead th, [data-theme="dark"] .jsgrid .jsgrid-table thead th { background: var(--tudu-thead-bg) !important; color: var(--tudu-thead-color) !important; border-color: var(--tudu-border-color) !important; border-bottom: 2px solid var(--tudu-thead-border) !important; } [data-theme="dark"] .table td, [data-theme="dark"] .table tbody th, [data-theme="dark"] .jsgrid .jsgrid-table td { border-color: var(--tudu-border-color); background-color: transparent; } [data-theme="dark"] .table tbody th { color: var(--tudu-body-color); } /* Bootstrap thead-light / thead-dark */ [data-theme="dark"] .thead-light th, [data-theme="dark"] .table .thead-light th, [data-theme="dark"] .jsgrid .jsgrid-table .thead-light th { background: var(--tudu-thead-bg) !important; color: var(--tudu-thead-color) !important; border-color: var(--tudu-border-color) !important; } [data-theme="dark"] thead.table-light th, [data-theme="dark"] .table-light thead th, [data-theme="dark"] thead.table-light th { background: var(--tudu-thead-bg) !important; color: var(--tudu-thead-color) !important; border-color: var(--tudu-border-color) !important; } [data-theme="dark"] .thead-dark th, [data-theme="dark"] .table .thead-dark th, [data-theme="dark"] .jsgrid .jsgrid-table .thead-dark th { background: linear-gradient(180deg, rgba(30, 29, 38, 1) 0%, rgba(22, 21, 28, 1) 100%) !important; color: #fff !important; border-color: rgba(75, 73, 172, 0.35) !important; border-bottom: 2px solid rgba(130, 128, 230, 0.35) !important; } [data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td { background-color: transparent !important; color: var(--tudu-body-color); } [data-theme="dark"] .table-dark, [data-theme="dark"] .table-dark > th, [data-theme="dark"] .table-dark > td { background-color: rgba(30, 29, 38, 0.6) !important; color: var(--tudu-body-color); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--tudu-table-stripe) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--tudu-table-hover) !important; color: var(--tudu-body-color); } /* Card-wrapped tables & list page overrides */ [data-theme="dark"] .card .table thead th { color: var(--tudu-thead-color) !important; } [data-theme="dark"] .card-header h4, [data-theme="dark"] .card-header h5, [data-theme="dark"] .card-header h6 { color: var(--tudu-body-color); } [data-theme="dark"] .card-header { background: linear-gradient(180deg, rgba(38, 37, 46, 0.95) 0%, rgba(28, 27, 34, 0.98) 100%); border-bottom: 1px solid var(--tudu-thead-border); color: var(--tudu-body-color); } [data-theme="dark"] .card .card-header { background: transparent; border-bottom-color: var(--tudu-border-color); } [data-theme="dark"] .card .card-header h5, [data-theme="dark"] .card .card-header h4 { color: var(--tudu-body-color) !important; } /* Sortable column headers */ [data-theme="dark"] thead th a { color: var(--tudu-thead-color); } [data-theme="dark"] thead th a:hover { color: #a8a6ff !important; } [data-theme="dark"] .sort-icons i.text-muted { opacity: 0.45; } [data-theme="dark"] .sort-icons i.text-primary { color: #a8a6ff !important; } /* Typography & misc */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .page-title, [data-theme="dark"] .card-title-wrap h4 { color: var(--tudu-body-color); } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item a { color: var(--tudu-text-muted); } [data-theme="dark"] .breadcrumb-item.active { color: var(--tudu-body-color); } [data-theme="dark"] .dropdown-menu { background: var(--tudu-dropdown-bg); border-color: var(--tudu-border-color); } [data-theme="dark"] .dropdown-item { color: var(--tudu-dropdown-color); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--tudu-dropdown-hover); color: #fff; } [data-theme="dark"] .modal-content { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--tudu-border-color); } [data-theme="dark"] .close, [data-theme="dark"] .close span { color: var(--tudu-body-color); text-shadow: none; } [data-theme="dark"] .alert { border-color: var(--tudu-border-color); } [data-theme="dark"] .list-group-item { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } [data-theme="dark"] .nav-tabs { border-color: var(--tudu-border-color); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--tudu-text-muted); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } [data-theme="dark"] .pagination .page-link { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } [data-theme="dark"] .pagination .page-item.disabled .page-link { background: var(--tudu-content-bg); color: var(--tudu-text-muted); } /* Auth / login */ [data-theme="dark"] .auth .auth-form-light { background: var(--tudu-auth-form-bg) !important; color: var(--tudu-body-color); } [data-theme="dark"] .auth .auth-form-light h4, [data-theme="dark"] .auth .auth-form-light h6 { color: var(--tudu-body-color); } [data-theme="dark"] .auth .content-wrapper, [data-theme="dark"] .auth.auth-bg-1, [data-theme="dark"] .page-body-wrapper.full-page-wrapper { background: var(--tudu-auth-page-bg) !important; } /* Theme toggle button */ .theme-toggle-btn { padding: 0.25rem 0.5rem !important; border: none; background: transparent; color: inherit; line-height: 1; cursor: pointer; font-size: 1.15rem; } .theme-toggle-btn:hover, .theme-toggle-btn:focus { color: var(--tudu-primary); outline: none; box-shadow: none; text-decoration: none; } [data-theme="dark"] .theme-toggle-btn { color: #fff; } .login-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1050; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--tudu-border-color); background: var(--tudu-card-bg); color: var(--tudu-body-color); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px var(--tudu-shadow); transition: background 0.2s ease, color 0.2s ease; } .login-theme-toggle:hover { color: var(--tudu-primary); } /* Bootstrap utility overrides */ [data-theme="dark"] .bg-white, [data-theme="dark"] .card.bg-white { background-color: var(--tudu-card-bg) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: var(--tudu-border-color) !important; } [data-theme="dark"] .page-header, [data-theme="dark"] .page-title-header { color: var(--tudu-body-color); } [data-theme="dark"] pre, [data-theme="dark"] code { background: #2a2930; color: #f8f9fa; } [data-theme="dark"] .badge-light { background: #2e2d33; color: var(--tudu-body-color); } [data-theme="dark"] .custom-control-label::before { background: var(--tudu-input-bg); border-color: var(--tudu-input-border); } [data-theme="dark"] .input-group-text { background: var(--tudu-input-bg); border-color: var(--tudu-input-border); color: var(--tudu-text-muted); } /* ---------- Custom Select2 (CDN + both themes) ---------- */ .select2-container { width: 100% !important; max-width: 100%; z-index: 1055; } .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--tudu-input-border, #ced4da); border-radius: 0.25rem; background-color: var(--tudu-input-bg, #fff); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; padding-right: 28px; color: var(--tudu-input-color, #495057); font-size: 0.875rem; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tudu-placeholder, #6c757d); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: var(--tudu-select-chevron-inset); width: 16px; background-repeat: no-repeat; background-position: center center; background-size: 16px 12px; background-image: var(--tudu-select-arrow-down) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow { background-image: var(--tudu-select-arrow-up) !important; } .select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 6px; line-height: 36px; } .select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--tudu-primary, #4b49ac); outline: 0; box-shadow: 0 0 0 0.15rem rgba(75, 73, 172, 0.2); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tudu-primary, #4b49ac) !important; color: #fff !important; } .select2-dropdown { border: 1px solid var(--tudu-input-border, #ced4da); border-radius: 0.25rem; box-shadow: 0 4px 16px rgba(30, 40, 90, 0.12); z-index: 1060; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--tudu-input-border, #ced4da); border-radius: 0.25rem; padding: 6px 10px; font-size: 0.875rem; } .select2-container--default .select2-results__option { padding: 8px 12px; font-size: 0.875rem; } /* Large Select2 — notification user picker, etc. */ .tudu-select2-lg .select2-container--default .select2-selection--single { height: 45px; border-radius: 4px; font-weight: 400; } .tudu-select2-lg .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 43px; padding-left: 12px; padding-right: 30px; } .tudu-select2-lg .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; top: 1px; right: var(--tudu-select-chevron-inset); } .tudu-select2-lg .select2-container--default .select2-selection--single .select2-selection__clear { line-height: 43px; } /* ---------- Phase 2: Select2 dark overrides ---------- */ [data-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--tudu-input-bg) !important; border-color: var(--tudu-input-border) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tudu-input-color) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tudu-placeholder) !important; } [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--tudu-input-bg) !important; border-color: var(--tudu-input-border) !important; } [data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(75, 73, 172, 0.35); border-color: rgba(140, 138, 240, 0.4); color: #e8e7ff; } [data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #c8c6ff; } [data-theme="dark"] .select2-dropdown { background: var(--tudu-dropdown-bg) !important; border-color: var(--tudu-border-color) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05); } [data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--tudu-input-bg); border-color: var(--tudu-input-border); color: var(--tudu-input-color); } [data-theme="dark"] .select2-container--default .select2-results__option { color: var(--tudu-dropdown-color); } [data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(75, 73, 172, 0.25); } [data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tudu-primary) !important; color: #fff !important; } /* ---------- Phase 2: DataTables ---------- */ [data-theme="dark"] table.dataTable { color: var(--tudu-body-color); border-color: var(--tudu-border-color); } [data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.dataTable thead td, [data-theme="dark"] .dataTables_wrapper .dataTable thead th { background: var(--tudu-thead-bg) !important; border-color: var(--tudu-border-color) !important; border-bottom: 2px solid var(--tudu-thead-border) !important; color: var(--tudu-thead-color) !important; } [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting:before, [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting:after, [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting_asc:before, [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting_asc:after, [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting_desc:before, [data-theme="dark"] .dataTables_wrapper .dataTable thead .sorting_desc:after { color: var(--tudu-text-muted); opacity: 0.85; } [data-theme="dark"] table.dataTable tbody tr { background-color: transparent; } [data-theme="dark"] table.dataTable.stripe tbody tr.odd, [data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: var(--tudu-table-stripe) !important; } [data-theme="dark"] table.dataTable.hover tbody tr:hover, [data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: var(--tudu-table-hover) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_processing { color: var(--tudu-text-muted); } [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: var(--tudu-input-bg) !important; border-color: var(--tudu-input-border) !important; color: var(--tudu-input-color) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--tudu-body-color) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tudu-primary) !important; border-color: var(--tudu-primary) !important; color: #fff !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tudu-dropdown-hover) !important; border-color: var(--tudu-border-color) !important; color: #fff !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--tudu-text-muted) !important; background: transparent !important; } [data-theme="dark"] div.dataTables_scrollHead table.dataTable { border-bottom-color: var(--tudu-border-color); } /* ---------- Phase 2: SweetAlert2 ---------- */ [data-theme="dark"] .swal2-popup { background: var(--tudu-card-bg) !important; color: var(--tudu-body-color) !important; border: 1px solid var(--tudu-card-border); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(75, 73, 172, 0.15) !important; } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--tudu-body-color) !important; } [data-theme="dark"] .swal2-styled.swal2-cancel { background-color: #3a3942 !important; color: #e8e8e8 !important; } [data-theme="dark"] .swal2-icon.swal2-warning { border-color: #ffc100; color: #ffc100; } [data-theme="dark"] .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #ff6b6b; } [data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #57b657; } [data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(87, 182, 87, 0.35); } .swal2-styled.swal2-confirm { background-color: #d33 !important; border-color: white !important; } .swal2-modal .swal2-icon, .swal2-modal .swal2-success-ring { margin-top: 0; margin-bottom: 10px; } /* ---------- Shared UI: toggle switch ---------- */ .switch { position: relative; display: inline-block; width: 50px; height: 25px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .switch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3.5px; background-color: white; transition: 0.4s; border-radius: 50%; } .switch input:checked + .slider { background-color: #28a745; } .switch input:checked + .slider:before { transform: translateX(24px); } [data-theme="dark"] .switch .slider { background-color: #4a4954; } [data-theme="dark"] .switch input:checked + .slider { background-color: #46c35f; box-shadow: 0 0 12px rgba(70, 195, 95, 0.35); } /* ---------- Shared UI: password field toggle ---------- */ .password-wrapper { position: relative; } .password-wrapper input { padding-right: 40px; } .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--tudu-text-muted, #6c757d); font-size: 16px; padding: 0; z-index: 10; } .password-toggle:hover { color: var(--tudu-primary, #495057); } .password-toggle:focus { outline: none; } /* ---------- Shared UI: sort icons (tables) ---------- */ .sort-icons { display: inline-flex; flex-direction: column; margin-left: 5px; vertical-align: middle; line-height: 0.8; } .sort-icons i { font-size: 10px; margin: -2px 0; } .sort-icons i.text-primary { font-weight: bold; } .sort-icons i.text-muted { opacity: 0.4; } /* ---------- Shared UI: page loader overlay ---------- */ #loader-overlay, .loader-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.8); z-index: 9999; align-items: center; justify-content: center; } [data-theme="dark"] #loader-overlay, [data-theme="dark"] .loader-overlay { background: rgba(21, 20, 25, 0.88) !important; } /* ---------- Phase 4: page-specific custom UI ---------- */ /* Label hierarchy status badges */ .status-badge { padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; } .status-all-labeled { background-color: #d4edda; color: #155724; } .status-partially-labeled { background-color: #fff3cd; color: #856404; } .status-not-labeled { background-color: #f8d7da; color: #721c24; } [data-theme="dark"] .status-all-labeled { background: rgba(87, 182, 87, 0.2); color: #a8e8a8; border: 1px solid rgba(120, 220, 130, 0.35); } [data-theme="dark"] .status-partially-labeled { background: rgba(255, 193, 0, 0.15); color: #ffe08a; border: 1px solid rgba(255, 210, 80, 0.35); } [data-theme="dark"] .status-not-labeled { background: rgba(255, 71, 71, 0.18); color: #ffb0b0; border: 1px solid rgba(255, 130, 130, 0.35); } .subtopic-link { cursor: pointer; padding: 8px 12px; border-radius: 4px; transition: background-color 0.2s; } .subtopic-link:hover { background-color: #f0f0f0; } [data-theme="dark"] .subtopic-link:hover { background-color: rgba(75, 73, 172, 0.2); } /* Task template item number */ .item-number { background: #4b49ac; color: #fff; border-radius: 50%; padding: 10px 13px; } [data-theme="dark"] .item-number { background: linear-gradient(145deg, rgba(75, 73, 172, 0.85), rgba(55, 52, 130, 1)); box-shadow: 0 4px 14px rgba(75, 73, 172, 0.35); } /* Question sorting — drag & stats */ .choice-stats { min-width: 200px; } .choice-label, .choice-percentage { font-size: 0.7rem; font-weight: 500; } [data-theme="dark"] .progress { background-color: #3a3942; } .sortable-ghost { opacity: 0.4; background-color: #e3f2fd !important; } .sortable-chosen { background-color: #f8f9fa !important; } .sortable-drag { background-color: #fff !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; } [data-theme="dark"] .sortable-ghost { background-color: rgba(36, 138, 253, 0.2) !important; } [data-theme="dark"] .sortable-chosen { background-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .sortable-drag { background-color: var(--tudu-card-bg) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .sorting-mode .drag-handle { background-color: #f8f9fa; cursor: grab; } .sorting-mode .drag-handle:active { cursor: grabbing; } .sorting-mode tbody tr:hover { background-color: #f1f3f4; } [data-theme="dark"] .sorting-mode .drag-handle { background-color: #2e2d33; } [data-theme="dark"] .sorting-mode tbody tr:hover { background-color: var(--tudu-table-hover); } .drag-handle i { font-size: 16px; color: #6c757d; } [data-theme="dark"] .drag-handle i { color: var(--tudu-text-muted); } /* Soru files sticky table */ .soru-files-table { max-height: 560px; overflow: auto; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); background: #fff; } .soru-files-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #374151; } .soru-files-table thead th { position: sticky; top: 0; z-index: 10; background: #1e293b; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; padding: 12px 10px; border-bottom: 1px solid #334155; white-space: nowrap; } .soru-files-table thead th:hover { background: #334155; } .soru-files-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; } .soru-files-table tbody tr:nth-child(even) { background-color: #fafafa; } .soru-files-table tbody tr:hover { background-color: #f1f5f9; } [data-theme="dark"] .soru-files-table { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); box-shadow: var(--tudu-card-glow); } [data-theme="dark"] .soru-files-table table { color: var(--tudu-body-color); } [data-theme="dark"] .soru-files-table thead th { background: linear-gradient(180deg, rgba(42, 41, 50, 0.98), rgba(30, 29, 36, 1)) !important; color: var(--tudu-thead-color) !important; border-bottom: 2px solid var(--tudu-thead-border) !important; } [data-theme="dark"] .soru-files-table thead th:hover { background: linear-gradient(180deg, rgba(50, 49, 58, 1), rgba(35, 34, 42, 1)) !important; } [data-theme="dark"] .soru-files-table tbody td { border-bottom-color: var(--tudu-border-color); } [data-theme="dark"] .soru-files-table tbody tr:nth-child(even) { background-color: var(--tudu-table-stripe); } [data-theme="dark"] .soru-files-table tbody tr:hover { background-color: var(--tudu-table-hover); } .soru-files-table tbody tr:hover { background-color: #eef2ff; } .soru-files-table thead th:first-child { border-top-left-radius: 12px; } .soru-files-table thead th:last-child { border-top-right-radius: 12px; } .soru-files-table::-webkit-scrollbar { width: 8px; height: 8px; } .soru-files-table::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 8px; } .soru-files-table::-webkit-scrollbar-track { background: #f1f5f9; } [data-theme="dark"] .soru-files-table::-webkit-scrollbar-thumb { background: rgba(130, 128, 230, 0.45); } [data-theme="dark"] .soru-files-table::-webkit-scrollbar-track { background: #1a191e; } /* Topic drill-down tree (dark overrides) */ [data-theme="dark"] .tree-container { background: var(--tudu-content-bg); } [data-theme="dark"] .tree-item-content { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } [data-theme="dark"] .tree-item-content:hover, [data-theme="dark"] .tree-item.expanded > .tree-item-content { background: linear-gradient(135deg, rgba(75, 73, 172, 0.15) 0%, rgba(36, 138, 253, 0.08) 100%); border-color: rgba(130, 128, 230, 0.35); } [data-theme="dark"] .tree-item-name { color: var(--tudu-body-color); } [data-theme="dark"] .tree-toggle { color: var(--tudu-text-muted); } [data-theme="dark"] .tree-toggle:hover { color: #a8a6ff; } [data-theme="dark"] .tree-children { border-left-color: var(--tudu-border-color); } [data-theme="dark"] .tree-stats { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); box-shadow: var(--tudu-card-glow); } [data-theme="dark"] .stats-table { background: var(--tudu-card-bg); color: var(--tudu-body-color); } [data-theme="dark"] .stats-table thead { background: var(--tudu-thead-bg) !important; } [data-theme="dark"] .stats-table thead th { color: var(--tudu-thead-color) !important; background: transparent !important; } /* Device settings pagination */ .pagination .page-link { color: #007bff; border: 1px solid #dee2e6; } [data-theme="dark"] .pagination-info { color: var(--tudu-text-muted); } [data-theme="dark"] .card-header .pagination .page-link { background: var(--tudu-card-bg); border-color: var(--tudu-border-color); color: var(--tudu-body-color); } /* Moderator avatar */ .avatar-sm { font-size: 12px; font-weight: bold; } .hierarchy-item { margin-bottom: 15px; } /* Label questions page */ .question-pdf-container { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 20px; background: #fff; } .question-pdf { width: 100%; height: 600px; border: none; } .label-form { background: #f8f9fa; padding: 15px; border-radius: 4px; } .question-header { background: #4b49ac; color: #fff; padding: 10px 15px; border-radius: 4px 4px 0 0; } .save-btn-container { position: sticky; bottom: 0; background: #fff; padding: 15px; border-top: 2px solid #4b49ac; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .question-pdf-container { border-color: var(--tudu-border-color); background: var(--tudu-card-bg); } [data-theme="dark"] .label-form { background: rgba(30, 29, 38, 0.6); } [data-theme="dark"] .question-header { background: linear-gradient(145deg, rgba(75, 73, 172, 0.75), rgba(48, 46, 115, 0.95)); } [data-theme="dark"] .save-btn-container { background: var(--tudu-card-bg); border-top-color: rgba(130, 128, 230, 0.4); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35); } /* Tasks show-items light card */ [data-theme="dark"] .card.bg-light .card-body { color: var(--tudu-body-color); } /* ---------- Native select chevron (Bootstrap-style SVG; closed = down, open = up) ---------- */ select.form-control:not([multiple]):not([size]), select.form-select:not([multiple]):not([size]), .form-control.form-select:not([multiple]):not([size]), .dataTables_wrapper select:not([multiple]):not([size]), .dashboard-period-filter__select, .filter-section .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: var(--tudu-select-padding-right) !important; background-repeat: no-repeat !important; background-position: right var(--tudu-select-chevron-inset) center !important; background-size: 16px 12px !important; background-image: var(--tudu-select-arrow-down) !important; cursor: pointer; } select.form-control:not([multiple]):not([size])::-ms-expand, select.form-select:not([multiple]):not([size])::-ms-expand, .form-control.form-select:not([multiple]):not([size])::-ms-expand, .dataTables_wrapper select:not([multiple]):not([size])::-ms-expand { display: none; } select.tudu-select-open:not([multiple]):not([size]) { background-image: var(--tudu-select-arrow-up) !important; } select.form-control[multiple], select.form-select[multiple], select.form-control[size]:not([size="1"]), select.form-select[size]:not([size="1"]) { background-image: none !important; padding-right: 1.375rem !important; } /* ---------- Sidebar dropdown chevron (active route must use same icon as default) ---------- */ /* SkyDash swaps to angle-down on .active; combined with aria-expanded rotate(90deg) that flips the arrow sideways. */ .sidebar .nav .nav-item.active > .nav-link i.menu-arrow::before { content: "\e649"; }