/**
 * SaberPod Theme Enhancements CSS
 * Comprehensive fixes for theme system
 */

/* =============================================
   CSS VARIABLE INHERITANCE FIX FOR MODAL
   ============================================= */
body.sp-dashboard {
    background: var(--sp-bg-primary);
    color: var(--sp-text-primary);
}

.sp-theme-modal-overlay {
    --modal-bg: var(--sp-bg-secondary);
    --modal-card: var(--sp-bg-card);
    --modal-card-hover: var(--sp-bg-card-hover);
    --modal-text: var(--sp-text-primary);
    --modal-text-secondary: var(--sp-text-secondary);
    --modal-text-muted: var(--sp-text-muted);
    --modal-border: var(--sp-border-color);
    --modal-accent: var(--sp-accent-primary);
    --modal-bg-primary: var(--sp-bg-primary);
}

.sp-theme-modal {
    background: var(--modal-bg) !important;
    border-color: var(--modal-border) !important;
}
.sp-theme-modal-title {
    color: var(--modal-text) !important;
}
.sp-theme-modal-close {
    color: var(--modal-text-muted) !important;
}
.sp-theme-modal-close:hover {
    color: var(--modal-text) !important;
}
.sp-mode-toggle-wrapper {
    background: var(--modal-card) !important;
}
.sp-mode-toggle-label {
    color: var(--modal-text-secondary) !important;
}
.sp-mode-toggle {
    background: var(--modal-bg-primary) !important;
}
.sp-mode-btn {
    color: var(--modal-text-muted) !important;
}
.sp-mode-btn:hover:not(.active) {
    color: var(--modal-text) !important;
}
.sp-mode-btn.active {
    background: var(--modal-accent) !important;
    color: #fff !important;
}
.sp-theme-card {
    background: var(--modal-card) !important;
}
.sp-theme-card:hover {
    background: var(--modal-card-hover) !important;
}
.sp-theme-card.active {
    border-color: var(--modal-accent) !important;
}
.sp-theme-card-name {
    color: var(--modal-text) !important;
}
.sp-theme-card-check {
    background: var(--modal-accent) !important;
}

/* =============================================
   DROPDOWN BULLET FIX
   ============================================= */
.dropdown-menu,
.dropdown-menu li,
.sp-dropdown-menu,
.sp-dropdown-menu li,
ul.dropdown-menu,
.nav-tabs,
.nav-tabs li,
.sp-sidebar-submenu,
.sp-sidebar-submenu li {
    list-style: none !important;
    list-style-type: none !important;
}
.dropdown-menu::before,
.dropdown-menu li::before,
.sp-dropdown-menu::before,
.sp-dropdown-menu li::before,
.dropdown-menu::marker,
.dropdown-menu li::marker {
    content: none !important;
    display: none !important;
}

/* =============================================
   DROPDOWN Z-INDEX FIX
   ============================================= */
.dropdown-menu,
.sp-dropdown-menu {
    z-index: 1050 !important;
}
.sp-toolbar .dropdown-menu,
.sp-header .dropdown-menu,
.sp-toolbar .sp-dropdown-menu,
.sp-header .sp-dropdown-menu {
    z-index: 1100 !important;
}
.account-edit .dropdown-menu,
.sp-dashboard .dropdown-menu {
    z-index: 1200 !important;
    position: absolute !important;
}

/* =============================================
   PAGINATION FIXES
   ============================================= */
.sp-dashboard .pagination li.disabled,
.sp-dashboard .pagination li.disabled a,
.sp-dashboard .pagination li.disabled span {
    display: none !important;
}

.sp-dashboard .pagination li a,
.sp-dashboard .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
}

.sp-dashboard .pagination li.first a::before {
    content: "«";
    font-weight: 600;
    margin-right: 2px;
}

.sp-dashboard .pagination li.prev a::before,
.sp-dashboard .pagination li.previous a::before {
    content: "‹";
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1;
}

.sp-dashboard .pagination li.next a::after {
    content: "›";
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1;
}

.sp-dashboard .pagination li.last a::after {
    content: "»";
    font-weight: 600;
    margin-left: 2px;
}

.sp-dashboard .pagination li a i,
.sp-dashboard .pagination li a .fa,
.sp-dashboard .pagination li a .entypo {
    display: none !important;
}

/* =============================================
   DMCA BUTTON STYLING
   ============================================= */
.sp-footer-social-btn.dmca {
    background-color: var(--sp-btn-search-bg) !important;
    color: var(--sp-text-secondary) !important;
}
.sp-footer-social-btn.dmca:hover {
    background-color: var(--sp-bg-card-hover) !important;
    color: var(--sp-text-primary) !important;
}

/* =============================================
   TILE STATS - THEME COLORS
   ============================================= */
.tile-stats {
    background: var(--sp-bg-card) !important;
    border: 1px solid var(--sp-border-color) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
.tile-stats .icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 48px !important;
    opacity: 0.15 !important;
    color: var(--sp-text-primary) !important;
}
.tile-stats .num {
    color: var(--sp-text-primary) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}
.tile-stats h3 {
    color: var(--sp-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.tile-stats p {
    color: var(--sp-text-muted) !important;
}

/* Tile variant accents.
   A full border in the accent colour, not a bar down one edge: a colour on a
   single side of a rounded card is not a pattern this project uses. */
.tile-stats.tile-red,
.tile-stats.tile-primary {
    border: 1px solid var(--sp-accent-primary) !important;
    background: var(--sp-bg-card) !important;
}
.tile-stats.tile-red:hover,
.tile-stats.tile-primary:hover {
    background: var(--sp-bg-card-hover) !important;
}
.tile-stats.tile-red .icon,
.tile-stats.tile-primary .icon {
    color: var(--sp-accent-primary) !important;
    opacity: 0.25 !important;
}
.tile-stats.tile-red .num,
.tile-stats.tile-red h3,
.tile-stats.tile-red p,
.tile-stats.tile-primary .num,
.tile-stats.tile-primary h3,
.tile-stats.tile-primary p {
    color: var(--sp-text-primary) !important;
}
.tile-stats.tile-red h3,
.tile-stats.tile-primary h3 {
    color: var(--sp-text-secondary) !important;
}

.tile-stats.tile-green,
.tile-stats.tile-success {
    border: 1px solid var(--sp-accent-green) !important;
    background: var(--sp-bg-card) !important;
}
.tile-stats.tile-green:hover,
.tile-stats.tile-success:hover {
    background: var(--sp-bg-card-hover) !important;
}
.tile-stats.tile-green .icon,
.tile-stats.tile-success .icon {
    color: var(--sp-accent-green) !important;
    opacity: 0.25 !important;
}
.tile-stats.tile-green .num,
.tile-stats.tile-green h3,
.tile-stats.tile-green p,
.tile-stats.tile-success .num,
.tile-stats.tile-success h3,
.tile-stats.tile-success p {
    color: var(--sp-text-primary) !important;
}
.tile-stats.tile-green h3,
.tile-stats.tile-success h3 {
    color: var(--sp-text-secondary) !important;
}

.tile-stats.tile-aqua,
.tile-stats.tile-info,
.tile-stats.tile-cyan {
    border: 1px solid var(--sp-accent-secondary) !important;
    background: var(--sp-bg-card) !important;
}
.tile-stats.tile-aqua:hover,
.tile-stats.tile-info:hover,
.tile-stats.tile-cyan:hover {
    background: var(--sp-bg-card-hover) !important;
}
.tile-stats.tile-aqua .icon,
.tile-stats.tile-info .icon,
.tile-stats.tile-cyan .icon {
    color: var(--sp-accent-secondary) !important;
    opacity: 0.25 !important;
}
.tile-stats.tile-aqua .num,
.tile-stats.tile-aqua h3,
.tile-stats.tile-aqua p,
.tile-stats.tile-info .num,
.tile-stats.tile-info h3,
.tile-stats.tile-info p,
.tile-stats.tile-cyan .num,
.tile-stats.tile-cyan h3,
.tile-stats.tile-cyan p {
    color: var(--sp-text-primary) !important;
}
.tile-stats.tile-aqua h3,
.tile-stats.tile-info h3,
.tile-stats.tile-cyan h3 {
    color: var(--sp-text-secondary) !important;
}

.tile-stats.tile-blue {
    border: 1px solid var(--sp-btn-accent-bg) !important;
    background: var(--sp-bg-card) !important;
}
.tile-stats.tile-blue:hover {
    background: var(--sp-bg-card-hover) !important;
}
.tile-stats.tile-blue .icon {
    color: var(--sp-btn-accent-bg) !important;
    opacity: 0.25 !important;
}
.tile-stats.tile-blue .num,
.tile-stats.tile-blue h3,
.tile-stats.tile-blue p {
    color: var(--sp-text-primary) !important;
}
.tile-stats.tile-blue h3 {
    color: var(--sp-text-secondary) !important;
}

.tile-stats.tile-purple,
.tile-stats.tile-pink,
.tile-stats.tile-orange {
    border: 1px solid var(--sp-accent-primary) !important;
    background: var(--sp-bg-card) !important;
}
.tile-stats.tile-purple:hover,
.tile-stats.tile-pink:hover,
.tile-stats.tile-orange:hover {
    background: var(--sp-bg-card-hover) !important;
}
.tile-stats.tile-purple .icon,
.tile-stats.tile-pink .icon,
.tile-stats.tile-orange .icon {
    color: var(--sp-accent-primary) !important;
    opacity: 0.25 !important;
}
.tile-stats.tile-purple .num,
.tile-stats.tile-purple h3,
.tile-stats.tile-purple p,
.tile-stats.tile-pink .num,
.tile-stats.tile-pink h3,
.tile-stats.tile-pink p,
.tile-stats.tile-orange .num,
.tile-stats.tile-orange h3,
.tile-stats.tile-orange p {
    color: var(--sp-text-primary) !important;
}
.tile-stats.tile-purple h3,
.tile-stats.tile-pink h3,
.tile-stats.tile-orange h3 {
    color: var(--sp-text-secondary) !important;
}

/* =============================================
   SETTINGS PAGE - HIDE TOOLBAR
   ============================================= */
.account-edit .sp-toolbar,
body.account-edit .sp-toolbar,
.sp-dashboard.account-edit .sp-toolbar {
    display: none !important;
}
.account-edit .sp-main-content,
body.account-edit .sp-main-content {
    padding-top: 20px !important;
}

/* =============================================
   PREMIUM ICON - DIAMOND
   ============================================= */
.sp-header-nav .premium i.fa::before,
.sp-header-nav .premium i.entypo::before,
.sp-header-nav-item.premium i::before {
    content: "\f219" !important;
    font-family: FontAwesome !important;
}

/* =============================================
   VIEW TOGGLE (ROWS/GRID) FIX
   ============================================= */
.sp-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sp-view-toggle button,
.sp-view-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    border-radius: 4px;
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.sp-view-toggle button:hover,
.sp-view-toggle a:hover {
    background: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
}
.sp-view-toggle button.active,
.sp-view-toggle a.active {
    background: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #fff;
}
.sp-view-toggle i {
    font-size: 16px;
    line-height: 1;
}

/* =============================================
   SHARED WITH ME - EMPTY STATE
   ============================================= */
.shared-empty-state,
.sp-empty-state {
    text-align: center;
    padding: 80px 30px;
    background: var(--sp-bg-card);
    border-radius: 12px;
    margin: 30px auto;
    max-width: 500px;
}
.shared-empty-state i,
.sp-empty-state i {
    font-size: 72px;
    color: var(--sp-text-muted);
    opacity: 0.4;
    margin-bottom: 24px;
    display: block;
}
.shared-empty-state h3,
.sp-empty-state h3 {
    color: var(--sp-text-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}
.shared-empty-state p,
.sp-empty-state p {
    color: var(--sp-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 350px;
    margin: 0 auto 20px;
}

/* =============================================
   HIGH CONTRAST SIDEBAR TOGGLE
   Default (high, toggle on): sidebar uses bg-header
   Toggle off (low): sidebar uses bg-toolbar
   ============================================= */
[data-sidebar-contrast="low"] .sp-sidebar,
[data-sidebar-contrast="low"] .sidebar-menu,
[data-sidebar-contrast="low"] nav.sp-sidebar {
    background: var(--sp-bg-toolbar) !important;
    background-color: var(--sp-bg-toolbar) !important;
}
[data-sidebar-contrast="low"] .sp-sidebar-item a {
    color: var(--sp-text-secondary) !important;
}
[data-sidebar-contrast="low"] .sp-sidebar-item a:hover {
    color: var(--sp-text-primary) !important;
    background: var(--sp-bg-card) !important;
}
[data-sidebar-contrast="low"] .sp-sidebar-item.active a {
    color: var(--sp-accent-primary) !important;
}

/* =============================================
   MUTED MODE TOGGLE
   Reduces accent color vibrance by overriding variables
   ============================================= */
[data-muted="true"] {
    --sp-accent-primary: var(--sp-text-muted) !important;
    --sp-btn-upload-bg: var(--sp-bg-card-hover) !important;
    --sp-btn-accent-bg: var(--sp-bg-card-hover) !important;
}

[data-muted="true"] .sp-btn-accent,
[data-muted="true"] .btn-accent,
[data-muted="true"] .sp-upload-btn {
    background-color: var(--sp-bg-card-hover) !important;
    color: var(--sp-text-secondary) !important;
}

[data-muted="true"] .sp-theme-card.active {
    border-color: var(--sp-text-muted) !important;
}

/* Midnight muted special case */
[data-theme="midnight"][data-muted="true"] {
    --sp-btn-accent-bg: #202127 !important;
    --sp-accent-primary: #5764a0 !important;
    --sp-btn-upload-bg: #5764a0 !important;
    --sp-accent-secondary: #5a64a2 !important;
}
[data-theme="midnight"][data-muted="true"] .sp-footer-social-btn.dmca {
    background-color: #202127 !important;
    color: #aaa !important;
}
[data-theme="midnight"][data-muted="true"] .sp-upload-btn {
    background-color: #5764a0 !important;
}

/* =============================================
   SIDEBAR STYLING (Icon-only sidebar)
   ============================================= */
.sp-sidebar,
.sidebar-menu {
    background: var(--sp-bg-header) !important;
}

.sp-sidebar-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sp-sidebar-item {
    position: relative;
    list-style: none !important;
}

.sp-sidebar-item a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    color: var(--sp-text-sidebar) !important;
    transition: all 0.15s ease;
}

.sp-sidebar-item a:hover {
    color: var(--sp-text-sidebar-active) !important;
    background: rgba(255,255,255,0.05);
}

.sp-sidebar-item.active a {
    color: var(--sp-accent-primary) !important;
}

/* Hover pill effect (left accent bar) */
.sp-sidebar-item a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: var(--sp-accent-primary) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: height 0.15s ease !important;
}

.sp-sidebar-item a:hover::before {
    height: 50% !important;
}

.sp-sidebar-item.active a::before {
    height: 60% !important;
}

/* Sidebar icon sizing */
.sp-sidebar-item i {
    font-size: 20px;
    line-height: 1;
}

/* =============================================
   SIDEBAR TOOLTIP (appears on hover)
   ============================================= */
.sp-sidebar-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sp-tooltip-bg, var(--sp-bg-card));
    color: var(--sp-tooltip-text, var(--sp-text-primary));
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    pointer-events: none;
    z-index: 1000;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sp-sidebar-tooltip::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--sp-tooltip-bg, var(--sp-bg-card));
}

