/* =========================================================
   COMPREHENSIVE LIGHT THEME VARIABLES & OVERRIDES
   Updated: 100% Flat Modern Box UI (No Borders, No Shadows)
   ========================================================= */

/* 1. Root Variables for Light Mode */
body.light-mode {
    /* Premium Light Tech Gray Background with Pure White Flat Boxes */
    --ssd-bg: #f0f2f5 !important; 
    --ssd-card: #ffffff !important; 
    --ssd-box-bg: #e4e6eb !important; 
    --ssd-border: transparent !important; /* Borders අක්‍රිය කර ඇත */
    --ssd-primary: #3b82f6 !important;   
    --ssd-text: #0f172a !important;      
    --ssd-text-muted: #64748b !important;
    
    /* Legacy System Variables */
    --ssd-text-primary: #0f172a !important;
    --ssd-text-secondary: #475569 !important;
    --ssd-bg-dark: #f0f2f5 !important;
    --ssd-border-color: transparent !important;
    --ssd-accent-color: #3b82f6 !important;
    --ssd-accent-hover: #2563eb !important;
    --ssd-green: #10b981 !important;
    --ssd-yellow: #f59e0b !important;
    --ssd-red: #ef4444 !important;

    /* Telegram Chat Colors */
    --ssd-chat-bg: #e4e6eb !important;
    --ssd-chat-sidebar: #ffffff !important;
    --ssd-chat-panel: #f0f2f5 !important;
    --ssd-chat-border: transparent !important;
    --ssd-chat-primary: #3b82f6 !important;
    --ssd-chat-text: #0f172a !important;
    --ssd-chat-muted: #64748b !important;
    --ssd-chat-received-bg: #ffffff !important;
    --ssd-chat-sent-bg: #3b82f6 !important;

    /* Skeleton Loading Colors */
    --skel-card-bg: #ffffff !important;
    --skel-base-color: #f0f2f5 !important;
    --skel-highlight-color: #ffffff !important;
    --skel-border-color: transparent !important;

    background-color: var(--ssd-bg) !important;
    color: var(--ssd-text) !important;
}

/* 2. Base Structural Unification */
html.light-mode,
body.light-mode html,
body.light-mode .ssd-dashboard-container,
body.light-mode .ssd-main-content {
    background-color: var(--ssd-bg) !important;
    color: var(--ssd-text) !important;
}

body.light-mode .ssd-sidebar {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .ssd-mobile-header,
body.light-mode .ssd-sidebar-new-header {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Forms & Inputs */
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode select,
body.light-mode textarea {
    background-color: var(--ssd-box-bg) !important; 
    border: none !important;
    color: var(--ssd-text) !important;
    box-shadow: none !important;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    box-shadow: inset 0 0 0 1px var(--ssd-primary) !important;
    outline: none !important;
}

/* 4. Dropdowns & Modals */
body.light-mode .ssd-custom-options,
body.light-mode .ssd-options-list,
body.light-mode .ssd-dropdown-options,
body.light-mode .ssd-bc-dropdown-content {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}

body.light-mode .ssd-custom-option,
body.light-mode .ssd-option { 
    color: var(--ssd-text) !important; 
    border-bottom: none !important; 
}

body.light-mode .ssd-custom-option:hover, 
body.light-mode .ssd-custom-option.selected,
body.light-mode .ssd-option:hover, 
body.light-mode .ssd-option.active { 
    background: #eff6ff !important; 
    color: var(--ssd-primary) !important; 
}

body.light-mode .ssd-modal-content,
body.light-mode .ssd-popup-box,
body.light-mode .confirm-glass, 
body.light-mode .share-glass,
body.light-mode .ssd-modal-drawer {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .ssd-secondary-btn,
body.light-mode .ssd-btn-cancel-modern {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode .ssd-secondary-btn:hover,
body.light-mode .ssd-btn-cancel-modern:hover {
    background: #d1d5db !important;
}

/* 5. Icons & Theme Toggles */
body.light-mode .ssd-theme-icon-sun { display: inline-block !important; color: #f59e0b !important; }
body.light-mode .ssd-theme-icon-moon { display: none !important; }

body.light-mode .ssd-sidebar-logo-dark,
body.light-mode .ssd-logo-dark,
body.light-mode .ssd-prog-logo-dark { display: none !important; }
body.light-mode .ssd-sidebar-logo-light,
body.light-mode .ssd-logo-light,
body.light-mode .ssd-prog-logo-light { display: block !important; filter: none !important; }

body.light-mode .ssd-desktop-icon-item { color: #64748b; }
body.light-mode .ssd-desktop-icon-item:hover,
body.light-mode .ssd-desktop-icon-item.active { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }

/* 6. Dashboard Components */
body.light-mode .ssd-select-trigger { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .ssd-select-trigger:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }

body.light-mode .ssd-pro-class-card,
body.light-mode .sbp-profile-shortcut-card,
body.light-mode .ssd-profile-card,
body.light-mode .ssd-search-tab-container,
body.light-mode .ssd-linkedin-card { 
    background: var(--ssd-card); 
    border: none; 
    box-shadow: none;
}
body.light-mode .ssd-class-header { background: var(--ssd-box-bg); border-bottom: none; }
body.light-mode .ssd-class-title { color: var(--ssd-text); }
body.light-mode .ssd-class-footer { border-color: transparent; }

body.light-mode .ssd-search-box { background: var(--ssd-card); border: none; }
body.light-mode .ssd-search-box input { color: var(--ssd-text) !important; }
body.light-mode .ssd-search-box input::placeholder { color: var(--ssd-text-muted); }

body.light-mode .smart-card-premium { border: none !important; background: var(--ssd-card); box-shadow: none !important; }
body.light-mode .ssd-pro-class-btn { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .ssd-pro-class-btn:hover { background: var(--ssd-box-bg); }

body.light-mode .ssd-toggle-slider { background-color: var(--ssd-box-bg); }

body.light-mode .btn-shortcut-action,
body.light-mode .ssd-view-page-btn-action { background: var(--ssd-box-bg); color: var(--ssd-text) !important; border: none; }
body.light-mode .sbp-profile-shortcut-card:hover .btn-shortcut-action,
body.light-mode .ssd-profile-card:hover .ssd-view-page-btn-action { background: var(--ssd-primary); color: white !important; }

body.light-mode .ssd-live-cover-area-scaled { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-live-profile-area-scaled { background: var(--ssd-card); border: none; box-shadow: none; }

/* 7. Exams & Badges Area */
body.light-mode .ssd-eh-tabs { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-eh-tab-btn:not(.active) { color: var(--ssd-text-muted); }
body.light-mode .ssd-eh-tab-btn:hover:not(.active) { color: var(--ssd-text); }
body.light-mode .ssd-eh-card-footer { border-top: none; }
body.light-mode .ssd-eh-btn-view { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
body.light-mode .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: #ffffff; }
body.light-mode .ssd-eh-grade-badge { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-eh-table th { color: var(--ssd-text-muted); border-bottom: none; }
body.light-mode .ssd-eh-empty { background: var(--ssd-box-bg); border: none; }

body.light-mode .ssd-al-prog-track { background: var(--ssd-box-bg) !important; }
body.light-mode .ssd-pb-target-line { background: var(--ssd-text) !important; }
body.light-mode .ssd-pb-marker { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none; }
body.light-mode .ssd-pb-marker.marker-win { background: #10b981 !important; color: #ffffff !important; }

body.light-mode .ssd-app-badges-widget,
body.light-mode .ssd-stats-overview-card,
body.light-mode .ssd-modern-chart-card { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-stat-rank-col { border-right: none; }
body.light-mode .ssd-rank-info .lbl, body.light-mode .ssd-mini-stat .lbl { color: var(--ssd-text-muted); font-weight: 600; }
body.light-mode .ssd-rank-info .val, body.light-mode .ssd-mini-stat .val { color: var(--ssd-text); }
body.light-mode .ssd-mini-stat { background: var(--ssd-box-bg); border: none; }

body.light-mode .ssd-top-badge-item { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-top-badge-item:hover { background: var(--ssd-box-bg); }
body.light-mode .ssd-top-badge-item.unlocked { background: var(--ssd-card); }
body.light-mode .ssd-top-badge-item .tb-name { color: var(--ssd-text); }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; }

body.light-mode .ssd-dropdown-item { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-dropdown-item.earned .item-name { color: var(--ssd-text); font-weight: 700; }
body.light-mode .ssd-dropdown-item.not-earned { background: var(--ssd-box-bg); }

/* 8. Single View Pages (Product/Class) */
body.light-mode .ssd-product-modern-wrapper, 
body.light-mode .ssd-main-image-frame { background-color: var(--ssd-bg); }
body.light-mode .ssd-desktop-card-layout { background: transparent; }
body.light-mode .ssd-dsk-thumb-box, 
body.light-mode .ssd-class-hero { background: var(--ssd-card); border: none; }
body.light-mode .ssd-dsk-info-box, 
body.light-mode .ssd-modern-tabs { background: var(--ssd-card); border: none; }
body.light-mode .ssd-product-title-modern, 
body.light-mode .ssd-class-title-modern { color: var(--ssd-text); }
body.light-mode .ssd-seller-pill, 
body.light-mode .ssd-owner-pill { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-stars-compact { background: var(--ssd-box-bg); border: none; }
body.light-mode .dark-features-grid.vertical-grid { background: var(--ssd-box-bg); border: none; }
body.light-mode .feature-item i { background: var(--ssd-card); }
body.light-mode .feature-item .f-text strong { color: var(--ssd-text); }

body.light-mode .product-mini-preview { background: var(--ssd-box-bg); border: none; }
body.light-mode .mini-details h4 { color: var(--ssd-text); }
body.light-mode .ssd-pay-method-mod { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-pay-method-mod .method-icon { background: var(--ssd-card); }
body.light-mode .ssd-pay-method-mod .m-title, 
body.light-mode .ssd-pay-method-mod .m-price { color: var(--ssd-text); }

body.light-mode .ssd-month-filter-container select { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-section-card { background: var(--ssd-card); border: none; }
body.light-mode .ssd-sec-header { background: var(--ssd-box-bg); border-bottom: none; color: var(--ssd-text); }
body.light-mode .ssd-lesson-row { border-bottom: none; }
body.light-mode .ssd-rating-summary { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box textarea { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .rev-avatar .avatar-circle { background: var(--ssd-card); color: var(--ssd-text); border: none; }
body.light-mode .ssd-notice { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }

body.light-mode .ssd-btn-disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; }
body.light-mode .ssd-universal-floating-bar { background: var(--ssd-card); border: none; }

/* 9. Chat Application overrides */
@media (min-width: 769px) { body.light-mode .ssd-telegram-app-container { background: var(--ssd-bg); } }
body.light-mode .ssd-telegram-app-container, 
body.light-mode .ssd-app-pane { background-color: transparent; color: var(--ssd-text); }
body.light-mode .ssd-app-header { background: transparent; border: none; }
body.light-mode #pane-chat-list { background: transparent; }
body.light-mode #ssd-create-group-view { background: var(--ssd-card) !important; }

body.light-mode .ssd-search-bar { background: var(--ssd-card); border: none; border-radius: 16px; }
body.light-mode .ssd-search-bar:focus-within { box-shadow: inset 0 0 0 1px var(--ssd-primary); background: var(--ssd-card); }
body.light-mode #ssd-global-search { color: var(--ssd-text); }
body.light-mode .ssd-mobile-exit-btn, 
body.light-mode .ssd-back-btn, 
body.light-mode .chat-action-btn { color: var(--ssd-text-muted); }

body.light-mode .chat-filter-btn:not(.active) { background: var(--ssd-card) !important; border: none !important; color: var(--ssd-text-muted) !important; }
body.light-mode .ssd-list-scrollable { background: var(--ssd-card); border: none; }
body.light-mode .chat-list-item:hover { background: var(--ssd-box-bg); }
body.light-mode .chat-list-avatar { border: none; background: var(--ssd-box-bg); }

body.light-mode .chat-item-dropdown, 
body.light-mode .ssd-floating-dropdown,
body.light-mode #ssd-ai-prompts-menu { background: var(--ssd-card); border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.light-mode .chat-item-dropdown button,
body.light-mode #ssd-ai-prompts-menu button { color: var(--ssd-text-muted); }
body.light-mode .chat-item-dropdown button:hover,
body.light-mode #ssd-ai-prompts-menu button:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .chat-item-dropdown button.danger:hover { background: #fef2f2; color: #ef4444; }

body.light-mode #pane-chat-thread { background-color: var(--ssd-bg); background-image: none; }
body.light-mode .chat-message { background: transparent !important; }
body.light-mode .chat-message.received .msg-content-wrapper { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none !important; box-shadow: none !important; }
body.light-mode .chat-message.sent .msg-content-wrapper { background: var(--ssd-primary) !important; color: #ffffff !important; border: none !important; box-shadow: none !important; }
body.light-mode .chat-message.sent .msg-text-display, 
body.light-mode .chat-message.sent .msg-content-wrapper * { color: #ffffff !important; }
body.light-mode .ssd-chat-footer { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode #ssd-chat-input { color: var(--ssd-text) !important; }
body.light-mode .ssd-ai-link-btn { color: var(--ssd-primary) !important; border: none; background: var(--ssd-box-bg); }
body.light-mode .ssd-ai-link-btn:hover { background: var(--ssd-primary); color: white !important; }

/* 10. Store & Cart */
body.light-mode .ssd-cart-step { background: var(--ssd-card) !important; border: none; }
body.light-mode .ssd-seller-card { background: var(--ssd-box-bg) !important; border: none; }
body.light-mode .ssd-cart-item-modern { background: var(--ssd-card) !important; border: none; }
body.light-mode .ssd-calculation-box { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none; }
body.light-mode .ssd-wallet-pay-box { background: var(--ssd-box-bg) !important; border: none; }
body.light-mode .ssd-input-group input, 
body.light-mode .ssd-input-group textarea { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; border: none !important;}
body.light-mode .ssd-input-group label { color: var(--ssd-text-muted) !important; }
body.light-mode .ssd-cart-header-modern,
body.light-mode .ssd-drawer-footer-sticky { background: var(--ssd-card) !important; border: none !important; }
body.light-mode .ssd-checkout-seller-name { color: var(--ssd-text) !important; }

/* 11. PDF Viewers & Lightboxes */
body.light-mode .ssd-pdf-popup-overlay, 
body.light-mode .ssd-pdf-body, 
body.light-mode .ssd-lightbox-overlay { background: var(--ssd-bg); }
body.light-mode .pdf-floating-toolbar { background: var(--ssd-card); border: none; box-shadow: none; }

/* 12. Miscellaneous */
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item), 
body.light-mode .ssd-box-item[href*="chat"]:not(.disabled-item) {
    background: #10b981 !important;
    border: none !important;
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) i { color: #ffffff !important; }
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { color: #ffffff !important; }
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item):hover { background: #059669 !important; }

@media (max-width: 768px) { 
    body.light-mode .ssd-class-header { border: none; } 
}

/* =========================================================
   13. PUBLIC STUDY ROOM - SPECIFIC LIGHT MODE OVERRIDES
   ========================================================= */

/* Main Backgrounds & Containers */
body.light-mode .ssd-main-stage,
body.light-mode #ssd-sidebar-todo-content,
body.light-mode .ssd-chat-feed-container,
body.light-mode #ssd-sidebar-music-content,
body.light-mode #ssd-grid-loader {
    background-color: var(--ssd-bg) !important;
}

body.light-mode .ssd-room-grid-bg {
    opacity: 0.3 !important;
}

/* Top Nav & Mobile Toggles */
body.light-mode .ssd-mobile-dash-toggle, 
body.light-mode .ssd-room-pill, 
body.light-mode .ssd-hall-switcher, 
body.light-mode .ssd-joined-badge,
body.light-mode #ssd-noti-btn {
    background-color: var(--ssd-card) !important;
    border: none !important;
    color: var(--ssd-text) !important;
    box-shadow: none !important;
}

body.light-mode .ssd-more-dropdown,
body.light-mode #ssd-noti-panel,
body.light-mode .ssd-mobile-dash-dropdown,
body.light-mode #ssd-global-music-dropdown {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
body.light-mode .ssd-drop-item { color: var(--ssd-text) !important; }
body.light-mode .ssd-drop-item:hover { background: var(--ssd-box-bg) !important; color: var(--ssd-primary) !important; }

/* Bottom Dock */
body.light-mode .ssd-bottom-dock {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-dock-btn {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-dock-btn:hover {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-dock-btn.active-cam {
    background: var(--ssd-primary) !important;
    color: white !important;
}

/* Profile Cards (Pure White NO Borders) */
body.light-mode .participants-grid .ssd-user-card,
body.light-mode .ssd-user-card,
body.light-mode .ssd-user-card .ssd-card-inner-content,
body.light-mode .ssd-user-card .ssd-overlay-bottom,
body.light-mode .ssd-user-card video.ssd-user-video {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

body.light-mode .ssd-name-tag {
    color: var(--ssd-text) !important;
    text-shadow: none !important;
}

body.light-mode .ssd-overlay-time,
body.light-mode .ssd-card-controls {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-ctrl-btn { color: var(--ssd-text) !important; }
body.light-mode .ssd-ctrl-btn:hover { background: #d1d5db !important; }

/* Encourage (Like) Button Light Mode */
body.light-mode .ssd-encourage-badge {
    color: var(--ssd-text-muted) !important;
    background: transparent !important;
    border: none !important;
}
body.light-mode .ssd-encourage-badge:hover,
body.light-mode .ssd-encourage-badge.active {
    color: var(--ssd-primary) !important;
    background: transparent !important;
}
body.light-mode .ssd-encourage-badge:hover i,
body.light-mode .ssd-encourage-badge.active i {
    color: #3b82f6 !important;
}

/* Tools, Chat & Headers */
body.light-mode .ssd-tools-header,
body.light-mode .ssd-popup-header,
body.light-mode .ssd-chat-header {
    background: var(--ssd-card) !important;
    border-bottom: none !important;
}
body.light-mode .ssd-tools-close-btn,
body.light-mode .ssd-popup-close-btn {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-tools-close-btn:hover,
body.light-mode .ssd-popup-close-btn:hover {
    background: #ef4444 !important;
    color: white !important;
}

body.light-mode .input-glass-box {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .chat-input { color: var(--ssd-text) !important; }
body.light-mode .action-btn { color: var(--ssd-text-muted) !important; }
body.light-mode .action-btn:hover { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; }
body.light-mode .btn-send { background: var(--ssd-primary) !important; color: white !important; }

body.light-mode .ssd-msg-row.other .ssd-bubble {
    background: var(--ssd-card) !important;
    color: var(--ssd-text) !important;
    border: none !important;
    box-shadow: none !important;
}

/* YouTube Music UI Updates */
body.light-mode .ssd-music-glass-panel,
body.light-mode #ssd-shared-playlists,
body.light-mode .youtube-embed-box {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-shared-pl-item {
    background: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode .ssd-music-input {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode #ssd-music-status-bar {
    background: #fef2f2 !important;
    border: none !important;
}

/* Skeleton Loader Light Mode */
body.light-mode .ssd-skel-box {
    background: var(--ssd-card) !important;
    border: none !important;
}
body.light-mode .ssd-skel-box::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent) !important;
}

/* Popups, Modals & Notifications */
body.light-mode .ssd-popup-modal,
body.light-mode .ssd-popup-body,
body.light-mode .ssd-preview-modal,
body.light-mode .ssd-preview-body,
body.light-mode #ssd-verification-modal .ssd-popup-modal {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-toast {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-noti-item {
    background: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode .ssd-noti-item:hover {
    background: #d1d5db !important;
}

/* =========================================================
   COMPREHENSIVE LIGHT THEME VARIABLES & OVERRIDES
   Updated: 100% Flat Modern Box UI (No Borders, No Shadows)
   ========================================================= */

/* 1. Root Variables for Light Mode */
body.light-mode {
    /* Premium Light Tech Gray Background with Pure White Flat Boxes */
    --ssd-bg: #f0f2f5 !important; 
    --ssd-card: #ffffff !important; 
    --ssd-box-bg: #e4e6eb !important; 
    --ssd-border: transparent !important; /* Borders අක්‍රිය කර ඇත */
    --ssd-primary: #3b82f6 !important;   
    --ssd-text: #0f172a !important;      
    --ssd-text-muted: #64748b !important;
    
    /* Legacy System Variables */
    --ssd-text-primary: #0f172a !important;
    --ssd-text-secondary: #475569 !important;
    --ssd-bg-dark: #f0f2f5 !important;
    --ssd-border-color: transparent !important;
    --ssd-accent-color: #3b82f6 !important;
    --ssd-accent-hover: #2563eb !important;
    --ssd-green: #10b981 !important;
    --ssd-yellow: #f59e0b !important;
    --ssd-red: #ef4444 !important;

    /* Telegram Chat Colors */
    --ssd-chat-bg: #e4e6eb !important;
    --ssd-chat-sidebar: #ffffff !important;
    --ssd-chat-panel: #f0f2f5 !important;
    --ssd-chat-border: transparent !important;
    --ssd-chat-primary: #3b82f6 !important;
    --ssd-chat-text: #0f172a !important;
    --ssd-chat-muted: #64748b !important;
    --ssd-chat-received-bg: #ffffff !important;
    --ssd-chat-sent-bg: #3b82f6 !important;

    /* Skeleton Loading Colors */
    --skel-card-bg: #ffffff !important;
    --skel-base-color: #f0f2f5 !important;
    --skel-highlight-color: #ffffff !important;
    --skel-border-color: transparent !important;

    background-color: var(--ssd-bg) !important;
    color: var(--ssd-text) !important;
}

/* 2. Base Structural Unification */
html.light-mode,
body.light-mode html,
body.light-mode .ssd-dashboard-container,
body.light-mode .ssd-main-content {
    background-color: var(--ssd-bg) !important;
    color: var(--ssd-text) !important;
}

body.light-mode .ssd-sidebar {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .ssd-mobile-header,
body.light-mode .ssd-sidebar-new-header {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Forms & Inputs */
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode select,
body.light-mode textarea {
    background-color: var(--ssd-box-bg) !important; 
    border: none !important;
    color: var(--ssd-text) !important;
    box-shadow: none !important;
}

body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    box-shadow: inset 0 0 0 1px var(--ssd-primary) !important;
    outline: none !important;
}

/* 4. Dropdowns & Modals */
body.light-mode .ssd-custom-options,
body.light-mode .ssd-options-list,
body.light-mode .ssd-dropdown-options,
body.light-mode .ssd-bc-dropdown-content {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}

body.light-mode .ssd-custom-option,
body.light-mode .ssd-option { 
    color: var(--ssd-text) !important; 
    border-bottom: none !important; 
}

body.light-mode .ssd-custom-option:hover, 
body.light-mode .ssd-custom-option.selected,
body.light-mode .ssd-option:hover, 
body.light-mode .ssd-option.active { 
    background: #eff6ff !important; 
    color: var(--ssd-primary) !important; 
}

body.light-mode .ssd-modal-content,
body.light-mode .ssd-popup-box,
body.light-mode .confirm-glass, 
body.light-mode .share-glass,
body.light-mode .ssd-modal-drawer {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}

body.light-mode .ssd-secondary-btn,
body.light-mode .ssd-btn-cancel-modern {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode .ssd-secondary-btn:hover,
body.light-mode .ssd-btn-cancel-modern:hover {
    background: #d1d5db !important;
}

/* 5. Icons & Theme Toggles */
body.light-mode .ssd-theme-icon-sun { display: inline-block !important; color: #f59e0b !important; }
body.light-mode .ssd-theme-icon-moon { display: none !important; }

body.light-mode .ssd-sidebar-logo-dark,
body.light-mode .ssd-logo-dark,
body.light-mode .ssd-prog-logo-dark { display: none !important; }
body.light-mode .ssd-sidebar-logo-light,
body.light-mode .ssd-logo-light,
body.light-mode .ssd-prog-logo-light { display: block !important; filter: none !important; }

body.light-mode .ssd-desktop-icon-item { color: #64748b; }
body.light-mode .ssd-desktop-icon-item:hover,
body.light-mode .ssd-desktop-icon-item.active { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }

/* 6. Dashboard Components */
body.light-mode .ssd-select-trigger { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .ssd-select-trigger:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }

body.light-mode .ssd-pro-class-card,
body.light-mode .sbp-profile-shortcut-card,
body.light-mode .ssd-profile-card,
body.light-mode .ssd-search-tab-container,
body.light-mode .ssd-linkedin-card { 
    background: var(--ssd-card); 
    border: none; 
    box-shadow: none;
}
body.light-mode .ssd-class-header { background: var(--ssd-box-bg); border-bottom: none; }
body.light-mode .ssd-class-title { color: var(--ssd-text); }
body.light-mode .ssd-class-footer { border-color: transparent; }

body.light-mode .ssd-search-box { background: var(--ssd-card); border: none; }
body.light-mode .ssd-search-box input { color: var(--ssd-text) !important; }
body.light-mode .ssd-search-box input::placeholder { color: var(--ssd-text-muted); }

body.light-mode .smart-card-premium { border: none !important; background: var(--ssd-card); box-shadow: none !important; }
body.light-mode .ssd-pro-class-btn { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .ssd-pro-class-btn:hover { background: var(--ssd-box-bg); }

body.light-mode .ssd-toggle-slider { background-color: var(--ssd-box-bg); }

body.light-mode .btn-shortcut-action,
body.light-mode .ssd-view-page-btn-action { background: var(--ssd-box-bg); color: var(--ssd-text) !important; border: none; }
body.light-mode .sbp-profile-shortcut-card:hover .btn-shortcut-action,
body.light-mode .ssd-profile-card:hover .ssd-view-page-btn-action { background: var(--ssd-primary); color: white !important; }

body.light-mode .ssd-live-cover-area-scaled { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-live-profile-area-scaled { background: var(--ssd-card); border: none; box-shadow: none; }

/* 7. Exams & Badges Area */
body.light-mode .ssd-eh-tabs { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-eh-tab-btn:not(.active) { color: var(--ssd-text-muted); }
body.light-mode .ssd-eh-tab-btn:hover:not(.active) { color: var(--ssd-text); }
body.light-mode .ssd-eh-card-footer { border-top: none; }
body.light-mode .ssd-eh-btn-view { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
body.light-mode .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: #ffffff; }
body.light-mode .ssd-eh-grade-badge { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-eh-table th { color: var(--ssd-text-muted); border-bottom: none; }
body.light-mode .ssd-eh-empty { background: var(--ssd-box-bg); border: none; }

body.light-mode .ssd-al-prog-track { background: var(--ssd-box-bg) !important; }
body.light-mode .ssd-pb-target-line { background: var(--ssd-text) !important; }
body.light-mode .ssd-pb-marker { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none; }
body.light-mode .ssd-pb-marker.marker-win { background: #10b981 !important; color: #ffffff !important; }

body.light-mode .ssd-app-badges-widget,
body.light-mode .ssd-stats-overview-card,
body.light-mode .ssd-modern-chart-card { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-stat-rank-col { border-right: none; }
body.light-mode .ssd-rank-info .lbl, body.light-mode .ssd-mini-stat .lbl { color: var(--ssd-text-muted); font-weight: 600; }
body.light-mode .ssd-rank-info .val, body.light-mode .ssd-mini-stat .val { color: var(--ssd-text); }
body.light-mode .ssd-mini-stat { background: var(--ssd-box-bg); border: none; }

body.light-mode .ssd-top-badge-item { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-top-badge-item:hover { background: var(--ssd-box-bg); }
body.light-mode .ssd-top-badge-item.unlocked { background: var(--ssd-card); }
body.light-mode .ssd-top-badge-item .tb-name { color: var(--ssd-text); }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; }

body.light-mode .ssd-dropdown-item { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode .ssd-dropdown-item.earned .item-name { color: var(--ssd-text); font-weight: 700; }
body.light-mode .ssd-dropdown-item.not-earned { background: var(--ssd-box-bg); }

/* 8. Single View Pages (Product/Class) */
body.light-mode .ssd-product-modern-wrapper, 
body.light-mode .ssd-main-image-frame { background-color: var(--ssd-bg); }
body.light-mode .ssd-desktop-card-layout { background: transparent; }
body.light-mode .ssd-dsk-thumb-box, 
body.light-mode .ssd-class-hero { background: var(--ssd-card); border: none; }
body.light-mode .ssd-dsk-info-box, 
body.light-mode .ssd-modern-tabs { background: var(--ssd-card); border: none; }
body.light-mode .ssd-product-title-modern, 
body.light-mode .ssd-class-title-modern { color: var(--ssd-text); }
body.light-mode .ssd-seller-pill, 
body.light-mode .ssd-owner-pill { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-stars-compact { background: var(--ssd-box-bg); border: none; }
body.light-mode .dark-features-grid.vertical-grid { background: var(--ssd-box-bg); border: none; }
body.light-mode .feature-item i { background: var(--ssd-card); }
body.light-mode .feature-item .f-text strong { color: var(--ssd-text); }

body.light-mode .product-mini-preview { background: var(--ssd-box-bg); border: none; }
body.light-mode .mini-details h4 { color: var(--ssd-text); }
body.light-mode .ssd-pay-method-mod { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-pay-method-mod .method-icon { background: var(--ssd-card); }
body.light-mode .ssd-pay-method-mod .m-title, 
body.light-mode .ssd-pay-method-mod .m-price { color: var(--ssd-text); }

body.light-mode .ssd-month-filter-container select { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-section-card { background: var(--ssd-card); border: none; }
body.light-mode .ssd-sec-header { background: var(--ssd-box-bg); border-bottom: none; color: var(--ssd-text); }
body.light-mode .ssd-lesson-row { border-bottom: none; }
body.light-mode .ssd-rating-summary { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box textarea { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .rev-avatar .avatar-circle { background: var(--ssd-card); color: var(--ssd-text); border: none; }
body.light-mode .ssd-notice { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }

body.light-mode .ssd-btn-disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; }
body.light-mode .ssd-universal-floating-bar { background: var(--ssd-card); border: none; }

/* 9. Chat Application overrides */
@media (min-width: 769px) { body.light-mode .ssd-telegram-app-container { background: var(--ssd-bg); } }
body.light-mode .ssd-telegram-app-container, 
body.light-mode .ssd-app-pane { background-color: transparent; color: var(--ssd-text); }
body.light-mode .ssd-app-header { background: transparent; border: none; }
body.light-mode #pane-chat-list { background: transparent; }
body.light-mode #ssd-create-group-view { background: var(--ssd-card) !important; }

body.light-mode .ssd-search-bar { background: var(--ssd-card); border: none; border-radius: 16px; }
body.light-mode .ssd-search-bar:focus-within { box-shadow: inset 0 0 0 1px var(--ssd-primary); background: var(--ssd-card); }
body.light-mode #ssd-global-search { color: var(--ssd-text); }
body.light-mode .ssd-mobile-exit-btn, 
body.light-mode .ssd-back-btn, 
body.light-mode .chat-action-btn { color: var(--ssd-text-muted); }

body.light-mode .chat-filter-btn:not(.active) { background: var(--ssd-card) !important; border: none !important; color: var(--ssd-text-muted) !important; }
body.light-mode .ssd-list-scrollable { background: var(--ssd-card); border: none; }
body.light-mode .chat-list-item:hover { background: var(--ssd-box-bg); }
body.light-mode .chat-list-avatar { border: none; background: var(--ssd-box-bg); }

body.light-mode .chat-item-dropdown, 
body.light-mode .ssd-floating-dropdown,
body.light-mode #ssd-ai-prompts-menu { background: var(--ssd-card); border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.light-mode .chat-item-dropdown button,
body.light-mode #ssd-ai-prompts-menu button { color: var(--ssd-text-muted); }
body.light-mode .chat-item-dropdown button:hover,
body.light-mode #ssd-ai-prompts-menu button:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .chat-item-dropdown button.danger:hover { background: #fef2f2; color: #ef4444; }

body.light-mode #pane-chat-thread { background-color: var(--ssd-bg); background-image: none; }
body.light-mode .chat-message { background: transparent !important; }
body.light-mode .chat-message.received .msg-content-wrapper { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none !important; box-shadow: none !important; }
body.light-mode .chat-message.sent .msg-content-wrapper { background: var(--ssd-primary) !important; color: #ffffff !important; border: none !important; box-shadow: none !important; }
body.light-mode .chat-message.sent .msg-text-display, 
body.light-mode .chat-message.sent .msg-content-wrapper * { color: #ffffff !important; }
body.light-mode .ssd-chat-footer { background: var(--ssd-card); border: none; box-shadow: none; }
body.light-mode #ssd-chat-input { color: var(--ssd-text) !important; }
body.light-mode .ssd-ai-link-btn { color: var(--ssd-primary) !important; border: none; background: var(--ssd-box-bg); }
body.light-mode .ssd-ai-link-btn:hover { background: var(--ssd-primary); color: white !important; }

/* 10. Store & Cart */
body.light-mode .ssd-cart-step { background: var(--ssd-card) !important; border: none; }
body.light-mode .ssd-seller-card { background: var(--ssd-box-bg) !important; border: none; }
body.light-mode .ssd-cart-item-modern { background: var(--ssd-card) !important; border: none; }
body.light-mode .ssd-calculation-box { background: var(--ssd-card) !important; color: var(--ssd-text) !important; border: none; }
body.light-mode .ssd-wallet-pay-box { background: var(--ssd-box-bg) !important; border: none; }
body.light-mode .ssd-input-group input, 
body.light-mode .ssd-input-group textarea { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; border: none !important;}
body.light-mode .ssd-input-group label { color: var(--ssd-text-muted) !important; }
body.light-mode .ssd-cart-header-modern,
body.light-mode .ssd-drawer-footer-sticky { background: var(--ssd-card) !important; border: none !important; }
body.light-mode .ssd-checkout-seller-name { color: var(--ssd-text) !important; }

/* 11. PDF Viewers & Lightboxes */
body.light-mode .ssd-pdf-popup-overlay, 
body.light-mode .ssd-pdf-body, 
body.light-mode .ssd-lightbox-overlay { background: var(--ssd-bg); }
body.light-mode .pdf-floating-toolbar { background: var(--ssd-card); border: none; box-shadow: none; }

/* 12. Miscellaneous */
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item), 
body.light-mode .ssd-box-item[href*="chat"]:not(.disabled-item) {
    background: #10b981 !important;
    border: none !important;
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) i { color: #ffffff !important; }
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { color: #ffffff !important; }
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item):hover { background: #059669 !important; }

@media (max-width: 768px) { 
    body.light-mode .ssd-class-header { border: none; } 
}

/* =========================================================
   13. PUBLIC STUDY ROOM - SPECIFIC LIGHT MODE OVERRIDES
   ========================================================= */

/* Main Backgrounds & Containers */
body.light-mode .ssd-main-stage,
body.light-mode #ssd-sidebar-todo-content,
body.light-mode .ssd-chat-feed-container,
body.light-mode #ssd-sidebar-music-content,
body.light-mode #ssd-grid-loader {
    background-color: var(--ssd-bg) !important;
}

body.light-mode .ssd-room-grid-bg {
    opacity: 0.3 !important;
}

/* Top Nav & Mobile Toggles */
body.light-mode .ssd-mobile-dash-toggle, 
body.light-mode .ssd-room-pill, 
body.light-mode .ssd-hall-switcher, 
body.light-mode .ssd-joined-badge,
body.light-mode #ssd-noti-btn {
    background-color: var(--ssd-card) !important;
    border: none !important;
    color: var(--ssd-text) !important;
    box-shadow: none !important;
}

body.light-mode .ssd-more-dropdown,
body.light-mode #ssd-noti-panel,
body.light-mode .ssd-mobile-dash-dropdown,
body.light-mode #ssd-global-music-dropdown {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
body.light-mode .ssd-drop-item { color: var(--ssd-text) !important; }
body.light-mode .ssd-drop-item:hover { background: var(--ssd-box-bg) !important; color: var(--ssd-primary) !important; }

/* Bottom Dock */
body.light-mode .ssd-bottom-dock {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-dock-btn {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-dock-btn:hover {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-dock-btn.active-cam {
    background: var(--ssd-primary) !important;
    color: white !important;
}

/* Profile Cards (Pure White NO Borders) */
body.light-mode .participants-grid .ssd-user-card,
body.light-mode .ssd-user-card,
body.light-mode .ssd-user-card .ssd-card-inner-content,
body.light-mode .ssd-user-card .ssd-overlay-bottom,
body.light-mode .ssd-user-card video.ssd-user-video {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

body.light-mode .ssd-name-tag {
    color: var(--ssd-text) !important;
    text-shadow: none !important;
}

body.light-mode .ssd-overlay-time,
body.light-mode .ssd-card-controls {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-ctrl-btn { color: var(--ssd-text) !important; }
body.light-mode .ssd-ctrl-btn:hover { background: #d1d5db !important; }

/* Encourage (Like) Button Light Mode */
body.light-mode .ssd-encourage-badge {
    color: var(--ssd-text-muted) !important;
    background: transparent !important;
    border: none !important;
}
body.light-mode .ssd-encourage-badge:hover,
body.light-mode .ssd-encourage-badge.active {
    color: var(--ssd-primary) !important;
    background: transparent !important;
}
body.light-mode .ssd-encourage-badge:hover i,
body.light-mode .ssd-encourage-badge.active i {
    color: #3b82f6 !important;
}

/* Tools, Chat & Headers */
body.light-mode .ssd-tools-header,
body.light-mode .ssd-popup-header,
body.light-mode .ssd-chat-header {
    background: var(--ssd-card) !important;
    border-bottom: none !important;
}
body.light-mode .ssd-tools-close-btn,
body.light-mode .ssd-popup-close-btn {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-tools-close-btn:hover,
body.light-mode .ssd-popup-close-btn:hover {
    background: #ef4444 !important;
    color: white !important;
}

body.light-mode .input-glass-box {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .chat-input { color: var(--ssd-text) !important; }
body.light-mode .action-btn { color: var(--ssd-text-muted) !important; }
body.light-mode .action-btn:hover { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; }
body.light-mode .btn-send { background: var(--ssd-primary) !important; color: white !important; }

body.light-mode .ssd-msg-row.other .ssd-bubble {
    background: var(--ssd-card) !important;
    color: var(--ssd-text) !important;
    border: none !important;
    box-shadow: none !important;
}

/* YouTube Music UI Updates */
body.light-mode .ssd-music-glass-panel,
body.light-mode #ssd-shared-playlists,
body.light-mode .youtube-embed-box {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-shared-pl-item {
    background: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode .ssd-music-input {
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode #ssd-music-status-bar {
    background: #fef2f2 !important;
    border: none !important;
}

/* Skeleton Loader Light Mode */
body.light-mode .ssd-skel-box {
    background: var(--ssd-card) !important;
    border: none !important;
}
body.light-mode .ssd-skel-box::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent) !important;
}

/* Popups, Modals & Notifications */
body.light-mode .ssd-popup-modal,
body.light-mode .ssd-popup-body,
body.light-mode .ssd-preview-modal,
body.light-mode .ssd-preview-body,
body.light-mode #ssd-verification-modal .ssd-popup-modal {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-toast {
    background: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-noti-item {
    background: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode .ssd-noti-item:hover {
    background: #d1d5db !important;
}

/* =========================================================
   STUDY ROOM LOBBY (tab-study-room.php) - LIGHT MODE UI
   Updated: 100% Flat Modern UI (No Borders, Pure Colors)
   ========================================================= */

/* 1. Main Backgrounds & Sidebar */
body.light-mode .ssd-dark-theme-wrapper,
body.light-mode #sr-content-wrapper {
    background-color: var(--ssd-bg) !important; /* ළා අළු පැහැති පසුබිම */
}

body.light-mode #sr-desktop-sidebar {
    background-color: var(--ssd-card) !important;
    border-right: none !important;
    box-shadow: none !important;
}

body.light-mode .sr-desktop-nav-header {
    color: var(--ssd-text) !important;
    border-bottom: none !important;
}

body.light-mode .sr-nav-item {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .sr-nav-item:hover {
    background-color: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
}
body.light-mode .sr-nav-item.active {
    background-color: #eff6ff !important;
    color: var(--ssd-primary) !important;
}

/* 2. Mobile Navigation Bottom Dock */
body.light-mode .sr-mobile-nav-container,
body.light-mode .sr-mobile-nav.glass-nav {
    background-color: var(--ssd-card) !important;
    border-top: none !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.03) !important;
}
body.light-mode .m-nav-item {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .m-nav-item.active {
    color: var(--ssd-primary) !important;
}

/* 3. Hero Section (Banner) & Join Buttons */
body.light-mode .ssd-hero-join-section {
    /* අඳුරු Gradient එක වෙනුවට සුදු පසුබිමට ගැළපෙන Gradient එකක් */
    background-image: linear-gradient(to top, var(--ssd-bg) 0%, rgba(240, 242, 245, 0.2) 80%), url('/wp-content/plugins/smart-student-dashboard/assets/images/MusicThambnail-32.png') !important;
}
body.light-mode .ssd-solid-white-btn {
    background-color: var(--ssd-card) !important;
    color: var(--ssd-text) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .ssd-solid-white-btn:hover {
    background-color: var(--ssd-box-bg) !important;
}

/* 4. Date Slider (Horizontal Calendar Cards) */
body.light-mode .sr-date-slider-wrapper {
    background: transparent !important;
}
body.light-mode .sr-date-card {
    background-color: var(--ssd-box-bg) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ssd-text-muted) !important;
}
body.light-mode .sr-date-card .db-day-name,
body.light-mode .sr-date-card .db-study-time {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .sr-date-card .db-day-number {
    color: var(--ssd-text) !important;
}

/* Active Date Card Styling */
body.light-mode .sr-date-card.selected-date,
body.light-mode .sr-date-card.focused {
    background-color: var(--ssd-primary) !important;
}
body.light-mode .sr-date-card.selected-date .db-day-name,
body.light-mode .sr-date-card.selected-date .db-day-number,
body.light-mode .sr-date-card.selected-date .db-study-time,
body.light-mode .sr-date-card.focused .db-day-name,
body.light-mode .sr-date-card.focused .db-day-number,
body.light-mode .sr-date-card.focused .db-study-time {
    color: #ffffff !important;
}

/* 5. Promotional & Custom Boxes */
body.light-mode .ssd-study-partner-box {
    background-color: var(--ssd-card) !important; /* Inline inline styles override කිරීම */
}
body.light-mode .ssd-study-partner-box h4 {
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-study-partner-box p {
    color: var(--ssd-text-muted) !important;
}

/* 6. Rankings & Leaderboard Section */
body.light-mode .ssd-rankings-wrapper-pro {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-mode .rank-header-title {
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-custom-filter-wrap {
    background-color: var(--ssd-box-bg) !important;
    border: none !important;
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-rank-tabs-pro {
    background-color: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode .rank-tab-btn-pro {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .rank-tab-btn-pro.active {
    background-color: var(--ssd-card) !important;
    color: var(--ssd-primary) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 7. Popups & Slide-up Modals (Join Room & Add Manual Time) */
body.light-mode .ssd-slide-up-modal .ssd-slide-content,
body.light-mode .ssd-bp-modal {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08) !important;
}
body.light-mode .ssd-slide-close-float,
body.light-mode .ssd-bp-close {
    background-color: var(--ssd-box-bg) !important;
    color: var(--ssd-text-muted) !important;
    border: none !important;
}
body.light-mode .ssd-slide-close-float:hover,
body.light-mode .ssd-bp-close:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}
body.light-mode .ssd-modal-title,
body.light-mode .ssd-bp-title {
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-modal-subtitle {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-label {
    color: var(--ssd-text-muted) !important;
}

/* Custom Dropdowns Inside Form */
body.light-mode .ssd-custom-select-trigger {
    background-color: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode .ssd-custom-options {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}
body.light-mode .ssd-custom-option {
    color: var(--ssd-text) !important;
}
body.light-mode .ssd-custom-option:hover,
body.light-mode .ssd-custom-option.selected {
    background-color: #eff6ff !important;
    color: var(--ssd-primary) !important;
}

/* Search Inputs inside Dropdowns */
body.light-mode .ssd-subject-search-input {
    background-color: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    border: none !important;
}
body.light-mode .ssd-subject-search-input:focus {
    box-shadow: inset 0 0 0 1px var(--ssd-primary) !important;
}
body.light-mode .ssd-search-icon-inside {
    color: var(--ssd-text-muted) !important;
}

/* Shortcuts Area */
body.light-mode .ssd-shortcuts-container {
    background-color: var(--ssd-bg) !important;
    border: none !important;
}

/* 8. Notice & Alert Boxes overrides */
body.light-mode #ssd-manual-limit-notice {
    background: var(--ssd-box-bg) !important;
    border: none !important;
}
body.light-mode #ssd-manual-limit-notice div {
    color: var(--ssd-text) !important;
}
body.light-mode #ssd-manual-msg-container {
    background: rgba(239, 68, 68, 0.05) !important;
    border: none !important;
}

/* =========================================================
   LEADERBOARD (RANK LIST) & FILTERS - LIGHT MODE STYLES
   Location: For tab-study-room.php components
   ========================================================= */

/* Main Rankings Container */
body.light-mode .ssd-rankings-wrapper-pro {
    background-color: var(--ssd-card) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px !important;
    border-radius: 16px !important;
}

/* Header Section inside Rankings */
body.light-mode .rank-header-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    border-bottom: none !important;
}

body.light-mode .rank-header-title {
    color: var(--ssd-text) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Filter Bar Container */
body.light-mode .ssd-filter-bar {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Individual Filter Dropdown Wrapper */
body.light-mode .ssd-custom-filter-wrap {
    position: relative !important;
}

/* Filter Trigger Button (Today, Last 7 Days, etc.) */
body.light-mode .ssd-custom-filter-wrap .filter-trigger {
    background-color: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.2s ease !important;
}

body.light-mode .ssd-custom-filter-wrap .filter-trigger:hover {
    background-color: #d1d5db !important; /* Hover වලදී බෝඩර් වෙනුවට ළා අළු පැහැය තද වේ */
}

/* Filter Options Dropdown Menu */
body.light-mode .ssd-custom-filter-wrap .filter-options-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 6px !important;
    background-color: var(--ssd-card) !important;
    min-width: 160px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; /* මෙනුව කැපී පෙනීමට පමණක් සියුම් සෙවනැල්ලක් */
    border: none !important;
    z-index: 100 !important;
    overflow: hidden !important;
}

/* Individual Option Item */
body.light-mode .ssd-custom-filter-wrap .filter-opt {
    padding: 10px 16px !important;
    color: var(--ssd-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

body.light-mode .ssd-custom-filter-wrap .filter-opt:hover {
    background-color: #eff6ff !important;
    color: var(--ssd-primary) !important;
}

/* Navigation Tabs (Students / Groups) */
body.light-mode .ssd-rank-tabs-pro {
    background-color: var(--ssd-box-bg) !important;
    padding: 4px !important;
    border-radius: 12px !important;
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

body.light-mode .rank-tab-btn-pro {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: var(--ssd-text-muted) !important;
    padding: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

body.light-mode .rank-tab-btn-pro:hover {
    color: var(--ssd-text) !important;
}

/* Active Tab Button (Selected) */
body.light-mode .rank-tab-btn-pro.active {
    background-color: var(--ssd-card) !important;
    color: var(--ssd-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Leaderboard Content & Loading States */
body.light-mode .ssd-rank-content-pro {
    color: var(--ssd-text) !important;
}

body.light-mode .ssd-rank-content-pro div[style*="color:#64748b"] {
    color: var(--ssd-text-muted) !important;
}

body.light-mode .ssd-rank-content-pro .fa-circle-notch {
    color: var(--ssd-primary) !important;
}

/* =========================================================
   LEADERBOARD (RANK LIST) NAME & TEXT VISIBILITY FIX
   ========================================================= */

/* 1. Fix Names & Headings */
body.light-mode .ssd-rank-content-pro h1,
body.light-mode .ssd-rank-content-pro h2,
body.light-mode .ssd-rank-content-pro h3,
body.light-mode .ssd-rank-content-pro h4,
body.light-mode .ssd-rank-content-pro h5,
body.light-mode .ssd-rank-content-pro .student-name,
body.light-mode .ssd-rank-content-pro .ssd-name-tag,
body.light-mode .ssd-rank-content-pro .ssd-user-name {
    color: var(--ssd-text) !important; /* නම් තද කළු/අළු පැහැයට හැරවීම */
    text-shadow: none !important; /* Dark mode එකේ ඇති glow ඉවත් කිරීම */
}

/* 2. Force Override Hardcoded White Colors */
/* (කේතයේ කොතැනක හෝ color: white ලෙස දී ඇත්නම් එය බලහත්කාරයෙන් වෙනස් කරයි) */
body.light-mode .ssd-rank-content-pro *[style*="color: white"],
body.light-mode .ssd-rank-content-pro *[style*="color: #fff"],
body.light-mode .ssd-rank-content-pro *[style*="color:#fff"],
body.light-mode .ssd-rank-content-pro *[style*="color: #ffffff"],
body.light-mode .ssd-rank-content-pro *[style*="color:#ffffff"] {
    color: var(--ssd-text) !important;
}

/* 3. Subtitles & Other Information (e.g., Study Hours, School) */
body.light-mode .ssd-rank-content-pro p,
body.light-mode .ssd-rank-content-pro .ssd-user-school,
body.light-mode .ssd-rank-content-pro .ssd-hours-text,
body.light-mode .ssd-rank-content-pro span {
    color: var(--ssd-text-muted) !important; /* අනෙකුත් විස්තර ළා අළු පැහැ කිරීම */
}

/* 4. Leaderboard Card Background Setup (කාඩ්පත් පැහැදිලිව පෙන්වීමට) */
body.light-mode .ssd-rank-content-pro .ssd-rank-item,
body.light-mode .ssd-rank-content-pro .ssd-leaderboard-card,
body.light-mode .ssd-rank-content-pro .ssd-user-card {
    background-color: var(--ssd-box-bg) !important; /* පසුබිම ළා අළු පැහැ කිරීම */
    border: none !important;
    box-shadow: none !important;
}

/* Encourage Button Icon Color Fix (අවශ්‍ය නම් පමණි) */
body.light-mode .ssd-rank-content-pro .ssd-encourage-badge i {
    color: var(--ssd-text-muted) !important;
}
body.light-mode .ssd-rank-content-pro .ssd-encourage-badge.active i,
body.light-mode .ssd-rank-content-pro .ssd-encourage-badge:hover i {
    color: var(--ssd-primary) !important;
}

/* =========================================================
   MY PROFILE LIGHT MODE FIXES (EXACT CLASSES MATCHED)
   ========================================================= */

/* 1. Profile Name & Username Colors */
body.light-mode .tutor-info h1 {
    color: var(--ssd-text) !important; /* ප්‍රධාන නම කළු/තද පැහැ කිරීම */
    text-shadow: none !important;
}
body.light-mode .tutor-username {
    color: var(--ssd-text-muted) !important; /* Username එක ළා අළු පැහැ කිරීම */
}

/* 2. Followers / Following Numbers (ඉලක්කම් තද පැහැ කිරීම) */
body.light-mode .tutor-follow-stats a.ssd-view-follows-btn strong {
    color: var(--ssd-text) !important;
    font-weight: 900 !important;
}

/* 3. Followers / Following Text Labels (අකුරු ළා අළු පැහැ කිරීම) */
body.light-mode .tutor-follow-stats a.ssd-view-follows-btn {
    color: var(--ssd-text-muted) !important;
}

/* 4. Dot Separator (මැද ඇති තිත) */
body.light-mode .tutor-follow-stats .dot-separator {
    color: var(--ssd-text-muted) !important;
}

/* 5. Bio Description Color */
body.light-mode .tutor-bio-short {
    color: var(--ssd-text-muted) !important;
}

/* =========================================================
   FOLLOW / MESSAGE / DASHBOARD BUTTONS ROUNDED FIX
   ========================================================= */

/* බොත්තම් සම්පූර්ණයෙන්ම රවුම් කිරීම (Pill Shape) */
body.light-mode .tutor-action-btn,
body.light-mode .tutor-actions .btn,
body.light-mode .tutor-actions a,
body.light-mode .tutor-actions button {
    border-radius: 30px !important; /* Dashboard බොත්තම් මෙන් රවුම් කරයි */
    padding: 10px 24px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

/* Hover කිරීමේදී අලංකාර වීම */
body.light-mode .tutor-action-btn:hover,
body.light-mode .tutor-actions .btn:hover,
body.light-mode .tutor-actions a:hover,
body.light-mode .tutor-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* 📜 System Colors & Constants */
        :root {
            --ssd-bg: #151A28;
            --ssd-card: #1C2338;
            --ssd-box-bg: #222d44;
            --ssd-border: #2d3b55;
            --ssd-primary: #3b82f6;
            --ssd-text: #f1f5f9;
            --ssd-text-muted: #94a3b8;
            --card-height: 52px; 
            --card-gap: 9px;     
        }

        /* ☀️ LIGHT MODE OVERRIDES ☀️ */
        body.light-mode {
            --ssd-bg: #f8fafc;          /* ලයිට් පසුබිම (Light Slate) */
            --ssd-card: #ffffff;        /* කාඩ්පත් සඳහා සුදු පැහැය */
            --ssd-box-bg: #f1f5f9;      /* රෑන්ක් අංක සහ හොවර් බැක්ග්‍රවුන්ඩ් */
            --ssd-border: #e2e8f0;      /* ලා පැහැති බෝඩර් */
            --ssd-text: #1e293b;        /* තද පැහැති අකුරු (Dark Slate) */
            --ssd-text-muted: #64748b;  /* උපසිරැසි සඳහා අළු පැහැය */
        }
        
        /* ලයිට් මෝඩ් එකේදී Podium කාඩ්පත්වල බැක්ග්‍රවුන්ඩ් ග්‍රේඩියන්ට් එක නිවැරදි කිරීම */
        body.light-mode .lb-row-app.podium-1 { background: linear-gradient(90deg, rgba(251,191,36,0.08) 0%, #ffffff 100%); }
        body.light-mode .lb-row-app.podium-2 { background: linear-gradient(90deg, rgba(148,163,184,0.08) 0%, #ffffff 100%); }
        body.light-mode .lb-row-app.podium-3 { background: linear-gradient(90deg, rgba(180,83,9,0.08) 0%, #ffffff 100%); }

        /* රෑන්ක් මාරු වන විට ලයිට් මෝඩ් එකට ගැළපෙන බැක්ග්‍රවුන්ඩ් එකක් ලබා දීම */
        body.light-mode .lb-row-app.rank-moving {
            background: #f8fafc !important;
        }

/* =========================================================
   MY PROFILE LIGHT MODE FULL COMPATIBILITY OVERRIDES
   ========================================================= */

body.light-mode .ssd-fs-modal-overlay {
    background: rgba(240, 242, 245, 0.8) !important;
}

body.light-mode .ssd-fs-modal-container {
    background: var(--ssd-bg, #f0f2f5) !important;
}

body.light-mode .ssd-fs-action-sticky-corner-row {
    background: var(--ssd-bg, #f0f2f5) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .ssd-sketch-fade-block {
    background: var(--ssd-card, #ffffff) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .block-title {
    color: var(--ssd-primary, #3b82f6) !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.light-mode .ssd-sketch-field label {
    color: var(--ssd-text-muted, #64748b) !important;
}

body.light-mode .ssd-sketch-field input,
body.light-mode .ssd-sketch-field textarea {
    background: var(--ssd-box-bg, #e4e6eb) !important;
    color: var(--ssd-text, #0f172a) !important;
}

/* Custom Select Dropdown Light Mode */
body.light-mode .ssd-custom-select-trigger {
    background: var(--ssd-box-bg, #e4e6eb) !important;
    color: var(--ssd-text, #0f172a) !important;
}

body.light-mode .ssd-custom-dropdown-list {
    background: var(--ssd-card, #ffffff) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .ssd-dropdown-option {
    color: var(--ssd-text, #0f172a) !important;
}

body.light-mode .ssd-dropdown-option:hover,
body.light-mode .ssd-dropdown-option.active {
    background: #eff6ff !important;
    color: var(--ssd-primary, #3b82f6) !important;
}

body.light-mode .sketch-message-action-dropdown-btn {
    background: var(--ssd-box-bg, #e4e6eb) !important;
    color: var(--ssd-text, #0f172a) !important;
}

body.light-mode .sketch-msg-absolute-dropdown-menu-list {
    background: var(--ssd-card, #ffffff) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .sketch-system-save-btn-node.disabled-state-grey {
    background: #cbd5e1 !important;
    color: #64748b !important;
}

body.light-mode .ssd-fs-close-btn-node {
    background: var(--ssd-box-bg, #e4e6eb) !important;
    color: var(--ssd-text, #0f172a) !important;
}

/* =========================================================
   🌟 STORY PLUS ICON BADGE ON PROFILE AVATAR 🌟
   ========================================================= */
.ssd-profile-story-plus-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: var(--ssd-primary, #2563eb);
    color: #ffffff;
    border-radius: 50%;
    border: 3px solid var(--ssd-bg, #151A28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    z-index: 25;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.ssd-profile-story-plus-btn:hover {
    transform: scale(1.15);
    background: #1d4ed8;
}

body.light-mode .ssd-profile-story-plus-btn {
    border-color: #ffffff !important;
}

/* =========================================================
   🌟 DESKTOP CENTER POPUP & MOBILE BOTTOM SHEET RESPONSIVE 🌟
   ========================================================= */

/* Backdrop Overlay */
.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    z-index: 100095 !important;
    display: none;
    justify-content: center;
    align-items: center;
}

/* Popup Box Base (Desktop View Layout) */
.ssd-fb-modal-box {
    background: var(--ssd-card, #1c2338) !important;
    width: 90%;
    max-width: 580px;
    max-height: 85vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    animation: ssdScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
    border: 1px solid var(--ssd-border, rgba(255,255,255,0.08));
}

@keyframes ssdScaleUp {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobile View Layout (Bottom Slide Sheet) */
@media (max-width: 768px) {
    .ssd-modal-overlay {
        align-items: flex-end !important;
    }
    .ssd-fb-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        height: 90vh !important;
        max-height: 90vh !important;
        border-radius: 24px 24px 0 0 !important;
        animation: ssdSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    @keyframes ssdSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* =========================================================
   ☀️ LIGHT MODE SPECIFIC FIXES FOR CREATE POST POPUP ☀️
   ========================================================= */

/* Header & Modal Background */
body.light-mode .ssd-fb-modal-box {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .ssd-fb-modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
}

body.light-mode .ssd-fb-modal-header h3 {
    color: #0f172a !important; /* Dark Text */
}

body.light-mode .ssd-modal-close-btn {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

body.light-mode .ssd-modal-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* User Info Row */
body.light-mode .ssd-fb-name {
    color: #0f172a !important;
}

/* Textarea Input */
body.light-mode .ssd-fb-textarea {
    color: #0f172a !important;
}

body.light-mode .ssd-fb-textarea::placeholder {
    color: #94a3b8 !important;
}

/* Add Media Placeholder Box */
body.light-mode .ssd-photo-placeholder-box {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
}

body.light-mode .ssd-placeholder-inner span {
    color: #475569 !important;
}

/* Add to Post List Styles */
body.light-mode .ssd-add-text {
    color: #64748b !important;
}

body.light-mode .ssd-list-item-style {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

body.light-mode .ssd-list-item-style:hover {
    background: #e2e8f0 !important;
}

body.light-mode .ssd-list-item-style span {
    color: #0f172a !important;
    font-weight: 600;
}

/* =========================================================
   🌟 PHOTO CONTEXT DROPDOWN MENUS 🌟
   ========================================================= */
.ssd-photo-dropdown-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ssd-card, #1c2338) !important;
    border-radius: 14px;
    padding: 6px;
    width: 170px;
    z-index: 100080 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--ssd-border, rgba(255, 255, 255, 0.1));
}

.ssd-photo-menu-item {
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ssd-text, #ffffff);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease;
}

.ssd-photo-menu-item i {
    font-size: 0.9rem;
    width: 16px;
}

.ssd-photo-menu-item:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--ssd-primary, #3b82f6) !important;
}

.ssd-photo-menu-item.text-danger {
    color: #ef4444 !important;
}

.ssd-photo-menu-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Light Mode Photo Dropdown Overrides */
body.light-mode .ssd-photo-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .ssd-photo-menu-item {
    color: #0f172a !important;
}

/* =========================================================
   ☀️ LIGHT MODE POST CAPTION & FEED TEXT DARK OVERRIDES ☀️
   ========================================================= */
body.light-mode .ssd-feed-grid-seamless,
body.light-mode .ssd-post-card,
body.light-mode .ssd-post-content,
body.light-mode .ssd-post-text,
body.light-mode .ssd-post-caption,
body.light-mode .ssd-post-body p {
    color: #0f172a !important; /* Dark Slate Text for Light Mode */
}

body.light-mode .ssd-post-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-mode .ssd-post-header .author-name {
    color: #0f172a !important;
}

body.light-mode .ssd-post-header .post-time {
    color: #64748b !important;
}