/* ========================================= 1. Reset & Base Layout ========================================= */ /* Apply this rule GLOBALLY */ :root { /* --- Light Mode Palette --- */ --lms-bg-app: #f3f4f6; --lms-bg-surface: #ffffff; --lms-bg-hover: #f9fafb; --lms-bg-active: #e5e7eb; --lms-border-color: #e5e7eb; --lms-text-primary: #1e293b; --lms-text-secondary: #475569; --lms-text-muted: #94a3b8; --lms-primary: #046bd2; --lms-primary-hover: #035ab3; --lms-primary-text: #ffffff; --lms-input-bg: #ffffff; --lms-input-border: #cbd5e1; --lms-badge-bg: #e0e7ff; --lms-badge-text: #3730a3; --lms-btn-danger-bg: #ef4444; --lms-btn-danger-text: #ffffff; --lms-accent: #EF5B0C; /* Brand Orange */ --lms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --lms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --lms-overlay-bg: rgba(0, 0, 0, 0.5); --lms-modal-padding: 24px; } body.dark-mode { /* --- Dark Mode Palette --- */ --lms-bg-app: #0f172a; --lms-bg-surface: #1e293b; --lms-bg-hover: #334155; --lms-bg-active: #475569; --lms-border-color: #334155; --lms-text-primary: #f1f5f9; --lms-text-secondary: #cbd5e1; --lms-text-muted: #94a3b8; --lms-primary: #60a5fa; --lms-primary-hover: #93c5fd; --lms-primary-text: #0f172a; --lms-input-bg: #0f172a; --lms-input-border: #475569; --lms-badge-bg: #1e3a8a; --lms-badge-text: #bfdbfe; --lms-btn-danger-bg: #991b1b; --lms-btn-danger-text: #fecaca; --lms-shadow-sm: none; --lms-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --lms-overlay-bg: rgba(0, 0, 0, 0.8); } /* Remove admin bar margin for non-admins without needing JS to touch the tag */ html:has(body:not(.wp-admin).lms-hide-admin-bar), html:has(body:not(.wp-admin).lms-spa-active) { margin-top: 0 !important; padding-top: 0 !important; overflow: hidden !important; /* Force no scrollbar on HTML */ height: 100% !important; } /* Fix for WP Admin Layout Spacing - Ensure full screen SPA feel */ body.lms-spa-active:not(.wp-admin) { overflow: hidden !important; /* Prevent body scroll behind the fixed app */ background-color: var(--lms-bg-app); margin: 0 !important; padding: 0 !important; height: 100% !important; } /* Hide WP Admin Bar & Menu on SPA Page */ body.lms-hide-admin-bar #wpadminbar { display: none !important; } /* Admin Bar Visibility controlled by settings (body classes) */ body.lms-admin-bar-hidden #wpadminbar { display: none !important; } body.lms-admin-bar-visible #wpadminbar { display: block !important; } .lms-spa-wrapper { /* Force Full Screen Overlay Strategy */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; z-index: 99990 !important; /* Sit below Admin Bar (99999) but above theme */ display: flex; background-color: var(--lms-bg-app); color: var(--lms-text-primary); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; line-height: 1.6; overflow: hidden; /* Main scroll is handled by inner content area */ margin: 0 !important; padding: 0 !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Handle Admin Bar Spacing for SPA Wrapper */ body.admin-bar .lms-spa-wrapper { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .lms-spa-wrapper { top: 46px !important; } } .lms-spa-wrapper *, .lms-spa-wrapper *::before, .lms-spa-wrapper *::after { box-sizing: border-box; } /* --- Global Heading Fix --- */ .lms-spa-wrapper h1, .lms-spa-wrapper h2, .lms-spa-wrapper h3, .lms-spa-wrapper h4, .lms-spa-wrapper h5, .lms-spa-wrapper h6 { color: var(--lms-text-primary); } /* --- UI Consistency Fixes --- */ a.lms-btn, a.lms-btn:hover, a.lms-btn:focus, a.lms-btn:active { text-decoration: none !important; box-shadow: none; } .lms-card { padding: 20px !important; } /* ========================================= 2. Sidebar & Navigation ========================================= */ .lms-spa-sidebar { width: 280px; background-color: var(--lms-bg-surface); border-right: 1px solid var(--lms-border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: all 0.3s ease; z-index: 50; } .lms-brand { height: 56px; display: flex; align-items: center; padding: 10px 24px; font-size: 1.25rem; font-weight: 800; color: var(--lms-text-primary); border-bottom: 1px solid var(--lms-border-color); } .lms-brand span { color: var(--lms-primary); margin-left: 2px; } .lms-brand-logo { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; /* Center the logo */ } .lms-brand-favicon { display: none; /* Hidden by default */ max-height: 32px; width: auto; } .lms-brand-text-full { display: flex; align-items: center; justify-content: center; } .lms-user-mini { padding: 24px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--lms-border-color); } .lms-user-mini img { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--lms-bg-app); } .lms-user-info strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--lms-text-primary); } .lms-user-info small { display: block; font-size: 0.75rem; color: var(--lms-text-secondary); margin-top: 2px; } .lms-logout-link { margin-left: auto; color: var(--lms-text-secondary); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 50%; transition: all 0.2s ease; background-color: transparent; text-decoration: none; } .lms-logout-link:hover { background-color: var(--lms-bg-hover); color: var(--lms-text-primary); border-color: transparent; } .lms-logout-link .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 1; color: inherit; } .lms-logout-link svg { width: 20px; height: 20px; fill: currentColor; display: block; } /* Fix Dashicons color inheritance for better visibility in themes */ .lms-spa-wrapper .dashicons:before { color: inherit; } .lms-menu { flex: 1; overflow-y: auto; padding: 24px 16px; } .lms-menu-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--lms-text-muted); letter-spacing: 0.05em; margin: 24px 12px 8px; } .lms-menu-label:first-child { margin-top: 0; } .lms-spa-wrapper .lms-spa-sidebar a.lms-spa-nav, .lms-spa-wrapper .lms-spa-sidebar a.lms-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: var(--lms-text-secondary); border-radius: 0.5rem; transition: all 0.2s ease; text-decoration: none; box-shadow: none; border: none; margin-bottom: 4px; } .lms-spa-wrapper .lms-spa-sidebar a.lms-spa-nav:hover { background-color: var(--lms-bg-hover); color: var(--lms-text-primary); } .lms-spa-wrapper .lms-spa-sidebar a.lms-spa-nav.active { background-color: var(--lms-primary); color: var(--lms-primary-text); font-weight: 600; } .lms-spa-wrapper .lms-spa-sidebar a.lms-spa-nav.active .dashicons { opacity: 1; color: inherit; } .lms-spa-wrapper .lms-spa-sidebar a.lms-spa-nav.active svg { opacity: 1; } .lms-spa-nav .dashicons { font-size: 20px; width: 20px; height: 20px; color: inherit; opacity: 0.8; } .lms-spa-nav svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.8; } /* --- Sidebar Collapsed State --- */ .lms-spa-sidebar.collapsed { width: 64px; } .lms-spa-sidebar.collapsed .lms-brand-logo, .lms-spa-sidebar.collapsed .lms-brand-text-full, /* Hides text logo */ .lms-spa-sidebar.collapsed .lms-menu-label, .lms-spa-sidebar.collapsed .lms-spa-nav span:not(.dashicons), .lms-spa-sidebar.collapsed .lms-menu-text, .lms-spa-sidebar.collapsed .lms-user-info, .lms-spa-sidebar.collapsed .lms-user-mini img { display: none; } .lms-spa-sidebar.collapsed .lms-spa-nav { justify-content: center; padding: 12px 0; } .lms-spa-sidebar.collapsed .lms-menu { padding: 24px 0; } .lms-spa-sidebar.collapsed .lms-brand { justify-content: center; padding: 0; } .lms-spa-sidebar.collapsed .lms-brand-favicon { display: block; } .lms-spa-sidebar.collapsed .lms-user-mini { justify-content: center; padding: 16px 0; } .lms-spa-sidebar.collapsed .lms-logout-link { margin-left: 0; } /* Increase icon size in collapsed state for better visibility */ .lms-spa-sidebar.collapsed .lms-spa-nav .dashicons { font-size: 24px; width: 24px; height: 24px; } .lms-spa-sidebar.collapsed .lms-spa-nav svg { width: 24px; height: 24px; } /* ========================================= 3. Main Content & Layout ========================================= */ .lms-spa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; /* Ensure main container doesn't scroll, only content area */ background-color: var(--lms-bg-app); } .lms-topbar { height: 56px; background-color: var(--lms-bg-surface); border-bottom: 1px solid var(--lms-border-color); display: flex; align-items: center; padding: 0 24px; gap: 16px; flex-shrink: 0; } /* Sidebar Toggle */ #lms-sidebar-toggle { background: none; border: none; cursor: pointer; color: var(--lms-text-secondary); font-size: 20px; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 4px; } #lms-sidebar-toggle:hover { background-color: var(--lms-bg-hover); color: var(--lms-text-primary); } /* User Dropdown in Topbar */ .lms-topbar-user { margin-left: auto; position: relative; cursor: pointer; } .lms-user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lms-border-color); transition: border-color 0.2s; } .lms-topbar-user:hover .lms-user-avatar { border-color: var(--lms-primary); } #lms-page-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--lms-text-primary); } .lms-content-area { flex: 1; overflow-y: auto; padding: 20px; width: 100%; margin: 0 auto; } .lms-col-span-2 { grid-column: span 2; } /* --- FIXED: Header Button Alignment --- */ .lms-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 15px; width: 100%; padding: 0; min-height: 44px; } .lms-view-header .lms-view-header-group { display: flex; align-items: center; gap: 15px; flex-grow: 1; /* Pushes other items to the right */ } /* Override the global h3 grow rule when it's inside a group */ .lms-view-header .lms-view-header-group h3 { flex-grow: 0; } .lms-view-header .lms-filters { display: flex; gap: 10px; } .lms-view-header h3, .lms-editor-header .lms-header-title-group { margin: 0; font-size: 24px; font-weight: 600; color: var(--lms-text-primary); flex-grow: 1; /* Pushes the actions to the right */ /* Add flex properties for inner items like back button */ display: flex; align-items: center; gap: 15px; } /* Container for header action buttons */ /* Ensure the button container goes to the far right */ .lms-view-actions, .lms-editor-header .lms-header-actions, .lms-view-header .lms-btn { display: flex; align-items: center; gap: 10px; margin-left: auto; /* CRITICAL: Forces alignment to the right */ height: 44px; } .lms-view-actions .lms-btn, .lms-editor-header .lms-header-actions .lms-btn, .lms-view-header > .lms-btn { height: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; font-size: 14px; font-weight: 500; } /* If a single button is used as an action, ensure it aligns right */ .lms-view-header > .lms-btn { margin-left: auto; } /* --- FIXED: Assignment Form Layout & Gap --- */ form#lms-create-assignment-form { margin-bottom: 0; } .lms-gap-bottom { margin-bottom: 32px; display: block; } /* ========================================= 4. Cards, Stats & Tables ========================================= */ .lms-card { background-color: var(--lms-bg-surface); border: 1px solid var(--lms-border-color); border-radius: 0.5rem; box-shadow: var(--lms-shadow-sm); padding: 24px; margin-bottom: 24px; color: var(--lms-text-primary); } .lms-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 32px; } .lms-stat-card { background: var(--lms-bg-surface); padding: 24px; border-radius: 0.5rem; border: 1px solid var(--lms-border-color); box-shadow: var(--lms-shadow-sm); display: flex; flex-direction: column; color: var(--lms-text-primary); } .lms-stat-value { font-size: 1.875rem; font-weight: 700; color: var(--lms-text-primary); margin-top: 8px; } .lms-stat-label { font-size: 0.875rem; color: var(--lms-text-secondary); font-weight: 500; } /* Tables */ .lms-table-wrapper { overflow-x: auto; border: 1px solid var(--lms-border-color); border-radius: 8px; min-height: 250px; } .lms-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; text-align: left; color: var(--lms-text-primary); background: var(--lms-bg-surface); } .lms-table td { overflow: visible; } /* Ensure dropdowns don't get clipped */ .lms-table thead th { background-color: var(--lms-bg-hover); color: var(--lms-text-secondary); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 12px 24px; border-bottom: 1px solid var(--lms-border-color); vertical-align: middle !important; } /* Global Actions Header Alignment */ .lms-table th:last-child, .lms-col-actions { text-align: center !important; } .lms-table tbody td { padding: 16px 24px; border-bottom: 1px solid var(--lms-border-color); color: var(--lms-text-primary); vertical-align: middle; position: relative; } .lms-table tbody tr:last-child td { border-bottom: none; } .lms-table tbody tr:hover td { background-color: var(--lms-bg-hover); } .lms-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background-color: var(--lms-badge-bg); color: var(--lms-badge-text); } .lms-badge-green { background-color: rgba(16, 185, 129, 0.15); color: #10b981; } .lms-badge-red { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; } .lms-badge-yellow { background-color: rgba(245, 158, 11, 0.15); color: #f59e0b; } /* ========================================= 5. Buttons & Actions & Dropdowns ========================================= */ .lms-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid var(--lms-border-color); cursor: pointer; text-decoration: none; line-height: 1.25rem; transition: all 0.2s; background-color: var(--lms-bg-surface); color: var(--lms-text-primary); } .lms-btn:focus { /* Remove the default browser outline on focus for a cleaner look */ outline: none; } .lms-btn:focus-visible { /* Apply a custom, theme-consistent focus ring ONLY for keyboard navigation. This is the modern fix for the "sticky hover" issue on mouse click. */ outline: 2px solid var(--lms-primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(4, 107, 210, 0.2); } .lms-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Table Action Buttons (Blue/Orange Logic) */ .lms-table .lms-btn { border: 1px solid transparent; transition: all 0.2s ease; } /* Single or First Button: Blue -> Orange */ .lms-table .lms-btn:first-child { background-color: var(--lms-primary); color: #fff; border-color: var(--lms-primary); } .lms-table .lms-btn:first-child:hover { background-color: var(--lms-accent); border-color: var(--lms-accent); } /* Second Button: Orange -> Blue */ .lms-table .lms-btn:nth-child(2) { background-color: var(--lms-accent); color: #fff; border-color: var(--lms-accent); } .lms-table .lms-btn:nth-child(2):hover { background-color: var(--lms-primary); border-color: var(--lms-primary); } .lms-btn-primary { background-color: var(--lms-primary); border-color: var(--lms-primary); color: var(--lms-primary-text); } .lms-btn-primary:hover { background-color: var(--lms-primary-hover); border-color: var(--lms-primary-hover); color: var(--lms-primary-text); } .lms-btn-secondary { background-color: var(--lms-bg-surface); border-color: var(--lms-border-color); color: var(--lms-text-primary); } .lms-btn-secondary:hover { background-color: var(--lms-bg-hover); border-color: var(--lms-text-secondary); } .lms-btn-danger { background-color: var(--lms-btn-danger-bg); border-color: var(--lms-btn-danger-bg); color: var(--lms-btn-danger-text); } .lms-btn-danger:hover { filter: brightness(110%); } .lms-btn-mini { padding: 0.25rem 0.6rem; font-size: 0.75rem; } /* --- Specific Button Overrides (Moved from PHP) --- */ /* --- Dropdown Styles (Moved from lms-batch.js) --- */ .lms-action-dropdown { display: none; background-color: var(--lms-bg-surface); border: 1px solid var(--lms-border-color); border-radius: 4px; box-shadow: var(--lms-shadow-md); z-index: 100005; /* High z-index to sit above modals */ min-width: 140px; text-align: left; padding: 5px 0; } .lms-action-dropdown.active { display: block; } .lms-action-dropdown button, .lms-action-dropdown a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: none; text-align: left; cursor: pointer; font-size: 13px; color: var(--lms-text-primary); transition: background 0.2s; text-decoration: none !important; box-sizing: border-box; font-family: inherit; } .lms-action-dropdown button svg, .lms-action-dropdown a svg { width: 20px; height: 20px; fill: currentColor; } .lms-action-dropdown button:hover, .lms-action-dropdown a:hover { background: var(--lms-bg-hover); color: var(--lms-text-primary); } .lms-dropdown-divider { height: 1px; background: var(--lms-border-color); margin: 4px 0; } /* Dropdown Toggle Button */ .lms-action-toggle { background: transparent; border: none; cursor: pointer; padding: 6px; color: var(--lms-text-secondary); display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s; } .lms-action-toggle:hover { background-color: var(--lms-bg-hover); color: var(--lms-text-primary); } /* Dropdowns Fixed */ .lms-actions-cell { text-align: right; overflow: visible !important; position: relative; } /* For danger actions inside a dropdown */ .lms-action-dropdown .lms-action-danger { color: var(--lms-btn-danger-bg); } .lms-action-dropdown .lms-action-danger:hover { color: var(--lms-btn-danger-text); background-color: var(--lms-btn-danger-bg); } /* ========================================= 6. Forms, Inputs & Select2 ========================================= */ .lms-form-group { margin-bottom: 24px; } .lms-form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--lms-text-primary) !important; } .lms-form-description { color: var(--lms-text-secondary); font-size: 0.85rem; margin-top: 4px; } .lms-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select { width: 100%; padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; background-color: var(--lms-input-bg); border: 1px solid var(--lms-input-border); color: var(--lms-text-primary); transition: border-color 0.2s, box-shadow 0.2s; } .lms-input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--lms-primary); box-shadow: 0 0 0 3px rgba(4, 107, 210, 0.15); } .lms-input::placeholder { color: var(--lms-text-muted); } .lms-input::placeholder { color: var(--lms-text-muted); } /* For disabled readonly inputs */ .lms-input[disabled][readonly], input[type="text"][disabled][readonly] { background: var(--lms-bg-hover) !important; /* Use !important to override other specific input styles */ color: var(--lms-text-secondary) !important; cursor: not-allowed; } /* --- NEW: Select2 General Styling & Vertical Alignment Fix --- */ /* Ensure Select2 sits above modals and handles width correctly */ .select2-container { z-index: 100050 !important; width: 100% !important; } /* 1. Main Input Container */ .select2-container .select2-selection--single, .select2-container--default .select2-selection--single { height: 45px !important; /* Matches .lms-input height */ border-radius: 6px !important; border: 1px solid var(--lms-input-border) !important; background-color: var(--lms-input-bg) !important; background-image: none !important; /* Remove theme gradients */ display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* 2. Text Content Alignment */ .select2-container .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal !important; padding-left: 14px !important; padding-right: 30px !important; color: var(--lms-text-primary) !important; display: block !important; margin-top: 0 !important; } /* 3. Arrow Container - Force Full Height */ .select2-container .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 0 !important; width: 30px !important; position: absolute !important; background: transparent !important; border: none !important; } /* 4. REMOVE DOUBLE ARROWS (Theme Conflicts) */ .select2-container .select2-selection--single .select2-selection__arrow::after, .select2-container .select2-selection--single .select2-selection__arrow::before, .select2-container .select2-selection--single::after, .select2-container .select2-selection--single::before, .select2-container--default .select2-selection--single .select2-selection__arrow::after, .select2-container--default .select2-selection--single::after { display: none !important; content: none !important; } /* 5. Restore & Center Default Arrow ( tag) */ .select2-container .select2-selection--single .select2-selection__arrow b, .select2-container--default .select2-selection--single .select2-selection__arrow b { display: block !important; border-color: var(--lms-text-secondary) transparent transparent transparent !important; border-style: solid !important; border-width: 5px 4px 0 4px !important; height: 0 !important; width: 0 !important; /* User Specific Fix via Inspect Element */ position: absolute !important; top: 100% !important; transform: none !important; } /* Select2 Dark Mode Support */ body.dark-mode .select2-container--default .select2-selection--single { background-color: var(--lms-input-bg); border-color: var(--lms-input-border); } body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--lms-text-primary); } body.dark-mode .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--lms-text-muted); } body.dark-mode .select2-dropdown { background-color: var(--lms-bg-surface); border-color: var(--lms-input-border); color: var(--lms-text-primary); } body.dark-mode .select2-search--dropdown .select2-search__field { background-color: var(--lms-bg-app); border-color: var(--lms-input-border); color: var(--lms-text-primary); } body.dark-mode .select2-container .select2-results__option--highlighted[aria-selected] { background-color: var(--lms-primary); color: var(--lms-primary-text); } body.dark-mode .select2-container .select2-results__option[aria-selected=true] { background-color: var(--lms-bg-active); } body.dark-mode .select2-container .select2-selection--multiple .select2-selection__choice { background-color: var(--lms-bg-hover); border-color: var(--lms-border-color); color: var(--lms-text-primary); } body.dark-mode .select2-container .select2-selection--multiple .select2-selection__choice__remove { color: var(--lms-text-secondary); border-right-color: var(--lms-border-color); } body.dark-mode .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover { background-color: var(--lms-btn-danger-bg); color: #fff; } /* MODAL FIXES */ .lms-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--lms-overlay-bg); z-index: 9999; align-items: flex-start; justify-content: center; padding: 50px 20px 20px; overflow-y: auto; } .lms-modal.open, .lms-modal[style*="display: block"] { display: flex !important; } .lms-modal-content { background-color: var(--lms-bg-surface); color: var(--lms-text-primary); box-shadow: var(--lms-shadow-md); border-radius: 8px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; position: relative; padding: var(--lms-modal-padding); border: 1px solid var(--lms-border-color); } .lms-modal-header { border-bottom: 1px solid var(--lms-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--lms-bg-surface); /* Adjust for parent padding */ margin: calc(var(--lms-modal-padding) * -1) calc(var(--lms-modal-padding) * -1) var(--lms-modal-padding) calc(var(--lms-modal-padding) * -1); padding: 16px var(--lms-modal-padding); } .lms-modal-header h3 { margin: 0; font-size: 1.2rem; color: var(--lms-text-primary); } .lms-modal-body { padding: 0; /* Padding is now on parent */ } .lms-modal-footer { border-top: 1px solid var(--lms-border-color); display: flex; justify-content: flex-start; gap: 12px; background: var(--lms-bg-hover); /* Adjust for parent padding */ margin: var(--lms-modal-padding) calc(var(--lms-modal-padding) * -1) calc(var(--lms-modal-padding) * -1) calc(var(--lms-modal-padding) * -1); padding: 16px var(--lms-modal-padding); } .lms-modal-close { color: var(--lms-text-secondary); background: none; border: none; font-size: 30px; cursor: pointer; line-height: 1; position: absolute; /* --- FIXED: Consistent Top-Right Position --- */ top: 16px; right: 16px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .lms-modal-close:hover { color: var(--lms-btn-danger-bg); background: transparent !important; } /* --- Flatpickr Theme Fixes --- */ /* Force time inputs to be transparent to inherit Dark Theme background */ .flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { background: transparent !important; color: #f1f5f9 !important; /* Force light text color for dark theme */ border: none !important; box-shadow: none !important; } /* Ensure readonly inputs match theme */ .lms-input[readonly], input[readonly].flatpickr-input { background-color: var(--lms-input-bg) !important; color: var(--lms-text-primary) !important; cursor: pointer; } /* ========================================= 8. Profile & Misc ========================================= */ /* Utility Helpers */ .lms-role-badge { background: var(--lms-bg-hover); color: var(--lms-text-secondary); } /* Scrollbars - Hide globally as requested */ .lms-spa-wrapper *, .lms-modal, .lms-modal * { -ms-overflow-style: none; scrollbar-width: none; } .lms-spa-wrapper *::-webkit-scrollbar, .lms-modal::-webkit-scrollbar, .lms-modal *::-webkit-scrollbar { display: none; } /* Toggle Switch Update */ .lms-slider { background-color: var(--lms-input-border); } .lms-slider:before { background-color: white; } input:checked + .lms-slider { background-color: var(--lms-primary); } /* Modal Z-Index Fix */ .lms-modal { z-index: 100000; } /* ========================================= 9. Mobile Responsiveness ========================================= */ @media (max-width: 900px) { .lms-modern-sidebar { position: absolute; top: 0; left: 0; /* Align left */ right: auto; /* Reset right */ height: 100%; width: 300px; transform: translateX(-100%); /* Slide out to left */ z-index: 15; background: var(--lms-bg-surface); border-right: 1px solid var(--lms-border-color); } .lms-modern-player.sidebar-collapsed .lms-modern-sidebar { /* Reset desktop collapse style */ width: 300px; } .lms-modern-player.sidebar-mobile-open .lms-modern-sidebar { transform: translateX(0); /* Slide in */ } .lms-modern-player.sidebar-mobile-open .lms-modern-overlay { display: block; } .lms-sidebar-header-mobile { display: flex; } .lms-modern-header { padding: 0 12px; } .lms-header-left { gap: 10px; } .lms-modern-course-title { font-size: 0.9rem; max-width: 150px; } .toggle-text { display: none; } .lms-progress-label { display: none; } .lms-modern-footer { padding: 0 16px; height: 60px; } .lms-nav-btn { padding: 8px 12px; font-size: 0.8rem; } .lms-nav-prev { display: none; } } @media (max-width: 768px) { .lms-spa-wrapper { flex-direction: column; overflow: auto; } .lms-spa-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--lms-border-color); } .lms-menu { display: flex; overflow-x: auto; padding: 12px; gap: 8px; } .lms-user-mini { display: none; } .lms-brand { border-bottom: none; } .lms-content-area { padding: 16px; } .lms-menu-label { display: none; } .lms-spa-nav { padding: 8px 12px; white-space: nowrap; } .lms-grid-3, .lms-grid-4 { grid-template-columns: repeat(2, 1fr); } .lms-view-header { flex-direction: column; align-items: flex-start; } .lms-view-actions { width: 100%; justify-content: flex-start; } } @media (max-width: 500px) { .lms-grid-2, .lms-grid-3, .lms-grid-4 { grid-template-columns: 1fr; } } /* ========================================= 10. View Specific Styles (Moved from PHP) ========================================= */ /* Generic Table Columns */ .lms-col-title { width: 25%; min-width: 200px; } .lms-col-stat { width: 70px; text-align: center; padding-left: 4px !important; padding-right: 4px !important; font-size: 0.9em; } .lms-col-stat-header { width: 140px; text-align: center; border-bottom: 1px solid var(--lms-border-color); white-space: nowrap; } .lms-id-cell { width: 50px; } .lms-col-price { width: 100px; } .lms-col-date { width: 110px; white-space: nowrap; } .lms-status-cell { width: 90px; } .lms-actions-cell { width: auto; min-width: 80px; text-align: center; } @media (max-width: 768px) { .lms-grid-2 { grid-template-columns: 1fr; } } /* Spinner */ .lms-spinner { border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 3px solid var(--lms-primary); width: 24px; height: 24px; animation: lms-spin 1s linear infinite; margin: 0 auto; } @keyframes lms-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================= 11. WordPress Core Fixes ========================================= */ /* Hides elements that should only be visible if JS is enabled, like the WP Editor toolbar before init */ .hide-if-no-js { display: none !important; } /* --- Custom Tooltip (Collapsed Sidebar) --- */ .lms-custom-tooltip { position: fixed; z-index: 100010; /* Above modals */ background: #1e293b; /* Dark slate background */ color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: none; /* Explicitly no border */ } /* --- Batch Module Specifics --- */ .lms-batch-stat-col { width: 70px; padding-left: 4px !important; padding-right: 4px !important; text-align: center; } .lms-batch-stat-header { width: 140px; text-align: center; border-bottom: 1px solid var(--lms-border-color); white-space: nowrap; } /* --- Profile Module Specifics --- */ .lms-form-actions { margin-top: 30px; display: flex; align-items: center; } #lms-profile-message { margin-left: 15px; font-weight: 500; }