.sp-sidebar-item:hover .sp-sidebar-tooltip {
    opacity: 1;
    visibility: visible;
}

/* =============================================
   SIDEBAR SUBMENU (flyout menu)
   ============================================= */
.sp-sidebar-submenu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    background: var(--sp-bg-secondary) !important;
    border: 1px solid var(--sp-border-color) !important;
    border-radius: 6px !important;
    padding: 8px 0 !important;
    margin: 0 0 0 10px !important;
    min-width: 180px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s, visibility 0.15s !important;
    z-index: 1001 !important;
    list-style: none !important;
}

.sp-sidebar-item.has-submenu:hover .sp-sidebar-submenu,
.sp-sidebar-item.has-submenu.open .sp-sidebar-submenu {
    opacity: 1 !important;
    visibility: visible !important;
}

.sp-sidebar-submenu li {
    list-style: none !important;
}

.sp-sidebar-submenu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    height: auto !important;
    font-size: 13px !important;
    color: var(--sp-text-secondary) !important;
}

.sp-sidebar-submenu li a:hover {
    color: var(--sp-text-primary) !important;
    background: var(--sp-bg-card) !important;
}

.sp-sidebar-submenu li a i {
    font-size: 14px !important;
    width: 18px !important;
    text-align: center !important;
}

.sp-sidebar-submenu li a span {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Hide tooltip when submenu item is hovered */
.sp-sidebar-item.has-submenu:hover .sp-sidebar-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =============================================
   LOGO SPRITE SYSTEM
   ============================================= */
.sp-header-logo {
    position: relative;
}
.sp-header-logo-link {
    display: block;
    position: relative;
    width: 175px;
    height: 36px;
}
.sp-header-logo-sprite {
    display: block;
    width: 175px;
    height: 36px;
    background-image: url('../images/logo/sprite-versions/logo-sprite-500-v2-comp.png');
    background-size: 175px auto;
    background-repeat: no-repeat;
}

[data-theme="mauve"] .sp-header-logo-sprite     { background-position: 0 0; }
[data-theme="dusty"] .sp-header-logo-sprite     { background-position: 0 -36px; }
[data-theme="sage"] .sp-header-logo-sprite      { background-position: 0 -72px; }
[data-theme="rose"] .sp-header-logo-sprite      { background-position: 0 -108px; }
[data-theme="slate"] .sp-header-logo-sprite     { background-position: 0 -144px; }
[data-theme="sand"] .sp-header-logo-sprite      { background-position: 0 -180px; }
[data-theme="plum"] .sp-header-logo-sprite      { background-position: 0 -216px; }
[data-theme="teal"] .sp-header-logo-sprite      { background-position: 0 -252px; }
[data-theme="wine"] .sp-header-logo-sprite      { background-position: 0 -288px; }
[data-theme="olive"] .sp-header-logo-sprite     { background-position: 0 -324px; }
[data-theme="charcoal"] .sp-header-logo-sprite  { background-position: 0 -360px; }
[data-theme="midnight"] .sp-header-logo-sprite  { background-position: 0 -396px; }

.sp-header-logo-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2;
}

.sp-dashboard .sp-header-logo img {
    display: none;
}

/* =============================================
   APPEARANCE MODAL TOGGLES
   ============================================= */
.sp-appearance-section {
    margin-top: 8px;
}
.sp-section-label {
    font-size: 11px;
    color: var(--modal-text-muted, var(--sp-text-muted));
    margin: 14px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.sp-appearance-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--modal-card, var(--sp-bg-card));
    border-radius: 6px;
    margin-bottom: 8px;
}
.sp-appearance-toggle-label {
    font-size: 12px;
    color: var(--modal-text-secondary, var(--sp-text-secondary));
}
.sp-appearance-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--modal-bg-primary, var(--sp-bg-primary));
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.sp-appearance-toggle.active {
    background: var(--modal-accent, var(--sp-accent-primary));
}
.sp-appearance-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sp-appearance-toggle.active::after {
    transform: translateX(20px);
}

.sp-mode-btn i {
    margin-right: 4px;
    font-size: 12px;
}

/* =============================================
   LIGHT MODE BUTTON FIXES
   ============================================= */
[data-mode="light"] .sp-btn-accent,
[data-mode="light"] .btn-accent,
[data-mode="light"] .sp-upload-btn,
[data-mode="light"] .btn-primary {
    background-color: #5764a0 !important;
    border-color: var(--sp-accent-primary) !important;
    color: #fff !important;
}

