/* =========================================================================== Parking Portal — Admin UI. Dark-first SaaS aesthetic (shadcn / Linear flavor). All selectors prefixed .admin-* / --a-* so they cannot collide with any other styles. A light theme is available via [data-theme="light"] on . =========================================================================== */ :root, html[data-theme="dark"] { --a-bg: #0b1020; --a-bg-2: #0f172a; --a-surface: #131a2e; --a-surface-2: #1a223a; --a-card: #131a2e; --a-ink: #e5e9f4; --a-ink-2: #b6bdd1; --a-ink-3: #8e96ad; --a-muted: #6c7591; --a-line: #232b46; --a-line-2: #2c3554; --a-primary: #60a5fa; --a-primary-ink:#0b1020; --a-accent: #facc15; --a-danger: #f87171; --a-danger-bg: rgba(248,113,113,.10); --a-ok: #34d399; --a-ok-bg: rgba(52,211,153,.10); --a-warn: #fbbf24; --a-warn-bg: rgba(251,191,36,.10); --a-info: #818cf8; --a-info-bg: rgba(129,140,248,.10); --a-r-sm: 6px; --a-r: 10px; --a-r-lg: 14px; --a-r-pill: 999px; --a-shadow-xs: 0 1px 2px rgba(0,0,0,.20); --a-shadow: 0 1px 2px rgba(0,0,0,.20), 0 12px 28px rgba(0,0,0,.28); --a-shadow-lg: 0 8px 24px rgba(0,0,0,.30), 0 28px 60px rgba(0,0,0,.42); --a-ring: 0 0 0 4px color-mix(in srgb, var(--a-primary) 22%, transparent); --a-side-bg: #070b18; --a-side-line: #1a223a; --a-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --a-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; color-scheme: dark; } html[data-theme="light"] { --a-bg: #f6f7fb; --a-bg-2: #ffffff; --a-surface: #ffffff; --a-surface-2: #f8fafc; --a-card: #ffffff; --a-ink: #0f172a; --a-ink-2: #334155; --a-ink-3: #475569; --a-muted: #94a3b8; --a-line: #e5e7ef; --a-line-2: #eef0f7; --a-primary: #2563eb; --a-primary-ink:#ffffff; --a-accent: #f59e0b; --a-danger: #b91c1c; --a-danger-bg: #fef2f2; --a-ok: #047857; --a-ok-bg: #ecfdf5; --a-warn: #b45309; --a-warn-bg: #fffbeb; --a-info: #3730a3; --a-info-bg: #eef2ff; --a-shadow-xs: 0 1px 2px rgba(15,23,42,.04); --a-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07); --a-shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 24px 56px rgba(15,23,42,.12); --a-ring: 0 0 0 4px color-mix(in srgb, var(--a-primary) 18%, transparent); --a-side-bg: #0b1020; --a-side-line: rgba(255,255,255,.06); color-scheme: light; } .admin-body { margin: 0; font-family: var(--a-font); font-feature-settings: "cv11", "ss01"; background: var(--a-bg); color: var(--a-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .admin-body *, .admin-body *::before, .admin-body *::after { box-sizing: border-box; } .admin-body a { color: var(--a-primary); text-decoration: none; transition: color .15s; } .admin-body a:hover { color: color-mix(in srgb, var(--a-primary) 75%, #fff); text-decoration: underline; text-underline-offset: 3px; } .admin-body button, .admin-body input, .admin-body select, .admin-body textarea { font: inherit; color: inherit; } .admin-body ::selection { background: color-mix(in srgb, var(--a-primary) 35%, transparent); color: inherit; } .admin-muted { color: var(--a-muted); } .admin-tiny { font-size: 12px; } .admin-mono { font-family: var(--a-mono); } .admin-err { background: var(--a-danger-bg); border: 1px solid color-mix(in srgb, var(--a-danger) 35%, transparent); color: var(--a-danger); padding: 10px 12px; border-radius: var(--a-r-sm); font-size: 14px; } /* ----- Login ----- */ .admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(900px 480px at 20% -10%, color-mix(in srgb, var(--a-primary) 24%, transparent), transparent 60%), radial-gradient(700px 380px at 110% 110%, color-mix(in srgb, var(--a-accent) 18%, transparent), transparent 60%), var(--a-bg); } .admin-login .admin-card { width: 100%; max-width: 400px; padding: 32px; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-shadow-lg); display: flex; flex-direction: column; gap: 14px; } .admin-login h1 { margin: 0; font-size: 22px; letter-spacing: -.015em; color: var(--a-ink); } .admin-login p { margin: -4px 0 6px; } .admin-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--a-ink-2); } .admin-login input { font: 15px var(--a-font); padding: 11px 13px; border: 1px solid var(--a-line); border-radius: var(--a-r-sm); background: var(--a-surface-2); color: var(--a-ink); } .admin-login input:focus { outline: none; border-color: var(--a-primary); box-shadow: var(--a-ring); } /* ----- Shell ----- */ .admin-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } .admin-side { background: var(--a-side-bg); color: #c1c8de; display: flex; flex-direction: column; padding: 18px 0; border-right: 1px solid var(--a-side-line); position: sticky; top: 0; max-height: 100vh; } .admin-side-brand { font-weight: 800; color: #fff; padding: 0 20px 14px; font-size: 17px; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--a-side-line); margin-bottom: 14px; } .admin-side-brand::before { content: ""; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--a-primary), #a78bfa); box-shadow: 0 4px 12px color-mix(in srgb, var(--a-primary) 40%, transparent); } .admin-side-nav { display: flex; flex-direction: column; padding: 0 10px; gap: 2px; flex: 1; overflow-y: auto; } .admin-side-nav a { color: #c1c8de; padding: 9px 12px; font-weight: 500; font-size: 14px; border-radius: var(--a-r-sm); display: flex; align-items: center; gap: 10px; transition: background .15s, color .15s; } .admin-side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .admin-side-nav a.is-active { background: color-mix(in srgb, var(--a-primary) 18%, transparent); color: #fff; box-shadow: inset 2px 0 0 var(--a-primary); } .admin-side-foot { margin-top: auto; padding: 14px 14px 4px; border-top: 1px solid var(--a-side-line); display: flex; flex-direction: column; gap: 10px; } .admin-side-foot #admin-who { color: #8a93ae; font-size: 12px; padding: 0 6px; } .admin-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.04); color: #c1c8de; border: 1px solid rgba(255,255,255,.08); border-radius: var(--a-r-sm); padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; } .admin-theme-toggle:hover { background: rgba(255,255,255,.08); color: #fff; } .admin-main { padding: 28px 32px 56px; overflow-x: hidden; min-width: 0; } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { position: static; max-height: none; flex-direction: column; padding: 12px 0; } .admin-side-brand { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px; } .admin-side-nav { flex-direction: row; flex-wrap: wrap; padding: 0 10px; } .admin-side-nav a { padding: 7px 11px; font-size: 13px; } .admin-side-nav a.is-active { box-shadow: inset 0 -2px 0 var(--a-primary); } .admin-side-foot { flex-direction: row; align-items: center; padding: 10px 14px; border-top: 1px solid var(--a-side-line); } .admin-side-foot #admin-who { flex: 1; } .admin-main { padding: 18px; } } /* ----- Page header ----- */ .admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .admin-head h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; color: var(--a-ink); } .admin-head-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ----- Cards ----- */ .admin-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-r-lg); padding: 22px; box-shadow: var(--a-shadow-xs); margin-bottom: 18px; } .admin-card h2 { margin: 0 0 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); } /* ----- Buttons ----- */ .admin-btn { font: 600 14px/1 var(--a-font); letter-spacing: -.005em; padding: 9px 14px; border-radius: var(--a-r-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s; } .admin-btn:active { transform: translateY(1px); } .admin-btn:focus-visible { outline: none; box-shadow: var(--a-ring); } .admin-btn-primary { background: var(--a-primary); color: var(--a-primary-ink); } .admin-btn-primary:hover { background: color-mix(in srgb, var(--a-primary) 88%, #fff); } .admin-btn-ghost { background: var(--a-surface-2); color: var(--a-ink); border-color: var(--a-line); } .admin-btn-ghost:hover { background: var(--a-surface); border-color: var(--a-line-2); } .admin-btn-danger { background: var(--a-danger); color: #fff; } .admin-btn-danger:hover { background: color-mix(in srgb, var(--a-danger) 88%, #fff); } .admin-btn-sm { padding: 6px 10px; font-size: 13px; } .admin-btn:disabled { opacity: .5; cursor: not-allowed; } /* ----- Filters ----- */ .admin-filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .admin-filters input, .admin-filters select { font: 14px var(--a-font); padding: 9px 11px; border: 1px solid var(--a-line); border-radius: var(--a-r-sm); background: var(--a-surface-2); color: var(--a-ink); min-width: 200px; transition: border-color .15s, box-shadow .15s; } .admin-filters input:focus, .admin-filters select:focus { outline: none; border-color: var(--a-primary); box-shadow: var(--a-ring); } .admin-filters input::placeholder { color: var(--a-muted); } /* ----- Tables ----- */ .admin-table-wrap { overflow-x: auto; margin: -22px -22px -22px; } .admin-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--a-line); vertical-align: middle; } .admin-table th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); background: var(--a-surface-2); position: sticky; top: 0; z-index: 1; } .admin-table th:first-child, .admin-table td:first-child { padding-left: 22px; } .admin-table th:last-child, .admin-table td:last-child { padding-right: 22px; } .admin-table tbody tr { cursor: pointer; transition: background .12s; } .admin-table tbody tr:hover td { background: var(--a-surface-2); } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--a-r-pill); font-size: 11.5px; font-weight: 600; text-transform: capitalize; background: var(--a-surface-2); color: var(--a-ink-2); border: 1px solid var(--a-line); } .admin-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; } .admin-pill[data-v="paid"], .admin-pill[data-v="approved"] { background: var(--a-ok-bg); color: var(--a-ok); border-color: color-mix(in srgb, var(--a-ok) 30%, transparent); } .admin-pill[data-v="pending"], .admin-pill[data-v="submitted"], .admin-pill[data-v="new"] { background: var(--a-warn-bg); color: var(--a-warn); border-color: color-mix(in srgb, var(--a-warn) 30%, transparent); } .admin-pill[data-v="cancelled"], .admin-pill[data-v="denied"], .admin-pill[data-v="expired"] { background: var(--a-danger-bg); color: var(--a-danger); border-color: color-mix(in srgb, var(--a-danger) 30%, transparent); } .admin-pill[data-v="closed"], .admin-pill[data-v="paid_out"] { background: var(--a-info-bg); color: var(--a-info); border-color: color-mix(in srgb, var(--a-info) 30%, transparent); } /* ----- Stat tiles ----- */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } .admin-stat { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-r-lg); padding: 18px 20px; box-shadow: var(--a-shadow-xs); position: relative; overflow: hidden; } .admin-stat::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a-primary) 14%, transparent), transparent 70%); pointer-events: none; } .admin-stat .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); } .admin-stat .value { font-size: 28px; font-weight: 800; color: var(--a-ink); margin-top: 6px; letter-spacing: -.025em; } /* ----- Modal ----- */ .admin-modal { position: fixed; inset: 0; z-index: 50; background: rgba(7,11,24,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: admin-fade .15s ease-out; } @keyframes admin-fade { from { opacity: 0; } to { opacity: 1; } } .admin-modal-inner { background: var(--a-card); color: var(--a-ink); border: 1px solid var(--a-line); border-radius: var(--a-r-lg); max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: 26px; box-shadow: var(--a-shadow-lg); animation: admin-pop .18s ease-out; } @keyframes admin-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .admin-modal h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.015em; color: var(--a-ink); text-transform: none; } .admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .admin-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--a-ink-2); } .admin-grid label.full { grid-column: 1 / -1; } .admin-grid input, .admin-grid select, .admin-grid textarea { font: 14px var(--a-font); padding: 9px 11px; border: 1px solid var(--a-line); border-radius: var(--a-r-sm); background: var(--a-surface-2); color: var(--a-ink); transition: border-color .15s, box-shadow .15s; } .admin-grid input:focus, .admin-grid select:focus, .admin-grid textarea:focus { outline: none; border-color: var(--a-primary); box-shadow: var(--a-ring); } .admin-grid textarea { min-height: 90px; resize: vertical; } .admin-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; } [data-su-only] { display: none; } .is-su [data-su-only] { display: initial; } /* Scrollbars (dark only) */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--a-line-2); border-radius: 99px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4569; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }