/* ═══════════════════════════════════════════════════════════════════ Passenger Admin — Shared Styles Works alongside TailAdmin (style.css + Alpine.js). No conflicting resets. No layout overrides. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. CSS Design Tokens ── */ :root { /* Brand */ --primary-500: #465fff; --primary-600: #3641f5; --primary-700: #2b33ca; --primary-100: rgba(70, 95, 255, 0.12); /* Semantic */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #465fff; /* Surfaces — light mode */ --bg: #f1f5f9; --bg-secondary: #f8fafc; --bg-tertiary: #eef2f7; --card-bg: #ffffff; --sidebar-bg: #f9fafb; /* Text */ --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #94a3b8; /* Border & Shadow */ --border: #e2e8f0; --card-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.06); --card-shadow-hover: 0 12px 24px -10px rgb(15 23 42 / 0.20); /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* Misc */ --transition-fast: 150ms ease; --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── 2. Dark mode token overrides ── */ /* TailAdmin adds .dark to when dark mode is active */ .dark { --bg: #111928; --bg-secondary: #1a2235; --bg-tertiary: #1f2a3c; --card-bg: #1a2235; --sidebar-bg: #111928; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --border: #253047; --card-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.30); --card-shadow-hover: 0 12px 24px -10px rgb(0 0 0 / 0.50); } /* ── 3. Base font (no background override — TailAdmin owns that) ── */ body { font-family: var(--font-family); } /* ── 3. Form Elements ── */ .form-group { margin-bottom: var(--space-lg); } label { display: block; margin-bottom: var(--space-sm); font-weight: 600; font-size: 14px; color: var(--text-primary); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select { width: 100%; padding: var(--space-md) var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--card-bg); color: var(--text-primary); font-size: 14px; font-family: var(--font-family); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled, textarea:disabled, select:disabled { background-color: var(--bg-tertiary); cursor: not-allowed; opacity: 0.6; } textarea { resize: vertical; min-height: 100px; } /* Fix browser autofill yellow/white flash */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary); border-color: var(--border) !important; transition: background-color 9999s ease-in-out 0s; } /* ── 4. Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; font-family: var(--font-family); cursor: pointer; border: 1px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); text-decoration: none; white-space: nowrap; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background-color: var(--primary-500); color: #fff; border-color: var(--primary-500); } .btn-primary:hover:not(:disabled) { background-color: var(--primary-600); border-color: var(--primary-600); } .btn-primary:active:not(:disabled) { background-color: var(--primary-700); } .btn-secondary { background-color: var(--card-bg); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background-color: var(--bg-secondary); } .btn-danger { background-color: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover:not(:disabled) { background-color: #dc2626; } .btn-success { background-color: var(--success); color: #fff; border-color: var(--success); } .btn-sm { padding: var(--space-sm) var(--space-md); font-size: 12px; } /* ── 5. Badges ── */ .badge { display: inline-flex; align-items: center; padding: 3px var(--space-sm); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; } .badge-success { background-color: rgba(16, 185, 129, 0.12); color: #059669; } .badge-danger { background-color: rgba(239, 68, 68, 0.12); color: #dc2626; } .badge-warning { background-color: rgba(245, 158, 11, 0.12); color: #d97706; } .badge-info, .badge-primary { background-color: var(--primary-100); color: var(--primary-600); } /* ── 6. Table ── */ .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead { background-color: var(--bg-secondary); border-bottom: 2px solid var(--border); } th { padding: var(--space-md) var(--space-lg); text-align: left; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; } td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); color: var(--text-secondary); } tbody tr { transition: background-color var(--transition-fast); } tbody tr:hover { background-color: var(--bg-tertiary); } tbody tr:last-child td { border-bottom: none; } /* ── 7. Loading Spinner ── */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary-500); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── 8. Utility ── */ /* NOTE: .hidden is intentionally omitted — Tailwind's utility (without !important) is required so that responsive variants like lg:flex can override it correctly. */ /* Use .d-none for JS-controlled visibility to avoid Tailwind conflicts */ .d-none { display: none; } /* Layout utility classes (replaces inline styles) */ .content-scroll { flex: 1; overflow-y: auto; } .content-pad { padding: 24px; } .content-area { flex: 1; overflow: hidden; padding: 16px; box-sizing: border-box; } .input-with-btn { display: flex; gap: 6px; align-items: center; } .input-flex { flex: 1; } .search-status { padding: var(--space-md); border-radius: var(--radius-md); font-size: 13px; } /* ── Sidebar placeholder: reserve sidebar width before injection to prevent layout shift ── */ #sidebar-placeholder { flex-shrink: 0; } @media (min-width: 1024px) { #sidebar-placeholder { width: 290px; } }