/** * Admin light/dark theme layer (overrides SB Admin 2 / Bootstrap 4). * Expects set by inline FOUC script + admin-theme.js */ /* --- Typography & base --- */ html[data-theme="light"], html[data-theme="dark"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--admin-font-size-root); --admin-font-size-root: 14px; --admin-line-height: 1.45; --admin-font-size-sm: 0.8125rem; --admin-font-size-xs: 0.6875rem; --admin-space-page-x: 1.25rem; --admin-space-page-y: 1rem; --admin-space-card: 0.875rem; --admin-control-height: 2.125rem; --admin-control-height-sm: 1.875rem; } html[data-theme="light"] body, html[data-theme="dark"] body { font-family: "DM Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: var(--admin-line-height); font-size: 1rem; } /* Desktop (md+): slightly larger type — mobile stays at 14px root */ @media (min-width: 768px) { html[data-theme="light"], html[data-theme="dark"] { --admin-font-size-root: 15px; --admin-line-height: 1.5; --admin-font-size-sm: 0.875rem; --admin-font-size-xs: 0.75rem; --admin-space-page-x: 1.5rem; --admin-space-page-y: 1.25rem; --admin-space-card: 1rem; --admin-control-height: 2.25rem; --admin-control-height-sm: 2rem; } html[data-theme="light"] .topbar .h3.text-gray-800, html[data-theme="dark"] .topbar .h3.text-gray-800 { font-size: 1.25rem; } html[data-theme="light"] .card-header h5, html[data-theme="dark"] .card-header h5, html[data-theme="light"] .card .h5, html[data-theme="dark"] .card .h5 { font-size: 1.0625rem; } html[data-theme="light"] #content .mb-4, html[data-theme="dark"] #content .mb-4 { margin-bottom: 1.25rem !important; } } /* --- Light tokens --- */ html[data-theme="light"] { --admin-bg-page: #f8f9fc; --admin-bg-surface: #ffffff; --admin-bg-elevated: #ffffff; --admin-border: #e3e6f0; --admin-border-subtle: #d1d5db; --admin-text: #5a5c69; --admin-text-heading: #343a47; --admin-text-muted: #858796; --admin-primary: #4e73df; --admin-shadow: rgba(58, 59, 69, 0.15); --admin-sidebar-accent: rgba(255, 255, 255, 0.12); --admin-sidebar-shell: #1e2533; --admin-sidebar-gradient: linear-gradient( 165deg, #3a4456 0%, #2a3242 42%, #1f2633 100% ); --admin-collapse-inner: #ffffff; --admin-input-bg: #ffffff; --admin-input-border: #d1d3e2; --admin-table-stripe: rgba(15, 23, 42, 0.04); --admin-loader-track: #f3f3f3; --admin-radius-sm: 0.25rem; --admin-radius-md: 0.375rem; --admin-radius-lg: 0.625rem; --admin-shadow-card: 0 0.125rem 0.375rem rgba(58, 59, 69, 0.07), 0 0.0625rem 0.125rem rgba(58, 59, 69, 0.04); --admin-shadow-float: 0 0.375rem 1rem rgba(58, 59, 69, 0.1), 0 0.125rem 0.25rem rgba(58, 59, 69, 0.06); --admin-sidebar-item-active-bg: rgba(255, 255, 255, 0.18); --admin-sidebar-nav-hover-bg: rgba(255, 255, 255, 0.09); --admin-table-head-bg: #eef1f7; --admin-row-hover: rgba(78, 115, 223, 0.072); } /* --- Dark tokens --- */ html[data-theme="dark"] { --admin-bg-page: #0f1419; --admin-bg-surface: #1a2230; --admin-bg-elevated: #212b3d; --admin-border: rgba(255, 255, 255, 0.1); --admin-border-subtle: rgba(255, 255, 255, 0.06); --admin-text: #cbd5e1; --admin-text-heading: #f1f5f9; --admin-text-muted: #94a3b8; --admin-primary: #6366f1; --admin-shadow: rgba(0, 0, 0, 0.45); --admin-sidebar-accent: rgba(255, 255, 255, 0.08); --admin-sidebar-shell: #0f141e; --admin-sidebar-gradient: linear-gradient( 165deg, rgba(42, 45, 58, 0.98) 0%, #121820 48%, #0a0e14 100% ); --admin-collapse-inner: #252f42; --admin-input-bg: #1e293b; --admin-input-border: rgba(255, 255, 255, 0.14); --admin-table-stripe: rgba(255, 255, 255, 0.05); --admin-loader-track: #334155; --admin-radius-sm: 0.25rem; --admin-radius-md: 0.375rem; --admin-radius-lg: 0.625rem; --admin-shadow-card: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2); --admin-shadow-float: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35); --admin-sidebar-item-active-bg: rgba(129, 140, 248, 0.22); --admin-sidebar-nav-hover-bg: rgba(255, 255, 255, 0.07); --admin-table-head-bg: #1e293b; --admin-row-hover: rgba(99, 102, 241, 0.09); } /* ===================================================================== Structural polish — both themes (sidebar, chrome, tables, forms) ===================================================================== */ html[data-theme="light"] body#page-top { background-color: var(--admin-bg-page) !important; color: var(--admin-text); } html[data-theme="light"] #content-wrapper, html[data-theme="light"] #content { background-color: var(--admin-bg-page) !important; } /* Topbar */ html[data-theme="light"] .topbar.navbar-light.bg-white { border-bottom: 1px solid var(--admin-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 0.125rem 0.5rem rgba(58, 59, 69, 0.06) !important; } html[data-theme="light"] .topbar .h3.text-gray-800, html[data-theme="dark"] .topbar .h3.text-gray-800 { font-weight: 600; letter-spacing: -0.022em; font-size: 1.125rem; margin-bottom: 0; } html[data-theme="light"] .topbar.navbar-light, html[data-theme="dark"] .topbar.navbar-light { min-height: 3rem; padding-top: 0.35rem; padding-bottom: 0.35rem; } html[data-theme="light"] .topbar .navbar-nav .nav-link, html[data-theme="dark"] .topbar .navbar-nav .nav-link { padding-top: 0.35rem; padding-bottom: 0.35rem; } html[data-theme="light"] .topbar .text-gray-600.small, html[data-theme="dark"] .topbar .text-gray-600.small { font-size: var(--admin-font-size-sm); } html[data-theme="light"] #content .container-fluid, html[data-theme="dark"] #content .container-fluid { padding: var(--admin-space-page-y) var(--admin-space-page-x); } html[data-theme="light"] #content .mb-4, html[data-theme="dark"] #content .mb-4 { margin-bottom: 1.125rem !important; } html[data-theme="light"] .card-header h5, html[data-theme="dark"] .card-header h5, html[data-theme="light"] .card .h5, html[data-theme="dark"] .card .h5 { font-size: 1rem; font-weight: 600; margin-bottom: 0; } /* Footer light */ html[data-theme="light"] footer.sticky-footer.bg-white { border-top: 1px solid var(--admin-border); box-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, 0.03); } /* Cards */ html[data-theme="light"] .card:not(.bg-transparent) { border-radius: var(--admin-radius-lg); border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow-card); background-color: var(--admin-bg-surface); } html[data-theme="dark"] .card:not(.bg-transparent) { border-radius: var(--admin-radius-lg); box-shadow: var(--admin-shadow-card); border-color: var(--admin-border) !important; } html[data-theme="light"] .card-header, html[data-theme="dark"] .card-header { border-bottom-color: var(--admin-border); padding: var(--admin-space-card) !important; font-weight: 600; } html[data-theme="light"] .card-body, html[data-theme="dark"] .card-body { padding: var(--admin-space-card) !important; } /* Sidebar shell — replaces SB Admin electric blue gradient */ html[data-theme="light"] .sidebar.sidebar-dark.bg-gradient-primary, html[data-theme="dark"] .sidebar.sidebar-dark.bg-gradient-primary { background-color: var(--admin-sidebar-shell) !important; background-image: var(--admin-sidebar-gradient) !important; } /* Sidebar navigation */ .sidebar { padding-left: 0.35rem !important; padding-right: 0.35rem !important; } html[data-theme="light"] .sidebar .sidebar-brand, html[data-theme="dark"] .sidebar .sidebar-brand { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; } html[data-theme="light"] .sidebar .sidebar-brand .sidebar-brand-text, html[data-theme="dark"] .sidebar .sidebar-brand .sidebar-brand-text { font-size: 0.875rem; } html[data-theme="light"] .sidebar .nav-link, html[data-theme="dark"] .sidebar .nav-link { border-radius: var(--admin-radius-md); margin: 0.125rem 0.25rem; padding: 0.5rem 0.75rem !important; font-size: var(--admin-font-size-sm); min-height: 2.5rem; font-weight: 500; letter-spacing: -0.01em; transition: background-color 0.15s ease, color 0.15s ease; } html[data-theme="light"] .sidebar .nav-link .fas, html[data-theme="light"] .sidebar .nav-link .fa, html[data-theme="dark"] .sidebar .nav-link .fas, html[data-theme="dark"] .sidebar .nav-link .fa { width: 1.125rem; margin-right: 0.05rem !important; opacity: 0.92; } html[data-theme="light"] .sidebar .nav-link:hover { background-color: var(--admin-sidebar-nav-hover-bg) !important; } html[data-theme="dark"] .sidebar .nav-link:hover { background-color: var(--admin-sidebar-nav-hover-bg) !important; } .sidebar .nav-item.active > .nav-link { background-color: var(--admin-sidebar-item-active-bg) !important; font-weight: 600 !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } html[data-theme="light"] .sidebar .collapse-inner, html[data-theme="dark"] .sidebar .collapse-inner { margin: 0.35rem 0.35rem 0.5rem !important; padding: 0.35rem 0 !important; border-radius: var(--admin-radius-md) !important; border: 1px solid var(--admin-sidebar-accent) !important; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12) inset; } html[data-theme="light"] .sidebar .collapse-inner { background-color: rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .sidebar .collapse-inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html[data-theme="light"] .sidebar .collapse-item, html[data-theme="dark"] .sidebar .collapse-item { border-radius: var(--admin-radius-sm); margin: 0.1rem 0.35rem; padding: 0.35rem 0.55rem !important; font-size: 0.8rem; font-weight: 500; transition: background-color 0.12s ease; } html[data-theme="light"] .sidebar .collapse-item { color: rgba(255, 255, 255, 0.92) !important; } html[data-theme="light"] .sidebar .collapse-item:hover { background-color: rgba(255, 255, 255, 0.12) !important; } .sidebar #sidebarToggle { border-radius: var(--admin-radius-md) !important; } /* Tables — Bootstrap */ html[data-theme="light"] .table-responsive, html[data-theme="dark"] .table-responsive { border-radius: var(--admin-radius-md); border: 1px solid var(--admin-border); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; background-color: var(--admin-bg-surface); box-shadow: var(--admin-shadow-card); } html[data-theme="light"] .card .table-responsive, html[data-theme="dark"] .card .table-responsive { box-shadow: none; border: none; border-radius: 0; background-color: transparent; } html[data-theme="light"] .table, html[data-theme="dark"] .table { margin-bottom: 0 !important; } html[data-theme="light"] .table thead th, html[data-theme="dark"] .table thead th { background-color: var(--admin-table-head-bg) !important; border-bottom: 1px solid var(--admin-border) !important; color: var(--admin-text-heading) !important; font-size: var(--admin-font-size-xs) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em !important; padding: 0.5rem 0.65rem !important; vertical-align: middle; } html[data-theme="light"] .table tbody td, html[data-theme="light"] .table tbody th, html[data-theme="dark"] .table tbody td, html[data-theme="dark"] .table tbody th { padding: 0.5rem 0.65rem !important; font-size: var(--admin-font-size-sm); vertical-align: middle; border-top-color: var(--admin-border) !important; } html[data-theme="light"] .table-striped tbody tr:nth-of-type(odd), html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--admin-table-stripe) !important; } html[data-theme="light"] .table-hover tbody tr:hover, html[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--admin-row-hover) !important; } /* DataTables layout & chrome */ html[data-theme="light"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_wrapper { padding: 0.5rem 0.65rem !important; font-size: var(--admin-font-size-sm); } html[data-theme="light"] .dataTables_wrapper .row:first-child, html[data-theme="dark"] .dataTables_wrapper .row:first-child { margin-bottom: 0.65rem !important; } @media (max-width: 767.98px) { html[data-theme="light"] .dataTables_wrapper .dataTables_length, html[data-theme="light"] .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter { text-align: left !important; margin-bottom: 0.5rem; } } html[data-theme="light"] table.dataTable, html[data-theme="dark"] table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; } html[data-theme="light"] table.dataTable thead th, html[data-theme="light"] table.dataTable thead td, html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable thead td { background-color: var(--admin-table-head-bg) !important; font-size: var(--admin-font-size-xs) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em !important; padding: 0.5rem 0.65rem !important; } html[data-theme="light"] table.dataTable tbody th, html[data-theme="light"] table.dataTable tbody td, html[data-theme="dark"] table.dataTable tbody th, html[data-theme="dark"] table.dataTable tbody td { padding: 0.5rem 0.65rem !important; font-size: var(--admin-font-size-sm); } html[data-theme="light"] .dataTables_wrapper .dataTables_filter input, html[data-theme="light"] .dataTables_wrapper .dataTables_length select, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { border-radius: var(--admin-radius-md) !important; border-color: var(--admin-input-border) !important; min-height: var(--admin-control-height) !important; font-size: var(--admin-font-size-sm) !important; padding: 0.375rem 0.625rem !important; } html[data-theme="light"] .page-link { border-radius: var(--admin-radius-sm) !important; margin: 0 0.125rem !important; min-width: 2.25rem; text-align: center; padding: 0.375rem 0.55rem !important; border-color: var(--admin-border) !important; font-weight: 500; color: var(--admin-primary) !important; } html[data-theme="light"] .pagination { gap: 0.125rem; } html[data-theme="light"] .page-item:first-child .page-link, html[data-theme="light"] .page-item:last-child .page-link { border-radius: var(--admin-radius-md) !important; } html[data-theme="dark"] .page-link { border-radius: var(--admin-radius-sm) !important; margin: 0 0.125rem !important; min-width: 2.25rem; text-align: center; padding: 0.375rem 0.55rem !important; } html[data-theme="light"] .page-item.active .page-link { background-color: var(--admin-primary) !important; border-color: var(--admin-primary) !important; color: #fff !important; box-shadow: 0 0.125rem 0.375rem rgba(78, 115, 223, 0.35); } /* Forms & controls — compact */ html[data-theme="light"] .form-control, html[data-theme="light"] .custom-select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select { border-radius: var(--admin-radius-md) !important; min-height: var(--admin-control-height); font-size: var(--admin-font-size-sm); padding: 0.375rem 0.625rem; line-height: 1.35; } html[data-theme="light"] .form-control, html[data-theme="light"] .custom-select { border-color: var(--admin-input-border) !important; } html[data-theme="light"] .form-control:focus, html[data-theme="light"] .custom-select:focus { border-color: var(--admin-primary) !important; box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.18) !important; } html[data-theme="light"] .btn, html[data-theme="dark"] .btn { border-radius: var(--admin-radius-md) !important; font-weight: 600; font-size: var(--admin-font-size-sm); min-height: var(--admin-control-height); padding: 0.375rem 0.75rem; line-height: 1.35; } html[data-theme="light"] .btn-sm, html[data-theme="dark"] .btn-sm { border-radius: var(--admin-radius-sm) !important; min-height: var(--admin-control-height-sm); padding: 0.25rem 0.5rem; font-size: var(--admin-font-size-xs); } html[data-theme="light"] .btn-icon-split, html[data-theme="dark"] .btn-icon-split { padding: 0; } html[data-theme="light"] .btn-icon-split .icon, html[data-theme="dark"] .btn-icon-split .icon { padding: 0.375rem 0.5rem; } html[data-theme="light"] .btn-icon-split .text, html[data-theme="dark"] .btn-icon-split .text { padding: 0.375rem 0.625rem; font-size: var(--admin-font-size-sm); } html[data-theme="light"] .badge, html[data-theme="dark"] .badge { border-radius: var(--admin-radius-md); padding: 0.25em 0.5em; font-size: 0.7rem; font-weight: 600; } html[data-theme="light"] .dropdown-item, html[data-theme="dark"] .dropdown-item { padding: 0.35rem 0.85rem; font-size: var(--admin-font-size-sm); } html[data-theme="light"] .dropdown-header, html[data-theme="dark"] .dropdown-header { font-size: var(--admin-font-size-xs); padding: 0.35rem 0.85rem; } /* Toggle switches (~10% smaller) */ html[data-theme="light"] .switch, html[data-theme="dark"] .switch { width: 52px; height: 24px; } html[data-theme="light"] .slider:before, html[data-theme="dark"] .slider:before { height: 16px; width: 16px; left: 4px; bottom: 4px; } html[data-theme="light"] input:checked + .slider:before, html[data-theme="dark"] input:checked + .slider:before { transform: translateX(28px); } html[data-theme="light"] .selectize-control.single .selectize-input, html[data-theme="light"] .selectize-control.multi .selectize-input, html[data-theme="dark"] .selectize-control.single .selectize-input, html[data-theme="dark"] .selectize-control.multi .selectize-input { min-height: var(--admin-control-height) !important; font-size: var(--admin-font-size-sm) !important; padding: 0.375rem 0.625rem !important; } /* Filters & toolbars — both themes use tokens */ html[data-theme="light"] .filters-container, html[data-theme="dark"] .filters-container { border-radius: var(--admin-radius-md) !important; border-color: var(--admin-border) !important; background-color: var(--admin-bg-surface) !important; } html[data-theme="light"] .filter-btn { border-radius: var(--admin-radius-md) !important; border-color: var(--admin-input-border) !important; background-color: var(--admin-bg-elevated) !important; color: var(--admin-text-heading) !important; } html[data-theme="light"] .filter-btn:hover { background-color: var(--admin-input-border) !important; border-color: var(--admin-border-subtle) !important; } html[data-theme="light"] .date-search-box { border-radius: var(--admin-radius-md) !important; border-color: var(--admin-border) !important; background-color: var(--admin-bg-surface) !important; } html[data-theme="light"] .pagination-btn { border-radius: var(--admin-radius-sm) !important; border-color: var(--admin-input-border) !important; } html[data-theme="light"] .selectize-control.single .selectize-input, html[data-theme="light"] .selectize-control.multi .selectize-input { border-radius: var(--admin-radius-md) !important; } html[data-theme="dark"] .selectize-control.single .selectize-input, html[data-theme="dark"] .selectize-control.multi .selectize-input { border-radius: var(--admin-radius-md) !important; } html[data-theme="light"] .dropdown-menu { border-radius: var(--admin-radius-md); border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow-float); } html[data-theme="light"] .modal-content { border-radius: var(--admin-radius-lg); overflow: hidden; border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow-float); } html[data-theme="dark"] .dropdown-menu { border-radius: var(--admin-radius-md); } html[data-theme="dark"] .modal-content { border-radius: var(--admin-radius-lg); overflow: hidden; } /* --- Page chrome --- */ html[data-theme="dark"] body#page-top { background-color: var(--admin-bg-page) !important; color: var(--admin-text); } html[data-theme="dark"] #content-wrapper { background-color: var(--admin-bg-page) !important; } html[data-theme="dark"] #content { background-color: var(--admin-bg-page) !important; } html[data-theme="dark"] body #wrapper #content-wrapper { background-color: var(--admin-bg-page) !important; } /* Topbar */ html[data-theme="dark"] .topbar.navbar-light.bg-white { background-color: var(--admin-bg-elevated) !important; border-bottom: 1px solid var(--admin-border); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.28), 0 0.0625rem 0 rgba(255, 255, 255, 0.04) inset !important; } html[data-theme="dark"] .topbar.navbar-light .navbar-nav .nav-link { color: var(--admin-text) !important; } html[data-theme="dark"] .topbar .h3.text-gray-800 { color: var(--admin-text-heading) !important; } html[data-theme="dark"] #sidebarToggleTop { color: var(--admin-text-muted) !important; } /* Footer */ html[data-theme="dark"] footer.sticky-footer.bg-white { background-color: var(--admin-bg-elevated) !important; border-top: 1px solid var(--admin-border); } html[data-theme="dark"] footer .copyright span { color: var(--admin-text-muted) !important; } /* Cards & borders */ html[data-theme="dark"] .card { background-color: var(--admin-bg-surface) !important; border-color: var(--admin-border) !important; color: var(--admin-text); } html[data-theme="dark"] .card-header { background-color: var(--admin-bg-elevated) !important; border-bottom-color: var(--admin-border) !important; color: var(--admin-text-heading); } html[data-theme="dark"] .card.text-white, html[data-theme="dark"] .card-header.text-white { /* preserve colored stat cards */ color: #fff !important; } html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-900 { color: var(--admin-text-heading) !important; } html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-700 { color: var(--admin-text) !important; } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400, html[data-theme="dark"] .text-gray-300 { color: var(--admin-text-muted) !important; } /* Tables */ html[data-theme="dark"] .table { color: var(--admin-text); } html[data-theme="dark"] .table-bordered { border-color: var(--admin-border) !important; } html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td { border-color: var(--admin-border) !important; } html[data-theme="dark"] .table thead th { background-color: var(--admin-table-head-bg) !important; border-bottom-color: var(--admin-border) !important; color: var(--admin-text-heading); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--admin-table-stripe) !important; } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--admin-row-hover) !important; } /* DataTables (Bootstrap 4 integration) */ html[data-theme="dark"] table.dataTable { color: var(--admin-text); } html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable thead td { background-color: var(--admin-table-head-bg) !important; border-bottom-color: var(--admin-border) !important; color: var(--admin-text-heading); } html[data-theme="dark"] table.dataTable tbody tr { background-color: var(--admin-bg-surface) !important; } html[data-theme="dark"] table.dataTable tbody tr:nth-child(odd) { background-color: var(--admin-bg-elevated) !important; } html[data-theme="dark"] table.dataTable tbody tr:hover { background-color: var(--admin-row-hover) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--admin-text-muted) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--admin-input-bg) !important; border: 1px solid var(--admin-input-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .page-link { background-color: var(--admin-bg-elevated) !important; border-color: var(--admin-border) !important; color: var(--admin-primary) !important; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--admin-bg-surface) !important; color: var(--admin-text-muted) !important; } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--admin-primary) !important; border-color: var(--admin-primary) !important; color: #fff !important; } /* Forms */ html[data-theme="dark"] .form-control { background-color: var(--admin-input-bg) !important; border-color: var(--admin-input-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .form-control:focus { background-color: var(--admin-input-bg) !important; color: var(--admin-text) !important; border-color: var(--admin-primary) !important; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); } html[data-theme="dark"] .custom-select { background-color: var(--admin-input-bg) !important; border-color: var(--admin-input-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .input-group-text { background-color: var(--admin-bg-elevated) !important; border-color: var(--admin-input-border) !important; color: var(--admin-text-muted) !important; } html[data-theme="dark"] .custom-control-label, html[data-theme="dark"] label { color: var(--admin-text); } html[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--admin-primary); border-color: var(--admin-primary); } /* Selectize */ html[data-theme="dark"] .selectize-control.single .selectize-input, html[data-theme="dark"] .selectize-control.multi .selectize-input { background-color: var(--admin-input-bg) !important; border-color: var(--admin-input-border) !important; color: var(--admin-text) !important; box-shadow: none !important; } html[data-theme="dark"] .selectize-dropdown { background-color: var(--admin-bg-elevated) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .selectize-dropdown .option.active { background-color: rgba(99, 102, 241, 0.25) !important; color: var(--admin-text-heading) !important; } html[data-theme="dark"] .selectize-input input { color: var(--admin-text) !important; } /* Dropdowns & modals */ html[data-theme="dark"] .dropdown-menu { background-color: var(--admin-bg-elevated) !important; border: 1px solid var(--admin-border) !important; box-shadow: 0 0.5rem 1rem var(--admin-shadow) !important; } html[data-theme="dark"] .dropdown-item { color: var(--admin-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(99, 102, 241, 0.12) !important; color: var(--admin-text-heading) !important; } html[data-theme="dark"] .dropdown-divider { border-top-color: var(--admin-border) !important; } html[data-theme="dark"] .modal-content { background-color: var(--admin-bg-surface) !important; border: 1px solid var(--admin-border) !important; color: var(--admin-text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--admin-border) !important; } html[data-theme="dark"] .modal-title { color: var(--admin-text-heading); } html[data-theme="dark"] .close { color: var(--admin-text-muted) !important; text-shadow: none; opacity: 1; } /* Sidebar: keep brand gradient, refine collapse panels */ html[data-theme="dark"] .sidebar .collapse-inner { background-color: var(--admin-collapse-inner) !important; } html[data-theme="dark"] .sidebar .collapse-item { color: #e2e8f0 !important; } html[data-theme="dark"] .sidebar .collapse-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .sidebar #sidebarToggle { background-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] hr.sidebar-divider { border-top-color: var(--admin-sidebar-accent) !important; } html[data-theme="dark"] body.toggled .sidebar { box-shadow: 4px 0 24px var(--admin-shadow); } /* Scroll-to-top */ html[data-theme="dark"] .scroll-to-top { background-color: rgba(99, 102, 241, 0.9) !important; } /* Alerts / breadcrumbs / list groups kept default colors where semantic */ /* App-specific: filters, pagination, loader (from main.blade.php inline) */ html[data-theme="dark"] .filters-container, html[data-theme="dark"] .filter-btn, html[data-theme="dark"] .date-search-box { background-color: var(--admin-bg-surface) !important; border-color: var(--admin-border) !important; color: var(--admin-text); } html[data-theme="dark"] .filter-btn:hover { background-color: var(--admin-bg-elevated) !important; } html[data-theme="dark"] .pagination-btn { border-color: var(--admin-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .pagination-btn.active { background-color: var(--admin-primary) !important; border-color: var(--admin-primary) !important; color: #fff !important; } html[data-theme="dark"] a.disabled { color: var(--admin-text-muted) !important; } html[data-theme="dark"] .loader { border-color: var(--admin-loader-track) !important; border-top-color: #a78bfa !important; border-right-color: #a78bfa !important; } html[data-theme="dark"] .is-active-indicator { background-color: #475569 !important; border-color: var(--admin-bg-surface) !important; } /* Peer row highlight — dark-readable */ html[data-theme="dark"] .highlight-regenerated, html[data-theme="dark"] .highlight-regenerated td { background-color: rgba(251, 191, 36, 0.2) !important; } html[data-theme="dark"] .highlight-regenerated:hover, html[data-theme="dark"] .highlight-regenerated:hover td { background-color: rgba(251, 191, 36, 0.3) !important; } html[data-theme="dark"] #highlighting-info-banner { background-color: rgba(34, 211, 238, 0.12) !important; border-left-color: #22d3ee !important; color: var(--admin-text-heading) !important; } /* Theme toggle button */ #adminThemeToggle { border: none; background: transparent; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--admin-text-muted, #858796); line-height: 1; text-decoration: none !important; } #adminThemeToggle:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); } #adminThemeToggle:hover { background: rgba(99, 102, 241, 0.1); color: var(--admin-primary, #4e73df); } html[data-theme="dark"] #adminThemeToggle { color: var(--admin-text-muted); } html[data-theme="dark"] #adminThemeToggle:hover { background: rgba(99, 102, 241, 0.2); color: #c4b5fd; } html[data-theme="dark"] .btn-secondary { background-color: var(--admin-bg-elevated) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .btn-secondary:hover { background-color: #2d3b52 !important; color: var(--admin-text-heading) !important; } /* --- Layout helpers (from admin main layout) --- */ .is-active-indicator { background-color: #eaecf4; display: inline-block; height: 0.65rem; width: 0.65rem; border-radius: 100%; border: 0.125rem solid #fff; } html[data-theme="dark"] .is-active-indicator { border-color: var(--admin-bg-surface); background-color: var(--admin-text-muted); } .filters-container { display: flex; justify-content: space-between; border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); background-color: var(--admin-bg-surface); padding: 0.5rem 0.625rem; align-items: center; gap: 0.5rem; } .filter-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; } .filter-dropdown { display: none; margin-right: 0.35rem; } .filter-btn { border: 1px solid var(--admin-input-border); border-radius: var(--admin-radius-md); background-color: var(--admin-bg-elevated); display: inline-block; padding: 0.35rem 0.5rem; font-size: var(--admin-font-size-sm); text-decoration: none; color: var(--admin-text-heading); } .filter-btn:hover { background-color: var(--admin-row-hover); text-decoration: none; color: var(--admin-text-heading); } .date-search-box { display: flex; border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); background-color: var(--admin-bg-surface); padding: 0.35rem 0.5rem; align-items: center; width: 100%; gap: 0.35rem; font-size: var(--admin-font-size-sm); } @media (max-width: 670px) { .filter-btns { display: none; } .filter-dropdown { display: block; } } #loader-overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1100; } #loader-overlay .loader { border: 5px solid var(--admin-loader-track); border-radius: 50px; border-top: 5px solid #64498e; border-right: 5px solid #64498e; position: absolute; top: 45%; left: 45%; width: 36px; height: 36px; animation: admin-loader-spin 1s linear infinite; } @keyframes admin-loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pagination-btn { border: 1px solid var(--admin-input-border); border-radius: var(--admin-radius-sm); color: var(--admin-text-heading); padding: 0.2rem 0.4rem; font-size: var(--admin-font-size-sm); line-height: 1.35; } .pagination-btn:hover { text-decoration: none; } .pagination-btn.active { color: #fff; background-color: var(--admin-primary); border-color: var(--admin-primary); } a.disabled { color: var(--admin-text-muted); cursor: default; pointer-events: none; } .highlight-regenerated { background-color: #fff3cd !important; } .highlight-regenerated td { background-color: #fff3cd !important; } .highlight-regenerated:hover { background-color: #ffeaa7 !important; } .highlight-regenerated:hover td { background-color: #ffeaa7 !important; } .highlight-regenerated.fade-out { background-color: transparent !important; transition: background-color 0.5s ease; } .highlight-regenerated.fade-out td { background-color: transparent !important; transition: background-color 0.5s ease; } #highlighting-status { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: none; border-radius: var(--admin-radius-md); font-size: var(--admin-font-size-sm); } #highlighting-status .close { font-size: 1.25rem; font-weight: bold; opacity: 0.7; } #highlighting-status .close:hover { opacity: 1; } #highlighting-info-banner { border-left: 4px solid #17a2b8; background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460; font-size: var(--admin-font-size-sm); } #highlighting-info-banner .btn-outline-info { border-color: #17a2b8; color: #17a2b8; } #highlighting-info-banner .btn-outline-info:hover { background-color: #17a2b8; color: #fff; } #highlighting-info-banner .btn-outline-warning { border-color: #ffc107; color: #856404; } #highlighting-info-banner .btn-outline-warning:hover { background-color: #ffc107; color: #212529; } /* Login page */ html[data-theme="dark"].admin-login-html body.bg-gradient-primary { background: linear-gradient(165deg, #0f172a 0%, #1e1b4b 45%, #312e81 100%) !important; } html[data-theme="dark"] .admin-login-wrap .card.shadow-lg { background-color: var(--admin-bg-surface) !important; border: 1px solid var(--admin-border) !important; box-shadow: 0 1rem 3rem var(--admin-shadow) !important; } html[data-theme="dark"] .admin-login-wrap .text-gray-900 { color: var(--admin-text-heading) !important; } html[data-theme="dark"] .admin-login-wrap .form-control-user { background-color: var(--admin-input-bg) !important; border-color: var(--admin-input-border) !important; color: var(--admin-text) !important; } html[data-theme="dark"] .admin-login-wrap hr { border-top-color: var(--admin-border) !important; } html[data-theme="dark"] .admin-login-theme-fab:hover { background: rgba(255, 255, 255, 0.14) !important; color: #f8fafc !important; } html[data-theme="light"] .admin-login-wrap .card-body, html[data-theme="dark"] .admin-login-wrap .card-body { padding: var(--admin-space-card) !important; } html[data-theme="light"] .admin-login-wrap .form-control-user, html[data-theme="dark"] .admin-login-wrap .form-control-user { min-height: var(--admin-control-height); font-size: var(--admin-font-size-sm); border-radius: var(--admin-radius-md) !important; } html[data-theme="light"] .admin-login-wrap .btn-user, html[data-theme="dark"] .admin-login-wrap .btn-user { min-height: var(--admin-control-height); font-size: var(--admin-font-size-sm); } .admin-login-theme-fab { position: fixed; top: 0.875rem; right: 0.875rem; z-index: 1040; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } html[data-theme="light"] .admin-login-theme-fab { border-color: rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.92); color: #4e73df; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } html[data-theme="dark"] .admin-login-theme-fab { border-color: rgba(255, 255, 255, 0.2); background: rgba(30, 41, 59, 0.7); color: #e2e8f0; } /* --- Mobile: peer table pages & paginator --- */ @media (max-width: 767.98px) { #content-wrapper, #content { overflow-x: hidden; min-width: 0; } .container-fluid { min-width: 0; } html[data-theme="light"] .table-responsive, html[data-theme="dark"] .table-responsive { box-shadow: inset -8px 0 12px -10px rgba(0, 0, 0, 0.12), inset 8px 0 12px -10px rgba(0, 0, 0, 0.06), var(--admin-shadow-card); } } /* Peer list pages: fill viewport; page scrolls (no inner table scroll box) */ #content-wrapper:has(.admin-peer-table-page) { min-height: 100vh; display: flex; flex-direction: column; } #content-wrapper:has(.admin-peer-table-page) #content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } #content-wrapper:has(.admin-peer-table-page) #content > .container-fluid { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .admin-peer-table-page { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; max-width: 100%; min-height: calc(100vh - 11.5rem); overflow: visible; } .admin-peer-table-page > .admin-peer-toolbar { flex-shrink: 0; } .admin-peer-table-page > .admin-peer-cards { flex-shrink: 0; } /* No overflow on table wrapper — avoids clipping dropdowns and inner vertical scroll */ .admin-peer-table-page > .admin-peer-table-wrap { flex: 1 1 auto; overflow: visible; min-height: 12rem; } .admin-peer-table-page > .admin-peer-table-wrap .table { margin-bottom: 0 !important; } @media (min-width: 768px) { html[data-theme="light"] .admin-peer-table-page > .admin-peer-table-wrap, html[data-theme="dark"] .admin-peer-table-page > .admin-peer-table-wrap { overflow: visible; border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); background-color: var(--admin-bg-surface); box-shadow: var(--admin-shadow-card); } .admin-peer-table-page .dropup .dropdown-menu { top: auto !important; bottom: 100% !important; margin-bottom: 0.2rem; transform: none !important; } } .admin-peer-table-page .table tbody tr { position: relative; } .admin-peer-table-page .table tbody tr.peer-row-dropdown-open { z-index: 25; } .admin-peer-table-page .admin-peer-actions-dropdown .dropdown-menu { z-index: 1060; } .admin-peer-table-page .table td:last-child, .admin-peer-table-page .table th:last-child { overflow: visible; position: relative; } /* Peers list toolbar */ .admin-peer-toolbar.card { border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow-card); } .admin-peer-toolbar__header { padding: var(--admin-space-card) !important; background-color: transparent; border-bottom: 1px solid var(--admin-border); } .admin-peer-toolbar__title { font-size: var(--admin-font-size-sm); font-weight: 500; } .admin-peer-toolbar__create.btn-icon-split .icon { padding: 0.35rem 0.5rem; } .admin-peer-toolbar__create.btn-icon-split .text { padding: 0.35rem 0.625rem; font-size: var(--admin-font-size-sm); } .admin-peer-toolbar > .card-body { display: flex; flex-direction: column; gap: 0.875rem; padding: var(--admin-space-card) !important; } .admin-peer-toolbar__filters { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: end; } @media (min-width: 576px) { .admin-peer-toolbar__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .admin-peer-toolbar__filters { grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 1fr) minmax(12rem, 2fr) auto; } } .admin-peer-toolbar__field-label { display: block; font-size: var(--admin-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--admin-text-muted); margin-bottom: 0.25rem; } .admin-peer-toolbar__filter-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .admin-peer-toolbar__search .input-group-text { background-color: var(--admin-bg-elevated); border-color: var(--admin-input-border); color: var(--admin-text-muted); } html[data-theme="dark"] .admin-peer-toolbar__search .input-group-text { background-color: var(--admin-input-bg); border-color: var(--admin-input-border); } .admin-peer-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.25rem; border-top: 1px solid var(--admin-border-subtle); } html[data-theme="dark"] .admin-peer-toolbar__controls { border-top-color: var(--admin-border); } .admin-peer-toolbar__sort { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 0.5rem; } .admin-peer-toolbar__sort .admin-peer-sort-select { flex: 1 1 auto; max-width: 100%; } @media (min-width: 768px) { .admin-peer-toolbar__sort .admin-peer-sort-select { max-width: 16rem; } } .admin-peer-toolbar__bulk-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; flex: 1 1 100%; } @media (min-width: 768px) { .admin-peer-toolbar__bulk-wrap { flex: 0 1 auto; } } .admin-peer-toolbar__selected { font-size: var(--admin-font-size-sm); white-space: nowrap; } .admin-peer-toolbar__bulk-desktop .btn { margin-left: 0.15rem; } .admin-peer-toolbar__bulk-desktop .btn:first-child { margin-left: 0; } .admin-peer-toolbar__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--admin-border-subtle); } html[data-theme="dark"] .admin-peer-toolbar__footer { border-top-color: var(--admin-border); } .admin-peer-toolbar__select-all { font-size: var(--admin-font-size-sm); cursor: pointer; user-select: none; } .admin-peer-toolbar__paginator.admin-paginator { margin-bottom: 0; flex: 1 1 auto; justify-content: flex-end; } .admin-paginator { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: var(--admin-font-size-sm); margin-bottom: 0.5rem; } .admin-paginator__selected { flex: 1 1 100%; } @media (min-width: 576px) { .admin-paginator__selected { flex: 0 1 auto; } } .admin-paginator__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .admin-paginator__take-label { font-size: var(--admin-font-size-xs); white-space: nowrap; } .admin-paginator__page-num { pointer-events: none; cursor: default; } html[data-theme="light"] .admin-paginator .pagination-btn.active, html[data-theme="dark"] .admin-paginator .pagination-btn.active { background-color: var(--admin-primary) !important; border-color: var(--admin-primary) !important; color: #fff !important; } html[data-theme="light"] .admin-paginator a.pagination-btn.disabled, html[data-theme="dark"] .admin-paginator a.pagination-btn.disabled { opacity: 0.45; pointer-events: none; } @media (max-width: 767.98px) { .admin-peer-toolbar__footer { flex-direction: column; align-items: stretch; } .admin-peer-toolbar__paginator.admin-paginator { justify-content: flex-start; } .admin-paginator__controls { width: 100%; } } /* ===================================================================== Mobile sidebar drawer (overrides SB Admin .sidebar.toggled collapse) ===================================================================== */ @media (max-width: 767.98px) { #content-wrapper, #content { overflow-x: hidden; min-width: 0; } .sidebar, .sidebar.toggled { position: fixed !important; top: 0 !important; left: -100% !important; width: min(17.5rem, 88vw) !important; min-width: 0 !important; height: 100vh !important; max-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 1050 !important; transition: left 0.25s ease !important; box-shadow: none; padding-top: 0.5rem; padding-bottom: 1rem; } body.sidebar-mobile-open .sidebar, body.sidebar-mobile-open .sidebar.toggled { left: 0 !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); } body.sidebar-mobile-open { overflow: hidden; } body.sidebar-mobile-open::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 1040; } /* Force standard vertical list nav (not icon-over-text collapsed mode) */ .sidebar .nav-item, .sidebar.toggled .nav-item { margin: 0.125rem 0.5rem !important; width: auto !important; } .sidebar .nav-item .nav-link, .sidebar.toggled .nav-item .nav-link { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; max-width: 100% !important; padding: 0.6rem 0.75rem !important; min-height: 2.75rem; border-radius: var(--admin-radius-md) !important; } .sidebar .nav-item .nav-link span, .sidebar.toggled .nav-item .nav-link span { display: inline !important; font-size: 0.875rem !important; font-weight: 500; line-height: 1.3; white-space: normal; } .sidebar .nav-item .nav-link i, .sidebar.toggled .nav-item .nav-link i { display: inline-block !important; margin-right: 0.65rem !important; margin-left: 0 !important; width: 1.25rem !important; text-align: center; font-size: 1rem !important; flex-shrink: 0; } .sidebar .nav-item .nav-link[data-toggle='collapse']::after, .sidebar.toggled .nav-item .nav-link[data-toggle='collapse']::after { display: inline-block !important; margin-left: auto; } .sidebar .nav-item .collapse, .sidebar.toggled .nav-item .collapse, .sidebar .nav-item .collapsing, .sidebar.toggled .nav-item .collapsing { position: static !important; left: auto !important; top: auto !important; margin: 0 0.5rem 0.35rem !important; animation: none !important; } .sidebar .nav-item .collapse .collapse-inner, .sidebar.toggled .nav-item .collapse .collapse-inner { margin: 0.25rem 0 0 !important; padding: 0.25rem 0 !important; box-shadow: none !important; } .sidebar .collapse-item, .sidebar.toggled .collapse-item { display: flex !important; align-items: center; padding: 0.45rem 0.65rem 0.45rem 2rem !important; font-size: 0.8125rem !important; } .sidebar .sidebar-heading, .sidebar.toggled .sidebar-heading { text-align: left !important; padding-left: 0.75rem; } .sidebar hr.sidebar-divider, .sidebar.toggled hr.sidebar-divider { margin: 0.5rem 0.75rem; } .sidebar #sidebarToggle { display: none !important; } } /* Mobile peer cards (< md) */ .admin-peer-cards { display: flex; flex-direction: column; gap: 0.75rem; } html[data-theme="light"] .admin-peer-card.card, html[data-theme="dark"] .admin-peer-card.card { background-color: var(--admin-bg-surface) !important; border: 1px solid var(--admin-border-subtle) !important; border-radius: var(--admin-radius-lg) !important; box-shadow: var(--admin-shadow-card) !important; padding: 0.75rem 0.875rem; min-width: 0; overflow: visible; } html[data-theme="dark"] .admin-peer-card.card { background-color: var(--admin-bg-elevated) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } html[data-theme="light"] .admin-peer-card.card { border-color: var(--admin-border) !important; box-shadow: var(--admin-shadow-float) !important; } .admin-peer-card__header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; } .admin-peer-card__check { flex-shrink: 0; padding-top: 0.15rem; } .admin-peer-card__check input[type="checkbox"] { width: 1.125rem; height: 1.125rem; } .admin-peer-card__title { flex: 1; min-width: 0; } .admin-peer-card__comment { display: block; word-break: break-word; } .admin-peer-card__row { font-size: 0.8125rem; margin-left: 0.35rem; } .admin-peer-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin: 0 0 0.75rem; } .admin-peer-card__field { margin: 0; min-width: 0; } .admin-peer-card__field dt { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--admin-text-muted); margin-bottom: 0.15rem; } .admin-peer-card__field dd { margin: 0; font-size: 0.875rem; word-break: break-word; } .admin-peer-card__field--usage { grid-column: span 1; } html[data-theme="light"] .admin-peer-card__footer, html[data-theme="dark"] .admin-peer-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; margin-top: 0.25rem; border-top: 1px solid var(--admin-border-subtle); } html[data-theme="dark"] .admin-peer-card__footer { border-top-color: rgba(255, 255, 255, 0.14); } .admin-peer-card__footer, .admin-peer-card__actions { overflow: visible; } .admin-peer-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; position: relative; z-index: 1; } .admin-peer-card__actions .dropdown { position: relative; } @media (max-width: 767.98px) { .admin-peer-card__actions .dropdown .dropdown-menu { top: auto !important; bottom: calc(100% + 0.35rem); right: 0; left: auto !important; transform: none !important; will-change: auto; } } .admin-peer-card .dropdown-menu { z-index: 1060; } /* Peer row actions — horizontal in table, flex in cards */ .admin-peer-row-actions { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; vertical-align: middle; } .admin-peer-row-actions .dropdown { display: inline-flex; position: relative; } .admin-peer-card__actions .admin-peer-row-actions { display: inline-flex; } .admin-peer-actions-btn { min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Desktop table: compact icon buttons in one row */ html[data-theme="light"] #content .table .admin-peer-row-actions .admin-peer-actions-btn, html[data-theme="dark"] #content .table .admin-peer-row-actions .admin-peer-actions-btn { min-width: 2rem; min-height: 2rem; width: 2rem; height: 2rem; padding: 0 !important; line-height: 1; } html[data-theme="light"] #content .table .admin-peer-row-actions .dropdown-toggle, html[data-theme="dark"] #content .table .admin-peer-row-actions .dropdown-toggle { min-height: 2rem !important; } html[data-theme="light"] #content .table .btn.btn-circle.btn-sm, html[data-theme="dark"] #content .table .btn.btn-circle.btn-sm { width: 2rem !important; height: 2rem !important; min-width: 2rem !important; min-height: 2rem !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; } html[data-theme="light"] #content .table td, html[data-theme="dark"] #content .table td { vertical-align: middle !important; } html[data-theme="light"] #content .table .switch, html[data-theme="dark"] #content .table .switch { margin-bottom: 0; vertical-align: middle; } .admin-peer-select-all { font-size: 0.875rem; } .admin-active-ops-header h5 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } @media (max-width: 767.98px) { .admin-active-ops-header .badge { margin-left: 0 !important; } } .admin-peer-card.highlight-regenerated { background-color: #fff3cd !important; border-color: #ffc107; } .admin-peer-card.highlight-regenerated:hover { background-color: #ffeaa7 !important; } .admin-peer-card.highlight-regenerated.fade-out { background-color: transparent !important; border-color: var(--admin-border); transition: background-color 0.5s ease, border-color 0.5s ease; } html[data-theme="dark"] .admin-peer-card.highlight-regenerated { background-color: rgba(255, 193, 7, 0.15) !important; border-color: rgba(255, 193, 7, 0.45); } html[data-theme="dark"] .admin-peer-card.highlight-regenerated:hover { background-color: rgba(255, 193, 7, 0.22) !important; }