:root { --page-plane: #f7f7f5; --surface-1: #ffffff; --surface-2: #f0efe9; --sidebar-bg: #14140f; --sidebar-fg: #c3c2b7; --sidebar-fg-active: #ffffff; --sidebar-active-bg: rgba(255,255,255,0.08); --topbar-bg: #ffffff; --text-primary: #0b0b0b; --text-secondary: #52514e; --muted: #898781; --border: rgba(11,11,11,0.10); --gridline: #e7e6e0; --accent: #0a5cd8; --accent-soft: rgba(10,92,216,0.10); --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; --method-post: #0a5cd8; --method-get: #0ca30c; --radius: 12px; --shadow-sm: 0 1px 2px rgba(11,11,11,0.04), 0 1px 1px rgba(11,11,11,0.03); } /* Dark mode: follows the OS/browser preference by default, but an explicit choice from the theme toggle (stamped as data-theme on ) always wins in both directions -- see the toggleTheme()/inline script in base.html. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-plane: #0d0d0d; --surface-1: #1a1a19; --surface-2: #242422; --sidebar-bg: #0a0a08; --sidebar-fg: #a3a299; --sidebar-fg-active: #ffffff; --sidebar-active-bg: rgba(255,255,255,0.08); --topbar-bg: #1a1a19; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781; --border: rgba(255,255,255,0.10); --gridline: #2c2c2a; --accent: #5b9dff; --accent-soft: rgba(91,157,255,0.14); } } :root[data-theme="dark"] { --page-plane: #0d0d0d; --surface-1: #1a1a19; --surface-2: #242422; --sidebar-bg: #0a0a08; --sidebar-fg: #a3a299; --sidebar-fg-active: #ffffff; --sidebar-active-bg: rgba(255,255,255,0.08); --topbar-bg: #1a1a19; --text-primary: #ffffff; --text-secondary: #c3c2b7; --muted: #898781; --border: rgba(255,255,255,0.10); --gridline: #2c2c2a; --accent: #5b9dff; --accent-soft: rgba(91,157,255,0.14); } * { box-sizing: border-box; } body { font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page-plane); color: var(--text-primary); margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Poppins', system-ui, -apple-system, sans-serif; font-weight: 600; } /* ---- App shell ---- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 252px; flex: none; /* Pinned to the viewport (not stretched to the page's full scroll height) so it stays visible even when main content is much taller than one screen. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; padding: 22px 0; transition: width 0.18s ease; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 22px 22px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .sidebar-brand img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; flex: none; } .sidebar-brand span { font-weight: 700; font-size: 16px; color: #ffffff; white-space: nowrap; } .sidebar-nav { flex: 1; padding: 14px 12px; } .sidebar-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6b6a63; padding: 16px 12px 8px; white-space: nowrap; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--sidebar-fg); text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 3px; white-space: nowrap; } .sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: var(--sidebar-fg-active); } .sidebar-nav a.active { background: var(--accent); color: #ffffff; font-weight: 600; } .sidebar-nav a .icon-svg { flex: none; } .icon-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ---- Collapsed sidebar (desktop) ---- */ :root[data-sidebar="collapsed"] .sidebar { width: 76px; } :root[data-sidebar="collapsed"] .sidebar-brand span, :root[data-sidebar="collapsed"] .nav-label, :root[data-sidebar="collapsed"] .sidebar-section-label { display: none; } :root[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: 0 0 22px; } :root[data-sidebar="collapsed"] .sidebar-nav a { justify-content: center; padding: 12px; } /* ---- Top bar ---- */ .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 80; } .topbar-toggle { width: 38px; height: 38px; border-radius: 9px; } .topbar-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; padding: 0 14px; } .topbar-search:focus-within { border-color: var(--accent); background: var(--surface-1); } .topbar-search .search-icon { color: var(--muted); flex: none; display: flex; } .topbar-search input { border: none; background: none; outline: none; padding: 10px 0; font-size: 14px; font-family: inherit; color: var(--text-primary); width: 100%; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; padding: 0; } .theme-toggle-btn:hover { color: var(--text-primary); background: var(--surface-2); } .notif-bell { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); text-decoration: none; } .notif-bell:hover { color: var(--text-primary); background: var(--surface-2); } .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--status-critical); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); cursor: pointer; } .user-menu-trigger:hover { background: var(--surface-2); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; } .user-info { display: flex; flex-direction: column; text-align: left; line-height: 1.25; } .user-info .username { font-size: 13px; font-weight: 600; color: var(--text-primary); } .user-info .user-role { font-size: 11px; color: var(--muted); } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; z-index: 90; } .user-menu-dropdown.visible { display: block; } .user-menu-dropdown a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--text-primary); text-decoration: none; font-size: 13px; } .user-menu-dropdown a:hover { background: var(--surface-2); } .main { flex: 1; padding: 24px 28px; min-width: 0; } .page-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 22px; } .page-header h1 { font-size: 23px; margin: 0; letter-spacing: -0.01em; } .page-header p.subtitle { color: var(--muted); font-size: 13px; margin: 4px 0 0; } /* Fluid width -- fills .main's available space instead of capping at a fixed max-width, so wide screens don't waste space in empty side gutters next to the sidebar. */ .wrap { width: 100%; } /* ---- Shared components ---- */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .stat-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); } .stat-tile .label { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; margin-bottom: 10px; } .stat-tile .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .stat-tile .value { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } .stat-tile .sub { font-size: 12px; color: var(--muted); margin-top: 3px; } table { width: 100%; border-collapse: collapse; } .card table, .table-card table { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } thead th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 13px 16px; border-bottom: 1px solid var(--gridline); } tbody td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--gridline); color: var(--text-primary); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface-2); } td.amount { font-variant-numeric: tabular-nums; font-weight: 500; } td.muted { color: var(--muted); font-size: 13px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--page-plane); border: 1px solid var(--border); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .badge.paid .dot { background: var(--status-good); } .badge.pending .dot { background: var(--status-warning); } .badge.cancelled .dot { background: var(--status-serious); } .badge.failed .dot { background: var(--status-critical); } .badge.active .dot { background: var(--status-good); } .badge.inactive .dot { background: var(--status-critical); } .badge.expired .dot { background: var(--muted); } .empty { padding: 40px; text-align: center; color: var(--muted); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); } .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 32px 0 12px; } .section-title:first-child { margin-top: 0; } .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--shadow-sm); } .card h2 { font-size: 16px; margin: 0 0 6px; } .card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 22px 0 10px; } p { color: var(--text-secondary); line-height: 1.65; } code { background: var(--surface-2); border-radius: 4px; padding: 2px 6px; font-size: 13px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; overflow-x: auto; font-size: 13px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; line-height: 1.6; } .callout { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 6px; padding: 12px 16px; font-size: 13px; color: var(--text-secondary); margin: 12px 0; } .endpoint { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; } .method { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 5px; color: white; } .method.post { background: var(--method-post); } .method.get { background: var(--method-get); } .path { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 14px; } .platform-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--gridline); font-size: 14px; } .platform-row:last-child { border-bottom: none; } .platform-name { font-weight: 600; } .platform-name .tag { font-weight: 400; color: var(--muted); font-size: 12px; } .platform-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--page-plane); border: 1px solid var(--border); color: var(--text-secondary); } .pill-list { display: flex; flex-wrap: wrap; gap: 6px; } /* ---- Forms ---- */ .form-field { margin-bottom: 20px; } .form-row { display: flex; gap: 20px; flex-wrap: wrap; } .form-row .form-field { flex: 1; min-width: 200px; } .form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 7px; } .form-field .help-text { font-size: 12px; color: var(--muted); margin-top: 5px; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"], .form-field textarea, .form-field select { width: 100%; max-width: 420px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); color: var(--text-primary); font-size: 14px; font-family: inherit; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); } .form-field textarea { max-width: 520px; } .checkbox-list { display: flex; flex-direction: column; gap: 9px; } .checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text-primary); } .checkbox-row { display: flex; align-items: center; gap: 8px; } .errorlist { color: var(--status-critical); font-size: 13px; margin: 5px 0 0; padding: 0; list-style: none; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 9px; border: none; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--accent); color: #ffffff; } .btn-primary:hover { filter: brightness(0.92); } .btn-secondary { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-1); } .btn-danger { background: var(--status-critical); color: #ffffff; } .btn-danger:hover { filter: brightness(0.92); } .form-actions { display: flex; gap: 10px; margin-top: 26px; } .key-display { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 13px 15px; word-break: break-all; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pill { display: inline-flex; padding: 3px 11px; border-radius: 999px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); } /* ---- Tabs ---- */ .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--gridline); margin-bottom: 22px; } .tab-btn { padding: 11px 18px; border: none; background: none; color: var(--muted); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ---- Icon action buttons ---- */ .row-actions { display: flex; gap: 6px; align-items: center; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; text-decoration: none; font-size: 13px; font-family: inherit; padding: 0; } .icon-btn:hover { background: var(--surface-2); color: var(--text-primary); } .icon-btn.danger:hover { background: var(--status-critical); color: #fff; border-color: var(--status-critical); } .icon-btn.warn:hover { background: var(--status-warning); color: #1a1a19; border-color: var(--status-warning); } td.serial { color: var(--muted); font-size: 13px; width: 1%; white-space: nowrap; } /* ---- Custom confirm modal (replaces window.confirm) ---- */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; } .modal-backdrop.visible { display: flex; } .modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; width: 90%; max-width: 380px; } .modal p { margin: 0 0 20px; color: var(--text-primary); font-size: 14px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; } .sidebar-overlay.visible { display: block; } /* ---- Responsive ---- */ @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform 0.2s ease; width: 260px; } .sidebar.open { transform: translateX(0); } :root[data-sidebar="collapsed"] .sidebar { width: 260px; } :root[data-sidebar="collapsed"] .sidebar-brand span, :root[data-sidebar="collapsed"] .nav-label, :root[data-sidebar="collapsed"] .sidebar-section-label { display: block; } .topbar { padding: 12px 16px; } .topbar-search { display: none; } .user-info { display: none; } .main { padding: 20px; } .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } .kpi-row { grid-template-columns: repeat(2, 1fr); } table { display: block; overflow-x: auto; white-space: nowrap; } } @media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } } /* ---- Pagination ---- */ .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 10px; } .pagination-links { display: flex; align-items: center; gap: 8px; } .pagination-current { font-size: 13px; color: var(--text-secondary); padding: 0 4px; } .page-size-select { font-family: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; margin-right: 6px; cursor: pointer; } /* ---- Transaction detail / receipt ---- */ .detail-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--gridline); font-size: 14px; gap: 20px; } .detail-row:last-child { border-bottom: none; } .detail-row .detail-label { color: var(--muted); flex: none; } .detail-row .detail-value { text-align: right; word-break: break-all; }