/** * ============================================================================ * GLOBAL STYLES - Transport Interurbain Client App * ============================================================================ * * Supports light/dark themes via [data-theme] attribute on */ /* ============================================================================ THEME VARIABLES ============================================================================ */ :root { /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.2s ease; /* Safe Area for Mobile (Capacitor) */ --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); } /* Dark Theme (Default) */ [data-theme="dark"] { --primary: #10b981; --primary-light: #34d399; --secondary: #f59e0b; --background: #111827; --surface: #1f2937; --surface-light: #374151; --text-main: #f9fafb; --text-muted: #9ca3af; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --border: #374151; --header-bg: rgba(17, 24, 39, 0.95); } /* Light Theme */ [data-theme="light"] { --primary: #059669; --primary-light: #10b981; --secondary: #f59e0b; --background: #f9fafb; --surface: #ffffff; --surface-light: #f3f4f6; --text-main: #111827; --text-muted: #6b7280; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --border: #e5e7eb; --header-bg: rgba(255, 255, 255, 0.95); } /* ============================================================================ BASE STYLES ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--background); color: var(--text-main); line-height: 1.5; overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 600; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } /* ============================================================================ APP CONTAINER ============================================================================ */ #app { display: flex; flex-direction: column; height: 100%; padding-top: var(--sat); padding-bottom: calc(60px + var(--sab)); } /* ============================================================================ HEADER ============================================================================ */ .app-header { background-color: var(--header-bg); backdrop-filter: blur(10px); padding: var(--spacing-sm) var(--spacing-md); position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); transition: background-color 0.3s ease, border-color 0.3s ease; } .brand { font-size: 1.25rem; font-weight: 700; background: linear-gradient(to right, var(--primary-light), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .header-actions { display: flex; align-items: center; gap: var(--spacing-sm); } .header-btn { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-muted); position: relative; transition: background-color var(--transition-fast), color var(--transition-fast); } .header-btn:hover, .header-btn:active { background-color: var(--surface); color: var(--text-main); } .header-btn svg { width: 20px; height: 20px; } /* Theme Toggle Icons */ #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: block; } [data-theme="light"] #theme-toggle .icon-sun { display: block; } [data-theme="light"] #theme-toggle .icon-moon { display: none; } /* Notification Badge */ .notification-badge { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; font-size: 0.65rem; font-weight: 700; background-color: var(--error); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Header Avatar */ .header-avatar { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; font-size: 0.75rem; font-weight: 700; } /* ============================================================================ MAIN CONTENT ============================================================================ */ #main-content { flex: 1; overflow-y: auto; padding: var(--spacing-md); position: relative; } /* ============================================================================ BOTTOM NAVIGATION ============================================================================ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(65px + var(--sab)); padding-bottom: var(--sab); background: var(--surface); border-top: 1px solid var(--border); display: flex; justify-content: space-around; align-items: flex-end; z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 8px 20px 10px; text-decoration: none; color: var(--text-muted); transition: color 0.2s ease; position: relative; min-width: 64px; } .nav-item span { font-size: 0.65rem; font-weight: 500; transition: color 0.2s ease; } .nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: all 0.25s ease; } /* Active Nav Item - Simple Color Change */ .nav-item.active { color: var(--primary); } .nav-item.active span { font-weight: 600; color: var(--primary); } .nav-item.active svg { color: var(--primary); transform: scale(1.1); } /* Active indicator dot */ .nav-item.active::after { content: ''; position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; } /* ============================================================================ MODALS AND OVERLAYS ============================================================================ */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 2000; /* Above everything */ opacity: 0; transition: opacity 0.2s ease; backdrop-filter: blur(4px); } .modal-overlay.active { display: flex; opacity: 1; } .modal-dialog { background-color: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); transform: translateY(20px); transition: transform 0.2s ease; display: flex; flex-direction: column; } .modal-overlay.active .modal-dialog { transform: translateY(0); } .small-dialog { max-width: 320px; } .modal-header { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-header.success h3 { color: var(--success); } .modal-header.error h3 { color: var(--error); } .modal-header.warning h3 { color: var(--warning); } .modal-header h3 { margin: 0; font-size: 1.1rem; } .modal-close-x { font-size: 1.5rem; line-height: 1; padding: 0 8px; opacity: 0.7; } .modal-body { padding: var(--spacing-lg); color: var(--text-main); } .modal-footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 12px; } /* Loading Overlay */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.3s ease; opacity: 0; pointer-events: none; } .loading-overlay.active { opacity: 1; pointer-events: all; } .loading-spinner-large { width: 48px; height: 48px; border: 4px solid var(--surface-light); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s infinite linear; } .loading-text { font-weight: 500; color: var(--text-muted); } @keyframes spin { to { transform: rotate(360deg); } } /* Buttons in Modal */ .btn { padding: 10px 16px; border-radius: var(--radius-md); font-weight: 500; font-size: 0.95rem; transition: all 0.2s ease; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:active { transform: scale(0.98); } .btn-text { background-color: transparent; color: var(--text-muted); } .btn-text:hover { color: var(--text-main); }