/* ============================================================ Merge Node POS — Design System main.css ============================================================ */ /* ── Google Fonts + Font Awesome loaded via HTML ── */ /* ── 1. CSS Custom Properties (Design Tokens) ──────────────── */ /* DEFAULT: Light Mode */ :root { /* Surfaces — Light */ --clr-bg: #F4F6FB; --clr-surface: #FFFFFF; --clr-surface-2: #F8FAFD; --clr-surface-3: #EEF1F8; --clr-border: #E2E8F0; --clr-border-soft: rgba(0,0,0,0.05); /* Brand */ --clr-primary: #00B87A; --clr-primary-dim: rgba(0,184,122,0.10); --clr-primary-glow: rgba(0,184,122,0.20); --clr-accent: #F5A623; --clr-accent-dim: rgba(245,166,35,0.10); /* Status */ --clr-success: #16A34A; --clr-success-dim: rgba(22,163,74,0.10); --clr-warning: #D97706; --clr-warning-dim: rgba(217,119,6,0.10); --clr-danger: #DC2626; --clr-danger-dim: rgba(220,38,38,0.10); --clr-info: #2563EB; --clr-info-dim: rgba(37,99,235,0.10); /* Text — Light */ --clr-text: #0F172A; --clr-text-muted: #475569; --clr-text-faint: #94A3B8; /* Typography */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full:9999px; /* Shadows — Light (softer) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 10px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05); --shadow-glow:0 0 20px var(--clr-primary-glow); /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --trans-fast:0.15s var(--ease); --trans-base:0.22s var(--ease); --trans-slow:0.35s var(--ease); /* Sidebar */ --sidebar-w: 260px; --header-h: 60px; } /* ── Dark Mode Override ── */ [data-theme="dark"] { --clr-bg: #0D0F14; --clr-surface: #161920; --clr-surface-2: #1E2230; --clr-surface-3: #252A3A; --clr-border: #2A3045; --clr-border-soft: rgba(255,255,255,0.06); --clr-primary: #00C896; --clr-primary-dim: rgba(0,200,150,0.12); --clr-primary-glow: rgba(0,200,150,0.25); --clr-accent: #F5A623; --clr-accent-dim: rgba(245,166,35,0.12); --clr-success: #22C55E; --clr-success-dim: rgba(34,197,94,0.12); --clr-warning: #F59E0B; --clr-warning-dim: rgba(245,158,11,0.12); --clr-danger: #EF4444; --clr-danger-dim: rgba(239,68,68,0.12); --clr-info: #3B82F6; --clr-info-dim: rgba(59,130,246,0.12); --clr-text: #F1F5F9; --clr-text-muted: #8892A4; --clr-text-faint: #4A5568; --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.50); --shadow-lg: 0 8px 32px rgba(0,0,0,0.60); --clr-primary-dim: rgba(0,200,150,0.12); --clr-success-dim: rgba(34,197,94,0.12); --clr-danger-dim: rgba(239,68,68,0.12); --clr-warning-dim: rgba(245,158,11,0.12); } /* ── 2. Reset & Base ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-ui); background: var(--clr-bg); color: var(--clr-text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* ── 3. Layout ──────────────────────────────────────────────── */ .pos-layout { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--clr-surface); border-right: 1px solid var(--clr-border); display: flex; flex-direction: column; z-index: 200; transition: transform var(--trans-base); overflow-y: auto; overflow-x: hidden; } .sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); } .main-area { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--trans-base); } .sidebar-collapsed .main-area { margin-left: 0; } /* Top Header Bar */ .topbar { position: sticky; top: 0; height: var(--header-h); background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; padding: 0 var(--sp-6); gap: var(--sp-4); z-index: 100; } .page-content { flex: 1; padding: var(--sp-6); } /* Container */ .container { max-width: 1400px; margin: 0 auto; } /* ── 4. Sidebar Components ──────────────────────────────────── */ .sidebar-brand { padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .sidebar-brand-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--clr-primary), #00a87a); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; box-shadow: var(--shadow-glow); } .sidebar-brand-text {} .sidebar-brand-text .brand-name { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; color: var(--clr-text); } .sidebar-brand-text .brand-branch { font-size: 0.7rem; color: var(--clr-primary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .sidebar-nav { flex: 1; padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); } .nav-section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-text-faint); padding: var(--sp-4) var(--sp-3) var(--sp-2); } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); color: var(--clr-text-muted); font-size: 0.875rem; font-weight: 500; transition: all var(--trans-fast); position: relative; white-space: nowrap; } .nav-item i { width: 18px; text-align: center; font-size: 0.9rem; flex-shrink: 0; } .nav-item:hover { background: var(--clr-surface-2); color: var(--clr-text); } .nav-item.active { background: var(--clr-primary-dim); color: var(--clr-primary); } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; background: var(--clr-primary); border-radius: 0 var(--r-full) var(--r-full) 0; } .nav-badge { margin-left: auto; background: var(--clr-danger); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full); min-width: 20px; text-align: center; } /* ── Nav divider ── */ .nav-divider { height: 1px; background: var(--clr-border); margin: var(--sp-3) var(--sp-2); } /* ── Nav Group (Dropdown Accordion) ── */ .nav-group { margin-bottom: 2px; } .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: none; background: none; color: var(--clr-text-muted); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--trans-fast); text-align: left; } .nav-group-toggle:hover { background: var(--clr-surface-2); color: var(--clr-text); } .nav-group.open .nav-group-toggle { color: var(--clr-text); background: var(--clr-surface-2); } .nav-group-icon-label { display: flex; align-items: center; gap: var(--sp-3); } .nav-group-icon-label i { width: 18px; text-align: center; font-size: 0.9rem; flex-shrink: 0; } .nav-group-chevron { font-size: 0.65rem; transition: transform var(--trans-fast); flex-shrink: 0; } .nav-group.open .nav-group-chevron { transform: rotate(180deg); } /* Dropdown items container */ .nav-group-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s var(--ease); overflow: hidden; } .nav-group.open .nav-group-items { grid-template-rows: 1fr; } /* Inner wrapper needed for grid height animation */ .nav-group-items > * { min-height: 0; } .nav-group-items a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-4) + 18px + var(--sp-3)); border-radius: var(--r-sm); color: var(--clr-text-muted); font-size: 0.82rem; font-weight: 500; transition: all var(--trans-fast); white-space: nowrap; text-decoration: none; } .nav-group-items a i { font-size: 0.78rem; width: 14px; text-align: center; flex-shrink: 0; } .nav-group-items a:hover { background: var(--clr-surface-2); color: var(--clr-text); } .nav-group-items a.nav-item.active, .nav-group-items a.active { background: var(--clr-primary-dim); color: var(--clr-primary); font-weight: 600; } .sidebar-footer { padding: var(--sp-4) var(--sp-3); border-top: 1px solid var(--clr-border); } .sidebar-user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); cursor: pointer; transition: background var(--trans-fast); } .sidebar-user:hover { background: var(--clr-surface-2); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-info .user-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-info .user-role { font-size: 0.68rem; color: var(--clr-text-muted); text-transform: capitalize; } /* ── 5. Topbar Components ───────────────────────────────────── */ .topbar-toggle { background: none; border: none; color: var(--clr-text-muted); font-size: 1.1rem; padding: var(--sp-2); border-radius: var(--r-sm); transition: color var(--trans-fast), background var(--trans-fast); } .topbar-toggle:hover { color: var(--clr-text); background: var(--clr-surface-2); } .topbar-title { font-size: 1rem; font-weight: 600; color: var(--clr-text); } .topbar-spacer { flex: 1; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-2); } .topbar-btn { background: none; border: none; color: var(--clr-text-muted); font-size: 1rem; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); transition: all var(--trans-fast); position: relative; } .topbar-btn:hover { color: var(--clr-text); background: var(--clr-surface-2); } .topbar-store-badge { display: flex; align-items: center; gap: var(--sp-2); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; font-weight: 500; color: var(--clr-text-muted); cursor: pointer; transition: all var(--trans-fast); } .topbar-store-badge:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .topbar-store-badge .store-dot { width: 8px; height: 8px; background: var(--clr-success); border-radius: 50%; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── 6. Cards ───────────────────────────────────────────────── */ .card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-lg); padding: var(--sp-6); } .card-sm { padding: var(--sp-4); border-radius: var(--r-md); } .card-hover { transition: transform var(--trans-base), box-shadow var(--trans-base), border-color var(--trans-base); } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--clr-primary); } /* KPI Stat Card */ .stat-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-4); position: relative; overflow: hidden; transition: transform var(--trans-base), box-shadow var(--trans-base); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .stat-card-body { flex: 1; min-width: 0; } .stat-card-label { font-size: 0.75rem; color: var(--clr-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .stat-card-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: var(--sp-1) 0; } .stat-card-change { font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 4px; } .stat-card-change.up { color: var(--clr-success); } .stat-card-change.down { color: var(--clr-danger); } .stat-card-bg { position: absolute; right: -10px; bottom: -10px; font-size: 4.5rem; opacity: 0.05; } /* ── 7. Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.6rem 1.25rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: all var(--trans-fast); white-space: nowrap; line-height: 1; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn i { font-size: 0.85rem; } /* Sizes */ .btn-xs { padding: 0.35rem 0.75rem; font-size: 0.75rem; border-radius: var(--r-sm); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; } .btn-lg { padding: 0.85rem 2rem; font-size: 1rem; } .btn-xl { padding: 1.1rem 2.5rem; font-size: 1.05rem; border-radius: var(--r-lg); } .btn-full { width: 100%; } /* Variants */ .btn-primary { background: var(--clr-primary); color: #0D0F14; border-color: var(--clr-primary); } .btn-primary:hover { background: #00dba6; box-shadow: 0 0 20px var(--clr-primary-glow); transform: translateY(-1px); } .btn-accent { background: var(--clr-accent); color: #0D0F14; border-color: var(--clr-accent); } .btn-accent:hover { background: #f7b84a; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--clr-text); border-color: var(--clr-border); } .btn-outline:hover { background: var(--clr-surface-2); border-color: var(--clr-text-muted); } .btn-ghost { background: transparent; color: var(--clr-text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--clr-surface-2); color: var(--clr-text); } .btn-danger { background: var(--clr-danger); color: #fff; border-color: var(--clr-danger); } .btn-danger:hover { background: #f87171; transform: translateY(-1px); } .btn-success { background: var(--clr-success); color: #fff; border-color: var(--clr-success); } .btn-success:hover { background: #4ade80; transform: translateY(-1px); } .btn-warning { background: var(--clr-warning); color: #fff; border-color: var(--clr-warning); } .btn-surface { background: var(--clr-surface-2); color: var(--clr-text); border-color: var(--clr-border); } .btn-surface:hover { background: var(--clr-surface-3); } /* ── 8. Forms ───────────────────────────────────────────────── */ .form-group { margin-bottom: var(--sp-5); } .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--clr-text-muted); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; } .form-control { width: 100%; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-md); padding: 0.65rem var(--sp-4); color: var(--clr-text); font-size: 0.9rem; transition: border-color var(--trans-fast), box-shadow var(--trans-fast); outline: none; } .form-control::placeholder { color: var(--clr-text-faint); } .form-control:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-dim); } .form-control.is-invalid { border-color: var(--clr-danger); } .form-control.is-valid { border-color: var(--clr-success); } .form-control-lg { padding: 0.85rem var(--sp-5); font-size: 1rem; } /* Input with icon */ .input-group { position: relative; } .input-group-icon { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--clr-text-faint); font-size: 0.9rem; pointer-events: none; } .input-group .form-control { padding-left: 2.5rem; } .input-group-icon-right { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--clr-text-faint); font-size: 0.9rem; background: none; border: none; cursor: pointer; transition: color var(--trans-fast); } .input-group-icon-right:hover { color: var(--clr-text); } .input-group .form-control.has-icon-right { padding-right: 2.75rem; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2.5rem; } textarea.form-control { resize: vertical; min-height: 100px; } .form-hint { font-size: 0.75rem; color: var(--clr-text-muted); margin-top: var(--sp-1); } .form-error { font-size: 0.75rem; color: var(--clr-danger); margin-top: var(--sp-1); } /* Checkbox / Radio */ .check-item { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-2) 0; } .check-item input[type="checkbox"], .check-item input[type="radio"] { width: 16px; height: 16px; accent-color: var(--clr-primary); cursor: pointer; } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; } .toggle-switch input { position: absolute; opacity: 0; width: 0; } .toggle-track { width: 40px; height: 22px; background: var(--clr-surface-3); border-radius: var(--r-full); position: relative; transition: background var(--trans-fast); border: 1px solid var(--clr-border); } .toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--clr-text-faint); border-radius: 50%; transition: transform var(--trans-fast), background var(--trans-fast); } .toggle-switch input:checked + .toggle-track { background: var(--clr-primary); border-color: var(--clr-primary); } .toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); background: #fff; } .toggle-label { font-size: 0.875rem; font-weight: 500; } /* ── 9. Tables ──────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--clr-border); } table.pos-table { width: 100%; border-collapse: collapse; } .pos-table thead tr { background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); } .pos-table th { padding: var(--sp-3) var(--sp-4); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); text-align: left; white-space: nowrap; } .pos-table td { padding: var(--sp-4); font-size: 0.875rem; border-bottom: 1px solid var(--clr-border-soft); vertical-align: middle; } .pos-table tbody tr:last-child td { border-bottom: none; } .pos-table tbody tr { transition: background var(--trans-fast); } .pos-table tbody tr:hover { background: var(--clr-surface-2); } /* ── 10. Badges / Pills ─────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge i { font-size: 0.65rem; } .badge-primary { background: var(--clr-primary-dim); color: var(--clr-primary); } .badge-success { background: var(--clr-success-dim); color: var(--clr-success); } .badge-warning { background: var(--clr-warning-dim); color: var(--clr-warning); } .badge-danger { background: var(--clr-danger-dim); color: var(--clr-danger); } .badge-info { background: var(--clr-info-dim); color: var(--clr-info); } .badge-muted { background: var(--clr-surface-3); color: var(--clr-text-muted); } .badge-accent { background: var(--clr-accent-dim); color: var(--clr-accent); } /* COD Status badges */ .badge-pending { background: var(--clr-warning-dim); color: var(--clr-warning); } .badge-booked { background: var(--clr-info-dim); color: var(--clr-info); } .badge-in-transit { background: var(--clr-accent-dim); color: var(--clr-accent); } .badge-delivered { background: var(--clr-primary-dim); color: var(--clr-primary); } .badge-settled { background: var(--clr-success-dim); color: var(--clr-success); } .badge-returned { background: var(--clr-danger-dim); color: var(--clr-danger); } /* ── 11. Alerts / Flash Messages ────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid; font-size: 0.875rem; } .alert i { flex-shrink: 0; margin-top: 2px; font-size: 1rem; } .alert-success { background: var(--clr-success-dim); border-color: var(--clr-success); color: var(--clr-success); } .alert-danger { background: var(--clr-danger-dim); border-color: var(--clr-danger); color: var(--clr-danger); } .alert-warning { background: var(--clr-warning-dim); border-color: var(--clr-warning); color: var(--clr-warning); } .alert-info { background: var(--clr-info-dim); border-color: var(--clr-info); color: var(--clr-info); } /* Toast flash */ .toast-wrap { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-3); } .toast { min-width: 280px; max-width: 380px; padding: var(--sp-4) var(--sp-5); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--sp-3); animation: toast-in 0.3s var(--ease) forwards; font-size: 0.875rem; font-weight: 500; } .toast.success { border-left: 3px solid var(--clr-success); } .toast.error { border-left: 3px solid var(--clr-danger); } .toast.warning { border-left: 3px solid var(--clr-warning); } .toast.info { border-left: 3px solid var(--clr-info); } .toast i { font-size: 1rem; flex-shrink: 0; } .toast.success i { color: var(--clr-success); } .toast.error i { color: var(--clr-danger); } .toast.warning i { color: var(--clr-warning); } .toast.info i { color: var(--clr-info); } .toast-close { margin-left: auto; background: none; border: none; color: var(--clr-text-faint); font-size: 0.9rem; padding: 2px; transition: color var(--trans-fast); cursor: pointer; } .toast-close:hover { color: var(--clr-text); } @keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ── 12. Modals ─────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all var(--trans-base); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-xl); padding: var(--sp-8); width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto; transform: scale(0.92) translateY(16px); transition: transform var(--trans-base); box-shadow: var(--shadow-lg); } .modal-overlay.active .modal { transform: scale(1) translateY(0); } .modal-lg { max-width: 700px; } .modal-xl { max-width: 900px; } .modal-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--clr-border); } .modal-title { font-size: 1.1rem; font-weight: 700; flex: 1; } .modal-close { background: none; border: none; color: var(--clr-text-muted); font-size: 1.2rem; padding: var(--sp-2); border-radius: var(--r-sm); cursor: pointer; transition: all var(--trans-fast); } .modal-close:hover { background: var(--clr-danger-dim); color: var(--clr-danger); } .modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--clr-border); } /* ── 13. Dropdown ───────────────────────────────────────────── */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: 500; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--trans-fast); } .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: 0.85rem; font-weight: 500; color: var(--clr-text-muted); cursor: pointer; transition: all var(--trans-fast); } .dropdown-item:hover { background: var(--clr-surface-3); color: var(--clr-text); } .dropdown-item.danger:hover { background: var(--clr-danger-dim); color: var(--clr-danger); } .dropdown-item i { width: 16px; text-align: center; font-size: 0.85rem; } .dropdown-divider { border: none; border-top: 1px solid var(--clr-border); margin: var(--sp-2) 0; } /* ── 14. Grid Utilities ─────────────────────────────────────── */ .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); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } /* ── 15. Flex Utilities ─────────────────────────────────────── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .gap-2 { gap: var(--sp-2); } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } /* ── 16. Text Utilities ─────────────────────────────────────── */ .text-primary { color: var(--clr-primary); } .text-accent { color: var(--clr-accent); } .text-muted { color: var(--clr-text-muted); } .text-danger { color: var(--clr-danger); } .text-success { color: var(--clr-success); } .text-warning { color: var(--clr-warning); } .text-sm { font-size: 0.8rem; } .text-xs { font-size: 0.7rem; } .text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .text-center { text-align: center; } .text-right { text-align: right; } .mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; letter-spacing: 0.06em; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-gradient { background: linear-gradient(135deg, var(--clr-primary) 0%, #00dba6 50%, var(--clr-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 17. Spacing Utilities ──────────────────────────────────── */ .mt-1 { margin-top: var(--sp-1); } .mb-1 { margin-bottom: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mb-2 { margin-bottom: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mb-3 { margin-bottom: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mb-4 { margin-bottom: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-5 { margin-bottom: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-6 { margin-bottom: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mb-8 { margin-bottom: var(--sp-8); } .p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); } .p-6 { padding: var(--sp-6); } /* ── 18. Dividers ───────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--clr-border); margin: var(--sp-6) 0; } .divider-text { display: flex; align-items: center; gap: var(--sp-4); color: var(--clr-text-faint); font-size: 0.75rem; margin: var(--sp-5) 0; } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--clr-border); } /* ── 19. Loading & Skeleton ─────────────────────────────────── */ .spinner { width: 20px; height: 20px; border: 2px solid var(--clr-border); border-top-color: var(--clr-primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient( 90deg, var(--clr-surface-2) 0%, var(--clr-surface-3) 50%, var(--clr-surface-2) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-sm); } @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } /* ── 20. Misc ───────────────────────────────────────────────── */ .avatar { border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent)); flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; } .avatar-md { width: 36px; height: 36px; font-size: 0.8rem; } .avatar-lg { width: 48px; height: 48px; font-size: 1rem; } .avatar-xl { width: 64px; height: 64px; font-size: 1.2rem; } .icon-box { display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); flex-shrink: 0; } .icon-box-sm { width: 32px; height: 32px; font-size: 0.85rem; } .icon-box-md { width: 42px; height: 42px; font-size: 1rem; } .icon-box-lg { width: 52px; height: 52px; font-size: 1.2rem; } .icon-primary { background: var(--clr-primary-dim); color: var(--clr-primary); } .icon-accent { background: var(--clr-accent-dim); color: var(--clr-accent); } .icon-success { background: var(--clr-success-dim); color: var(--clr-success); } .icon-warning { background: var(--clr-warning-dim); color: var(--clr-warning); } .icon-danger { background: var(--clr-danger-dim); color: var(--clr-danger); } .icon-info { background: var(--clr-info-dim); color: var(--clr-info); } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-12) var(--sp-6); text-align: center; color: var(--clr-text-muted); } .empty-state i { font-size: 3rem; opacity: 0.3; } .empty-state h4 { font-size: 1rem; font-weight: 600; color: var(--clr-text); } .empty-state p { font-size: 0.875rem; max-width: 300px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--clr-bg); } ::-webkit-scrollbar-thumb { background: var(--clr-surface-3); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--clr-border); } /* ── 21. Responsive ─────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --sidebar-w: 220px; } } @media (max-width: 768px) { .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); } .sidebar.open { transform: translateX(0); } .main-area { margin-left: 0; } .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } .page-content { padding: var(--sp-4); } } @media (max-width: 480px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } } /* ── 22. Pagination ─────────────────────────────────────────── */ .pagination-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--clr-border); background: var(--clr-surface); } .pagination-info { font-size: 0.78rem; color: var(--clr-text-muted); white-space: nowrap; } .pagination-info strong { color: var(--clr-text); font-weight: 700; } .pagination-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .pagination-nav { display: flex; align-items: center; gap: 3px; } /* Page button */ .pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; color: var(--clr-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.15s ease; line-height: 1; user-select: none; } .pg-btn:hover:not(.disabled):not(.active) { background: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-text); } .pg-btn.active { background: var(--clr-primary); color: #0d0f14; border-color: var(--clr-primary); box-shadow: 0 0 10px rgba(0,200,150,0.3); font-weight: 700; } .pg-btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .pg-btn i { font-size: 0.72rem; } .pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 32px; font-size: 0.85rem; color: var(--clr-text-faint); letter-spacing: 0.05em; } /* Per-page selector */ .per-page-wrap { display: flex; align-items: center; gap: 0.4rem; } .per-page-select { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-sm); color: var(--clr-text); font-size: 0.75rem; font-weight: 600; padding: 0.3rem 1.5rem 0.3rem 0.5rem; cursor: pointer; outline: none; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892A4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 8px; transition: border-color 0.15s; } .per-page-select:focus { border-color: var(--clr-primary); } /* Jump to page */ .pg-jump-wrap { display: flex; align-items: center; gap: 0.4rem; } .pg-jump-input { width: 48px; height: 32px; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--r-sm); color: var(--clr-text); font-size: 0.78rem; font-weight: 600; text-align: center; padding: 0.25rem; outline: none; font-family: inherit; transition: border-color 0.15s; -moz-appearance: textfield; } .pg-jump-input::-webkit-inner-spin-button, .pg-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; } .pg-jump-input:focus { border-color: var(--clr-primary); } /* Dashboard table-wrap variant */ .table-wrap .pagination-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); } /* Analytics a-table-wrap variant */ .a-table-wrap .pagination-wrap { border-radius: 0; } /* Responsive pagination */ @media (max-width: 640px) { .pagination-wrap { flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 1rem; } .pg-jump-wrap { display: none; } .per-page-wrap { display: none; } } /* ── 23. Print ──────────────────────────────────────────────── */ @media print { .sidebar, .topbar, .no-print { display: none !important; } .main-area { margin-left: 0; } body { background: #fff; color: #000; } .pagination-wrap { display: none !important; } } /* ── 24. Settings UI Utilities ──────────────────────────────── */ /* Toggle Switch */ .toggle-switch { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; user-select: none; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-track { position: relative; width: 42px; height: 24px; background: var(--clr-surface-3); border-radius: var(--r-full); transition: background 0.2s; flex-shrink: 0; } .toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .toggle-switch input:checked + .toggle-track { background: var(--clr-primary); } .toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); } .toggle-label { font-size: 0.82rem; color: var(--clr-text-muted); } /* Alerts */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1.125rem; border-radius: var(--r-lg); font-size: 0.82rem; line-height: 1.5; border-left: 3px solid transparent; } .alert i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .alert-info { background: rgba(59,130,246,.1); border-color: #3B82F6; color: var(--clr-text); } .alert-info i { color: #3B82F6; } .alert-warning { background: var(--clr-warning-dim); border-color: var(--clr-warning); color: var(--clr-text); } .alert-warning i { color: var(--clr-warning); } .alert-success { background: var(--clr-success-dim); border-color: var(--clr-success); color: var(--clr-text); } .alert-success i { color: var(--clr-success); } .alert-danger { background: var(--clr-danger-dim); border-color: var(--clr-danger); color: var(--clr-text); } .alert-danger i { color: var(--clr-danger); } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mt-4 { margin-top: 1rem; } /* Input group with right icon button */ .input-group { position: relative; display: flex; } .input-group .form-control.has-icon-right { padding-right: 2.5rem; } .input-group-icon-right { position: absolute; right: 0; top: 0; height: 100%; padding: 0 0.75rem; background: none; border: none; cursor: pointer; color: var(--clr-text-muted); transition: color 0.15s; display: flex; align-items: center; } .input-group-icon-right:hover { color: var(--clr-primary); } /* Flex helpers */ .flex-col { flex-direction: column; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .items-start { align-items: flex-start; } .text-xs { font-size: 0.72rem; } .text-sm { font-size: 0.82rem; } .text-2xl { font-size: 1.5rem; } .text-primary { color: var(--clr-primary); } .text-muted { color: var(--clr-text-muted); } .text-faint { color: var(--clr-text-faint); } .text-success { color: var(--clr-success); } .text-danger { color: var(--clr-danger); } .text-accent { color: var(--clr-accent); } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; } /* ── 23. Card ────────────────────────────────────────────────── */ .card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--trans-fast); } .card-hover:hover { box-shadow: var(--shadow-md); } .section-title { font-size: .875rem; font-weight: 700; color: var(--clr-text); display: flex; align-items: center; gap: .5rem; } /* ── 24. Data Table ──────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .data-table th { padding: .75rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-muted); background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); white-space: nowrap; } .data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--clr-border-soft); vertical-align: middle; color: var(--clr-text); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--clr-surface-2); } /* ── 25. Badges ──────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; white-space: nowrap; } .badge-success { background: var(--clr-success-dim); color: var(--clr-success); } .badge-warning { background: var(--clr-warning-dim); color: var(--clr-warning); } .badge-danger { background: var(--clr-danger-dim); color: var(--clr-danger); } .badge-info { background: var(--clr-info-dim); color: var(--clr-info); } .badge-primary { background: var(--clr-primary-dim); color: var(--clr-primary); } .badge-outline { background: transparent; border: 1px solid var(--clr-border); color: var(--clr-text-muted); } /* ── 26. Form Controls ───────────────────────────────────────── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: .8rem; font-weight: 600; color: var(--clr-text-muted); margin-bottom: .4rem; } .form-hint { display: block; font-size: .72rem; color: var(--clr-text-faint); margin-top: .3rem; } .form-input { display: block; width: 100%; padding: .55rem .875rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-md); color: var(--clr-text); font-size: .875rem; font-family: var(--font-ui); outline: none; transition: border-color var(--trans-fast), box-shadow var(--trans-fast); } .form-input:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glow); } .form-input::placeholder { color: var(--clr-text-faint); } select.form-input { cursor: pointer; } textarea.form-input { resize: vertical; min-height: 90px; } /* ── 27. Alerts ──────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border-radius: var(--r-md); font-size: .85rem; border: 1px solid; } .alert i { margin-top: .05rem; flex-shrink: 0; } .alert-success { background: var(--clr-success-dim); border-color: var(--clr-success); color: var(--clr-success); } .alert-warning { background: var(--clr-warning-dim); border-color: var(--clr-warning); color: var(--clr-warning); } .alert-danger { background: var(--clr-danger-dim); border-color: var(--clr-danger); color: var(--clr-danger); } .alert-info { background: var(--clr-info-dim); border-color: var(--clr-info); color: var(--clr-info); } /* ── 28. Extra Button Sizes ──────────────────────────────────── */ .btn-xs { padding: .25rem .6rem; font-size: .72rem; border-radius: var(--r-sm); } .btn.danger { border-color: var(--clr-danger); color: var(--clr-danger); } .btn.danger:hover { background: var(--clr-danger-dim); } /* ── 29. Topbar User Avatar ──────────────────────────────────── */ .topbar-user { position: relative; cursor: pointer; } .topbar-user .dropdown-menu { display: none; position: absolute; top: calc(100% + .5rem); right: 0; z-index: 200; } .topbar-user.open .dropdown-menu { display: block; } /* ── 30. Print Styles ────────────────────────────────────────── */ @media print { .sidebar, .topbar, .topbar-actions, .cart-actions, .btn, .nav-group, .sidebar-nav { display: none !important; } .main-area { margin-left: 0 !important; } .pos-layout { display: block !important; } body { background: #fff !important; color: #000 !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } }