/* ══════════════════════════════════════════════════════════════════════ 1Fit Design System — Impeccable-grade ══════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ────────────────────────────────────────────────── */ :root { --accent: #3447F6; --accent-hover: #2a3ad4; --accent-ring: rgba(52, 71, 246, 0.18); --sidebar: #101828; --sidebar-dark: #0F172A; /* Tinted neutrals — subtle blue undertone instead of pure gray */ --neutral-50: #f8f9fc; --neutral-100: #f1f3f9; --neutral-200: #e3e6f0; --neutral-300: #cdd1de; --neutral-400: #98a0b3; --neutral-500: #6b7385; --neutral-600: #4a5068; --neutral-700: #353a4f; --neutral-800: #1e2235; --neutral-900: #101828; /* Elevation shadows — tinted, not pure black */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.06); --shadow-xl: 0 16px 40px rgba(16, 24, 40, 0.16), 0 4px 12px rgba(16, 24, 40, 0.08); /* Transition durations — 100/300/500 rule */ --duration-fast: 120ms; /* buttons, toggles */ --duration-normal: 200ms; /* menus, tooltips */ --duration-slow: 350ms; /* modals, drawers */ } /* ── Navigation ─────────────────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.875rem; border-radius: 0.5rem; color: var(--neutral-400); font-size: 0.875rem; font-weight: 500; transition: color var(--duration-fast) ease-out, background var(--duration-fast) ease-out; text-decoration: none; position: relative; } .nav-item:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; } .nav-item.active { background: rgba(52, 71, 246, 0.12); color: var(--accent); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 0.375rem; bottom: 0.375rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } /* Section header (group label inside sidebar) */ .nav-group-header { padding: 0.75rem 0.875rem 0.25rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.6); } .nav-group-header:first-child { padding-top: 0.25rem; } /* ── Sidebar layout (single source of truth: html.sidebar-is-collapsed) ─ Everything that visually depends on collapsed state lives in CSS rules keyed off the html class. The inline boot script in sets that class synchronously before first paint, and toggleCollapse() in Alpine keeps it in sync afterwards. No Alpine :class or x-show is used for the layout state — eliminates the load-time flash. */ /* Width is 16rem by default, 4rem when collapsed (desktop only). */ .sidebar-aside { width: 16rem; } .sidebar-main { margin-left: 0; } @media (min-width: 768px) { .sidebar-main { margin-left: 16rem; } html.sidebar-is-collapsed .sidebar-aside { width: 4rem; } html.sidebar-is-collapsed .sidebar-main { margin-left: 4rem; } } /* Overflow goes on the inner containers, NOT the aside itself — the floating edge-toggle button needs to escape the aside's right edge by 0.75rem. Each section that could hold an overflowing label clips itself instead. */ .sidebar-aside .sidebar-header, .sidebar-aside .notif-bell-wrapper, .sidebar-aside .sidebar-footer { overflow: hidden; } /* The nav clips horizontally but MUST scroll vertically — the menu is taller than the viewport on smaller screens */ .sidebar-aside nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .sidebar-aside nav::-webkit-scrollbar { width: 4px; } .sidebar-aside nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } .sidebar-aside .nav-item, .sidebar-aside .nav-group-header { white-space: nowrap; } /* Header padding tightens when collapsed. */ @media (min-width: 768px) { html.sidebar-is-collapsed .sidebar-aside .sidebar-header { padding-left: 0.5rem; padding-right: 0.5rem; } html.sidebar-is-collapsed .sidebar-aside .sidebar-country-switch { display: none; } } /* Edge toggle arrow rotates via CSS instead of Alpine :class. */ .sidebar-edge-toggle svg { transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); } html.sidebar-is-collapsed .sidebar-edge-toggle svg { transform: rotate(180deg); } /* Notification panel position. Driven by CSS off the html class, no :style needed. */ .notif-panel { left: 17rem; bottom: 1rem; width: 370px; max-height: calc(100vh - 2rem); z-index: 9999; } html.sidebar-is-collapsed .notif-panel { left: 5rem; } /* ── Collapsed sidebar mode — inner element styles (desktop only) ─── */ @media (min-width: 768px) { html.sidebar-is-collapsed .sidebar-aside .nav-item { justify-content: center; padding: 0.5rem; gap: 0; } html.sidebar-is-collapsed .sidebar-aside .nav-label, html.sidebar-is-collapsed .sidebar-aside .nav-group-header > span:not(.nav-group-line), html.sidebar-is-collapsed .sidebar-aside .nav-brand-title, html.sidebar-is-collapsed .sidebar-aside .nav-footer-info { display: none; } html.sidebar-is-collapsed .sidebar-aside .nav-group-header { padding: 0.5rem 0.5rem 0; } html.sidebar-is-collapsed .sidebar-aside .nav-group-line { display: block; height: 1px; background: rgba(255, 255, 255, 0.08); margin: 0.25rem 0.5rem; } /* Badges become small floating dots */ html.sidebar-is-collapsed .sidebar-aside .nav-badge { position: absolute; top: 0.25rem; right: 0.25rem; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; } /* Active-bar shifts to be visible when item is centered */ html.sidebar-is-collapsed .sidebar-aside .nav-item.active::before { left: -0.5rem; } /* Tooltip on hover */ html.sidebar-is-collapsed .sidebar-aside .nav-item .nav-tooltip { position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); background: #1e293b; color: #f1f5f9; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) ease-out; z-index: 50; } html.sidebar-is-collapsed .sidebar-aside .nav-item:hover .nav-tooltip { opacity: 1; } html.sidebar-is-collapsed .nav-tooltip { display: block; } } .nav-group-line { display: none; } .nav-tooltip { display: none; } /* ── Sidebar transitions ──────────────────────────────────────────── Mobile slide uses transform (GPU-cheap). Desktop collapse animates width on the aside and margin-left on the main panel — both on the same curve so they finish in sync. No transitions until gets .sidebar-ready (added by appStore.init() after the first commit), so the persisted state doesn't animate in on reload. */ .sidebar-aside, .sidebar-main { transition: none; } html.sidebar-ready .sidebar-aside { transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), width 280ms cubic-bezier(0.32, 0.72, 0, 1); will-change: width; } html.sidebar-ready .sidebar-main { transition: margin-left 280ms cubic-bezier(0.32, 0.72, 0, 1); will-change: margin-left; } /* ── Floating edge toggle ───────────────────────────────────────── */ .sidebar-edge-toggle { position: absolute; top: 4.5rem; right: -0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #0F172A; color: #94a3b8; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 50; transition: color var(--duration-fast) ease-out, border-color var(--duration-fast) ease-out, background var(--duration-fast) ease-out, transform var(--duration-fast) ease-out; cursor: pointer; } .sidebar-edge-toggle:hover { color: #ffffff; background: var(--accent); border-color: var(--accent); transform: scale(1.1); } /* ── Metric cards ──────────────────────────────────────────────────── */ .metric-card { background: linear-gradient(135deg, var(--neutral-50) 0%, #eef2ff 100%); border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm); border: 1px solid var(--neutral-200); transition: box-shadow var(--duration-normal) ease-out, transform var(--duration-normal) ease-out; } .metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ── Section header ────────────────────────────────────────────────── */ .section-header { font-size: 1.125rem; font-weight: 700; color: var(--neutral-900); padding-bottom: 0.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--neutral-200); } /* ── Tables ─────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } .data-table th { background: var(--neutral-100); padding: 0.625rem 1rem; text-align: left; font-weight: 600; color: var(--neutral-600); border-bottom: 2px solid var(--neutral-200); position: sticky; top: 0; z-index: 1; } .data-table td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--neutral-100); color: var(--neutral-700); transition: background var(--duration-fast) ease-out; } .data-table tbody tr:hover td { background: var(--neutral-50); } .data-table tbody tr:nth-child(even) td { background: var(--neutral-50); } .data-table tbody tr:nth-child(even):hover td { background: var(--neutral-100); } /* ── Forms ──────────────────────────────────────────────────────────── */ .form-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--neutral-300); border-radius: 0.5rem; background: var(--neutral-50); font-size: 0.875rem; color: var(--neutral-900); transition: border-color var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .form-input::placeholder { color: var(--neutral-400); } .form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--neutral-600); margin-bottom: 0.25rem; } .form-select { width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; border: 1px solid var(--neutral-300); border-radius: 0.5rem; background: var(--neutral-50) 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 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.5rem center; background-size: 1.25rem; font-size: 0.875rem; color: var(--neutral-900); appearance: none; transition: border-color var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out; } .form-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--duration-fast) ease-out; border: none; position: relative; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--accent); color: white; box-shadow: 0 1px 3px rgba(52, 71, 246, 0.2); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 2px 8px rgba(52, 71, 246, 0.25); } .btn-primary:active { background: #232fc0; transform: scale(0.98); box-shadow: none; } .btn-secondary { background: var(--neutral-100); color: var(--neutral-600); border: 1px solid var(--neutral-200); } .btn-secondary:hover { background: var(--neutral-200); } .btn-secondary:active { background: var(--neutral-300); transform: scale(0.98); } .btn-danger { background: #fee2e2; color: #dc2626; } .btn-danger:hover { background: #fecaca; } .btn-danger:active { background: #fca5a5; transform: scale(0.98); } .btn-success { background: #d1fae5; color: #059669; } .btn-success:hover { background: #a7f3d0; } .btn-success:active { background: #6ee7b7; transform: scale(0.98); } .btn-outline { background: transparent; color: var(--neutral-500); border: 1px solid var(--neutral-300); } .btn-outline:hover { background: var(--neutral-100); border-color: var(--neutral-400); } .btn-outline:active { background: var(--neutral-200); transform: scale(0.98); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } /* ── Toast ──────────────────────────────────────────────────────────── */ .toast { padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in 0.3s ease-out; max-width: 400px; } .toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .toast-info { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; } @keyframes toast-in { from { transform: translateX(100%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* ── Bonus card ────────────────────────────────────────────────────── */ .bonus-card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm); border: 1px solid var(--neutral-200); transition: box-shadow var(--duration-normal) ease-out; } .bonus-card:hover { box-shadow: var(--shadow-md); } /* ── Skeleton loading ──────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 0.5rem; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Page header ───────────────────────────────────────────────────── */ .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 1.75rem; font-weight: 800; color: var(--neutral-900); letter-spacing: -0.025em; } .page-header p { color: var(--neutral-500); font-size: 0.875rem; margin-top: 0.25rem; } /* ── Collapsible details ───────────────────────────────────────────── */ details summary { cursor: pointer; user-select: none; } details summary::-webkit-details-marker { display: none; } /* ── Badge ─────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .badge-green { background: #dcfce7; color: #166534; } .badge-orange { background: #ffedd5; color: #9a3412; } .badge-red { background: #fee2e2; color: #991b1b; } .badge-blue { background: #dbeafe; color: #1e40af; } .badge-gray { background: var(--neutral-100); color: var(--neutral-600); } /* ── Notification panel ───────────────────────────────────────────── */ .notif-panel { box-shadow: var(--shadow-xl); } .notif-unread { background: linear-gradient(90deg, #eef2ff 0%, #fff 60%); border-left: 3px solid var(--accent); } /* ── Global focus-visible ─────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input:focus, select:focus, textarea:focus { outline: none; } /* ── Accessibility: prefers-reduced-motion ────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .metric-card:hover { transform: none; } } /* ── Mobile responsive ────────────────────────────────────────────── */ @media (max-width: 767px) { .page-header { margin-bottom: 1.25rem; } .page-header h1 { font-size: 1.375rem; } .metric-card { padding: 0.875rem; } .data-table th, .data-table td { padding: 0.5rem 0.625rem; font-size: 0.8125rem; } .toast { max-width: calc(100vw - 2rem); } .notif-panel { left: 0.5rem !important; right: 0.5rem !important; bottom: 0.5rem !important; width: auto !important; max-height: 60vh !important; } }