/* ─── Tokens ─────────────────────────────────────────────── */ :root { --ink: #0D0D0F; --ink-soft: #5A5A6A; --ink-faint: #9898A8; --surface: #F7F7FA; --white: #FFFFFF; --rule: #E4E4EE; /* Status palette – bold signal colours */ --s-pending: #F59E0B; --s-processing:#3B82F6; --s-shipped: #8B5CF6; --s-delivered:#10B981; --s-cancelled:#EF4444; --accent: #6B3BFA; /* violet — the one bold choice */ --accent-mid: #EDE8FE; --radius: 6px; --radius-lg: 12px; --mono: 'DM Mono', monospace; --body: 'Inter', sans-serif; --display: 'Syne', sans-serif; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow: 0 4px 16px rgba(0,0,0,.10); } /* ─── Dark theme tokens ──────────────────────────────────── */ /* Applied automatically if the OS prefers dark, unless overridden by an explicit data-theme attribute on (set by the toggle). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F2F2F7; --ink-soft: #B8B8C8; --ink-faint: #7A7A8C; --surface: #15151C; --white: #1E1E28; --rule: #32323E; --s-pending: #FBBF24; --s-processing:#60A5FA; --s-shipped: #A78BFA; --s-delivered:#34D399; --s-cancelled:#F87171; --accent: #9B7CFD; --accent-mid: #2D2640; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 20px rgba(0,0,0,.5); } } /* Manual override — applied when the user explicitly picks a theme, regardless of OS preference. */ :root[data-theme="dark"] { --ink: #F2F2F7; --ink-soft: #B8B8C8; --ink-faint: #7A7A8C; --surface: #15151C; --white: #1E1E28; --rule: #32323E; --s-pending: #FBBF24; --s-processing:#60A5FA; --s-shipped: #A78BFA; --s-delivered:#34D399; --s-cancelled:#F87171; --accent: #9B7CFD; --accent-mid: #2D2640; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 20px rgba(0,0,0,.5); } :root[data-theme="light"] { --ink: #0D0D0F; --ink-soft: #5A5A6A; --ink-faint: #9898A8; --surface: #F7F7FA; --white: #FFFFFF; --rule: #E4E4EE; --s-pending: #F59E0B; --s-processing:#3B82F6; --s-shipped: #8B5CF6; --s-delivered:#10B981; --s-cancelled:#EF4444; --accent: #6B3BFA; --accent-mid: #EDE8FE; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow: 0 4px 16px rgba(0,0,0,.10); } /* Smooth transition between themes */ body, .card, .nav, input, select, textarea { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } /* ─── Reset / Base ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--body); background: var(--surface); color: var(--ink); line-height: 1.6; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* ─── Navbar ─────────────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 60px; } .brand { font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .brand span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .nav-links a { font-size: .875rem; font-weight: 500; color: var(--ink-soft); transition: color .15s; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .btn-nav { background: var(--accent); color: var(--white) !important; padding: .4rem 1rem; border-radius: var(--radius); font-size: .8rem !important; font-weight: 600 !important; letter-spacing: .01em; transition: opacity .15s !important; } .btn-nav:hover { opacity: .85; } /* ─── Theme toggle ───────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--rule); border-radius: 50%; background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .theme-toggle:hover { transform: scale(1.06); } .theme-toggle:active { transform: scale(.96); } /* Show the icon for the theme that's NOT currently active (i.e. what you'll switch to) */ .theme-icon-dark { display: none; } .theme-icon-light { display: inline; } /* When dark mode is active (manual or OS-driven), show the sun (switch to light) */ :root[data-theme="dark"] .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-icon-dark { display: inline; } :root[data-theme="light"] .theme-icon-light { display: inline; } :root[data-theme="light"] .theme-icon-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-icon-light { display: none; } :root:not([data-theme]) .theme-icon-dark { display: inline; } } /* ─── Nav account ────────────────────────────────────────── */ .nav-account { display: flex; align-items: center; gap: .6rem; margin-left: .5rem; padding-left: .75rem; border-left: 1px solid var(--rule); } .nav-username { font-size: .8rem; font-weight: 500; color: var(--ink-soft); } .nav-logout { font-size: .78rem; font-weight: 500; color: var(--ink-faint); transition: color .15s; } .nav-logout:hover { color: var(--s-cancelled); } /* ─── Main ───────────────────────────────────────────────── */ .main-content { max-width: 1320px; margin: 0 auto; padding: 2.5rem 2rem 4rem; } /* ─── Alerts ─────────────────────────────────────────────── */ .alert { padding: .875rem 1.25rem; border-radius: var(--radius); font-size: .875rem; margin-bottom: 1.5rem; font-weight: 500; } .alert-success { background: #D1FAE5; color: #065F46; } .alert-error { background: #FEE2E2; color: #991B1B; } .alert-sms { background: #EDE8FE; color: #5B21B6; } .alert-warning { background: #FEF3C7; color: #92400E; } /* ─── Page Header ────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .page-header h1 { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; } .page-header p { color: var(--ink-soft); font-size: .9rem; margin-top: .35rem; } /* ─── Stats Row ──────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .stat-card.pending::before { background: var(--s-pending); } .stat-card.processing::before { background: var(--s-processing); } .stat-card.shipped::before { background: var(--s-shipped); } .stat-card.delivered::before { background: var(--s-delivered); } .stat-card.cancelled::before { background: var(--s-cancelled); } .stat-num { font-family: var(--display); font-size: 2.25rem; font-weight: 800; line-height: 1; margin-bottom: .25rem; } .stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } /* ─── Filter Bar ─────────────────────────────────────────── */ .filter-bar { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; } .filter-bar input, .filter-bar select { font-family: var(--body); font-size: .875rem; border: 1px solid var(--rule); background: var(--white); border-radius: var(--radius); padding: .5rem .85rem; color: var(--ink); outline: none; transition: border-color .15s; } .filter-bar input:focus, .filter-bar select:focus { border-color: var(--accent); } .filter-bar input { min-width: 220px; } /* ─── Orders Table ───────────────────────────────────────── */ .table-wrap { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; } thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); padding: .85rem 1.25rem; text-align: left; background: var(--surface); border-bottom: 1px solid var(--rule); } tbody tr { border-bottom: 1px solid var(--rule); transition: background .1s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: #FAFAFD; } tbody td { padding: 1rem 1.25rem; font-size: .875rem; vertical-align: middle; } .order-id { font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--accent); } .order-id:hover { text-decoration: underline; } .customer-name { font-weight: 500; } .order-amount { font-family: var(--mono); font-weight: 500; } .actions { display: flex; gap: .5rem; } .btn-icon { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--white); cursor: pointer; transition: all .15s; color: var(--ink-soft); } .btn-icon:hover { border-color: var(--accent); color: var(--accent); } .btn-icon.danger:hover { border-color: var(--s-cancelled); color: var(--s-cancelled); } /* ─── Status Badge ───────────────────────────────────────── */ .badge { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 100px; } .badge-pending { background: #FEF3C7; color: #92400E; } .badge-processing { background: #DBEAFE; color: #1E40AF; } .badge-shipped { background: #EDE9FE; color: #5B21B6; } .badge-delivered { background: #D1FAE5; color: #065F46; } .badge-cancelled { background: #FEE2E2; color: #991B1B; } /* ─── Empty State ────────────────────────────────────────── */ .empty-state { text-align: center; padding: 4rem 2rem; color: var(--ink-soft); } .empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; } .empty-state h3 { font-family: var(--display); font-size: 1.25rem; margin-bottom: .5rem; } /* ─── Detail View ────────────────────────────────────────── */ .detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } } .card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); } .card-title { font-family: var(--display); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); } .detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--surface); font-size: .875rem; } .detail-row:last-child { border-bottom: none; } .detail-label { color: var(--ink-soft); font-weight: 500; } .detail-value { font-weight: 500; text-align: right; } .detail-value.mono { font-family: var(--mono); } /* ─── Timeline ───────────────────────────────────────────── */ .timeline { list-style: none; position: relative; } .timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--rule); } .timeline li { position: relative; padding: 0 0 1.25rem 2rem; font-size: .875rem; } .timeline li:last-child { padding-bottom: 0; } .tl-dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--accent); } .tl-dot.inactive { background: var(--rule); box-shadow: 0 0 0 2px var(--ink-faint); } .tl-label { font-weight: 600; } .tl-time { font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); } /* ─── Form ───────────────────────────────────────────────── */ .form-wrap { max-width: 640px; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: .45rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; font-family: var(--body); font-size: .9rem; border: 1px solid var(--rule); background: var(--white); border-radius: var(--radius); padding: .65rem 1rem; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-mid); } .form-group textarea { resize: vertical; min-height: 90px; } .form-error { font-size: .8rem; color: var(--s-cancelled); margin-top: .3rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--body); font-size: .875rem; font-weight: 600; padding: .65rem 1.4rem; border-radius: var(--radius); border: none; cursor: pointer; transition: opacity .15s, transform .1s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--white); } .btn-primary:hover { opacity: .88; } .btn-ghost { background: var(--white); color: var(--ink-soft); border: 1px solid var(--rule); } .btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); } .btn-danger { background: var(--s-cancelled); color: var(--white); } .form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } /* ─── Dashboard Hero ─────────────────────────────────────── */ .dash-hero { background: var(--ink); border-radius: var(--radius-lg); padding: 2.5rem; margin-bottom: 2rem; color: var(--white); position: relative; overflow: hidden; } .dash-hero::after { content: 'ORDERPULSE'; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 7rem; font-weight: 800; opacity: .04; pointer-events: none; white-space: nowrap; } .dash-hero h1 { font-family: var(--display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-bottom: .75rem; } .dash-hero h1 em { font-style: normal; color: #A78BFA; } .dash-hero p { color: #A0A0B8; font-size: .95rem; max-width: 420px; } /* ─── Toggle checkbox ────────────────────────────────────── */ .toggle-label { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ink-soft); } .toggle-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* ─── Pagination ─────────────────────────────────────────── */ .pagination { display: flex; gap: .4rem; margin-top: 1.5rem; justify-content: center; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); font-size: .85rem; font-weight: 500; border: 1px solid var(--rule); background: var(--white); color: var(--ink-soft); transition: all .15s; } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .current { background: var(--accent); border-color: var(--accent); color: var(--white); }