/**
* ============================================================================
* SkillsPassport - GLOBAL STYLESHEET
* ============================================================================
*
* Version: 1.0.0
* Last Updated: 2025
*
* A comprehensive design system for the SkillsPassport platform.
* Covers: Career Guidance, Pre-Selection Tool, Job Seeker Portal, Employer Portal
*
* USAGE IN MOODLE:
* $PAGE->requires->css(new moodle_url('/customcss/skillspassport.css'));
*
* DEPENDENCIES:
* - Google Fonts: Open Sans (300, 400, 500, 600, 700)
* - Font Awesome 6.x
*
* Add to your HTML :
*
*
*
* ============================================================================
* TABLE OF CONTENTS
* ============================================================================
*
* 1. CSS VARIABLES (Design Tokens)
* 2. BASE STYLES & RESET
* 3. TYPOGRAPHY
* 4. LAYOUT COMPONENTS
* 4.1 Header
* 4.2 Navigation
* 4.3 Sidebar
* 4.4 Main Content
* 4.5 Footer
* 5. CARD COMPONENTS
* 6. FORM ELEMENTS
* 6.1 Inputs & Selects
* 6.2 Checkboxes & Radios
* 6.3 File Upload
* 6.4 Form Layout
* 7. BUTTONS
* 8. MODALS
* 9. ALERTS & NOTIFICATIONS
* 10. BADGES & TAGS
* 11. TABLES
* 12. PROGRESS & STEPPERS
* 13. DOCUMENT PREVIEWS
* 14. ACTION ICONS
* 15. UTILITIES
* 16. ANIMATIONS
* 17. RESPONSIVE BREAKPOINTS
*
* ============================================================================
*/
/* ============================================================================
1. CSS VARIABLES (Design Tokens)
============================================================================ */
:root {
/* -------------------------
Brand Colors
------------------------- */
--sp-primary: #B91C1C;
--sp-primary-dark: #991B1B;
--sp-primary-light: #DC2626;
--sp-primary-pale: #FEF2F2;
/* -------------------------
Accent Colors
------------------------- */
--sp-accent-mint: #E8F5E9;
--sp-accent-mint-dark: #C8E6C9;
--sp-accent-green: #4CAF50;
/* -------------------------
Background Colors
------------------------- */
--sp-bg-page: #f5f5f5;
--sp-bg-white: #ffffff;
--sp-bg-light: #fafafa;
--sp-bg-dark: #2d2d2d;
/* -------------------------
Header & Navigation
------------------------- */
--sp-header-bg: #2d2d2d;
--sp-header-text: #ffffff;
--sp-nav-bg: #f8f8f8;
--sp-nav-border: #e0e0e0;
/* -------------------------
Text Colors
------------------------- */
--sp-text-primary: #333333;
--sp-text-secondary: #666666;
--sp-text-muted: #999999;
--sp-text-light: #cccccc;
--sp-text-white: #ffffff;
/* -------------------------
Border Colors
------------------------- */
--sp-border: #e0e0e0;
--sp-border-light: #f0f0f0;
--sp-border-dark: #cccccc;
--sp-border-focus: #B91C1C;
/* -------------------------
Semantic Colors
------------------------- */
--sp-success: #4CAF50;
--sp-success-light: #E8F5E9;
--sp-success-dark: #388E3C;
--sp-warning: #FF9800;
--sp-warning-light: #FFF3E0;
--sp-warning-dark: #F57C00;
--sp-error: #f44336;
--sp-error-light: #FFEBEE;
--sp-error-dark: #D32F2F;
--sp-info: #2196F3;
--sp-info-light: #E3F2FD;
--sp-info-dark: #1976D2;
/* -------------------------
Spacing Scale (Mobile-First - Compact)
------------------------- */
--sp-space-0: 0;
--sp-space-xs: 2px;
--sp-space-sm: 4px;
--sp-space-md: 8px;
--sp-space-lg: 12px;
--sp-space-xl: 16px;
--sp-space-2xl: 20px;
--sp-space-3xl: 24px;
/* -------------------------
Border Radius
------------------------- */
--sp-radius-none: 0;
--sp-radius-sm: 4px;
--sp-radius-md: 8px;
--sp-radius-lg: 12px;
--sp-radius-xl: 16px;
--sp-radius-full: 9999px;
/* -------------------------
Box Shadows
------------------------- */
--sp-shadow-none: none;
--sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--sp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--sp-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
--sp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
/* -------------------------
Typography
------------------------- */
--sp-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--sp-font-size-xs: 0.75rem;
/* 12px */
--sp-font-size-sm: 0.85rem;
/* ~14px */
--sp-font-size-base: 0.95rem;
/* ~15px */
--sp-font-size-md: 1rem;
/* 16px */
--sp-font-size-lg: 1.125rem;
/* 18px */
--sp-font-size-xl: 1.25rem;
/* 20px */
--sp-font-size-2xl: 1.5rem;
/* 24px */
--sp-font-size-3xl: 2rem;
/* 32px */
--sp-font-weight-light: 300;
--sp-font-weight-normal: 400;
--sp-font-weight-medium: 500;
--sp-font-weight-semibold: 600;
--sp-font-weight-bold: 700;
--sp-line-height-tight: 1.25;
--sp-line-height-normal: 1.5;
--sp-line-height-relaxed: 1.75;
/* -------------------------
Transitions
------------------------- */
--sp-transition-fast: 0.15s ease;
--sp-transition-normal: 0.2s ease;
--sp-transition-slow: 0.3s ease;
/* -------------------------
Z-Index Scale
------------------------- */
--sp-z-dropdown: 100;
--sp-z-sticky: 200;
--sp-z-fixed: 300;
--sp-z-modal-backdrop: 1900;
--sp-z-modal: 2000;
--sp-z-popover: 2100;
--sp-z-tooltip: 2200;
}
/* ============================================================================
2. BASE STYLES & RESET
============================================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--sp-font-family);
font-size: 14px;
font-weight: var(--sp-font-weight-normal);
line-height: var(--sp-line-height-normal);
color: var(--sp-text-primary);
background-color: var(--sp-bg-page);
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--sp-primary);
text-decoration: none;
transition: color var(--sp-transition-fast);
}
a:hover {
color: var(--sp-primary-dark);
text-decoration: underline;
}
/* ============================================================================
3. TYPOGRAPHY
============================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: var(--sp-font-weight-semibold);
line-height: var(--sp-line-height-tight);
color: var(--sp-text-primary);
margin-bottom: var(--sp-space-sm);
}
h1 {
font-size: var(--sp-font-size-3xl);
}
h2 {
font-size: var(--sp-font-size-2xl);
}
h3 {
font-size: var(--sp-font-size-xl);
}
h4 {
font-size: var(--sp-font-size-lg);
}
h5 {
font-size: var(--sp-font-size-md);
}
h6 {
font-size: var(--sp-font-size-base);
}
p {
margin-bottom: var(--sp-space-md);
}
.sp-text-primary {
color: var(--sp-text-primary);
}
.sp-text-secondary {
color: var(--sp-text-secondary);
}
.sp-text-muted {
color: var(--sp-text-muted);
}
.sp-text-success {
color: var(--sp-success);
}
.sp-text-warning {
color: var(--sp-warning);
}
.sp-text-error {
color: var(--sp-error);
}
.sp-text-info {
color: var(--sp-info);
}
/* ============================================================================
4. LAYOUT COMPONENTS
============================================================================ */
/* -----------------------------------------------------------------------------
4.1 Header
----------------------------------------------------------------------------- */
.sp-header {
background-color: var(--sp-header-bg);
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: var(--sp-z-sticky);
}
.sp-header-brand {
display: flex;
align-items: center;
gap: 10px;
}
.sp-logo {
width: 36px;
height: 36px;
background: var(--sp-bg-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.sp-logo img,
.sp-logo svg {
width: 28px;
height: 28px;
}
.sp-header-title {
font-size: 1.1rem;
font-weight: var(--sp-font-weight-medium);
color: var(--sp-header-text);
}
.sp-header-subtitle {
font-size: var(--sp-font-size-xs);
color: var(--sp-text-muted);
margin-top: 1px;
}
.sp-header-user {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.sp-header-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sp-text-muted);
display: flex;
align-items: center;
justify-content: center;
color: var(--sp-text-white);
font-size: 0.85rem;
overflow: hidden;
}
.sp-header-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-help-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #3b82f6;
color: #fff;
border-radius: 50%;
cursor: pointer;
margin-right: 15px;
transition: all var(--sp-transition-normal);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
font-size: 0.9rem;
}
.sp-help-trigger:hover {
transform: scale(1.1);
background: #2563eb;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
/* -----------------------------------------------------------------------------
4.1.2 Notification Bell (Premium - Dark Header Compatible)
----------------------------------------------------------------------------- */
.sp-notification-bell {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: 12px;
border-radius: 50%;
cursor: pointer;
position: relative;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #f8fafc;
backdrop-filter: blur(4px);
}
.sp-notification-bell:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.sp-notification-bell:hover i {
animation: bell-wiggle 0.5s ease-in-out;
}
.sp-notification-bell.has-unread {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
.sp-notification-badge {
position: absolute;
top: -2px;
right: -2px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 2px solid #1e293b;
/* Match dark header for cutout effect */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
70% {
box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
@keyframes bell-wiggle {
0% {
transform: rotate(0);
}
15% {
transform: rotate(5deg);
}
30% {
transform: rotate(-5deg);
}
45% {
transform: rotate(3deg);
}
60% {
transform: rotate(-3deg);
}
75% {
transform: rotate(1deg);
}
100% {
transform: rotate(0);
}
}
/* Comprehensive Help Modal Styles */
/* ============================================================================
NEW STATE-OF-THE-ART HELP MODAL
============================================================================ */
/* 1. Modal Container & Layout
----------------------------------------------------------------------------- */
.sp-help-modal-new {
width: 90vw;
height: 90vh;
max-width: 1200px;
max-height: 850px;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: #fff;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
/* Modern Font */
}
.sp-help-body-container {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
/* For mobile absolute positioning of sidebar */
}
/* 2. Header (Blue Gradient)
----------------------------------------------------------------------------- */
.sp-help-header-bar {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 20;
}
.sp-help-header-left {
display: flex;
align-items: center;
gap: 16px;
}
.sp-help-icon-circle {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
backdrop-filter: blur(4px);
}
.sp-help-header-text h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #fff;
line-height: 1.1;
}
.sp-help-header-text span {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.sp-help-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.sp-help-close-btn,
.sp-help-mobile-toggle {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 1.2rem;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.sp-help-close-btn:hover,
.sp-help-mobile-toggle:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.sp-help-mobile-toggle {
display: none;
/* Hidden on Desktop */
}
.sp-help-mobile-toggle.active {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
/* 3. Sidebar (Desktop & Mobile)
----------------------------------------------------------------------------- */
.sp-help-sidebar-new {
width: 280px;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.sp-help-sidebar-inner {
padding: 20px 0;
height: 100%;
overflow-y: auto;
}
.sp-help-nav-header {
padding: 0 24px 12px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #94a3b8;
}
.sp-help-nav-btn {
width: 100%;
background: transparent;
border: none;
padding: 14px 24px;
text-align: left;
font-size: 0.95rem;
color: #475569;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.sp-help-nav-btn:hover {
background: #f1f5f9;
color: #1e293b;
padding-left: 28px;
/* Slide effect */
}
.sp-help-nav-btn.active {
background: #eff6ff;
color: #2563eb;
border-left-color: #2563eb;
font-weight: 600;
}
.sp-help-nav-btn i {
font-size: 0.8rem;
opacity: 0.6;
}
/* 4. Content Area
----------------------------------------------------------------------------- */
.sp-help-content-new {
flex: 1;
padding: 40px;
overflow-y: auto;
background: #fff;
scroll-behavior: smooth;
position: relative;
}
.sp-help-section {
display: none;
animation: fadeInContent 0.4s ease-out;
}
.sp-help-section.active {
display: block;
}
@keyframes fadeInContent {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 5. Responsive Logic (The Core Request)
----------------------------------------------------------------------------- */
@media (max-width: 991px) {
/* Tablet/Mobile Breakpoint */
.sp-help-modal-new {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
border-radius: 0;
}
.sp-help-mobile-toggle {
display: flex;
/* Show Hamburger */
}
.sp-help-sidebar-new {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
transform: translateX(-100%);
/* Hidden by default */
border-right: none;
padding-top: 10px;
}
.sp-help-sidebar-new.mobile-visible {
transform: translateX(0);
/* Slide in */
}
.sp-help-content-new {
padding: 24px 16px;
/* Less padding on mobile */
}
}
@keyframes sp-help-fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Help Content Typography */
.sp-help-heading {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid #f1f5f9;
display: flex;
align-items: center;
gap: 12px;
}
.sp-help-heading::before {
content: '';
width: 4px;
height: 24px;
background: #3b82f6;
border-radius: 2px;
}
.sp-help-section p {
margin-bottom: 20px;
font-size: 1rem;
}
/* Onboarding Timeline Component */
.sp-help-timeline {
position: relative;
padding: 20px 0;
margin: 30px 0;
}
.sp-help-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: #e2e8f0;
}
.sp-help-timeline-item {
position: relative;
padding-left: 60px;
margin-bottom: 32px;
}
.sp-help-timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 42px;
height: 42px;
background: #fff;
border: 2px solid #3b82f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #3b82f6;
z-index: 1;
box-shadow: 0 0 0 4px #fff;
transition: all 0.3s ease;
}
.sp-help-timeline-content {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.sp-help-timeline-content h4 {
color: #1e40af;
font-weight: 700;
margin-bottom: 8px;
font-size: 1.1rem;
}
.sp-help-timeline-content p {
margin-bottom: 0;
font-size: 0.9rem;
color: #475569;
}
/* Help Tables */
.sp-help-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 24px 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.sp-help-table th {
background: #f8fafc;
padding: 16px;
text-align: left;
font-weight: 700;
color: #475569;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e2e8f0;
}
.sp-help-table td {
padding: 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.sp-help-table tr:last-child td {
border-bottom: none;
}
/* Premium Help Components */
.sp-help-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-help-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.sp-help-card-header {
padding: 24px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
gap: 20px;
align-items: center;
}
.sp-help-card-header .header-icon {
width: 48px;
height: 48px;
background: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #3b82f6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sp-help-card-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
}
.sp-help-card-header p {
margin: 4px 0 0 0;
font-size: 0.9rem;
color: #64748b;
}
.sp-help-card-body {
padding: 24px;
}
/* Grid Layouts */
.sp-help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin: 24px 0;
}
.sp-help-icon-box {
padding: 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
text-align: center;
}
.sp-help-icon-box i {
font-size: 2rem;
margin-bottom: 16px;
display: block;
}
.sp-help-icon-box h5 {
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
font-size: 1rem;
}
.sp-help-icon-box p {
font-size: 0.85rem;
color: #64748b;
margin: 0;
}
/* Checklists */
.sp-help-checklist {
list-style: none;
padding: 0;
margin: 16px 0;
}
.sp-help-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
font-size: 0.95rem;
color: #475569;
}
.sp-help-checklist li i {
color: #10b981;
margin-top: 4px;
font-size: 0.9rem;
}
/* Process Steps */
.sp-help-process-steps {
display: flex;
flex-direction: column;
gap: 20px;
margin: 24px 0;
}
.sp-help-process-step {
display: flex;
gap: 20px;
align-items: flex-start;
}
.sp-help-step-num {
width: 32px;
height: 32px;
background: #3b82f6;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.sp-help-step-content h5 {
margin: 0 0 4px 0;
font-weight: 700;
color: #1e293b;
font-size: 1rem;
}
.sp-help-step-content p {
margin: 0;
font-size: 0.9rem;
color: #64748b;
}
/* Action Box */
.sp-help-action-box {
display: flex;
gap: 20px;
padding: 20px;
background: #f1f5f9;
border-radius: 12px;
align-items: center;
margin-top: 24px;
}
.sp-help-action-box.highlight {
background: #eff6ff;
border: 1px solid #bfdbfe;
}
.sp-help-action-box i {
font-size: 1.5rem;
color: #3b82f6;
}
.sp-help-action-details h5 {
margin: 0 0 4px 0;
font-weight: 700;
}
.sp-help-action-details p {
margin: 0;
font-size: 0.9rem;
color: #475569;
}
/* Alerts */
.sp-help-alert {
display: flex;
gap: 16px;
padding: 16px 20px;
border-radius: 12px;
margin: 20px 0;
font-size: 0.95rem;
align-items: center;
}
.sp-help-alert-info {
background: #eff6ff;
color: #1e40af;
border: 1px solid #bfdbfe;
}
.sp-help-alert-warning {
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a;
}
.sp-help-alert-success {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
.sp-help-alert-danger {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.sp-help-alert i {
font-size: 1.25rem;
}
/* Info Boxes */
.sp-help-info-box {
display: flex;
gap: 20px;
padding: 24px;
background: #f0f7ff;
/* border-left removed as per request */
border-radius: 8px;
margin: 24px 0;
}
.sp-help-info-box i {
font-size: 1.5rem;
color: #3b82f6;
margin-top: 2px;
}
.sp-help-list {
margin: 20px 0;
padding-left: 20px;
}
.sp-help-list li {
margin-bottom: 12px;
position: relative;
list-style: none;
}
.sp-help-list li::before {
content: "•";
color: #3b82f6;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
/* ============================================================================
HELP MODAL - HAMBURGER BUTTON & RESPONSIVE STYLES
============================================================================ */
/* Help Modal - Desktop Sizing */
.sp-help-modal {
max-width: 1000px;
width: 95vw;
height: 85vh;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Hamburger Toggle Button - Hidden on Desktop */
.sp-help-sidebar-toggle {
display: none;
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
transition: background 0.2s ease;
margin-left: auto;
margin-right: 12px;
}
.sp-help-sidebar-toggle:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Responsive: Tablet & Mobile (max-width: 768px) */
@media (max-width: 768px) {
/* Show hamburger button */
.sp-help-sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
}
/* Help modal container switches to column layout */
.sp-help-modal-container {
flex-direction: column;
position: relative;
overflow: hidden;
}
/* Sidebar becomes overlay drawer */
.sp-help-sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 100;
width: 280px;
max-width: 85vw;
height: 100%;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
}
/* Sidebar open state */
.sp-help-sidebar.mobile-open {
transform: translateX(0);
box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
}
/* Force nav container to be vertical */
.sp-help-sidebar .sp-help-nav {
display: flex;
flex-direction: column;
overflow-y: auto;
flex: 1;
}
/* Force nav items to be full width and stack vertically */
.sp-help-sidebar .sp-help-nav-item {
display: flex;
width: 100%;
flex-shrink: 0;
}
/* Main content takes full width */
.sp-help-main {
width: 100%;
flex: 1;
}
/* Adjust content padding for mobile */
.sp-help-content-area {
padding: 24px 16px;
}
/* Help modal footer adjustments */
.sp-help-modal-footer {
padding: 12px 16px !important;
}
/* Help grids collapse to single column on mobile */
.sp-help-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* Help table responsive scroll */
.sp-help-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Timeline adjustments */
.sp-help-timeline-item {
padding-left: 50px;
}
.sp-help-timeline::before {
left: 18px;
}
.sp-help-timeline-icon {
left: 0;
width: 36px;
height: 36px;
font-size: 0.9rem;
}
/* Process steps stack */
.sp-help-process-steps {
flex-direction: column;
}
/* Action box stack on small screens */
.sp-help-action-box {
flex-direction: column;
text-align: center;
gap: 12px;
}
/* Alerts flex-wrap */
.sp-help-alert {
align-items: flex-start;
}
/* Help heading smaller */
.sp-help-heading {
font-size: 1.5rem;
}
/* Cards full width */
.sp-help-card-header {
flex-direction: column;
gap: 12px;
}
.sp-help-card-header .header-icon {
margin: 0 auto;
}
/* Help modal with small margin on mobile */
#help-modal .sp-help-modal {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
height: calc(100vh - 16px) !important;
max-height: calc(100vh - 16px) !important;
margin: 8px !important;
border-radius: 12px !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Ensure all help modal children use border-box */
#help-modal .sp-help-modal *,
#help-modal .sp-help-modal-container,
#help-modal .sp-help-main,
#help-modal .sp-help-content-area {
box-sizing: border-box;
max-width: 100%;
}
/* Modal overlay centers the modal */
#help-modal.sp-modal-overlay.active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Help modal container full height */
#help-modal .sp-help-modal-container {
height: calc(100vh - 16px - 60px);
min-height: unset;
flex: 1;
}
}
/* Very small screens */
@media (max-width: 480px) {
.sp-help-content-area {
padding: 16px 12px;
}
.sp-help-heading {
font-size: 1.3rem;
}
.sp-help-nav-item {
padding: 12px 16px;
font-size: 0.9rem;
}
.sp-help-card {
border-radius: 8px;
}
.sp-help-card-body {
padding: 16px;
}
}
/* ============================================================================
HELP MODAL - ISOLATED RESPONSIVE STYLES (ID-based for no conflicts)
============================================================================ */
/* Desktop: Help Modal sizing */
#help-modal .sp-help-modal {
max-width: 1000px;
width: 95vw;
height: 85vh;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Mobile: Help Modal responsive */
@media (max-width: 768px) {
/* Help modal with small margin */
#help-modal .sp-help-modal {
width: calc(100% - 16px) !important;
max-width: calc(100% - 16px) !important;
height: calc(100% - 16px) !important;
max-height: calc(100% - 16px) !important;
margin: 8px !important;
border-radius: 12px !important;
}
/* Overlay uses flexbox centering */
/* Overlay uses flexbox centering */
#help-modal.sp-modal-overlay.active {
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Container fills modal */
#help-modal .sp-help-modal-container {
flex: 1;
overflow: hidden;
}
}
/* -----------------------------------------------------------------------------
4.2 Navigation
----------------------------------------------------------------------------- */
.sp-nav {
background-color: var(--sp-nav-bg);
border-bottom: 1px solid var(--sp-nav-border);
padding: 0 8px;
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sp-nav::-webkit-scrollbar {
display: none;
}
.sp-nav-item {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 10px;
color: var(--sp-text-secondary);
text-decoration: none;
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-medium);
transition: all var(--sp-transition-normal);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
}
.sp-nav-item:hover {
color: var(--sp-text-primary);
background-color: rgba(0, 0, 0, 0.03);
text-decoration: none;
}
.sp-nav-item.active {
color: var(--sp-primary);
border-bottom-color: var(--sp-primary);
}
.sp-nav-item i {
font-size: 0.75rem;
}
/* -----------------------------------------------------------------------------
4.3 Sidebar
----------------------------------------------------------------------------- */
.sp-sidebar {
width: 100%;
flex-shrink: 0;
}
.sp-sidebar-card {
background: var(--sp-bg-white);
border-radius: var(--sp-radius-sm);
box-shadow: var(--sp-shadow-sm);
overflow: hidden;
}
.sp-sidebar-item {
display: flex;
align-items: center;
justify-content: flex-start;
/* Changed from space-between */
gap: 12px;
/* Added gap */
padding: 10px 12px;
border-left: 3px solid transparent;
cursor: pointer;
transition: all var(--sp-transition-normal);
}
.sp-sidebar-item:hover {
background-color: var(--sp-bg-light);
}
.sp-sidebar-item.active {
background-color: var(--sp-primary-pale);
border-left-color: var(--sp-primary);
}
.sp-sidebar-item-label {
font-weight: var(--sp-font-weight-medium);
font-size: var(--sp-font-size-sm);
color: var(--sp-text-primary);
}
.sp-sidebar-item.active .sp-sidebar-item-label {
color: var(--sp-primary);
}
.sp-sidebar-item-count {
margin-left: auto;
/* Push count to the right */
background-color: var(--sp-bg-page);
color: var(--sp-text-secondary);
padding: 2px 8px;
border-radius: var(--sp-radius-full);
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-semibold);
}
.sp-sidebar-item.active .sp-sidebar-item-count {
background-color: var(--sp-primary);
color: var(--sp-text-white);
}
.sp-sidebar-section {
padding: 10px 12px;
border-top: 1px solid var(--sp-border-light);
font-size: var(--sp-font-size-xs);
color: var(--sp-text-secondary);
}
.sp-sidebar-section-title {
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-primary);
margin-bottom: 6px;
}
/* -----------------------------------------------------------------------------
4.4 Main Content
----------------------------------------------------------------------------- */
.sp-layout {
display: flex;
flex-direction: column;
width: 100%;
padding: 8px;
gap: 8px;
}
.sp-main {
flex: 1;
min-width: 0;
}
.sp-page-header {
margin-bottom: var(--sp-space-md);
}
.sp-page-title {
font-size: var(--sp-font-size-lg);
font-weight: var(--sp-font-weight-semibold);
margin-bottom: var(--sp-space-xs);
}
.sp-page-description {
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-sm);
}
/* -----------------------------------------------------------------------------
4.5 Footer
----------------------------------------------------------------------------- */
.sp-footer {
text-align: center;
padding: 16px 12px;
background: transparent;
border-top: 1px solid rgba(0, 0, 0, 0.05);
margin-top: 24px;
}
.sp-footer-text {
color: var(--sp-text-muted);
font-size: var(--sp-font-size-xs);
}
.sp-footer-links {
margin-top: 4px;
}
.sp-footer-links a {
color: var(--sp-text-secondary);
font-size: 10px;
margin: 0 4px;
}
.sp-footer-links a:hover {
color: var(--sp-primary);
}
/* -----------------------------------------------------------------------------
4.6 Contact Info
----------------------------------------------------------------------------- */
.sp-contact-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.sp-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: var(--sp-bg-light);
border-radius: var(--sp-radius-sm);
}
.sp-contact-item i {
color: var(--sp-primary);
font-size: 1.1rem;
width: 24px;
text-align: center;
margin-top: 2px;
}
.sp-contact-label {
font-size: var(--sp-font-size-xs);
color: var(--sp-text-muted);
margin-bottom: 2px;
}
.sp-contact-value {
font-size: var(--sp-font-size-sm);
color: var(--sp-primary);
text-decoration: none;
font-weight: var(--sp-font-weight-medium);
}
.sp-contact-value:hover {
text-decoration: underline;
}
/* -----------------------------------------------------------------------------
4.7 Divider
----------------------------------------------------------------------------- */
.sp-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--sp-text-muted);
font-size: var(--sp-font-size-xs);
}
.sp-divider::before,
.sp-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--sp-border);
}
.sp-divider span {
padding: 0 12px;
}
/* ============================================================================
5. CARD COMPONENTS
============================================================================ */
.sp-card {
background: var(--sp-bg-white);
border-radius: var(--sp-radius-sm);
box-shadow: var(--sp-shadow-sm);
margin-bottom: 8px;
}
.sp-card-header {
padding: 16px;
border-bottom: 1px solid var(--sp-border-light);
display: flex;
align-items: center;
gap: 12px;
}
.sp-card-icon {
width: 32px;
height: 32px;
background-color: var(--sp-primary-pale);
border-radius: var(--sp-radius-sm);
color: var(--sp-primary);
font-size: 0.9rem;
flex-shrink: 0;
text-align: center;
line-height: 32px;
}
.sp-card-icon.success {
background-color: var(--sp-success-light);
color: var(--sp-success);
}
.sp-card-icon.warning {
background-color: var(--sp-warning-light);
color: var(--sp-warning);
}
.sp-card-icon.info {
background-color: var(--sp-info-light);
color: var(--sp-info);
}
.sp-card-icon.error {
background-color: var(--sp-error-light);
color: var(--sp-error);
}
.sp-card-title {
font-size: var(--sp-font-size-sm);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-primary);
}
.sp-card-subtitle {
font-size: var(--sp-font-size-xs);
color: var(--sp-text-muted);
margin-top: 1px;
}
.sp-card-body {
padding: 16px;
}
.sp-card-footer {
padding: 12px 16px;
border-top: 1px solid var(--sp-border-light);
background-color: var(--sp-bg-light);
}
/* ============================================================================
6. FORM ELEMENTS
============================================================================ */
/* -----------------------------------------------------------------------------
6.1 Inputs & Selects
----------------------------------------------------------------------------- */
.sp-form-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: var(--sp-space-md);
}
.sp-form-group:last-child {
margin-bottom: 0;
}
.sp-form-group.full-width {
grid-column: 1 / -1;
}
.sp-label {
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-secondary);
}
.sp-label .required {
color: var(--sp-primary);
margin-left: 2px;
}
.sp-input,
.sp-select,
.sp-textarea {
background-color: var(--sp-bg-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-sm);
padding: 10px 10px;
font-size: var(--sp-font-size-base);
font-family: var(--sp-font-family);
color: var(--sp-text-primary);
transition: all var(--sp-transition-normal);
width: 100%;
min-height: 44px;
/* Touch target */
}
.sp-input:focus,
.sp-select:focus,
.sp-textarea:focus {
outline: none;
border-color: var(--sp-primary);
box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.1);
}
.sp-input::placeholder {
color: var(--sp-text-light);
}
.sp-input:disabled,
.sp-select:disabled,
.sp-textarea:disabled {
background-color: var(--sp-bg-light);
color: var(--sp-text-muted);
cursor: not-allowed;
}
.sp-input.error,
.sp-select.error,
.sp-textarea.error {
border-color: var(--sp-error);
background-color: var(--sp-error-light);
}
.sp-input.success,
.sp-select.success {
border-color: var(--sp-success);
background-color: var(--sp-success-light);
}
.sp-textarea {
min-height: 80px;
resize: vertical;
}
/* Input with icon */
.sp-input-icon-wrapper {
position: relative;
}
.sp-input-icon-wrapper .sp-input {
padding-left: 36px;
}
.sp-input-icon-wrapper .sp-input-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--sp-text-muted);
font-size: var(--sp-font-size-sm);
pointer-events: none;
}
.sp-input-icon-wrapper .sp-input-icon-right {
left: auto;
right: 10px;
cursor: pointer;
pointer-events: auto;
}
/* Password input with toggle */
.sp-input-group.sp-input-password {
position: relative;
display: flex;
align-items: center;
}
.sp-input-group.sp-input-password .sp-input {
padding-right: 44px;
}
.sp-password-toggle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: var(--sp-text-muted);
transition: color var(--sp-transition-fast);
}
.sp-password-toggle:hover {
color: var(--sp-text-primary);
}
.sp-password-toggle:focus {
outline: none;
}
/* Utilities */
.sp-hidden {
display: none !important;
}
/* Ensure file inputs are clickable even if hidden visually */
input[type="file"].sp-hidden {
display: block !important;
visibility: hidden;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}
/* Mobile Visibility */
.sp-mobile-only {
display: none !important;
}
@media (max-width: 640px) {
.sp-mobile-only {
display: block !important;
}
}
/* Modal Content Adjustment */
.sp-modal-body {
padding: var(--sp-space-lg);
overflow-y: auto;
/* Ensure no fixed height forces whitespace */
min-height: 0;
}
/* Form row utilities */
.sp-form-row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
/* Help text and error messages */
.sp-help-text {
font-size: 10px;
color: var(--sp-text-muted);
display: flex;
align-items: center;
gap: 3px;
}
.sp-help-text i {
font-size: 9px;
}
.error-message {
font-size: 12px;
color: #e57373 !important;
margin-top: 4px;
display: none;
}
.error-message:not(:empty) {
display: block;
}
/* -----------------------------------------------------------------------------
6.2 Checkboxes & Radios
----------------------------------------------------------------------------- */
.sp-checkbox,
.sp-radio {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: var(--sp-font-size-sm);
color: var(--sp-text-primary);
}
.sp-checkbox input,
.sp-radio input {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin-top: 2px;
accent-color: var(--sp-primary);
cursor: pointer;
}
/* Label row - label and inline checkbox/radio on same line */
.sp-label-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Inline checkbox/radio - sits next to labels */
.sp-checkbox-inline {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-secondary);
}
.sp-checkbox-inline input {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--sp-primary);
cursor: pointer;
}
.sp-checkbox-inline span {
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-secondary);
}
/* -----------------------------------------------------------------------------
6.3 File Upload
----------------------------------------------------------------------------- */
.sp-file-upload {
position: relative;
border: 2px dashed var(--sp-border);
border-radius: var(--sp-radius-sm);
padding: 16px 12px;
text-align: center;
cursor: pointer;
transition: all var(--sp-transition-normal);
background-color: var(--sp-bg-light);
}
.sp-file-upload:hover {
border-color: var(--sp-primary);
background-color: var(--sp-primary-pale);
}
.sp-file-upload.dragover {
border-color: var(--sp-primary);
background-color: var(--sp-primary-pale);
}
.sp-file-upload-icon {
font-size: 1.5rem;
color: var(--sp-text-muted);
margin-bottom: 4px;
}
.sp-file-upload:hover .sp-file-upload-icon {
color: var(--sp-primary);
}
.sp-file-upload-text {
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-xs);
}
.sp-file-upload-text strong {
color: var(--sp-primary);
}
.sp-file-upload-hint {
font-size: 10px;
color: var(--sp-text-muted);
margin-top: 2px;
}
/* -----------------------------------------------------------------------------
6.4 Form Layout
----------------------------------------------------------------------------- */
.sp-form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.sp-form-grid.cols-1 {
grid-template-columns: 1fr;
}
.sp-form-grid.cols-2 {
grid-template-columns: 1fr;
}
.sp-form-grid.cols-3 {
grid-template-columns: 1fr;
}
.sp-form-grid.cols-4 {
grid-template-columns: 1fr;
}
.sp-form-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--sp-border-light);
}
.sp-form-actions-right {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
/* ============================================================================
7. BUTTONS
============================================================================ */
.sp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
font-size: var(--sp-font-size-sm);
font-weight: var(--sp-font-weight-semibold);
font-family: var(--sp-font-family);
border-radius: var(--sp-radius-sm);
border: none;
cursor: pointer;
transition: all var(--sp-transition-normal);
text-decoration: none;
white-space: nowrap;
min-height: 44px;
/* Touch target */
}
.sp-btn:hover {
text-decoration: none;
}
.sp-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Primary Button */
.sp-btn-primary {
background-color: var(--sp-primary);
color: var(--sp-text-white);
}
a.sp-btn-primary,
a.sp-btn-primary:hover,
a.sp-btn-primary:visited {
color: var(--sp-text-white);
}
.sp-btn-primary:hover:not(:disabled) {
background-color: var(--sp-primary-dark);
}
/* Secondary Button */
.sp-btn-secondary {
background-color: var(--sp-bg-page);
color: var(--sp-text-secondary);
border: 1px solid var(--sp-border);
}
.sp-btn-secondary:hover:not(:disabled) {
background-color: var(--sp-border-light);
color: var(--sp-text-primary);
}
/* Success Button */
.sp-btn-success {
background-color: var(--sp-success);
color: var(--sp-text-white);
}
a.sp-btn-success,
a.sp-btn-success:hover,
a.sp-btn-success:visited {
color: var(--sp-text-white);
}
.sp-btn-success:hover:not(:disabled) {
background-color: var(--sp-success-dark);
}
/* Warning Button */
.sp-btn-warning {
background-color: var(--sp-warning);
color: var(--sp-text-white);
}
a.sp-btn-warning,
a.sp-btn-warning:hover,
a.sp-btn-warning:visited {
color: var(--sp-text-white);
}
.sp-btn-warning:hover:not(:disabled) {
background-color: var(--sp-warning-dark);
}
/* Danger Button */
.sp-btn-danger {
background-color: var(--sp-error);
color: var(--sp-text-white);
}
a.sp-btn-danger,
a.sp-btn-danger:hover,
a.sp-btn-danger:visited {
color: var(--sp-text-white);
}
.sp-btn-danger:hover:not(:disabled) {
background-color: var(--sp-error-dark);
}
/* Info Button */
.sp-btn-info {
background-color: var(--sp-info);
color: var(--sp-text-white);
}
a.sp-btn-info,
a.sp-btn-info:hover,
a.sp-btn-info:visited {
color: var(--sp-text-white);
}
.sp-btn-info:hover:not(:disabled) {
background-color: var(--sp-info-dark);
}
/* Ghost Button */
.sp-btn-ghost {
background-color: transparent;
color: var(--sp-text-secondary);
}
.sp-btn-ghost:hover:not(:disabled) {
background-color: var(--sp-bg-light);
color: var(--sp-text-primary);
}
/* Link Button */
.sp-btn-link {
background-color: transparent;
color: var(--sp-primary);
padding: 0;
min-height: auto;
}
.sp-btn-link:hover:not(:disabled) {
color: var(--sp-primary-dark);
text-decoration: underline;
}
/* Button Sizes */
.sp-btn-xs {
padding: 4px 8px;
font-size: 10px;
min-height: 32px;
}
.sp-btn-sm {
padding: 6px 12px;
font-size: var(--sp-font-size-xs);
min-height: 36px;
}
.sp-btn-lg {
padding: 12px 20px;
font-size: var(--sp-font-size-base);
min-height: 48px;
}
.sp-btn-xl {
padding: 14px 24px;
font-size: var(--sp-font-size-md);
min-height: 52px;
}
/* Full Width Button */
.sp-btn-block {
width: 100%;
}
/* Button Group */
.sp-btn-group {
display: flex;
gap: 6px;
}
/* ============================================================================
8. MODALS
============================================================================ */
.sp-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(15, 23, 42, 0.75);
/* Darker, more premium semi-transparent */
backdrop-filter: blur(4px);
/* Modern glass effect */
display: flex;
align-items: center;
/* Centered vertically */
justify-content: center;
/* Centered horizontally */
z-index: var(--sp-z-modal-backdrop);
padding: 20px;
/* Small margin between modal and viewport */
opacity: 0;
visibility: hidden;
transition: all var(--sp-transition-slow);
}
.sp-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.sp-modal {
background: var(--sp-bg-white);
border-radius: var(--sp-radius-lg);
/* All corners rounded */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 500px;
/* Default small modal */
max-height: calc(100vh - 40px);
/* Ensure it fits in viewport with margin */
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(20px);
transition: transform var(--sp-transition-slow), opacity var(--sp-transition-slow);
}
.sp-modal-overlay.active .sp-modal {
transform: translateY(0);
}
/* Modal Sizes */
.sp-modal.sp-modal-sm {
max-width: 400px;
}
.sp-modal.sp-modal-lg {
max-width: 800px;
}
.sp-modal.sp-modal-xl {
max-width: 1140px;
}
.sp-modal.sp-modal-full {
max-width: 100%;
height: calc(100vh - 40px);
}
/* Modal Header */
.sp-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: none;
background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%);
color: #ffffff !important;
}
.sp-modal-header * {
color: #ffffff !important;
}
.sp-modal-header-content {
display: flex;
align-items: center;
gap: 12px;
}
.sp-modal-icon {
width: 36px;
height: 36px;
border-radius: var(--sp-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Header colour variants */
.sp-modal-header.header-primary {
background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%);
}
.sp-modal-header.header-success {
background: linear-gradient(135deg, var(--sp-success) 0%, #15803d 100%);
}
.sp-modal-header.header-warning {
background: linear-gradient(135deg, var(--sp-warning) 0%, #b45309 100%);
}
.sp-modal-header.header-info {
background: linear-gradient(135deg, var(--sp-info) 0%, #1d4ed8 100%);
}
.sp-modal-header.header-danger {
background: linear-gradient(135deg, var(--sp-error) 0%, #991b1b 100%);
}
.sp-modal-header.header-dark {
background: linear-gradient(135deg, var(--sp-bg-dark) 0%, #1a1a1a 100%);
}
.sp-modal-header.header-neutral {
background: var(--sp-bg-light);
color: var(--sp-text-primary);
border-bottom: 1px solid var(--sp-border-light);
}
.sp-modal-header.header-neutral .sp-modal-icon {
background: var(--sp-primary-pale);
color: var(--sp-primary);
}
.sp-modal-header.header-neutral .sp-modal-close {
color: var(--sp-text-muted);
}
.sp-modal-header.header-neutral .sp-modal-close:hover {
background: var(--sp-border-light);
color: var(--sp-text-primary);
}
/* Icon variants - now for use with neutral header or standalone */
.sp-modal-icon.primary {
background-color: var(--sp-primary-pale);
color: var(--sp-primary);
}
.sp-modal-icon.success {
background-color: var(--sp-success-light);
color: var(--sp-success);
}
.sp-modal-icon.warning {
background-color: var(--sp-warning-light);
color: var(--sp-warning);
}
.sp-modal-icon.info {
background-color: var(--sp-info-light);
color: var(--sp-info);
}
.sp-modal-icon.danger {
background-color: var(--sp-error-light);
color: var(--sp-error);
}
.sp-modal-title {
font-size: var(--sp-font-size-base);
font-weight: var(--sp-font-weight-semibold);
color: white;
margin: 0;
}
.sp-modal-header.header-neutral .sp-modal-title {
color: var(--sp-text-primary);
}
.sp-modal-subtitle {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
margin-top: 2px;
}
.sp-modal-header.header-neutral .sp-modal-subtitle {
color: var(--sp-text-muted);
}
.sp-modal-close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--sp-radius-sm);
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all var(--sp-transition-normal);
font-size: 1.1rem;
background: transparent;
border: none;
}
.sp-modal-close:hover {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}
/* Modal Body */
.sp-modal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
/* Modal Footer */
.sp-modal-footer {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-top: 1px solid var(--sp-border-light);
background-color: var(--sp-bg-light);
}
.sp-modal-footer .sp-btn {
width: 100%;
}
.sp-modal-footer.sp-modal-footer-split {
flex-direction: column;
}
.sp-modal-footer.sp-modal-footer-center {
align-items: center;
}
/* Confirmation Modal Variant */
.sp-modal-confirm .sp-modal-body {
text-align: center;
padding: 20px 12px;
}
.sp-modal-confirm .sp-modal-confirm-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 12px;
}
.sp-modal-confirm .sp-modal-confirm-icon.warning {
background-color: var(--sp-warning-light);
color: var(--sp-warning);
}
.sp-modal-confirm .sp-modal-confirm-icon.danger {
background-color: var(--sp-error-light);
color: var(--sp-error);
}
.sp-modal-confirm .sp-modal-confirm-icon.success {
background-color: var(--sp-success-light);
color: var(--sp-success);
}
.sp-modal-confirm .sp-modal-confirm-icon.info {
background-color: var(--sp-info-light);
color: var(--sp-info);
}
.sp-modal-confirm .sp-modal-confirm-icon.error {
background-color: var(--sp-error-light);
color: var(--sp-error);
}
.sp-modal-confirm .sp-modal-confirm-title {
font-size: var(--sp-font-size-lg);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-primary);
margin-bottom: 6px;
}
.sp-modal-confirm .sp-modal-confirm-text {
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-sm);
line-height: var(--sp-line-height-normal);
text-align: center;
}
.sp-modal-confirm .sp-modal-footer {
flex-direction: column;
}
/* ============================================================================
9. ALERTS & NOTIFICATIONS
============================================================================ */
.sp-alert {
padding: 10px;
border-radius: var(--sp-radius-sm);
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
border: 1px solid;
}
.sp-alert-icon {
font-size: 0.9rem;
flex-shrink: 0;
margin-top: 1px;
}
.sp-alert-content {
flex: 1;
}
.sp-alert-title {
font-weight: var(--sp-font-weight-semibold);
margin-bottom: 1px;
font-size: var(--sp-font-size-xs);
}
.sp-alert-text {
font-size: var(--sp-font-size-xs);
opacity: 0.9;
}
.sp-alert-close {
cursor: pointer;
opacity: 0.7;
transition: opacity var(--sp-transition-fast);
}
.sp-alert-close:hover {
opacity: 1;
}
/* Alert Variants */
.sp-alert-info {
background-color: var(--sp-info-light);
border-color: #90caf9;
color: #1565c0;
}
.sp-alert-success {
background-color: var(--sp-success-light);
border-color: #a5d6a7;
color: #2e7d32;
}
.sp-alert-warning {
background-color: var(--sp-warning-light);
border-color: #ffcc80;
color: #e65100;
}
.sp-alert-error {
background-color: var(--sp-error-light);
border-color: #ef9a9a;
color: #c62828;
}
/* ============================================================================
10. BADGES & TAGS
============================================================================ */
.sp-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--sp-radius-full);
font-size: var(--sp-font-size-xs);
font-weight: var(--sp-font-weight-semibold);
white-space: nowrap;
}
.sp-badge-primary {
background-color: var(--sp-primary-pale);
color: var(--sp-primary);
}
.sp-badge-success {
background-color: var(--sp-success-light);
color: var(--sp-success);
}
.sp-badge-warning {
background-color: var(--sp-warning-light);
color: var(--sp-warning);
}
.sp-badge-error {
background-color: var(--sp-error-light);
color: var(--sp-error);
}
.sp-badge-info {
background-color: var(--sp-info-light);
color: var(--sp-info);
}
.sp-badge-neutral {
background-color: var(--sp-bg-page);
color: var(--sp-text-secondary);
}
/* Tag (with remove button) */
.sp-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background-color: var(--sp-bg-light);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-sm);
font-size: var(--sp-font-size-sm);
}
.sp-tag-remove {
cursor: pointer;
color: var(--sp-text-muted);
transition: color var(--sp-transition-fast);
}
.sp-tag-remove:hover {
color: var(--sp-error);
}
/* ============================================================================
11. TABLES
============================================================================ */
.sp-table-container {
overflow-x: auto;
background: var(--sp-bg-white);
border-radius: var(--sp-radius-md);
box-shadow: var(--sp-shadow-sm);
}
.sp-table {
width: 100%;
border-collapse: collapse;
font-size: var(--sp-font-size-sm);
}
.sp-table th {
text-align: left;
padding: 12px 16px;
background-color: var(--sp-bg-light);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-secondary);
border-bottom: 1px solid var(--sp-border);
white-space: nowrap;
}
.sp-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--sp-border-light);
color: var(--sp-text-primary);
}
.sp-table tbody tr:hover {
background-color: var(--sp-bg-light);
}
.sp-table tbody tr:last-child td {
border-bottom: none;
}
/* Sortable columns */
.sp-table th.sortable {
cursor: pointer;
user-select: none;
}
.sp-table th.sortable:hover {
background-color: var(--sp-border-light);
}
/* Responsive Table (Card View) */
@media (max-width: 767px) {
.sp-table thead {
display: none;
}
.sp-table,
.sp-table tbody,
.sp-table tr,
.sp-table td {
display: block;
width: 100%;
}
.sp-table tr {
margin-bottom: 12px;
background: var(--sp-bg-white);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-sm);
box-shadow: var(--sp-shadow-sm);
padding: 8px;
}
.sp-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 4px;
border-bottom: 1px solid var(--sp-border-light);
text-align: right;
}
.sp-table td:last-child {
border-bottom: none;
}
.sp-table td::before {
content: attr(data-label);
font-weight: var(--sp-font-weight-semibold);
color: var(--sp-text-secondary);
text-align: left;
margin-right: 12px;
flex-shrink: 0;
}
/* Special handling for actions column */
.sp-table td[data-label="Actions"] {
justify-content: flex-end;
}
}
/* ============================================================================
12. PROGRESS & STEPPERS
============================================================================ */
/* Progress Bar */
.sp-progress {
height: 8px;
background-color: var(--sp-bg-page);
border-radius: var(--sp-radius-full);
overflow: hidden;
}
.sp-progress-bar {
height: 100%;
background-color: var(--sp-primary);
border-radius: var(--sp-radius-full);
transition: width var(--sp-transition-slow);
}
.sp-progress-bar.success {
background-color: var(--sp-success);
}
.sp-progress-bar.warning {
background-color: var(--sp-warning);
}
.sp-progress-bar.info {
background-color: var(--sp-info);
}
/* Stepper */
.sp-stepper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 8px;
background: var(--sp-bg-white);
border-radius: var(--sp-radius-sm);
box-shadow: var(--sp-shadow-sm);
margin: 0 12px 8px;
overflow-x: auto;
overflow-y: hidden;
gap: 4px;
flex-shrink: 0;
}
.sp-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
min-width: 60px;
}
.sp-step-number {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--sp-font-weight-semibold);
font-size: var(--sp-font-size-xs);
background-color: var(--sp-bg-page);
color: var(--sp-text-muted);
border: 2px solid var(--sp-border);
transition: all var(--sp-transition-slow);
flex-shrink: 0;
}
.sp-step.active .sp-step-number {
background-color: var(--sp-primary);
border-color: var(--sp-primary);
color: var(--sp-text-white);
}
.sp-step.completed .sp-step-number {
background-color: var(--sp-success);
border-color: var(--sp-success);
color: var(--sp-text-white);
}
.sp-step-label {
font-size: 10px;
color: var(--sp-text-muted);
font-weight: var(--sp-font-weight-medium);
text-align: center;
}
.sp-step.active .sp-step-label {
color: var(--sp-text-primary);
}
.sp-step.completed .sp-step-label {
color: var(--sp-success);
}
.sp-step-connector {
display: none;
}
/* ============================================================================
13. DOCUMENT PREVIEWS
============================================================================ */
.sp-doc-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background-color: var(--sp-bg-light);
border-radius: var(--sp-radius-sm);
border: 1px solid var(--sp-border);
}
.sp-doc-icon {
width: 36px;
height: 36px;
border-radius: var(--sp-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--sp-text-white);
font-size: 1rem;
flex-shrink: 0;
}
.sp-doc-icon.pdf {
background-color: #e53935;
}
.sp-doc-icon.image {
background-color: #43a047;
}
.sp-doc-icon.doc {
background-color: #1e88e5;
}
.sp-doc-icon.xls {
background-color: #2e7d32;
}
.sp-doc-icon.ppt {
background-color: #d84315;
}
.sp-doc-icon.default {
background-color: var(--sp-text-muted);
}
.sp-doc-info {
flex: 1;
min-width: 0;
}
.sp-doc-name {
font-weight: var(--sp-font-weight-medium);
font-size: var(--sp-font-size-xs);
color: var(--sp-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-doc-meta {
font-size: 10px;
color: var(--sp-text-muted);
display: flex;
align-items: center;
gap: 6px;
margin-top: 1px;
}
.sp-doc-remove {
color: var(--sp-text-muted);
cursor: pointer;
padding: 6px;
transition: color var(--sp-transition-normal);
font-size: 0.9rem;
}
.sp-doc-remove:hover {
color: var(--sp-error);
}
/* ============================================================================
14. ACTION ICONS
============================================================================ */
.sp-action-icons {
display: flex;
gap: 8px;
}
.sp-action-icon {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: transform var(--sp-transition-normal), opacity var(--sp-transition-normal);
font-size: 1.1rem;
width: auto;
height: auto;
min-width: 24px;
min-height: 24px;
}
.sp-action-icon:hover {
transform: scale(1.1);
opacity: 0.8;
}
.sp-action-icon.view {
color: #3b82f6;
/* Blue */
}
.sp-action-icon.edit {
color: #f59e0b;
/* Amber */
}
.sp-action-icon.delete {
color: #ef4444;
/* Red */
}
.sp-action-icon.copy {
color: #6b7280;
/* Gray */
}
.sp-action-icon.send {
color: #6366f1;
/* Indigo */
}
.sp-action-icon.download {
color: #2196f3;
/* Blue-ish */
}
.sp-action-icon.users {
color: #2196f3;
}
.sp-action-icon.verify {
color: #10b981;
/* Green */
}
.sp-action-icon.history {
color: #8b5cf6;
/* Purple */
}
.sp-action-icon.password {
color: #8b5cf6;
/* Purple */
}
.sp-action-icon.gift {
color: #ec4899;
}
.sp-action-icon.renew {
color: #10b981;
}
.sp-action-icon.magic {
color: #6366f1;
/* Indigo */
}
/* ============================================================================
15. UTILITIES
============================================================================ */
/* Display */
.sp-hidden {
display: none !important;
}
.sp-block {
display: block;
}
.sp-inline {
display: inline;
}
.sp-inline-block {
display: inline-block;
}
.sp-flex {
display: flex;
}
.sp-inline-flex {
display: inline-flex;
}
.sp-grid {
display: grid;
}
/* Flexbox */
.sp-flex-row {
flex-direction: row;
}
.sp-flex-col {
flex-direction: column;
}
.sp-flex-wrap {
flex-wrap: wrap;
}
.sp-items-start {
align-items: flex-start;
}
.sp-items-center {
align-items: center;
}
.sp-items-end {
align-items: flex-end;
}
.sp-justify-start {
justify-content: flex-start;
}
.sp-justify-center {
justify-content: center;
}
.sp-justify-end {
justify-content: flex-end;
}
.sp-justify-between {
justify-content: space-between;
}
.sp-gap-xs {
gap: var(--sp-space-xs);
}
.sp-gap-sm {
gap: var(--sp-space-sm);
}
.sp-gap-md {
gap: var(--sp-space-md);
}
.sp-gap-lg {
gap: var(--sp-space-lg);
}
/* Spacing - Margin */
.sp-m-0 {
margin: 0;
}
.sp-m-auto {
margin: auto;
}
.sp-mt-xs {
margin-top: var(--sp-space-xs);
}
.sp-mt-sm {
margin-top: var(--sp-space-sm);
}
.sp-mt-md {
margin-top: var(--sp-space-md);
}
.sp-mt-lg {
margin-top: var(--sp-space-lg);
}
.sp-mt-xl {
margin-top: var(--sp-space-xl);
}
.sp-mb-xs {
margin-bottom: var(--sp-space-xs);
}
.sp-mb-sm {
margin-bottom: var(--sp-space-sm);
}
.sp-mb-md {
margin-bottom: var(--sp-space-md);
}
.sp-mb-lg {
margin-bottom: var(--sp-space-lg);
}
.sp-mb-xl {
margin-bottom: var(--sp-space-xl);
}
/* Spacing - Padding */
.sp-p-0 {
padding: 0;
}
.sp-p-xs {
padding: var(--sp-space-xs);
}
.sp-p-sm {
padding: var(--sp-space-sm);
}
.sp-p-md {
padding: var(--sp-space-md);
}
.sp-p-lg {
padding: var(--sp-space-lg);
}
.sp-p-xl {
padding: var(--sp-space-xl);
}
/* Text Alignment */
.sp-text-left {
text-align: left;
}
.sp-text-center {
text-align: center;
}
.sp-text-right {
text-align: right;
}
/* Font Weight */
.sp-font-light {
font-weight: var(--sp-font-weight-light);
}
.sp-font-normal {
font-weight: var(--sp-font-weight-normal);
}
.sp-font-medium {
font-weight: var(--sp-font-weight-medium);
}
.sp-font-semibold {
font-weight: var(--sp-font-weight-semibold);
}
.sp-font-bold {
font-weight: var(--sp-font-weight-bold);
}
/* Border Radius */
.sp-rounded-none {
border-radius: 0;
}
.sp-rounded-sm {
border-radius: var(--sp-radius-sm);
}
.sp-rounded-md {
border-radius: var(--sp-radius-md);
}
.sp-rounded-lg {
border-radius: var(--sp-radius-lg);
}
.sp-rounded-full {
border-radius: var(--sp-radius-full);
}
/* Width */
.sp-w-full {
width: 100%;
}
.sp-w-auto {
width: auto;
}
/* Cursor */
.sp-cursor-pointer {
cursor: pointer;
}
.sp-cursor-not-allowed {
cursor: not-allowed;
}
/* ============================================================================
16. ANIMATIONS
============================================================================ */
@keyframes sp-fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes sp-fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes sp-slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes sp-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes sp-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.sp-animate-fadeIn {
animation: sp-fadeIn var(--sp-transition-slow);
}
.sp-animate-slideInRight {
animation: sp-slideInRight var(--sp-transition-slow);
}
.sp-animate-pulse {
animation: sp-pulse 2s infinite;
}
.sp-animate-spin {
animation: sp-spin 1s linear infinite;
}
/* Card animation */
.sp-card {
animation: sp-fadeIn var(--sp-transition-slow);
}
/* ============================================================================
17. RESPONSIVE BREAKPOINTS
============================================================================ */
/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
.sp-layout {
padding: 16px;
gap: 16px;
}
.sp-header {
padding: 10px 20px;
}
.sp-logo {
width: 42px;
height: 42px;
}
.sp-logo img,
.sp-logo svg {
width: 34px;
height: 34px;
}
.sp-header-title {
font-size: 1.2rem;
}
.sp-nav-item {
padding: 12px 14px;
font-size: var(--sp-font-size-sm);
}
.sp-card-body {
padding: 16px;
}
.sp-card-header {
padding: 12px 16px;
}
.sp-form-grid {
gap: 12px;
}
.sp-form-grid.cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.sp-form-actions {
flex-direction: row;
justify-content: space-between;
}
.sp-form-actions-right {
flex-direction: row;
width: auto;
}
.sp-modal-overlay {
padding: 20px;
align-items: center;
}
.sp-modal {
border-radius: var(--sp-radius-md);
max-width: 500px;
max-height: 90vh;
transform: scale(0.95) translateY(-10px);
}
.sp-modal-overlay.active .sp-modal {
transform: scale(1) translateY(0);
}
.sp-modal.sp-modal-sm {
max-width: 380px;
}
.sp-modal.sp-modal-lg {
max-width: 640px;
}
.sp-modal.sp-modal-xl {
max-width: 800px;
}
.sp-modal-footer {
flex-direction: row;
justify-content: flex-end;
}
.sp-modal-footer .sp-btn {
width: auto;
}
.sp-modal-footer.sp-modal-footer-split {
justify-content: space-between;
}
/* Increased modal padding on tablet+ */
.sp-modal-header {
padding: 16px 20px;
}
.sp-modal-body {
padding: 20px;
}
.sp-modal-footer {
padding: 16px 20px;
}
.sp-modal-confirm .sp-modal-body {
padding: 24px 20px;
}
.sp-step {
flex-direction: row;
gap: 8px;
}
.sp-step-label {
font-size: var(--sp-font-size-xs);
}
}
/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
.sp-layout {
flex-direction: row;
padding: 20px;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.sp-sidebar {
width: 220px;
}
.sp-header {
padding: 12px 24px;
}
.sp-logo {
width: 44px;
height: 44px;
}
.sp-logo img,
.sp-logo svg {
width: 36px;
height: 36px;
}
.sp-header-title {
font-size: 1.25rem;
}
.sp-header-avatar {
width: 36px;
height: 36px;
}
.sp-nav {
padding: 0 20px;
}
.sp-nav-item {
padding: 12px 16px;
gap: 6px;
}
.sp-card-body {
padding: 20px;
}
.sp-card-header {
padding: 14px 20px;
gap: 12px;
}
.sp-card-icon {
width: 36px;
height: 36px;
font-size: 1rem;
}
.sp-card-title {
font-size: var(--sp-font-size-base);
}
.sp-form-grid {
gap: 16px;
}
.sp-form-grid.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.sp-form-grid.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.sp-sidebar-item {
border-left: 4px solid transparent;
border-bottom: none;
}
.sp-sidebar-item.active {
border-left-color: var(--sp-primary);
border-bottom: none;
}
.sp-stepper {
padding: 14px 16px;
gap: 8px;
}
.sp-step-number {
width: 30px;
height: 30px;
}
.sp-step-label {
font-size: var(--sp-font-size-sm);
}
}
/* Large Desktop (min-width: 1280px) */
@media (min-width: 1280px) {
.sp-sidebar {
width: 240px;
}
.sp-card-body {
padding: 24px;
}
.sp-card-header {
padding: 16px 24px;
}
.sp-card-icon {
width: 40px;
height: 40px;
}
.sp-modal.sp-modal-lg {
max-width: 720px;
}
.sp-modal.sp-modal-xl {
max-width: 900px;
}
}
/* ============================================================================
18. LOADING SPINNERS & PAGE LOADERS
============================================================================
Logo-based spinner that actually spins.
Two types:
1. Page Loader - Shows immediately on page load, hides when DOM ready
2. Action Loader - Shows during form submissions, AJAX calls, etc.
============================================================================ */
/* -------------------------
Logo Spinner Animation
------------------------- */
@keyframes sp-logo-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes sp-logo-pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.sp-logo-spinner {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sp-logo-spinner::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
border: 4px solid transparent;
border-top-color: var(--sp-primary);
border-right-color: var(--sp-primary);
border-radius: 50%;
animation: sp-logo-spin 1s linear infinite;
}
.sp-logo-spinner img {
width: 60px;
height: 60px;
object-fit: contain;
animation: sp-logo-pulse 2s ease-in-out infinite;
}
/* -------------------------
Page Loader (Full Screen)
------------------------- */
.sp-page-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--sp-bg-white);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sp-page-loader-hidden {
opacity: 0;
visibility: hidden;
}
.sp-page-loader-content {
text-align: center;
}
.sp-page-loader-content .sp-logo-spinner {
width: 100px;
height: 100px;
margin: 0 auto 20px;
}
.sp-page-loader-content .sp-logo-spinner::before {
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-width: 5px;
}
.sp-page-loader-content .sp-logo-spinner img {
width: 70px;
height: 70px;
}
.sp-page-loader-text {
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-sm);
font-weight: var(--sp-font-weight-medium);
}
/* -------------------------
Action Loader (Modal Overlay)
------------------------- */
.sp-action-loader {
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.sp-action-loader-content {
text-align: center;
}
.sp-action-loader-content .sp-logo-spinner {
width: 90px;
height: 90px;
margin: 0 auto 16px;
}
.sp-action-loader-content .sp-logo-spinner::before {
border-top-color: var(--sp-bg-white);
border-right-color: var(--sp-bg-white);
}
.sp-action-loader-text {
color: var(--sp-text-white);
font-size: var(--sp-font-size-base);
font-weight: var(--sp-font-weight-medium);
}
/* -------------------------
Inline/Button Spinner
------------------------- */
.sp-btn-loading {
position: relative;
pointer-events: none;
}
.sp-btn-loading::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
border: 2px solid transparent;
border-top-color: currentColor;
border-right-color: currentColor;
border-radius: 50%;
animation: sp-logo-spin 0.8s linear infinite;
}
.sp-btn-loading .sp-btn-text {
visibility: hidden;
}
/* Small inline spinner for text */
.sp-inline-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top-color: currentColor;
border-right-color: currentColor;
border-radius: 50%;
animation: sp-logo-spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
/* ============================================================================
19. TWO-COLUMN LAYOUT SYSTEM
============================================================================
Generic 2-column layout for split-screen pages (registration, login, etc.)
USAGE:
============================================================================ */
/* Base wrapper - prevents body scrolling, only split-main scrolls */
html:has(.sp-split-layout),
body:has(.sp-split-layout) {
overflow: hidden;
height: 100vh;
height: 100dvh;
background-color: var(--sp-bg-page);
/* Prevent white gaps on bounce/overscroll */
}
.sp-split-layout {
height: 100vh;
height: 100dvh;
/* Use dynamic viewport height for better mobile UI handling */
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
background: var(--sp-bg-page);
}
/* -------------------------
Brand Panel (Left)
------------------------- */
.sp-split-brand {
display: none;
background: linear-gradient(135deg, var(--sp-header-bg) 0%, #1a1a1a 100%);
color: var(--sp-text-white);
}
.sp-split-brand-content {
text-align: center;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.sp-split-logo {
width: 80px;
height: 80px;
background: var(--sp-bg-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.sp-split-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-split-title {
font-size: 1.75rem;
font-weight: var(--sp-font-weight-bold);
margin-bottom: 8px;
color: var(--sp-text-white);
}
.sp-split-tagline {
font-size: var(--sp-font-size-base);
opacity: 0.8;
margin-bottom: 40px;
}
/* Feature list */
.sp-split-features {
text-align: left;
margin-bottom: 40px;
}
.sp-split-feature {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sp-split-feature:last-child {
border-bottom: none;
}
.sp-split-feature i {
color: var(--sp-accent-green);
font-size: 1.1rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.sp-split-feature span {
font-size: var(--sp-font-size-sm);
opacity: 0.9;
}
.sp-split-brand-footer {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sp-split-brand-footer p {
font-size: var(--sp-font-size-xs);
opacity: 0.6;
margin: 0;
}
/* -------------------------
Main Panel (Right)
------------------------- */
.sp-split-main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
/* Important for flex child scrolling */
background: var(--sp-bg-page);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Smooth scrolling on iOS */
height: 100%;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
/* Account for iOS home indicator */
}
/* Support for older browsers */
@supports not (height: 100dvh) {
.sp-split-layout,
body:has(.sp-split-layout) {
height: 100vh;
}
}
/* Mobile header - visible on mobile only */
.sp-split-mobile-header {
display: flex;
flex-shrink: 0;
}
/* Content area */
.sp-split-content,
.sp-split-main-content {
flex: 1;
padding: 12px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
max-width: 100%;
width: 100%;
background: transparent;
}
/* Only center content vertically on login page (short content) */
.presel-login-page .sp-split-main-content {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Footer */
.sp-split-footer {
flex-shrink: 0;
padding: 16px 12px;
text-align: center;
}
/* -------------------------
Tablet+ (min-width: 768px)
------------------------- */
@media (min-width: 768px) {
.sp-split-layout {
flex-direction: row;
}
/* Show brand panel */
.sp-split-brand {
display: flex;
width: 40%;
max-width: 480px;
height: 100vh;
align-items: center;
justify-content: center;
padding: 40px;
flex-shrink: 0;
}
/* Main panel adjustments */
.sp-split-main {
width: 60%;
flex: 1;
height: 100vh;
overflow-y: auto;
}
/* Hide mobile header */
.sp-split-mobile-header {
display: none;
}
.sp-split-content,
.sp-split-main-content {
padding: 24px;
max-width: 540px;
margin: 0 auto;
width: 100%;
}
}
/* -------------------------
Desktop (min-width: 1024px)
------------------------- */
@media (min-width: 1024px) {
.sp-split-brand {
width: 45%;
max-width: 560px;
padding: 60px;
}
.sp-split-brand-content {
max-width: 340px;
}
.sp-split-logo {
width: 100px;
height: 100px;
margin-bottom: 32px;
}
.sp-split-logo img {
width: 100%;
height: 100%;
}
.sp-split-title {
font-size: 2rem;
}
.sp-split-tagline {
font-size: var(--sp-font-size-md);
margin-bottom: 48px;
}
.sp-split-feature {
padding: 14px 0;
}
.sp-split-feature span {
font-size: var(--sp-font-size-base);
}
.sp-split-main {
width: 55%;
}
.sp-split-content,
.sp-split-main-content {
padding: 40px 32px;
max-width: 560px;
}
}
/* -------------------------
Large Desktop (min-width: 1280px)
------------------------- */
@media (min-width: 1280px) {
.sp-split-brand {
max-width: 600px;
padding: 80px;
}
.sp-split-brand-content {
max-width: 380px;
}
.sp-split-logo {
width: 120px;
height: 120px;
}
.sp-split-logo img {
width: 100%;
height: 100%;
}
.sp-split-title {
font-size: 2.25rem;
}
.sp-split-content {
max-width: 680px;
padding: 40px 48px;
}
}
/* -------------------------
Brand Panel Variants
------------------------- */
/* Primary (red) brand panel */
.sp-split-brand.sp-split-brand-primary {
background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%);
}
/* Success (green) brand panel */
.sp-split-brand.sp-split-brand-success {
background: linear-gradient(135deg, var(--sp-success) 0%, var(--sp-success-dark) 100%);
}
/* Info (blue) brand panel */
.sp-split-brand.sp-split-brand-info {
background: linear-gradient(135deg, var(--sp-info) 0%, var(--sp-info-dark) 100%);
}
/* Image background variant */
.sp-split-brand.sp-split-brand-image {
background-size: cover;
background-position: center;
position: relative;
}
.sp-split-brand.sp-split-brand-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.sp-split-brand.sp-split-brand-image .sp-split-brand-content {
position: relative;
z-index: 1;
}
/* ============================================================================
20. SELFIE/WEBCAM COMPONENTS
============================================================================ */
/* Choice container - side by side options */
.selfie-choice-container {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 20px;
}
.selfie-choice-option {
background: var(--sp-bg-light);
border: 2px solid var(--sp-border);
border-radius: var(--sp-radius-md);
padding: 24px 16px;
text-align: center;
transition: all var(--sp-transition-normal);
}
.selfie-choice-option:hover {
border-color: var(--sp-primary);
background: var(--sp-primary-pale);
}
.selfie-choice-icon {
width: 64px;
height: 64px;
background: var(--sp-bg-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 28px;
color: var(--sp-primary);
box-shadow: var(--sp-shadow-sm);
}
.selfie-choice-option h4 {
margin-bottom: 8px;
color: var(--sp-text-primary);
font-size: var(--sp-font-size-base);
}
.selfie-choice-option p {
color: var(--sp-text-muted);
font-size: var(--sp-font-size-sm);
margin-bottom: 16px;
}
/* Upload zone in choice */
.selfie-upload-zone {
margin-top: 0;
}
/* Selfie container */
.selfie-container {
max-width: 400px;
margin: 0 auto;
}
/* Video/Image preview wrapper */
.selfie-preview-wrapper {
position: relative;
width: 100%;
aspect-ratio: 3/4;
max-height: 400px;
background-color: #000;
border-radius: var(--sp-radius-md);
overflow: hidden;
margin: 0 auto;
}
.selfie-preview-wrapper video,
.selfie-preview-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
/* Mirror effect for selfie */
}
/* Overlay with face guide */
.selfie-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
/* Oval face guide */
.selfie-guide-oval {
width: 60%;
height: 70%;
border: 3px dashed rgba(255, 255, 255, 0.6);
border-radius: 50%;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
}
/* Instructions text at bottom */
.selfie-instructions {
position: absolute;
bottom: 16px;
left: 0;
right: 0;
text-align: center;
color: #fff;
font-size: var(--sp-font-size-sm);
font-weight: var(--sp-font-weight-medium);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
padding: 8px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.selfie-instructions i {
margin-right: 6px;
}
/* Capture button - large and prominent */
.sp-btn-capture {
width: 72px;
height: 72px;
border-radius: 50%;
padding: 0;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
}
.sp-btn-capture:hover {
transform: scale(1.05);
}
/* Selfie tips */
.selfie-tips {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background-color: var(--sp-bg-light);
border-radius: var(--sp-radius-sm);
}
.selfie-tip {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--sp-font-size-sm);
color: var(--sp-text-secondary);
}
.selfie-tip i {
width: 20px;
text-align: center;
color: var(--sp-info);
}
/* Section visibility */
.selfie-section {
animation: sp-fadeIn 0.3s ease;
}
/* Responsive adjustments */
@media (min-width: 768px) {
.selfie-choice-container {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.selfie-preview-wrapper {
max-height: 450px;
}
.selfie-tips {
flex-direction: row;
justify-content: center;
gap: 24px;
}
}
/* ============================================================================
20. SELFIE VERIFICATION STYLES
============================================================================ */
/* Selfie Choice Container - Mobile First (stacked) */
.selfie-choice-container {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.selfie-choice-option {
background: var(--sp-bg-light);
border-radius: var(--sp-radius-md);
padding: 20px;
text-align: center;
border: 2px solid transparent;
cursor: pointer;
transition: all var(--sp-transition-normal);
}
.selfie-choice-option:hover {
border-color: var(--sp-primary);
}
.selfie-choice-option .selfie-choice-icon {
margin-bottom: 12px;
}
.selfie-choice-option .selfie-choice-icon i {
font-size: 32px;
color: var(--sp-primary);
}
.selfie-choice-option h4 {
margin-bottom: 8px;
font-size: 1rem;
}
.selfie-choice-option p {
font-size: var(--sp-font-size-xs);
color: var(--sp-text-secondary);
margin-bottom: 16px;
}
/* Tablet and up - side by side */
@media (min-width: 768px) {
.selfie-choice-container {
flex-direction: row;
}
.selfie-choice-option {
flex: 1;
padding: 24px;
}
.selfie-choice-option .selfie-choice-icon i {
font-size: 36px;
}
}
/* Selfie tips */
.selfie-tips {
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 768px) {
.selfie-tips {
flex-direction: row;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
}
.selfie-tip {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--sp-font-size-xs);
color: var(--sp-text-secondary);
}
/* Selfie camera view */
.selfie-camera-container {
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.selfie-video-wrapper {
position: relative;
border-radius: var(--sp-radius-md);
overflow: hidden;
background: #000;
}
.selfie-video-wrapper video {
width: 100%;
display: block;
}
.selfie-oval-guide {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 75%;
border: 3px dashed rgba(255, 255, 255, 0.7);
border-radius: 50%;
pointer-events: none;
}
/* Selfie preview */
.selfie-preview-container {
text-align: center;
}
.selfie-preview-container img {
max-width: 300px;
border-radius: var(--sp-radius-md);
margin: 0 auto 16px;
display: block;
}
/* Selfie upload inline (in choice option) */
.selfie-upload-inline {
padding: 12px;
min-height: auto;
}
.selfie-upload-inline .sp-file-upload-text {
font-size: var(--sp-font-size-xs);
}
.selfie-upload-inline .sp-file-upload-hint {
font-size: 10px;
}
/* ============================================================================
20. MODAL COMPONENT
============================================================================ */
.sp-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.75);
display: none;
/* Changed from flex to none by default */
align-items: center;
justify-content: center;
z-index: var(--sp-z-modal-backdrop);
padding: var(--sp-space-md);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sp-modal-overlay.active {
display: flex;
opacity: 1;
visibility: visible;
}
.sp-modal {
background: var(--sp-bg-white);
border-radius: var(--sp-radius-lg);
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--sp-shadow-xl);
width: 100%;
max-width: 500px;
animation: sp-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sp-modal-in {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.sp-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-space-md) var(--sp-space-lg);
border-bottom: 1px solid var(--sp-border);
flex-shrink: 0;
}
.sp-modal-title {
font-size: var(--sp-font-size-lg);
font-weight: var(--sp-font-weight-semibold);
margin: 0;
display: flex;
align-items: center;
gap: var(--sp-space-sm);
color: var(--sp-text-primary);
}
.sp-modal-title i {
color: var(--sp-primary);
}
.sp-modal-close {
background: none;
border: none;
font-size: 1.25rem;
color: var(--sp-text-muted);
cursor: pointer;
padding: var(--sp-space-xs);
border-radius: var(--sp-radius-sm);
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.sp-modal-close:hover {
background: var(--sp-bg-light);
color: var(--sp-text-primary);
}
.sp-modal-body {
padding: var(--sp-space-lg);
overflow-y: auto;
flex: 1;
}
.sp-modal-footer {
display: flex;
align-items: center;
gap: var(--sp-space-sm);
padding: var(--sp-space-md) var(--sp-space-lg);
border-top: 1px solid var(--sp-border);
flex-shrink: 0;
background-color: var(--sp-bg-light);
border-bottom-left-radius: var(--sp-radius-lg);
border-bottom-right-radius: var(--sp-radius-lg);
}
.sp-modal-lg {
max-width: 800px;
width: 95%;
}
.sp-modal-xl {
max-width: 1100px;
width: 95%;
}
/* ============================================================================
21. LOGIN PAGE ADDITIONS
============================================================================ */
/* Login page specific card styling - more spacious */
.presel-login-page .sp-card-header {
padding: 16px 20px;
gap: 12px;
}
.presel-login-page .sp-card-icon {
width: 40px;
height: 40px;
border-radius: var(--sp-radius-md);
font-size: 1.1rem;
}
.presel-login-page .sp-card-title {
font-size: var(--sp-font-size-lg);
line-height: 1.3;
}
.presel-login-page .sp-card-subtitle {
font-size: var(--sp-font-size-sm);
margin-top: 2px;
line-height: 1.4;
}
.presel-login-page .sp-card-body {
padding: 24px 20px;
}
.presel-login-page .sp-form-group {
gap: 6px;
margin-bottom: 20px;
}
/* ============================================================================
22. USER DROPDOWN
============================================================================ */
.user-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: var(--sp-bg-white);
border-radius: var(--sp-radius-sm);
box-shadow: var(--sp-shadow-lg);
width: 260px;
display: none;
z-index: var(--sp-z-dropdown);
border: 1px solid var(--sp-border-light);
overflow: hidden;
}
.user-dropdown.active {
display: block;
animation: fadeIn 0.2s ease;
}
.user-dropdown-header {
padding: 16px;
background-color: var(--sp-bg-light);
border-bottom: 1px solid var(--sp-border-light);
}
.user-dropdown-header strong {
display: block;
color: var(--sp-text-primary);
font-size: var(--sp-font-size-sm);
margin-bottom: 2px;
}
.user-dropdown-header span {
display: block;
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-xs);
}
.user-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
color: var(--sp-text-secondary);
font-size: var(--sp-font-size-sm);
transition: all var(--sp-transition-fast);
border-left: 3px solid transparent;
}
.user-dropdown-item:hover {
background-color: var(--sp-bg-light);
color: var(--sp-primary);
border-left-color: var(--sp-primary);
text-decoration: none;
}
.user-dropdown-item i {
width: 16px;
text-align: center;
font-size: 0.9rem;
}
.user-dropdown-divider {
height: 1px;
background-color: var(--sp-border-light);
margin: 4px 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================================
23. HEADER COMPONENT
============================================================================ */
.sp-header {
background: var(--sp-header-bg);
height: 64px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
color: var(--sp-header-text);
}
.sp-header-brand {
display: flex;
align-items: center;
gap: 12px;
}
.sp-logo {
width: 44px;
height: 44px;
padding: 0;
background: var(--sp-bg-white);
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.sp-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-header-title {
font-size: 18px;
font-weight: 600;
color: var(--sp-header-text);
padding-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
line-height: 1;
}
.sp-header-actions {
display: flex;
align-items: center;
gap: 16px;
position: relative;
/* Added relative positioning context for dropdown */
}
.sp-header-user {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.2s;
color: var(--sp-header-text);
}
.sp-header-user:hover,
.sp-header-user.active {
background: rgba(255, 255, 255, 0.1);
}
.sp-header-avatar {
width: 32px;
height: 32px;
background: var(--sp-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.sp-header-chevron {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
transition: transform 0.2s ease;
/* Added transition */
}
.sp-header-user.active .sp-header-chevron {
transform: rotate(180deg);
/* Added rotation */
}
/* User Dropdown Override/Fix */
.user-dropdown {
z-index: 1000;
/* Ensure high z-index */
top: 100%;
right: 0;
margin-top: 8px;
}
.user-dropdown.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
animation: none !important;
/* Disable animation to rule out issues */
}
/* ============================================================================
END OF STYLESHEET
============================================================================ */
/* Mobile Header Visibility Fix */
@media (min-width: 900px) {
.sp-split-mobile-header {
display: none !important;
}
}
/* ============================================================================
18. FOOTER (DARK VARIANT - Global Standard)
============================================================================ */
.sp-footer-dark {
background-color: #333333;
/* Matches cohort_instructions */
color: #ffffff;
padding: 64px 0 32px;
margin-top: 64px;
font-family: var(--sp-font-family);
box-sizing: border-box;
width: 100%;
margin-bottom: 0;
}
.sp-footer-dark .sp-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
box-sizing: border-box;
}
.sp-footer-dark-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 768px) {
.sp-footer-dark-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.sp-footer-dark-logo {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.sp-footer-dark-logo img {
height: 32px;
margin-right: 12px;
width: auto;
}
.sp-footer-dark-logo-text {
font-weight: 500;
font-size: 1.125rem;
color: #ffffff;
}
.sp-footer-dark-desc {
margin-bottom: 16px;
opacity: 0.7;
font-size: 0.875rem;
line-height: 1.6;
color: #ffffff;
}
.sp-footer-dark-social {
display: flex;
gap: 12px;
}
.sp-footer-dark-social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
transition: all 0.3s ease;
text-decoration: none !important;
}
.sp-footer-dark-social-icon:hover {
background-color: #B01D26;
color: #ffffff;
/* Removed transform as requested */
}
.sp-footer-dark-title {
font-weight: 500;
margin-bottom: 16px;
font-size: 1rem;
position: relative;
padding-bottom: 12px;
color: #ffffff;
}
.sp-footer-dark-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background-color: #B01D26;
}
.sp-footer-dark-links {
list-style: none;
padding: 0;
margin: 0;
}
.sp-footer-dark-link {
margin-bottom: 8px;
}
.sp-footer-dark-link a {
color: #ced4da;
/* --gray-400 */
transition: all 0.3s ease;
font-size: 0.875rem;
text-decoration: none;
}
.sp-footer-dark-link a:hover {
color: #ffffff;
text-decoration: none;
/* Removed padding-left animation */
}
.sp-footer-dark-contact {
display: flex;
margin-bottom: 12px;
font-size: 0.875rem;
color: #ced4da;
align-items: flex-start;
}
.sp-footer-dark-contact i {
margin-right: 12px;
color: #B01D26;
margin-top: 4px;
width: 16px;
text-align: center;
}
.sp-footer-dark-contact a {
color: #ced4da;
text-decoration: none;
transition: all 0.3s ease;
}
.sp-footer-dark-contact a:hover {
color: #ffffff;
text-decoration: none;
}
/* Mobile File Input Overlay */
.sp-file-input-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 100;
/* High z-index to ensure it sits above all sibling elements */
appearance: none;
/* Ensure native styling doesn't interfere */
}
.sp-footer-dark-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 24px;
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
align-items: center;
}
@media (min-width: 768px) {
.sp-footer-dark-bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.sp-footer-dark-copyright {
font-size: 0.75rem;
opacity: 0.7;
color: #ffffff;
}
.sp-footer-dark-legal {
display: flex;
gap: 16px;
font-size: 0.75rem;
opacity: 0.7;
}
.sp-footer-dark-legal a {
color: #ced4da;
text-decoration: none;
}
.sp-footer-dark-legal a:hover {
color: #ffffff;
text-decoration: none;
}
/* ============================================================================
EMERGENCY FIX for Mobile Modals
============================================================================ */
.sp-modal-overlay {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999 !important;
/* Force highest z-index */
display: none;
justify-content: center;
align-items: center;
padding: 16px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sp-modal-overlay.active {
display: flex !important;
opacity: 1 !important;
}
.sp-modal {
position: relative;
background: var(--sp-bg-white);
width: 100%;
max-width: 500px;
max-height: 90vh;
height: auto !important;
/* CRITICAL: modals should only be as tall as content */
overflow-y: auto;
border-radius: var(--sp-radius-lg);
z-index: 10000 !important;
/* Force higher than overlay */
box-shadow: var(--sp-shadow-xl);
margin: auto;
/* Center horizontally/vertically */
transform: scale(0.95);
transition: transform 0.2s ease;
}
.sp-modal-overlay.active .sp-modal {
transform: scale(1);
}
/* Compact notification modals (Success/Error) - don't stretch on mobile */
#modal-success .sp-modal,
#modal-error .sp-modal {
height: auto !important;
max-height: fit-content;
}
/* ============================================================================
NOTIFICATION BELL (Candidate Messages)
============================================================================ */
.sp-notification-bell {
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.2s ease;
margin-right: 8px;
}
.sp-notification-bell:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.sp-notification-bell i {
font-size: 16px;
color: #fff;
transition: transform 0.2s ease;
}
.sp-notification-bell:hover i {
transform: scale(1.1);
}
.sp-notification-bell.has-unread i {
animation: bell-ring 2s ease-in-out infinite;
}
.sp-notification-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #ef4444;
color: white;
font-size: 10px;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #2d2d2d;
animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes bell-ring {
0%,
100% {
transform: rotate(0deg);
}
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(10deg);
}
40% {
transform: rotate(-5deg);
}
50%,
100% {
transform: rotate(0deg);
}
}
@keyframes badge-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* Messages Modal Styles */
#modal-messages .sp-modal {
max-width: 600px;
max-height: 80vh;
}
#modal-messages .sp-modal-body {
padding: 0;
overflow-y: auto;
max-height: 60vh;
}
.messages-conversation-list {
background: #fff;
}
.messages-conversation-item {
display: flex;
align-items: flex-start;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.2s ease;
}
.messages-conversation-item:hover {
background: #f8fafc;
}
.messages-conversation-item.unread {
background: #eff6ff;
}
.messages-conversation-item.unread:hover {
background: #dbeafe;
}
.messages-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
flex-shrink: 0;
margin-right: 14px;
}
.messages-content {
flex: 1;
min-width: 0;
}
.messages-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.messages-sender {
font-weight: 600;
color: #1e293b;
font-size: 14px;
}
.messages-time {
font-size: 12px;
color: #94a3b8;
}
.messages-subject {
font-size: 13px;
color: #475569;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-preview {
font-size: 12px;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-unread-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #3b82f6;
flex-shrink: 0;
margin-left: 8px;
}
.messages-empty {
text-align: center;
padding: 60px 20px;
color: #94a3b8;
}
.messages-empty i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.messages-empty p {
font-size: 15px;
margin: 0;
}
/* Thread View */
.messages-thread {
padding: 20px;
}
.messages-thread-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e2e8f0;
}
.messages-back-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: #f1f5f9;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
transition: background 0.2s;
}
.messages-back-btn:hover {
background: #e2e8f0;
}
.messages-thread-title {
flex: 1;
}
.messages-thread-title h4 {
margin: 0 0 2px 0;
font-size: 16px;
color: #1e293b;
}
.messages-thread-title span {
font-size: 12px;
color: #94a3b8;
}
.messages-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
max-height: 300px;
overflow-y: auto;
}
.message-bubble {
max-width: 85%;
padding: 12px 16px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
}
.message-bubble.received {
background: #f1f5f9;
color: #1e293b;
border-bottom-left-radius: 4px;
align-self: flex-start;
}
.message-bubble.sent {
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: white;
border-bottom-right-radius: 4px;
align-self: flex-end;
}
.message-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 11px;
}
.message-bubble.received .message-meta {
color: #94a3b8;
}
.message-bubble.sent .message-meta {
color: rgba(255, 255, 255, 0.7);
}
.messages-reply-form {
display: flex;
gap: 10px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.messages-reply-input {
flex: 1;
border: 1px solid #e2e8f0;
border-radius: 24px;
padding: 10px 16px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.messages-reply-input:focus {
border-color: #4f46e5;
}
.messages-send-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.messages-send-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.messages-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* ============================================================================
BULK ACTION BAR (Employer Candidates)
============================================================================ */
.bulk-action-bar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
border-radius: 8px 8px 0 0;
margin: 0;
width: 100%;
box-sizing: border-box;
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bulk-action-info {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-weight: 600;
font-size: 14px;
}
.bulk-action-info i {
font-size: 16px;
}
.bulk-action-buttons {
display: flex;
gap: 10px;
}
.bulk-action-buttons .sp-btn {
padding: 8px 16px;
font-size: 13px;
}
.bulk-action-buttons .sp-btn-ghost {
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.bulk-action-buttons .sp-btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
}
.bulk-action-buttons .sp-btn-primary {
background: white;
color: #4f46e5;
}
.bulk-action-buttons .sp-btn-primary:hover {
background: #f1f5f9;
}
/* Checkbox styling */
.candidate-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #4f46e5;
}
#select-all-candidates {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #4f46e5;
}
/* ============================================================================
MOBILE MODAL FIXES (Non-Sticky Footer & Overlay Scrolling)
============================================================================ */
/* ============================================================================
ADVANCED SEARCH (Desktop Default)
============================================================================ */
.sp-advanced-search-body {
max-height: 60vh;
overflow-y: auto;
}
/* ============================================================================
GLOBAL FIXED MODAL ARCHITECTURE (Mobile)
Target: .sp-fixed-modal
Strategy: Fixed Window (Modal is fixed size, Contents scroll inside)
Usage: Add 'sp-fixed-modal' to any .sp-modal div to enforce this behavior.
NOTE: Conflict with admin_clients.css resolved by :not() exclusion there.
============================================================================ */
@media (max-width: 768px) {
/* 1. OVERLAY: Locked Backdrop (No Page Scroll) */
.sp-modal-overlay.active {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
/* Prevent background scroll */
padding: 16px !important;
position: fixed !important;
inset: 0;
z-index: 9999 !important;
}
/* 2. MODAL: The Scrollable Window */
.sp-fixed-modal {
display: flex !important;
flex-direction: column !important;
position: relative !important;
width: 100% !important;
height: auto !important;
max-height: 85vh !important;
/* Fixed height on screen */
overflow-y: hidden !important;
/* Main modal container shouldn't scroll, inner body does */
background: #fff;
border-radius: 12px !important;
margin: 0 !important;
top: 0 !important;
transform: none !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
/* 3. HEADER: Sticky Top */
.sp-fixed-modal .sp-modal-header {
position: sticky !important;
top: 0;
z-index: 50;
background-color: var(--sp-bg-white);
border-radius: 12px 12px 0 0;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0 !important;
}
/* Support for colored headers in sticky mode */
.sp-fixed-modal .sp-modal-header.danger,
.sp-fixed-modal .sp-modal-header.error {
background-color: #fee2e2 !important;
border-bottom: 1px solid #fecaca !important;
}
.sp-fixed-modal .sp-modal-header.primary,
.sp-fixed-modal .sp-modal-header.info {
background-color: #eff6ff !important;
border-bottom: 1px solid #dbeafe !important;
}
/* 4. BODY: The ACTUAL Scroll Container */
.sp-fixed-modal .sp-modal-body {
height: auto !important;
max-height: none !important;
overflow-y: auto !important;
/* SCROLL HERE */
-webkit-overflow-scrolling: touch;
flex: 1 1 auto !important;
/* Fill available space */
padding-bottom: 0 !important;
/* Let footer handle spacing */
}
/* 5. FOOTER: Static Bottom (Always visible if flex-col work, or scrolled to if flows) */
/* If we want footer fixed at bottom of modal window: */
/*
User said: "MODAL CONTENTS ARE NOT SCROLLABLE AND BUTTONS ARE FIXED" - Complaint about buttons covering content?
OR they want buttons fixed at bottom of window?
"THE MODAL SHOULD BE FIXED" - Window fixed.
"FOOTER AT THE BOTTOM (Not Sticky)" - implies it flows.
Let's use Flex Column on wrapper:
[Header - Fixed]
[Body - Flex Grow, Scrollable]
[Footer - Fixed/Static in Flex Layout]
This keeps footer visible at bottom of modal window ALWAYS?
NO, User said "You must scroll down to the bottom of the modal to find them."
So Footer should NOT be sticky to window bottom?
"The Footer is AT THE BOTTOM (Not Sticky)... You must scroll down to the bottom of the modal to find them."
OK, so:
Wrapper: Fixed Height, Overflow Hidden.
Inner Wrapper: Scrollable?
Let's stick to the simplest:
Modal Window: Scrollable.
Header: Sticky inside.
Body: Flows.
Footer: Flows.
*/
/* RE-CORRECTION: The modal itself is the scroll container. */
.sp-modal.sp-fixed-modal {
overflow-y: auto !important;
/* The window scrolls */
display: block !important;
/* Not flex column, just block */
}
.sp-fixed-modal .sp-modal-body {
overflow: visible !important;
flex: none !important;
}
.sp-fixed-modal .sp-modal-footer {
position: static !important;
display: block !important;
margin-top: 0 !important;
width: 100% !important;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
padding: 16px !important;
transform: none !important;
z-index: auto !important;
flex-shrink: 0;
}
/* 6. BUTTONS: Stacked */
.sp-fixed-modal .sp-modal-footer button,
.sp-fixed-modal .sp-modal-footer .sp-btn {
position: static !important;
width: 100%;
margin-bottom: 8px;
}
.sp-fixed-modal .sp-modal-footer button:last-child {
margin-bottom: 0;
}
/* 7. LEGACY SUPPORT (Graceful degradation for non-fixed modals) */
.sp-modal:not(.sp-fixed-modal) {
max-height: 85vh;
overflow-y: auto;
}
/* 8. GLOBAL BODY LOCK */
body.sp-modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
}
/* ============================================================================
SP HELP MODAL (Redesigned Tabbed Interface)
============================================================================ */
/* Main Container (extends sp-modal) */
.sp-help-modal {
width: 95%;
max-width: 1140px;
height: 85vh;
max-height: 800px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header */
.sp-help-modal .sp-modal-header {
background: #3b82f6;
color: white;
padding: 0 20px;
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.sp-help-modal .sp-modal-title {
color: white;
margin: 0;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 12px;
}
/* Mobile Toggle Button */
#sp-help-mobile-toggle {
display: none;
/* Hidden on Desktop */
background: transparent;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 5px;
}
/* Body Layout (Sidebar + Content) */
.sp-help-wrapper {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
/* Sidebar (Left Panel) */
.sp-help-sidebar {
width: 280px;
background: #f8fafc;
border-right: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: transform 0.3s ease;
z-index: 20;
}
.sp-help-nav {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.sp-help-nav-item {
display: flex;
align-items: center;
width: 100%;
padding: 12px 15px;
margin-bottom: 5px;
border: none;
background: transparent;
color: #475569;
text-align: left;
font-size: 0.9rem;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.sp-help-nav-item:hover {
background: #e2e8f0;
color: #1e293b;
}
.sp-help-nav-item.active {
background: #eff6ff;
color: #2563eb;
font-weight: 600;
}
.sp-help-nav-item i {
width: 24px;
text-align: center;
margin-right: 10px;
}
.sp-help-sidebar-footer {
padding: 15px;
border-top: 1px solid #e2e8f0;
font-size: 0.8rem;
color: #94a3b8;
text-align: center;
}
/* Content (Right Panel) */
.sp-help-content {
flex: 1;
overflow-y: auto;
padding: 30px;
position: relative;
background: white;
}
/* Tabbed Sections logic */
.sp-help-section {
display: none;
/* Hidden by default */
animation: spFadeIn 0.2s ease-out;
}
.sp-help-section.active {
display: block;
/* Shown when active */
}
@keyframes spFadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Content Generic Styles */
.sp-help-heading {
font-size: 1.5rem;
color: #1e293b;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e2e8f0;
}
/* --- RESPONSIVE / MOBILE STYLES --- */
@media (max-width: 768px) {
.sp-help-modal {
width: 100% !important;
height: 100% !important;
max-height: none !important;
max-width: none !important;
border-radius: 0 !important;
}
#sp-help-mobile-toggle {
display: block;
/* Show hamburger */
}
.sp-help-sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
/* Hide off-screen */
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
width: 260px;
/* Slightly narrower on mobile */
}
.sp-help-sidebar.open {
transform: translateX(0);
/* Slide in */
}
/* Overlay for mobile sidebar */
.sp-help-sidebar-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
display: none;
opacity: 0;
transition: opacity 0.3s;
}
.sp-help-sidebar-overlay.active {
display: block;
opacity: 1;
}
}
@media (max-width: 768px) {
/* Prevent white gaps at bottom of Safari */
html, body {
background-color: var(--sp-bg-page) !important;
}
}