/* * CircoFlows — Shared Design System v2.0 * Loaded by: admin, merchant, referral-partner layouts * Portal accent colour set via --accent on :root in each layout */ /* ───────────────────────────────────────────────────────────────────────────── DESIGN TOKENS (light mode defaults) ───────────────────────────────────────────────────────────────────────────── */ :root { /* Portal accent — OVERRIDE per portal */ --accent: #4361EE; --accent-2: #3651D4; --accent-rgb: 67, 97, 238; /* Sidebar — always dark */ --sb-bg: #050D1F; --sb-bg2: #0C1829; --sb-bg3: #162038; --sb-border: #1A2D4A; --sb-text: #5A7399; --sb-text-h: #A8BBDA; --sb-text-a: #C5D1F0; --sb-section: #304260; --W: 260px; /* Page */ --body: #F0F4FB; --surface: #FFFFFF; --surface-2: #F8FAFF; --border: #E2E8F4; --border-2: #CBD5E8; /* Text */ --tx-1: #0A1628; --tx-2: #3D4F6E; --tx-3: #6E7E9B; /* Header */ --H: 58px; --hdr-bg: rgba(255,255,255,.97); --hdr-border: #E2E8F4; --hdr-shadow: 0 1px 0 rgba(5,13,31,.05), 0 2px 14px rgba(5,13,31,.05); --hdr-btn-h: #F0F4FB; /* Status colours */ --green: #10B981; --amber: #F59E0B; --rose: #F43F5E; --blue: #3B82F6; /* Misc */ --r: 8px; --r-lg: 12px; --t: .2s; --shadow: 0 1px 3px rgba(5,13,31,.06), 0 4px 16px rgba(5,13,31,.05); --shadow-md: 0 4px 24px rgba(5,13,31,.1); } /* ───────────────────────────────────────────────────────────────────────────── DARK MODE TOKENS ───────────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"], html.dark { --body: #080F1E; --surface: #0E1827; --surface-2: #0A1320; --border: #162035; --border-2: #1C2B44; --tx-1: #DCE8FA; --tx-2: #7A99C2; --tx-3: #3D5470; --hdr-bg: rgba(8,15,30,.97); --hdr-border: #162035; --hdr-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 16px rgba(0,0,0,.45); --hdr-btn-h: #0E1827; } /* ───────────────────────────────────────────────────────────────────────────── RESET & BASE ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { background: var(--body) !important; color: var(--tx-1); transition: background var(--t), color var(--t); min-height: 100vh; overflow-x: hidden; } /* ───────────────────────────────────────────────────────────────────────────── SIDEBAR ───────────────────────────────────────────────────────────────────────────── */ .sidebar-container { position: fixed !important; top: 0; left: 0; bottom: 0; width: var(--W); background: var(--sb-bg) !important; border-right: 1px solid var(--sb-border) !important; display: flex; flex-direction: column; z-index: 100; overflow: hidden; transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 24px rgba(0,0,0,.15); } /* ── Logo / header zone ── */ .sidebar-header { display: flex; align-items: center; height: var(--H); padding: 0 16px; border-bottom: 1px solid var(--sb-border) !important; background: var(--sb-bg) !important; flex-shrink: 0; gap: 10px; } .sidebar-logo-img { height: 32px; width: auto; object-fit: contain; filter: brightness(0) invert(1) !important; opacity: .92; } .sidebar-close-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: rgba(255,255,255,.06); color: var(--sb-text-h); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; flex-shrink: 0; transition: background .15s, color .15s; } .sidebar-close-btn:hover { background: rgba(255,255,255,.12); color: #fff; } /* ── Nav scrollable area ── */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0 16px; scrollbar-width: thin; scrollbar-color: var(--sb-bg3) transparent; } .sidebar-nav::-webkit-scrollbar { width: 3px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--sb-bg3); border-radius: 2px; } .sidebar-nav-content, .sidebar-nav-list { width: 100%; } /* ── Section group labels ── */ .sidebar-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-section); padding: 16px 18px 5px; display: flex; align-items: center; gap: 8px; user-select: none; } .sidebar-section-label::after { content: ''; flex: 1; height: 1px; background: var(--sb-border); } /* ── Submenu sub-headers (existing class name) ── */ .sidebar-submenu-header { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-section) !important; padding: 10px 18px 4px !important; display: block; user-select: none; } /* ── Top-level nav links ── */ .sidebar-link { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 7px 18px !important; font-size: 13px; font-weight: 400; color: var(--sb-text) !important; text-decoration: none; border: none; background: none; cursor: pointer; border-left: 2px solid transparent !important; transition: color .13s, background .13s, border-color .13s; text-align: left; white-space: nowrap; } .sidebar-link i:first-child { width: 16px; text-align: center; font-size: 11px; opacity: .6; flex-shrink: 0; transition: opacity .13s; } .sidebar-link i.fa-chevron-down { font-size: 9px; opacity: .5; margin-left: auto !important; transition: transform .22s ease, opacity .13s; } .sidebar-link:hover { background: var(--sb-bg2) !important; color: var(--sb-text-h) !important; border-left-color: var(--sb-border) !important; } .sidebar-link:hover i:first-child { opacity: .85; } .sidebar-link.active { background: rgba(var(--accent-rgb), .14) !important; color: var(--sb-text-a) !important; font-weight: 500; border-left-color: var(--accent) !important; } .sidebar-link.active i:first-child { opacity: 1; color: var(--accent) !important; } .sidebar-link.active i.fa-chevron-down { opacity: .8; } /* Rotate chevron when dropdown is open */ .sidebar-dropdown:not(.dropdown-hidden) > button > i.fa-chevron-down, .sidebar-dropdown > button.active > i.fa-chevron-down { transform: rotate(180deg); } /* ── Dropdown sub-menus ── */ .sidebar-dropdown-menu { overflow: hidden; transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .18s ease; background: rgba(0,0,0,.15); border-bottom: 1px solid var(--sb-border); } .sidebar-dropdown-menu.hidden, .sidebar-dropdown-menu.dropdown-hidden { display: none !important; } .sidebar-dropdown-link { display: flex !important; align-items: center; gap: 8px; padding: 6px 18px 6px 40px !important; font-size: 12.5px; font-weight: 400; color: rgba(106,126,158,.85) !important; text-decoration: none; border-left: 2px solid transparent; transition: color .12s, background .12s, border-color .12s; white-space: nowrap; } .sidebar-dropdown-link i { width: 14px; text-align: center; font-size: 10px; opacity: .5; flex-shrink: 0; transition: opacity .12s; } .sidebar-dropdown-link:hover { background: rgba(255,255,255,.04) !important; color: var(--sb-text-h) !important; border-left-color: var(--sb-border); } .sidebar-dropdown-link:hover i { opacity: .8; } .sidebar-dropdown-link.active { color: var(--sb-text-a) !important; background: rgba(var(--accent-rgb), .1) !important; border-left-color: var(--accent) !important; font-weight: 500; } .sidebar-dropdown-link.active i { opacity: 1; color: var(--accent) !important; } /* ── Sidebar footer (user info) ── */ .sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--sb-border) !important; background: var(--sb-bg) !important; flex-shrink: 0; } .sidebar-user-name { color: #A8BBDA !important; } .sidebar-user-role { color: var(--sb-section) !important; } /* ───────────────────────────────────────────────────────────────────────────── HEADER ───────────────────────────────────────────────────────────────────────────── */ .header, .main-header { height: var(--H) !important; background: var(--hdr-bg) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border-bottom: 1px solid var(--hdr-border) !important; box-shadow: var(--hdr-shadow) !important; transition: background var(--t), border-color var(--t), box-shadow var(--t); } .header-content, .main-header-content { height: var(--H) !important; } /* ── Header buttons ── */ .header-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r); border: none; background: none; cursor: pointer; color: var(--tx-2); font-size: 14px; transition: all .15s; position: relative; } .header-btn:hover { background: var(--hdr-btn-h) !important; color: var(--tx-1) !important; } .notification-badge { position: absolute !important; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--rose) !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--hdr-bg); } /* ── Profile / notification dropdowns ── */ .profile-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 220px; z-index: 200; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-md) !important; overflow: hidden; display: none; /* hidden by default; shown via .show class (admin) or style.display (merchant) */ } .profile-menu.show { display: block !important; animation: ds-fade-in .15s ease; } /* Merchant.js uses .hidden Tailwind class on #profileMenu */ #profileMenu:not(.hidden) { display: block; animation: ds-fade-in .15s ease; } @keyframes ds-fade-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } .profile-menu-item { display: flex !important; align-items: center; width: 100%; padding: 8px 14px !important; border: none; background: none; font-size: 13px; color: var(--tx-2) !important; text-align: left; cursor: pointer; text-decoration: none; transition: background .13s, color .13s; } .profile-menu-item:hover { background: var(--surface-2) !important; color: var(--tx-1) !important; } .profile-menu-item.text-red-600, .profile-menu-item.text-red-500 { color: #EF4444 !important; } .profile-menu-item.text-red-600:hover, .profile-menu-item.text-red-500:hover { background: rgba(239,68,68,.06) !important; } /* ───────────────────────────────────────────────────────────────────────────── MAIN CONTENT AREA ───────────────────────────────────────────────────────────────────────────── */ .main-content { margin-left: var(--W); background: var(--body) !important; transition: background var(--t); min-height: 100vh; } .main-page, .main-body { background: var(--body) !important; } /* ───────────────────────────────────────────────────────────────────────────── COMMON CARD (Tailwind card classes → new design tokens) ───────────────────────────────────────────────────────────────────────────── */ .bg-white { background-color: var(--surface) !important; } .dark .bg-white, html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; } .dark .bg-gray-50, html[data-theme="dark"] .bg-gray-50 { background-color: var(--surface-2) !important; } .dark .bg-gray-100, html[data-theme="dark"] .bg-gray-100 { background-color: #0C1727 !important; } .dark .bg-gray-800, html[data-theme="dark"] .bg-gray-800 { background-color: var(--surface) !important; } .dark .bg-gray-900, html[data-theme="dark"] .bg-gray-900 { background-color: var(--body) !important; } /* Text */ .dark .text-gray-900, html[data-theme="dark"] .text-gray-900 { color: var(--tx-1) !important; } .dark .text-gray-800, html[data-theme="dark"] .text-gray-800 { color: var(--tx-1) !important; } .dark .text-gray-700, html[data-theme="dark"] .text-gray-700 { color: var(--tx-2) !important; } .dark .text-gray-600, html[data-theme="dark"] .text-gray-600 { color: var(--tx-2) !important; } .dark .text-gray-500, html[data-theme="dark"] .text-gray-500 { color: var(--tx-3) !important; } .dark .text-gray-400, html[data-theme="dark"] .text-gray-400 { color: var(--tx-3) !important; } /* Backgrounds — extended */ .dark .bg-gray-200, html[data-theme="dark"] .bg-gray-200 { background-color: var(--border) !important; } .dark .bg-gray-300, html[data-theme="dark"] .bg-gray-300 { background-color: var(--border) !important; } .dark .bg-gray-700, html[data-theme="dark"] .bg-gray-700 { background-color: var(--surface-2) !important; } .dark .bg-gray-600, html[data-theme="dark"] .bg-gray-600 { background-color: var(--surface-2) !important; } /* Text — extended */ .dark .text-gray-300, html[data-theme="dark"] .text-gray-300 { color: var(--tx-2) !important; } .dark .text-gray-200, html[data-theme="dark"] .text-gray-200 { color: var(--tx-1) !important; } .dark .text-white, html[data-theme="dark"] .text-white { color: var(--tx-1) !important; } /* Borders */ .dark .border-gray-100, html[data-theme="dark"] .border-gray-100 { border-color: var(--border) !important; } .dark .border-gray-200, html[data-theme="dark"] .border-gray-200 { border-color: var(--border) !important; } .dark .border-gray-300, html[data-theme="dark"] .border-gray-300 { border-color: var(--border) !important; } .dark .border-gray-700, html[data-theme="dark"] .border-gray-700 { border-color: var(--border) !important; } .dark .border-gray-600, html[data-theme="dark"] .border-gray-600 { border-color: var(--border-2) !important; } .dark .divide-gray-700 > * + *, html[data-theme="dark"] .divide-gray-700 > * + * { border-color: var(--border) !important; } .dark .divide-gray-200 > * + *, html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--border) !important; } /* Hover states */ .dark .hover\:bg-gray-700:hover, html[data-theme="dark"] .hover\:bg-gray-700:hover { background-color: var(--surface-2) !important; } .dark .hover\:bg-gray-600:hover, html[data-theme="dark"] .hover\:bg-gray-600:hover { background-color: var(--border) !important; } .dark .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-2) !important; } .dark .hover\:text-white:hover, html[data-theme="dark"] .hover\:text-white:hover { color: var(--tx-1) !important; } .dark .hover\:text-gray-300:hover, html[data-theme="dark"] .hover\:text-gray-300:hover { color: var(--tx-2) !important; } /* Semantic badge/status colors — keep legible in dark mode */ .dark .text-red-600, html[data-theme="dark"] .text-red-600 { color: #F87171 !important; } .dark .text-red-500, html[data-theme="dark"] .text-red-500 { color: #F87171 !important; } .dark .text-red-400, html[data-theme="dark"] .text-red-400 { color: #FCA5A5 !important; } .dark .text-green-600, html[data-theme="dark"] .text-green-600 { color: #34D399 !important; } .dark .text-green-500, html[data-theme="dark"] .text-green-500 { color: #34D399 !important; } .dark .text-green-400, html[data-theme="dark"] .text-green-400 { color: #6EE7B7 !important; } .dark .text-emerald-500, html[data-theme="dark"] .text-emerald-500 { color: #34D399 !important; } .dark .text-emerald-400, html[data-theme="dark"] .text-emerald-400 { color: #6EE7B7 !important; } .dark .text-blue-600, html[data-theme="dark"] .text-blue-600 { color: #60A5FA !important; } .dark .text-blue-500, html[data-theme="dark"] .text-blue-500 { color: #60A5FA !important; } .dark .text-blue-400, html[data-theme="dark"] .text-blue-400 { color: #93C5FD !important; } .dark .text-blue-300, html[data-theme="dark"] .text-blue-300 { color: #BAE6FD !important; } .dark .text-yellow-600, html[data-theme="dark"] .text-yellow-600 { color: #FBBF24 !important; } .dark .text-yellow-500, html[data-theme="dark"] .text-yellow-500 { color: #FBBF24 !important; } .dark .text-yellow-400, html[data-theme="dark"] .text-yellow-400 { color: #FDE68A !important; } .dark .text-amber-500, html[data-theme="dark"] .text-amber-500 { color: #FBBF24 !important; } .dark .text-amber-400, html[data-theme="dark"] .text-amber-400 { color: #FDE68A !important; } .dark .text-purple-600, html[data-theme="dark"] .text-purple-600 { color: #A78BFA !important; } .dark .text-purple-500, html[data-theme="dark"] .text-purple-500 { color: #A78BFA !important; } .dark .text-purple-400, html[data-theme="dark"] .text-purple-400 { color: #C4B5FD !important; } .dark .text-purple-300, html[data-theme="dark"] .text-purple-300 { color: #DDD6FE !important; } .dark .text-indigo-500, html[data-theme="dark"] .text-indigo-500 { color: #818CF8 !important; } .dark .text-indigo-400, html[data-theme="dark"] .text-indigo-400 { color: #A5B4FC !important; } /* Semantic bg pill/badge colors in dark mode */ .dark .bg-red-50, html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,.12) !important; } .dark .bg-red-100, html[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,.15) !important; } .dark .bg-green-50, html[data-theme="dark"] .bg-green-50 { background-color: rgba(16,185,129,.12) !important; } .dark .bg-green-100, html[data-theme="dark"] .bg-green-100 { background-color: rgba(16,185,129,.15) !important; } .dark .bg-blue-50, html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59,130,246,.12) !important; } .dark .bg-blue-100, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59,130,246,.15) !important; } .dark .bg-yellow-50, html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(245,158,11,.12) !important; } .dark .bg-yellow-100, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245,158,11,.15) !important; } .dark .bg-purple-50, html[data-theme="dark"] .bg-purple-50 { background-color: rgba(139,92,246,.12) !important; } .dark .bg-purple-100, html[data-theme="dark"] .bg-purple-100 { background-color: rgba(139,92,246,.15) !important; } .dark .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99,102,241,.12) !important; } .dark .bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.15) !important; } /* ───────────────────────────────────────────────────────────────────────────── THEME TOGGLE (morphing sun/moon SVG) ───────────────────────────────────────────────────────────────────────────── */ .theme-toggle-svg { --duration: .5s; cursor: pointer; background: none; border: none; border-radius: 9999px; padding: .45rem; color: var(--tx-2); transition: background .2s, color .2s; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .theme-toggle-svg:hover { background: var(--hdr-btn-h) !important; color: var(--tx-1); } .theme-toggle-svg svg { width: 1.25rem; height: 1.25rem; display: block; overflow: visible; } .theme-toggle-svg svg clipPath path { transition: d var(--duration) cubic-bezier(.4,0,.2,1); } .theme-toggle-svg svg > g > circle { transition: r var(--duration) cubic-bezier(.4,0,.2,1); } .theme-toggle-svg svg > g > g { transition: transform var(--duration) cubic-bezier(.4,0,.2,1); transform-origin: 50%; } [data-theme="light"] .theme-toggle-svg svg clipPath path { d: path("M0 -5h30a1 1 0 0 0 9 13v24H0Z"); } [data-theme="light"] .theme-toggle-svg svg > g > circle { r: 9.34; } [data-theme="light"] .theme-toggle-svg svg > g > g { transform: rotate(0deg); } [data-theme="dark"] .theme-toggle-svg svg clipPath path { d: path("M0 -5h17a1 1 0 0 0 9 13v24H0Z"); } [data-theme="dark"] .theme-toggle-svg svg > g > circle { r: 6.5; } [data-theme="dark"] .theme-toggle-svg svg > g > g { transform: rotate(90deg); } /* ───────────────────────────────────────────────────────────────────────────── VIEW TRANSITION RIPPLE (theme switch animation) ───────────────────────────────────────────────────────────────────────────── */ ::view-transition-old(root) { mix-blend-mode: normal; animation: none; z-index: 1; } ::view-transition-new(root) { mix-blend-mode: normal; z-index: 9999; animation: .5s cubic-bezier(.4,0,.2,1) forwards ds-ripple-expand; } @keyframes ds-ripple-expand { from { clip-path: circle(0% at var(--theme-x, 50%) var(--theme-y, 50%)); } to { clip-path: circle(150% at var(--theme-x, 50%) var(--theme-y, 50%)); } } /* ───────────────────────────────────────────────────────────────────────────── USER AVATAR INITIALS ───────────────────────────────────────────────────────────────────────────── */ .ds-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .ds-avatar-admin { background: linear-gradient(135deg, #4361EE, #7B5CF6); } .ds-avatar-merchant { background: linear-gradient(135deg, #0ABFA3, #059669); } .ds-avatar-rp { background: linear-gradient(135deg, #8B5CF6, #6D28D9); } /* ───────────────────────────────────────────────────────────────────────────── AUTH LAYOUT (split dark/light login page) ───────────────────────────────────────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; background: var(--body); } .auth-panel-left { width: 420px; flex-shrink: 0; background: linear-gradient(160deg, #050D1F 0%, #0A1733 55%, #071428 100%); display: flex; flex-direction: column; padding: 48px 44px; position: relative; overflow: hidden; } .auth-panel-left::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 40px 40px; } .auth-panel-left::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .25) 0%, transparent 70%); bottom: -80px; right: -80px; pointer-events: none; } .auth-panel-left-content { position: relative; z-index: 1; } .auth-logo-mark { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), #0ABFA3); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(var(--accent-rgb), .45); margin-bottom: 32px; } .auth-panel-title { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; color: #fff; margin-bottom: 10px; } .auth-panel-title em { font-style: normal; color: var(--accent); } .auth-panel-sub { font-size: 14px; color: #5A7399; line-height: 1.75; margin-bottom: auto; } .auth-cert-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; } .auth-cert-chip { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.35); } .auth-panel-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 32px; background: var(--body); } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 40px; box-shadow: var(--shadow-md); } .auth-card-title { font-size: 22px; font-weight: 740; letter-spacing: -.025em; color: var(--tx-1); margin-bottom: 4px; } .auth-card-sub { font-size: 13.5px; color: var(--tx-3); margin-bottom: 28px; } /* Form inputs inside auth cards */ .auth-card input[type="email"], .auth-card input[type="password"], .auth-card input[type="text"], .auth-card input[type="number"] { width: 100%; background: var(--surface-2) !important; border: 1px solid var(--border-2) !important; border-radius: var(--r) !important; padding: 10px 14px !important; font-size: 14px !important; color: var(--tx-1) !important; font-family: inherit; transition: border-color .15s, box-shadow .15s; outline: none; } .auth-card input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12) !important; } .auth-card label { font-size: 13px; font-weight: 500; color: var(--tx-2); display: block; margin-bottom: 5px; } .auth-btn-primary { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: var(--r); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(var(--accent-rgb), .4); transition: all .2s; } .auth-btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .5); } /* ───────────────────────────────────────────────────────────────────────────── PAGE CONTENT WRAP (layout-level flex column that spaces all page sections) ───────────────────────────────────────────────────────────────────────────── */ .page-content-wrap { display: flex; flex-direction: column; gap: 24px; } /* ───────────────────────────────────────────────────────────────────────────── PAGE HERO (shared header pattern for all portal pages) ───────────────────────────────────────────────────────────────────────────── */ .page-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-hero-left:has(.page-hero-icon) { display: flex; align-items: center; gap: 14px; } .page-hero-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--accent-rgb),.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .page-hero-title { font-size: 22px; font-weight: 800; color: var(--tx-1); margin-bottom: 2px; letter-spacing: -.02em; } .page-hero-sub { font-size: 13.5px; color: var(--tx-3); } .page-hero-left h1 { font-size: 22px; font-weight: 800; color: var(--tx-1); margin-bottom: 3px; letter-spacing: -.02em; } .page-hero-left p { font-size: 13.5px; color: var(--tx-3); } .page-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ───────────────────────────────────────────────────────────────────────────── DS BUTTONS ───────────────────────────────────────────────────────────────────────────── */ .ds-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; border: 1px solid transparent; font-family: inherit; } .ds-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(var(--accent-rgb),.35); border-color: var(--accent); } .ds-btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--accent-rgb),.45); } .ds-btn-secondary { background: var(--surface); color: var(--tx-2); border-color: var(--border); box-shadow: var(--shadow); } .ds-btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),.05); } .ds-btn-danger { background: rgba(244,63,94,.08); color: var(--rose); border-color: rgba(244,63,94,.2); } .ds-btn-danger:hover { background: rgba(244,63,94,.14); } .ds-btn-sm { padding: 6px 14px; font-size: 12.5px; } /* ───────────────────────────────────────────────────────────────────────────── STAT CARDS ───────────────────────────────────────────────────────────────────────────── */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; transition: box-shadow .2s, transform .2s; } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--accent); border-radius: 0 var(--r-lg) var(--r-lg) 0; opacity: .45; } .stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .stat-icon.si-accent { background: rgba(var(--accent-rgb),.12); color: var(--accent); } .stat-icon.si-green { background: rgba(16,185,129,.12); color: #10B981; } .stat-icon.si-blue { background: rgba(59,130,246,.12); color: #3B82F6; } .stat-icon.si-amber { background: rgba(245,158,11,.12); color: #D97706; } .stat-icon.si-rose { background: rgba(244,63,94,.12); color: #F43F5E; } .stat-icon.si-purple { background: rgba(139,92,246,.12); color: #8B5CF6; } .stat-icon.si-teal { background: rgba(10,191,163,.12); color: #0ABFA3; } .stat-body { min-width: 0; } .stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 5px; } .stat-value { font-size: 26px; font-weight: 800; color: var(--tx-1); line-height: 1.1; letter-spacing: -.02em; } .stat-sub { font-size: 11.5px; color: var(--tx-3); margin-top: 3px; } .stat-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .stat-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } @media (max-width: 900px) { .stat-grid-3, .stat-grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .stat-grid-3, .stat-grid-4 { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────────────── TABLE CARD ───────────────────────────────────────────────────────────────────────────── */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; } .table-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .table-card-title { font-size: 15px; font-weight: 700; color: var(--tx-1); } .table-card-sub { font-size: 12px; color: var(--tx-3); margin-top: 2px; } .table-card-actions { display: flex; gap: 8px; align-items: center; } .count-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(var(--accent-rgb),.1); color: var(--accent); margin-left: 8px; } /* ───────────────────────────────────────────────────────────────────────────── DS TABLE ───────────────────────────────────────────────────────────────────────────── */ .ds-table { width: 100%; border-collapse: collapse; } .ds-table thead tr { background: var(--surface-2); } .ds-table th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; border-bottom: 1px solid var(--border); } .ds-table td { padding: 13px 16px; font-size: 13.5px; color: var(--tx-2); border-bottom: 1px solid var(--border); vertical-align: middle; } .ds-table tbody tr:last-child td { border-bottom: none; } .ds-table tbody tr { transition: background .12s; } .ds-table tbody tr:hover { background: var(--surface-2); } .ds-table-wrap { overflow-x: auto; } /* ───────────────────────────────────────────────────────────────────────────── STATUS BADGES ───────────────────────────────────────────────────────────────────────────── */ .ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .ds-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .ds-badge-success, .ds-badge-approved, .ds-badge-active, .ds-badge-completed, .ds-badge-paid { background: rgba(16,185,129,.1); color: #10B981; } .ds-badge-warning, .ds-badge-pending, .ds-badge-review { background: rgba(245,158,11,.1); color: #D97706; } .ds-badge-danger, .ds-badge-rejected, .ds-badge-failed, .ds-badge-blocked { background: rgba(244,63,94,.1); color: #F43F5E; } .ds-badge-info, .ds-badge-processing { background: rgba(59,130,246,.1); color: #3B82F6; } .ds-badge-neutral, .ds-badge-suspended, .ds-badge-inactive, .ds-badge-disabled { background: rgba(110,126,155,.1); color: var(--tx-3); } .ds-badge-accent { background: rgba(var(--accent-rgb),.1); color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────────── ENTITY AVATAR (initials) ───────────────────────────────────────────────────────────────────────────── */ .ds-entity-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: rgba(var(--accent-rgb),.12); color: var(--accent); flex-shrink: 0; text-transform: uppercase; user-select: none; } .ds-entity-avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; } .ds-entity-avatar.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; } /* ───────────────────────────────────────────────────────────────────────────── ID CHIP ───────────────────────────────────────────────────────────────────────────── */ .ds-id-chip { font-family: 'Fira Mono', 'Consolas', monospace; font-size: 12px; color: var(--tx-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 5px; } .ds-id-chip button { background: none; border: none; cursor: pointer; color: inherit; padding: 0; font-size: 10px; opacity: .6; } .ds-id-chip button:hover { opacity: 1; color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────────── ACTION BUTTON (icon-only in tables) ───────────────────────────────────────────────────────────────────────────── */ .action-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx-3); transition: background .13s, color .13s; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 13px; } .action-btn:hover { background: rgba(var(--accent-rgb),.1); color: var(--accent); border-color: rgba(var(--accent-rgb),.2); } .action-btn.danger:hover { background: rgba(244,63,94,.1); color: var(--rose); border-color: rgba(244,63,94,.2); } .action-btn.success:hover { background: rgba(16,185,129,.1); color: #10B981; border-color: rgba(16,185,129,.2); } /* ── Action dropdown wrapper + items ── */ .action-dropdown { position: relative; display: inline-block; } .action-dropdown-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--tx-2); background: none; border: none; cursor: pointer; text-decoration: none; text-align: left; white-space: nowrap; font-family: inherit; transition: background .12s, color .12s; } .action-dropdown-item:hover { background: var(--surface-2); color: var(--tx-1); } .action-dropdown-item i { width: 14px; text-align: center; font-size: 12px; flex-shrink: 0; } .action-dropdown-item.danger { color: var(--rose); } .action-dropdown-item.danger:hover { background: rgba(244,63,94,.06); color: var(--rose); } .action-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ───────────────────────────────────────────────────────────────────────────── DS CARD (generic surface card) ───────────────────────────────────────────────────────────────────────────── */ .ds-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; } .ds-card-title { font-size: 16px; font-weight: 700; color: var(--tx-1); margin-bottom: 4px; } .ds-card-sub { font-size: 13px; color: var(--tx-3); } /* ───────────────────────────────────────────────────────────────────────────── DS FORM ELEMENTS (within ds-card or form sections) ───────────────────────────────────────────────────────────────────────────── */ .ds-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx-2); margin-bottom: 6px; letter-spacing: .01em; } .ds-input, .ds-select, .ds-textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r); padding: 9px 13px; font-size: 13.5px; color: var(--tx-1); font-family: inherit; transition: border-color .15s, box-shadow .15s; outline: none; appearance: none; -webkit-appearance: none; } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12); } .ds-input::placeholder { color: var(--tx-3); } .ds-textarea { resize: vertical; min-height: 90px; } .ds-form-group { display: flex; flex-direction: column; gap: 6px; } /* ───────────────────────────────────────────────────────────────────────────── PAGINATION AREA ───────────────────────────────────────────────────────────────────────────── */ .ds-pagination-wrap { padding: 14px 24px; border-top: 1px solid var(--border); } /* ───────────────────────────────────────────────────────────────────────────── EMPTY STATE ───────────────────────────────────────────────────────────────────────────── */ .ds-empty { text-align: center; padding: 64px 24px; } .ds-empty-icon { width: 68px; height: 68px; border-radius: 20px; background: rgba(var(--accent-rgb),.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 26px; color: var(--accent); } .ds-empty h3 { font-size: 17px; font-weight: 700; color: var(--tx-1); margin-bottom: 6px; } .ds-empty p { font-size: 13.5px; color: var(--tx-3); } /* ───────────────────────────────────────────────────────────────────────────── DETAIL / SHOW PAGE (key-value info sections) ───────────────────────────────────────────────────────────────────────────── */ .ds-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .ds-detail-item {} .ds-detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-3); margin-bottom: 4px; } .ds-detail-value { font-size: 14px; font-weight: 500; color: var(--tx-1); word-break: break-word; } /* ───────────────────────────────────────────────────────────────────────────── FILTER DOT (active filter indicator) ───────────────────────────────────────────────────────────────────────────── */ .filter-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────────────── RESPONSIVE — MOBILE SIDEBAR ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { .sidebar-container { transform: translateX(-100%); box-shadow: none; } .sidebar-container.open { transform: translateX(0) !important; box-shadow: 8px 0 32px rgba(0,0,0,.4) !important; } .main-content { margin-left: 0 !important; } .auth-panel-left { display: none; } .auth-panel-right { padding: 24px 16px; } .auth-card { padding: 28px 24px; } } @media (max-width: 640px) { .auth-card { padding: 24px 18px; } .auth-card-title { font-size: 19px; } }