/* ========================================================================== Partner Dark Mode — scoped under body[data-theme="dark"] Only activates when the admin layout's has data-theme="dark", which is set for partners (agents) on 구스킨 다크 (skin_id=1). ========================================================================== */ /* ---------- 1. Bootstrap / Metronic CSS Variable Overrides ---------- */ body[data-theme="dark"] { --bs-body-bg: #1E1E2D; --bs-body-color: #CDCDDE; --bs-gray: #6D6D80; --bs-gray-dark: #CDCDDE; --bs-gray-100: #1b1b29; --bs-gray-200: #2B2B40; --bs-gray-300: #323248; --bs-gray-400: #474761; --bs-gray-500: #565674; --bs-gray-600: #6D6D80; --bs-gray-700: #92929F; --bs-gray-800: #CDCDDE; --bs-gray-900: #FFFFFF; --bs-light: #1b1b29; --bs-dark: #FFFFFF; --bs-secondary: #323248; --bs-light-rgb: 27, 27, 41; --bs-dark-rgb: 255, 255, 255; --bs-body-rgb: 205, 205, 222; background-color: #1E1E2D !important; color: #CDCDDE; } /* ---------- 2. Wrapper / Content Area ---------- */ body[data-theme="dark"] #kt_wrapper { background-color: #1E1E2D; } body[data-theme="dark"] #kt_content { background-color: #1E1E2D; } body[data-theme="dark"] .toolbar, body[data-theme="dark"] #kt_toolbar { background-color: #1E1E2D; border-bottom-color: #323248; } body[data-theme="dark"] .content { background-color: #1E1E2D; } /* ---------- 3. Header ---------- */ body[data-theme="dark"] #kt_header { background-color: #1b1b29; border-bottom: 1px solid #323248; } body[data-theme="dark"] .header { background-color: #1b1b29; } body[data-theme="dark"] .header-fixed .header { background-color: #1b1b29; } /* ---------- 4. Cards ---------- */ body[data-theme="dark"] .card { background-color: #1E1E2D; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .card-header { background-color: #1E1E2D; border-bottom-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .card-body { background-color: #1E1E2D; color: #CDCDDE; } body[data-theme="dark"] .card-footer { background-color: #1E1E2D; border-top-color: #323248; } /* ---------- 5. Tables ---------- */ body[data-theme="dark"] .table { color: #CDCDDE; border-color: #323248; } body[data-theme="dark"] .table > :not(caption) > * > * { background-color: #1E1E2D; color: #CDCDDE; border-bottom-color: #323248; box-shadow: none; } body[data-theme="dark"] .table > thead { color: #FFFFFF; } body[data-theme="dark"] .table > thead > tr > th { background-color: #2B2B40; color: #FFFFFF; border-color: #323248; } body[data-theme="dark"] .table > thead > tr.bg-secondary > th { background-color: #3a3a52 !important; color: #FFFFFF !important; box-shadow: none; } body[data-theme="dark"] .table > thead > tr.bg-light-success > th { background-color: rgba(11, 183, 131, 0.25) !important; color: #FFFFFF !important; } body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #1b1b29; color: #CDCDDE; } body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * { background-color: #232336; color: #CDCDDE; } body[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #2B2B40; color: #FFFFFF; } body[data-theme="dark"] .table > tbody > tr.bg-secondary > td { background-color: #3a3a52 !important; color: #FFFFFF !important; } body[data-theme="dark"] .table-bordered > :not(caption) > * { border-color: #323248; } body[data-theme="dark"] .table-row-bordered > tbody > tr { border-color: #323248; } body[data-theme="dark"] .table-flush tr, body[data-theme="dark"] .table-flush td, body[data-theme="dark"] .table-flush th { border-color: #323248; } body[data-theme="dark"] thead.btn-secondary, body[data-theme="dark"] thead .btn-secondary { background-color: #2B2B40 !important; color: #CDCDDE !important; } /* ---------- 5-1. Tablesorter Override ---------- */ body[data-theme="dark"] .tablesorter-default { color: #CDCDDE; background-color: #1E1E2D; } body[data-theme="dark"] .tablesorter-default td { background-color: #1E1E2D; color: #CDCDDE; border-bottom-color: #323248; } body[data-theme="dark"] .tablesorter-default tr.odd > td { background-color: #1b1b29; color: #CDCDDE; } body[data-theme="dark"] .tablesorter-default tr.even > td { background-color: #232336; color: #CDCDDE; } body[data-theme="dark"] .tablesorter-default tbody > tr.hover > td, body[data-theme="dark"] .tablesorter-default tbody > tr:hover > td, body[data-theme="dark"] .tablesorter-default tbody > tr.even:hover > td, body[data-theme="dark"] .tablesorter-default tbody > tr.odd:hover > td { background-color: #2B2B40; color: #FFFFFF; } body[data-theme="dark"] .tablesorter-default tr.odd td.primary { background-color: #252538; } body[data-theme="dark"] .tablesorter-default td.primary, body[data-theme="dark"] .tablesorter-default tr.even td.primary { background-color: #2B2B40; } body[data-theme="dark"] .tablesorter-default tr.odd td.secondary { background-color: #2B2B40; } body[data-theme="dark"] .tablesorter-default td.secondary, body[data-theme="dark"] .tablesorter-default tr.even td.secondary { background-color: #323248; } body[data-theme="dark"] .tablesorter-default .header, body[data-theme="dark"] .tablesorter-default .tablesorter-header { color: #FFFFFF; } body[data-theme="dark"] .tablesorter-default tfoot th, body[data-theme="dark"] .tablesorter-default tfoot td { color: #CDCDDE; } body[data-theme="dark"] .tablesorter-default > caption { background-color: #1E1E2D; color: #CDCDDE; } body[data-theme="dark"] .tablesorter-default .tablesorter-filter-row, body[data-theme="dark"] .tablesorter-default .tablesorter-filter-row td { background-color: #2B2B40; color: #CDCDDE; } body[data-theme="dark"] .tablesorter-default input.tablesorter-filter, body[data-theme="dark"] .tablesorter-default select.tablesorter-filter { background-color: #1b1b29; border-color: #323248; color: #CDCDDE; } /* ---------- 6. Form Controls ---------- */ body[data-theme="dark"] .form-control { background-color: #1b1b29; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .form-control:focus { background-color: #1a1a27; border-color: #474761; color: #FFFFFF; box-shadow: none; } body[data-theme="dark"] .form-control:disabled, body[data-theme="dark"] .form-control[readonly] { background-color: #2B2B40; color: #92929F; } body[data-theme="dark"] .form-control::placeholder { color: #565674; } body[data-theme="dark"] .form-select { background-color: #1b1b29; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .form-select:focus { background-color: #1a1a27; border-color: #474761; color: #FFFFFF; } body[data-theme="dark"] .form-select:disabled { background-color: #2B2B40; color: #92929F; } body[data-theme="dark"] .form-check-input { background-color: #1b1b29; border-color: #474761; } body[data-theme="dark"] .form-check-input:checked { background-color: #3699FF; border-color: #3699FF; } body[data-theme="dark"] .form-floating > label { color: #92929F; } body[data-theme="dark"] .form-floating > .form-control:focus ~ label, body[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label, body[data-theme="dark"] .form-floating > .form-select ~ label { color: #6D6D80; } body[data-theme="dark"] .input-group-text { background-color: #2B2B40; border-color: #323248; color: #CDCDDE; } /* ---------- 7. Dropdowns ---------- */ body[data-theme="dark"] .dropdown-menu { background-color: #2B2B40; border-color: #323248; color: #CDCDDE; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); } body[data-theme="dark"] .dropdown-item { color: #CDCDDE; } body[data-theme="dark"] .dropdown-item:hover, body[data-theme="dark"] .dropdown-item:focus { background-color: #323248; color: #FFFFFF; } body[data-theme="dark"] .dropdown-item.active, body[data-theme="dark"] .dropdown-item:active { background-color: #3699FF; color: #FFFFFF; } body[data-theme="dark"] .dropdown-divider { border-top-color: #323248; } /* ---------- 8. Modals ---------- */ body[data-theme="dark"] .modal-content { background-color: #1E1E2D; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .modal-header { border-bottom-color: #323248; } body[data-theme="dark"] .modal-footer { border-top-color: #323248; } body[data-theme="dark"] .modal-backdrop { background-color: #000; } /* ---------- 9. Buttons ---------- */ body[data-theme="dark"] .btn-secondary { background-color: #323248; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .btn-secondary:hover { background-color: #474761; border-color: #474761; color: #FFFFFF; } body[data-theme="dark"] .btn-light { background-color: #2B2B40; border-color: #2B2B40; color: #CDCDDE; } body[data-theme="dark"] .btn-light:hover { background-color: #323248; color: #FFFFFF; } /* ---------- 10. Text Utility Overrides ---------- */ body[data-theme="dark"] .text-dark { color: #CDCDDE !important; } body[data-theme="dark"] .text-muted { color: #92929F !important; } body[data-theme="dark"] .text-gray-600 { color: #6D6D80 !important; } body[data-theme="dark"] .text-gray-700 { color: #92929F !important; } body[data-theme="dark"] .text-gray-800 { color: #CDCDDE !important; } body[data-theme="dark"] .text-primary { color: #5AADFF !important; } body[data-theme="dark"] .text-danger { color: #FF6B7A !important; } body[data-theme="dark"] .text-info { color: #6FD8FF !important; } body[data-theme="dark"] .text-success { color: #2DD4A8 !important; } body[data-theme="dark"] .text-warning { color: #FFB84D !important; } body[data-theme="dark"] .text-inverse-info, body[data-theme="dark"] .text-inverse-primary, body[data-theme="dark"] .text-inverse-success, body[data-theme="dark"] .text-inverse-danger, body[data-theme="dark"] .text-inverse-warning { color: #FFFFFF !important; } body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] h5, body[data-theme="dark"] h6, body[data-theme="dark"] .h1, body[data-theme="dark"] .h2, body[data-theme="dark"] .h3, body[data-theme="dark"] .h4, body[data-theme="dark"] .h5, body[data-theme="dark"] .h6 { color: #FFFFFF; } body[data-theme="dark"] a { color: #3699FF; } body[data-theme="dark"] a:hover { color: #187DE4; } /* ---------- 11. Background Utility Overrides ---------- */ body[data-theme="dark"] .bg-white { background-color: #1E1E2D !important; } body[data-theme="dark"] .bg-light { background-color: #1b1b29 !important; } body[data-theme="dark"] .bg-body { background-color: #1E1E2D !important; } body[data-theme="dark"] .bg-secondary { background-color: #3a3a52 !important; color: #FFFFFF !important; } body[data-theme="dark"] .bg-light-primary { background-color: rgba(54, 153, 255, 0.15) !important; } body[data-theme="dark"] .bg-light-success { background-color: rgba(11, 183, 131, 0.25) !important; color: #FFFFFF !important; } body[data-theme="dark"] .bg-light-danger { background-color: rgba(246, 78, 96, 0.15) !important; } body[data-theme="dark"] .bg-light-warning { background-color: rgba(255, 168, 0, 0.15) !important; } body[data-theme="dark"] .bg-light-info { background-color: rgba(137, 80, 252, 0.15) !important; } /* ---------- 12. Borders ---------- */ body[data-theme="dark"] .border { border-color: #323248 !important; } body[data-theme="dark"] .border-secondary { border-color: #323248 !important; } body[data-theme="dark"] .border-gray-200 { border-color: #2B2B40 !important; } body[data-theme="dark"] .border-gray-300 { border-color: #323248 !important; } body[data-theme="dark"] .separator { border-bottom-color: #323248; } body[data-theme="dark"] hr { border-color: #323248; color: #323248; } /* ---------- 13. Pagination ---------- */ body[data-theme="dark"] .page-link { background-color: #1E1E2D; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .page-link:hover { background-color: #2B2B40; border-color: #323248; color: #FFFFFF; } body[data-theme="dark"] .page-item.active .page-link { background-color: #3699FF; border-color: #3699FF; color: #FFFFFF; } body[data-theme="dark"] .page-item.disabled .page-link { background-color: #1b1b29; border-color: #323248; color: #565674; } /* ---------- 14. Badges ---------- */ body[data-theme="dark"] .badge.bg-light { background-color: #2B2B40 !important; color: #CDCDDE !important; } /* ---------- 15. Alerts ---------- */ body[data-theme="dark"] .alert { border-color: #323248; } /* ---------- 16. Nav / Tabs ---------- */ body[data-theme="dark"] .nav-tabs { border-bottom-color: #323248; } body[data-theme="dark"] .nav-tabs .nav-link { color: #92929F; } body[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #474761; color: #CDCDDE; } body[data-theme="dark"] .nav-tabs .nav-link.active { background-color: #1E1E2D; border-color: #323248 #323248 #1E1E2D; color: #FFFFFF; } body[data-theme="dark"] .nav-pills .nav-link { color: #92929F; } body[data-theme="dark"] .nav-pills .nav-link.active { background-color: #3699FF; color: #FFFFFF; } /* ---------- 17. Accordion ---------- */ body[data-theme="dark"] .accordion-item { background-color: #1E1E2D; border-color: #323248; } body[data-theme="dark"] .accordion-button { background-color: #1E1E2D; color: #CDCDDE; } body[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #2B2B40; color: #FFFFFF; } /* ---------- 18. Toast / Popover / Tooltip ---------- */ body[data-theme="dark"] .popover { background-color: #2B2B40; border-color: #323248; } body[data-theme="dark"] .popover-body { color: #CDCDDE; } body[data-theme="dark"] .tooltip-inner { background-color: #323248; color: #FFFFFF; } /* ---------- 19. List Group ---------- */ body[data-theme="dark"] .list-group-item { background-color: #1E1E2D; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .list-group-item:hover { background-color: #2B2B40; } /* ---------- 20. Scrollbar ---------- */ body[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } body[data-theme="dark"] ::-webkit-scrollbar-track { background: #1b1b29; } body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #474761; border-radius: 3px; } body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #565674; } /* ---------- 21. SweetAlert2 (swal) ---------- */ body[data-theme="dark"] .swal2-popup { background-color: #2B2B40; color: #CDCDDE; } body[data-theme="dark"] .swal2-title { color: #FFFFFF; } body[data-theme="dark"] .swal2-html-container { color: #CDCDDE; } /* ---------- 22. DataTables ---------- */ body[data-theme="dark"] .dataTables_wrapper .dataTables_info { color: #92929F; } body[data-theme="dark"] .dataTables_wrapper .dataTables_length select, body[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: #1b1b29; border-color: #323248; color: #CDCDDE; } /* ---------- 23. Select2 ---------- */ body[data-theme="dark"] .select2-container--bootstrap5 .select2-selection { background-color: #1b1b29; border-color: #323248; color: #CDCDDE; } body[data-theme="dark"] .select2-container--bootstrap5 .select2-dropdown { background-color: #2B2B40; border-color: #323248; } body[data-theme="dark"] .select2-container--bootstrap5 .select2-results__option--highlighted { background-color: #323248; color: #FFFFFF; } /* ---------- 24. Toastr ---------- */ body[data-theme="dark"] .toast { background-color: #2B2B40; border-color: #323248; color: #CDCDDE; } /* ---------- 25. Metronic Specific Components ---------- */ body[data-theme="dark"] .menu-sub-dropdown { background-color: #2B2B40; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); } body[data-theme="dark"] .menu-item .menu-link { color: #CDCDDE; } body[data-theme="dark"] .menu-item .menu-link:hover { background-color: #323248; color: #FFFFFF; } body[data-theme="dark"] .menu-item .menu-link.active { color: #3699FF; } body[data-theme="dark"] .symbol .symbol-label { background-color: #2B2B40; color: #CDCDDE; } body[data-theme="dark"] .bullet { background-color: #474761; } body[data-theme="dark"] .overlay-layer { background-color: rgba(30, 30, 45, 0.7); } /* ---------- 26. Mobile Quick Nav (Partner) ---------- */ body[data-theme="dark"] .d-flex.bg-secondary { background-color: #1b1b29 !important; } /* ---------- 27. Misc ---------- */ body[data-theme="dark"] .fw-bolder, body[data-theme="dark"] .fw-bold { color: inherit; } body[data-theme="dark"] code { color: #F64E60; } body[data-theme="dark"] pre { color: #CDCDDE; } body[data-theme="dark"] .form-switch .form-check-input { background-color: #474761; } body[data-theme="dark"] .form-switch .form-check-input:checked { background-color: #3699FF; } body[data-theme="dark"] .progress { background-color: #2B2B40; } body[data-theme="dark"] .shadow, body[data-theme="dark"] .shadow-sm { box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.3) !important; } body[data-theme="dark"] .loadingoverlay { background-color: rgba(30, 30, 45, 0.7) !important; }