[data-mode="light"] .sp-btn-search,
[data-mode="light"] .btn-secondary {
    background-color: #202127 !important;
    border-color: var(--sp-border-color) !important;
    color: var(--sp-text-primary) !important;
}

[data-mode="light"] .sp-toolbar {
    background: var(--sp-bg-toolbar) !important;
    border-bottom: 1px solid var(--sp-border-color) !important;
}

[data-mode="light"] .sp-main-content {
    background: var(--sp-bg-primary) !important;
}

[data-mode="light"] .sp-sidebar {
    background: var(--sp-bg-sidebar) !important;
}

[data-mode="light"] .sp-header {
    background: var(--sp-bg-header) !important;
}

[data-mode="light"] input,
[data-mode="light"] select,
[data-mode="light"] textarea,
[data-mode="light"] .form-control {
    background: var(--sp-bg-secondary) !important;
    border-color: var(--sp-border-color) !important;
    color: var(--sp-text-primary) !important;
}

[data-mode="light"] .table,
[data-mode="light"] table {
    background: var(--sp-bg-secondary) !important;
}

[data-mode="light"] .table th {
    background: var(--sp-bg-card) !important;
    color: var(--sp-text-primary) !important;
    border-color: var(--sp-border-color) !important;
}

[data-mode="light"] .table td {
    background: var(--sp-bg-secondary) !important;
    color: var(--sp-text-primary) !important;
    border-color: var(--sp-border-color) !important;
}

[data-mode="light"] .dropdown-menu {
    background: var(--sp-bg-secondary) !important;
    border-color: var(--sp-border-color) !important;
}

[data-mode="light"] .dropdown-menu a {
    color: var(--sp-text-primary) !important;
}

[data-mode="light"] .dropdown-menu a:hover {
    background: var(--sp-bg-card) !important;
}

[data-mode="light"] .panel,
[data-mode="light"] .card {
    background: var(--sp-bg-secondary) !important;
    border-color: var(--sp-border-color) !important;
}

[data-mode="light"] .alert {
    border-color: var(--sp-border-color) !important;
}

/* =============================================
   FLASH PREVENTION
   ============================================= */
html:not([data-mode]) {
    visibility: hidden;
}
html[data-mode] {
    visibility: visible;
}


/* =============================================
   THE UPLOAD DIALOG
   components.css line 8740 carries:

     .file-upload-wrapper .modal-dialog { width: 100%; padding: 5px; margin: 0px; }

   In Bootstrap 3 the .modal is fixed across the whole viewport and the dialog
   inside it is what gets centred, normally by margin: 30px auto. Forcing the
   dialog to full width with no margin makes it start at the top left corner
   and span the screen, which is the panel lying across the sidebar and the
   account bar rather than sitting in the middle of the page.

   Note this file, not frontend-dark.css: the account pages load their own
   stylesheet stack from assets/styles and never load the frontend one, so a
   rule written there has no effect here at all.

   Note .in, not .show: this area is Bootstrap 3, which marks an open modal
   with .in. .show is Bootstrap 4 and never appears on this page.

   The width is not set here. dashboard.css caps every dashboard dialog at
   800px through `.sp-dashboard .modal.fade .modal-dialog`, which is a more
   specific selector than this one, so a max-width written here would be
   overruled and would only read as though this file decided the width. One
   place owns it, and that place is the general dashboard modal rule.
   ============================================= */
.file-upload-wrapper .modal-dialog {
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Bootstrap sets display:block inline on the element when it opens the modal.
   An !important declaration in a stylesheet still beats a plain inline style,
   so the centring below wins without touching the plugin's JavaScript. */
.file-upload-wrapper.modal.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
/* A tall panel scrolls inside itself rather than running off the screen,
   which is what put the Options row and the size limit out of reach. */
.file-upload-wrapper .modal-content {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    width: 100%;
}
/* The backdrop is what should be covering the sidebar and the bar, not the
   panel. It sits under the dialog and over everything else. */
.modal-backdrop.in {
    opacity: 0.6;
}