/* ============================================================ SaaS Platform — Design System & Theme Engine Supports: light mode (default) and dark mode Toggle: data-theme="dark" on element ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES — LIGHT THEME (DEFAULT) ============================================================ */ :root, [data-theme="light"] { /* --- Surface Colors --- */ --color-bg: #f4f6f9; --color-bg-alt: #eef0f5; --color-surface: #ffffff; --color-surface-raised:#ffffff; --color-surface-overlay:#ffffff; --color-border: #e2e6ed; --color-border-strong: #c8cdd8; --color-divider: #edf0f5; /* --- Text Colors --- */ --color-text-primary: #111827; --color-text-secondary:#4b5563; --color-text-tertiary: #9ca3af; --color-text-disabled: #c0c8d4; --color-text-inverse: #ffffff; --color-text-link: #3b63e8; --color-text-link-hover:#2a4fcc; /* --- Brand / Primary --- */ --color-primary: #3b63e8; --color-primary-hover: #2a4fcc; --color-primary-active:#1f3db5; --color-primary-light: #eef2fd; --color-primary-text: #ffffff; /* --- Semantic Colors --- */ --color-success: #16a34a; --color-success-light: #f0fdf4; --color-success-border:#86efac; --color-warning: #d97706; --color-warning-light: #fffbeb; --color-warning-border:#fcd34d; --color-danger: #dc2626; --color-danger-light: #fef2f2; --color-danger-border: #fca5a5; --color-info: #0284c7; --color-info-light: #f0f9ff; --color-info-border: #7dd3fc; /* --- Status Badge Colors --- */ --badge-active-bg: #dcfce7; --badge-active-text: #15803d; --badge-inactive-bg: #f1f5f9; --badge-inactive-text: #64748b; --badge-pending-bg: #fef9c3; --badge-pending-text: #854d0e; --badge-danger-bg: #fee2e2; --badge-danger-text: #991b1b; /* --- Sidebar --- */ --sidebar-bg: #1c2232; --sidebar-hover: #252d40; --sidebar-active: #3b63e8; --sidebar-text: #94a3b8; --sidebar-text-active: #ffffff; --sidebar-border: #252d40; --sidebar-width: 240px; /* --- Topbar --- */ --topbar-bg: #ffffff; --topbar-border: #e2e6ed; --topbar-text: #374151; --topbar-height: 60px; /* --- Input / Form --- */ --input-bg: #ffffff; --input-border: #d1d5db; --input-border-focus: #3b63e8; --input-text: #111827; --input-placeholder: #9ca3af; --input-radius: 8px; /* --- Button --- */ --btn-radius: 8px; /* --- Card --- */ --card-radius: 12px; --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06); /* --- Table --- */ --table-header-bg: #f9fafb; --table-row-hover: #f8fafc; --table-border: #e2e6ed; /* --- Code Block --- */ --code-bg: #1e1e2e; --code-text: #cdd6f4; --code-border: #313244; /* --- Modal / Overlay --- */ --overlay-bg: rgba(0, 0, 0, 0.5); --modal-bg: #ffffff; /* --- Scrollbar --- */ --scrollbar-track: #f1f3f5; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover:#94a3b8; /* --- Spacing & Misc --- */ --border-radius-sm: 6px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 16px; --border-radius-full: 9999px; --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04); --focus-ring: 0 0 0 3px rgba(59, 99, 232, 0.25); } /* ============================================================ 2. DARK THEME OVERRIDES ============================================================ */ [data-theme="dark"] { --color-bg: #0f1117; --color-bg-alt: #151920; --color-surface: #1a1f2e; --color-surface-raised:#1f2537; --color-surface-overlay:#232a3b; --color-border: #2a3248; --color-border-strong: #3a4460; --color-divider: #232a3b; --color-text-primary: #f1f5f9; --color-text-secondary:#94a3b8; --color-text-tertiary: #64748b; --color-text-disabled: #3a4460; --color-text-inverse: #0f1117; --color-text-link: #6b8ef5; --color-text-link-hover:#8aa5f7; --color-primary: #4f77f0; --color-primary-hover: #6b8ef5; --color-primary-active:#3b63e8; --color-primary-light: #1a2240; --color-primary-text: #ffffff; --color-success: #22c55e; --color-success-light: #0f2218; --color-success-border:#166534; --color-warning: #f59e0b; --color-warning-light: #1f1a0d; --color-warning-border:#854d0e; --color-danger: #f87171; --color-danger-light: #200f0f; --color-danger-border: #7f1d1d; --color-info: #38bdf8; --color-info-light: #0c1f2e; --color-info-border: #0369a1; --badge-active-bg: #14532d; --badge-active-text: #4ade80; --badge-inactive-bg: #1e2535; --badge-inactive-text: #94a3b8; --badge-pending-bg: #422006; --badge-pending-text: #fbbf24; --badge-danger-bg: #450a0a; --badge-danger-text: #fca5a5; --sidebar-bg: #111625; --sidebar-hover: #1a2035; --sidebar-active: #4f77f0; --sidebar-text: #64748b; --sidebar-text-active: #f1f5f9; --sidebar-border: #1a2035; --topbar-bg: #1a1f2e; --topbar-border: #2a3248; --topbar-text: #e2e8f0; --input-bg: #1f2537; --input-border: #2a3248; --input-border-focus: #4f77f0; --input-text: #f1f5f9; --input-placeholder: #4b5563; --card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --table-header-bg: #151920; --table-row-hover: #1a2035; --table-border: #2a3248; --overlay-bg: rgba(0, 0, 0, 0.7); --modal-bg: #1a1f2e; --scrollbar-track: #1a1f2e; --scrollbar-thumb: #2a3248; --scrollbar-thumb-hover:#3a4460; --focus-ring: 0 0 0 3px rgba(79, 119, 240, 0.3); } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg); transition: background-color var(--transition-slow), color var(--transition-slow); min-height: 100vh; } a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-text-link-hover); } img, video { max-width: 100%; height: auto; } /* ============================================================ 4. SCROLLBAR STYLING ============================================================ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ============================================================ 5. LAYOUT — AUTHENTICATED SHELL ============================================================ */ .app-shell { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; transition: transform var(--transition-base); } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; border-bottom: 1px solid var(--sidebar-border); text-decoration: none; } .sidebar-logo-text { font-size: 1rem; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; } .sidebar-logo-badge { font-size: 0.625rem; background: var(--color-primary); color: white; padding: 1px 6px; border-radius: var(--border-radius-full); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .sidebar-logo-icon { font-size: 1.35rem; color: #ffffff; flex-shrink: 0; line-height: 1; } .sidebar-section { padding: 20px 12px 8px; } .sidebar-section-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-text); padding: 0 8px 6px; opacity: 0.6; } .sidebar-nav { flex: 1; padding: 8px 12px; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--border-radius-md); color: var(--sidebar-text); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all var(--transition-fast); margin-bottom: 2px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .sidebar-item:hover { background: var(--sidebar-hover); color: #e2e8f0; } .sidebar-item.active { background: var(--sidebar-active); color: var(--sidebar-text-active); } .sidebar-item .item-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .sidebar-item.active .item-icon { opacity: 1; } .sidebar-item .item-icon.bi { font-size: 1.125rem; line-height: 1; width: 1.125rem; height: 1.125rem; display: inline-flex; align-items: center; justify-content: center; } .sidebar-item .item-badge { margin-left: auto; font-size: 0.6875rem; background: rgba(255,255,255,0.15); color: inherit; padding: 1px 7px; border-radius: var(--border-radius-full); font-weight: 600; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--sidebar-border); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--border-radius-md); cursor: pointer; text-decoration: none; transition: background var(--transition-fast); } .sidebar-user:hover { background: var(--sidebar-hover); } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.6875rem; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Main Content Area */ .main-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; overflow-x: visible; overflow-y: visible; } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-height); background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); display: flex; align-items: center; padding: 0 24px; gap: 16px; } .topbar-title { font-size: 1rem; font-weight: 600; color: var(--topbar-text); flex: 1; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .topbar-btn:hover { background: var(--color-bg-alt); color: var(--color-text-primary); } /* Page content */ .page-content { padding: 28px 32px; flex: 1; min-width: 0; overflow-x: visible; overflow-y: visible; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .page-title { font-size: 1.375rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.02em; } .page-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 2px; } /* ============================================================ 6. CARDS ============================================================ */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); transition: box-shadow var(--transition-base), border-color var(--transition-base); } .card:hover { box-shadow: var(--card-shadow-hover); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; } .card-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); } .card-subtitle { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 2px; } .card-body { padding: 18px 22px; } .card-footer { padding: 14px 22px; border-top: 1px solid var(--color-border); background: var(--color-bg); border-radius: 0 0 var(--card-radius) var(--card-radius); } /* Stat Cards */ .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; } .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; } .stat-icon .bi { font-size: 1.25rem; line-height: 1; } .stat-icon-primary { background: var(--color-primary-light); color: var(--color-primary); } .stat-icon-success { background: var(--color-success-light); color: var(--color-success); } .stat-icon-warning { background: var(--color-warning-light); color: var(--color-warning); } .stat-icon-danger { background: var(--color-danger-light); color: var(--color-danger); } .stat-info { flex: 1; min-width: 0; } .stat-value { font-size: 1.625rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.03em; line-height: 1.2; } .stat-label { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 2px; } .stat-change { font-size: 0.75rem; font-weight: 600; margin-top: 4px; } .stat-change.up { color: var(--color-success); } .stat-change.down { color: var(--color-danger); } /* ============================================================ 7. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; font-size: 0.875rem; font-weight: 600; border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; white-space: nowrap; line-height: 1.4; outline: none; position: relative; } .btn:focus-visible { box-shadow: var(--focus-ring); } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: white; } .btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-primary); } .btn-secondary:hover { background: var(--color-bg-alt); border-color: var(--color-border-strong); } .btn-danger { background: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: white; } .btn-success { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success); } .btn-success:hover { background: var(--color-success); border-color: var(--color-success); color: white; } .btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); } .btn-ghost:hover { background: var(--color-bg-alt); color: var(--color-text-primary); } .btn-sm { padding: 5px 11px; font-size: 0.8125rem; } .btn-lg { padding: 11px 22px; font-size: 1rem; } .btn-xl { padding: 14px 28px; font-size: 1.0625rem; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--border-radius-md); } .btn-icon-sm { width: 30px; height: 30px; } .btn-block { width: 100%; } /* Loading spinner on button */ .btn.loading::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn.loading { pointer-events: none; } /* ============================================================ 8. FORMS ============================================================ */ .form-group { margin-bottom: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; } .form-label.required::after { content: ' *'; color: var(--color-danger); } .form-input, .form-select, .form-textarea { width: 100%; padding: 9px 13px; font-size: 0.9375rem; color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--input-radius); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; font-family: inherit; line-height: 1.5; } .form-input::placeholder, .form-textarea::placeholder { color: var(--input-placeholder); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--input-border-focus); box-shadow: var(--focus-ring); } .form-input.error, .form-select.error, .form-textarea.error { border-color: var(--color-danger); } .form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-bg-alt); } .form-textarea { resize: vertical; min-height: 90px; } .form-hint { font-size: 0.8125rem; color: var(--color-text-tertiary); margin-top: 5px; } .form-error { font-size: 0.8125rem; color: var(--color-danger); margin-top: 5px; display: flex; align-items: center; gap: 4px; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px; padding-right: 36px; cursor: pointer; } /* Toggle / Checkbox */ .form-check { display: flex; align-items: center; gap: 10px; cursor: pointer; } .form-check-input { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--input-border); background: var(--input-bg); cursor: pointer; accent-color: var(--color-primary); } /* Toggle Switch */ .toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 10px; } .toggle input { display: none; } .toggle-track { width: 40px; height: 22px; background: var(--color-border-strong); border-radius: 11px; transition: background var(--transition-base); position: relative; } .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform var(--transition-base); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .toggle input:checked + .toggle-track { background: var(--color-primary); } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .toggle-label { font-size: 0.875rem; color: var(--color-text-primary); font-weight: 500; } /* Input Group */ .input-group { display: flex; align-items: stretch; } .input-group .form-input { border-radius: 0; flex: 1; } .input-group .form-input:first-child { border-radius: var(--input-radius) 0 0 var(--input-radius); } .input-group .form-input:last-child { border-radius: 0 var(--input-radius) var(--input-radius) 0; } .input-group-addon { display: flex; align-items: center; padding: 0 12px; background: var(--color-bg-alt); border: 1px solid var(--input-border); color: var(--color-text-secondary); font-size: 0.875rem; white-space: nowrap; } .input-group-addon:first-child { border-right: none; border-radius: var(--input-radius) 0 0 var(--input-radius); } .input-group-addon:last-child { border-left: none; border-radius: 0 var(--input-radius) var(--input-radius) 0; } /* ============================================================ 9. TABLE ============================================================ */ /* No overflow scroll here: it clipped row dropdowns and forced extra scrollbars. Wide tables scroll with the page; height grows with rows. */ .table-wrapper { overflow: visible; border-radius: var(--card-radius); border: 1px solid var(--color-border); background: var(--color-surface); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table th { text-align: left; padding: 11px 16px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); background: var(--table-header-bg); border-bottom: 1px solid var(--table-border); white-space: nowrap; } .table td { padding: 12px 16px; border-bottom: 1px solid var(--table-border); color: var(--color-text-primary); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--transition-fast); } .table tbody tr:hover { background: var(--table-row-hover); } .table-empty { padding: 48px 16px; text-align: center; color: var(--color-text-tertiary); } .table-empty-icon { font-size: 2rem; margin-bottom: 8px; line-height: 1; } .table-empty-icon .bi { font-size: 2rem; line-height: 1; opacity: 0.85; } .table-empty-text { font-size: 0.9375rem; font-weight: 500; } .table-empty-hint { font-size: 0.8125rem; margin-top: 4px; } /* ============================================================ 10. BADGES / PILLS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; border-radius: var(--border-radius-full); white-space: nowrap; } .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-active { background: var(--badge-active-bg); color: var(--badge-active-text); } .badge-inactive { background: var(--badge-inactive-bg); color: var(--badge-inactive-text); } .badge-pending { background: var(--badge-pending-bg); color: var(--badge-pending-text); } .badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); } .badge-primary { background: var(--color-primary-light); color: var(--color-primary); } .badge-info { background: var(--color-info-light); color: var(--color-info); } /* ============================================================ 11. ALERTS ============================================================ */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--border-radius-lg); border: 1px solid; font-size: 0.875rem; line-height: 1.5; } .alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; } .alert-icon .bi { font-size: 1.05rem; line-height: 1; } .alert-body { flex: 1; } .alert-title { font-weight: 600; margin-bottom: 2px; } .alert-success { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success); } .alert-warning { background: var(--color-warning-light); border-color: var(--color-warning-border); color: var(--color-warning); margin-bottom: 10px; } .alert-danger { background: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); } .alert-info { background: var(--color-info-light); border-color: var(--color-info-border); color: var(--color-info); } /* Flash banner */ .flash-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; } .flash { padding: 14px 16px; border-radius: var(--border-radius-lg); border: 1px solid; font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: 10px; animation: slideInRight 0.25s ease; backdrop-filter: blur(8px); } .flash-success { background: var(--color-success-light); border-color: var(--color-success-border); color: var(--color-success); } .flash-error { background: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); } .flash-warning { background: var(--color-warning-light); border-color: var(--color-warning-border); color: var(--color-warning); } .flash-info { background: var(--color-info-light); border-color: var(--color-info-border); color: var(--color-info); } .flash-close { margin-left: auto; background: none; border: none; cursor: pointer; color: currentColor; opacity: 0.7; font-size: 1rem; padding: 0; line-height: 1; flex-shrink: 0; } /* ============================================================ 12. MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; animation: fadeIn 0.2s ease forwards; } .modal { background: var(--modal-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 500px; max-height: calc(100vh - 32px); overflow-y: auto; transform: scale(0.96); animation: modalIn 0.2s ease forwards; } .modal-lg { max-width: 720px; } .modal-xl { max-width: 960px; } .modal-sm { max-width: 380px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; } .modal-title { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); } .modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); font-size: 1.25rem; padding: 4px; border-radius: var(--border-radius-sm); line-height: 1; transition: color var(--transition-fast); } .modal-close:hover { color: var(--color-text-primary); } .modal-body { padding: 20px 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* ============================================================ 13. TABS ============================================================ */ .tabs { border-bottom: 1px solid var(--color-border); display: flex; gap: 4px; margin-bottom: 24px; overflow-x: auto; } .tab-item { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; margin-bottom: -1px; border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .tab-item:hover { color: var(--color-text-primary); background: var(--color-bg-alt); } .tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; } /* ============================================================ 14. DROPDOWN ============================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); z-index: 200; padding: 6px; visibility: hidden; opacity: 1; transform: none; pointer-events: none; transition: none; } .dropdown.open .dropdown-menu { visibility: visible; pointer-events: auto; } /* Row actions: JS sets position:fixed + coordinates (avoids table overflow clipping) */ .dropdown-menu.dropdown-menu--fixed { transform: none; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 0.875rem; color: var(--color-text-primary); border-radius: var(--border-radius-md); cursor: pointer; transition: background var(--transition-fast); text-decoration: none; border: none; background: none; width: 100%; text-align: left; } .dropdown-item:hover { background: var(--color-bg-alt); } .dropdown-item.danger { color: var(--color-danger); } .dropdown-item.danger:hover { background: var(--color-danger-light); } .dropdown-item-icon { font-size: 0.9375rem; opacity: 0.88; flex-shrink: 0; } .dropdown-divider { height: 1px; background: var(--color-border); margin: 4px 0; } .dropdown-header { padding: 6px 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); } /* ============================================================ 15. CODE / MONOSPACE ============================================================ */ code, .code { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace; font-size: 0.85em; background: var(--code-bg); color: var(--code-text); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--code-border); } pre, .code-block { font-family: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, monospace; font-size: 0.85rem; background: var(--code-bg); color: var(--code-text); padding: 16px 18px; border-radius: var(--border-radius-lg); border: 1px solid var(--code-border); overflow-x: auto; line-height: 1.7; } pre code { background: none; padding: 0; border: none; font-size: inherit; } /* ============================================================ 16. PAGINATION ============================================================ */ .pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); background: var(--color-surface); text-decoration: none; transition: all var(--transition-fast); } .page-link:hover { background: var(--color-bg-alt); color: var(--color-text-primary); } .page-link.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } .page-link.disabled { opacity: 0.4; pointer-events: none; } /* ============================================================ 17. GUEST / AUTH LAYOUT ============================================================ */ .auth-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 20px; } .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-xl); padding: 36px 40px; width: 100%; max-width: 440px; } .auth-logo { text-align: center; margin-bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .auth-logo-icon { font-size: 2.25rem; color: var(--color-primary); line-height: 1; } .auth-logo-text { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.03em; } .auth-title { font-size: 1.375rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; letter-spacing: -0.02em; text-align: center; } .auth-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); text-align: center; margin-bottom: 28px; } .auth-footer { text-align: center; margin-top: 22px; font-size: 0.875rem; color: var(--color-text-secondary); } /* ============================================================ 18. LANDING PAGE ============================================================ */ .landing-nav { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); } .landing-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; } .landing-nav-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.03em; text-decoration: none; flex-shrink: 0; } .landing-nav-logo-icon { font-size: 1.25rem; color: var(--color-primary); line-height: 1; } .landing-nav-links { display: flex; gap: 4px; flex: 1; } .landing-nav-link { padding: 6px 12px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); border-radius: var(--border-radius-md); transition: all var(--transition-fast); } .landing-nav-link:hover { color: var(--color-text-primary); background: var(--color-bg-alt); } .landing-nav-actions { display: flex; gap: 10px; align-items: center; } .hero { max-width: 1200px; margin: 0 auto; padding: 80px 24px 64px; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary-light); color: var(--color-primary); border: 1px solid rgba(59, 99, 232, 0.2); padding: 4px 12px; border-radius: var(--border-radius-full); font-size: 0.8125rem; font-weight: 600; margin-bottom: 24px; } .hero-badge-icon { display: inline-flex; font-size: 1rem; line-height: 1; } .feature-card-icon { font-size: 1.75rem; color: var(--color-primary); margin-bottom: 14px; line-height: 1; display: flex; align-items: center; } .hero-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.04em; line-height: 1.15; margin-bottom: 20px; } .hero-title span { color: var(--color-primary); } .hero-subtitle { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 580px; margin: 0 auto 36px; line-height: 1.7; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ============================================================ 19. UTILITIES ============================================================ */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-md { font-size: 0.9375rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-tertiary { color: var(--color-text-tertiary); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-info { color: var(--color-info); } .text-brand { color: var(--color-primary); } .text-center { text-align: center; } .text-right { text-align: right; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-all { word-break: break-all; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .p-0 { padding: 0; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .rounded { border-radius: var(--border-radius-md); } .rounded-lg { border-radius: var(--border-radius-lg); } .rounded-full { border-radius: var(--border-radius-full); } .border { border: 1px solid var(--color-border); } .border-top { border-top: 1px solid var(--color-border); } .bg-surface { background: var(--color-surface); } .bg-alt { background: var(--color-bg-alt); } .shadow { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .opacity-50 { opacity: 0.5; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Divider */ .divider { height: 1px; background: var(--color-border); margin: 16px 0; } .divider-v { width: 1px; background: var(--color-border); align-self: stretch; margin: 0 8px; } /* Avatar */ .avatar { border-radius: 50%; object-fit: cover; background: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: white; flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; } .avatar-md { width: 36px; height: 36px; font-size: 0.875rem; } .avatar-lg { width: 48px; height: 48px; font-size: 1rem; } .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; } /* Theme Toggle Button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); font-size: 1rem; } .theme-toggle:hover { background: var(--color-bg-alt); color: var(--color-text-primary); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-moon i, .theme-toggle .icon-sun i { font-size: 1rem; line-height: 1; display: block; } /* Maintenance page */ .maintenance-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); } .maintenance-container { text-align: center; padding: 48px 32px; max-width: 460px; } .maintenance-icon { font-size: 3rem; margin-bottom: 16px; } .maintenance-container h1 { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 8px; } .maintenance-container h2 { font-size: 1.125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 12px; } .maintenance-container p { color: var(--color-text-secondary); margin-bottom: 16px; } /* ============================================================ 20. ANIMATIONS ============================================================ */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes modalIn { from { transform: scale(0.93) translateY(-8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s ease infinite; } .animate-fade-in { animation: fadeIn 0.3s ease; } /* Loading skeleton */ .skeleton { background: linear-gradient( 90deg, var(--color-bg-alt) 25%, var(--color-border) 50%, var(--color-bg-alt) 75% ); background-size: 200% 100%; animation: skeleton-wave 1.5s infinite; border-radius: var(--border-radius-md); } @keyframes skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ 21. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .page-content { padding: 20px 16px; } .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-header { flex-direction: column; align-items: flex-start; } .form-row { grid-template-columns: 1fr; } .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; } .auth-card { padding: 24px 20px; } .hero-title { font-size: 1.75rem; } .hero-actions { flex-direction: column; } .tabs { gap: 0; } } @media (max-width: 480px) { .flash-container { max-width: calc(100vw - 32px); } .modal { border-radius: var(--border-radius-lg); } .table th, .table td { padding: 10px 12px; } } /* ============================================================ 22. PRINT ============================================================ */ @media print { .sidebar, .topbar, .flash-container, .btn { display: none !important; } .main-content { margin-left: 0; } body { background: white; color: black; } }