/* ============================================================ Kids FunZone – Admin Console Stylesheet Simple, high-contrast, large-touch-target UI for staff/manager/admin. No gradients, no decorative animation, no horizontal scrolling. ============================================================ */ :root { --adm-bg: #f4f6f8; --adm-surface: #ffffff; --adm-card: #ffffff; --adm-border: #d7dde3; --adm-accent: #2563eb; --adm-accent-soft: #e8f0fe; --adm-green: #15803d; --adm-green-soft: #dcfce7; --adm-yellow: #92400e; --adm-yellow-soft: #fef3c7; --adm-red: #b91c1c; --adm-red-soft: #fee2e2; --adm-text-primary: #111827; --adm-text-secondary: #4b5563; --adm-text-muted: #9ca3af; --adm-font: 'Segoe UI', Inter, system-ui, sans-serif; --adm-sidebar-width: 240px; --adm-r: 8px; } *, *::before, *::after { box-sizing: border-box; } .admin-page { font-family: var(--adm-font); background: var(--adm-bg); color: var(--adm-text-primary); min-height: 100vh; font-size: 16px; line-height: 1.5; } .admin-page a { color: var(--adm-accent); text-decoration: none; } /* ── Layout ────────────────────────────────────────────────── */ .adm-layout { display: flex; min-height: 100vh; } /* Reveal-gate: base.html's starts with .adm-pending, hiding page content until admin-auth-guard.js confirms the session and role are valid for this page. Without this, a disallowed role's page (reached via a stale link, direct URL, or a leftover session from another account on a shared computer) would render and paint in full before the async role check redirects it away. Only admin-auth-guard.js's revealPage() removes this class — never via inline style, so there's no gap where it could be half-hidden. */ .adm-pending .adm-main { visibility: hidden; } /* ── Sidebar ───────────────────────────────────────────────── */ .adm-sidebar { width: var(--adm-sidebar-width); background: #ffffff; border-right: 1px solid var(--adm-border); display: flex; flex-direction: column; position: fixed; height: 100vh; top: 0; left: 0; z-index: 1000; } .adm-sidebar-logo { height: 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--adm-border); flex-shrink: 0; } .adm-logo-text { font-weight: 700; font-size: 1.15rem; color: var(--adm-text-primary); } .adm-logo-text span { color: var(--adm-accent); } .adm-logo-img { width: 34px; height: 34px; margin-right: 10px; flex-shrink: 0; } .adm-logo-banner { height: 46px; width: auto; max-width: 100%; object-fit: contain; } .adm-sidebar-logo { display: flex; align-items: center; } /* Active fun zone, directly under the logo — the one thing that must be true on every page, since acting on the wrong branch's books is the mistake this whole feature makes possible. */ .adm-firm-block { padding: 10px 20px 12px; border-bottom: 1px solid var(--adm-border); flex-shrink: 0; } .adm-firm-strip { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--adm-accent); line-height: 1.25; } .adm-firm-strip i { flex: 0 0 auto; } .adm-firm-switch { margin-top: 8px; background: transparent; border: 1px solid var(--adm-border); border-radius: 8px; padding: 5px 10px; font-size: .78rem; font-weight: 600; color: var(--adm-text-primary); cursor: pointer; display: flex; align-items: center; gap: 6px; } .adm-firm-switch:hover, .adm-firm-switch:focus-visible { background: var(--adm-accent-soft); border-color: var(--adm-accent); color: var(--adm-accent); outline: none; } .adm-nav { flex: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .adm-nav-link { display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: var(--adm-r); color: var(--adm-text-secondary); font-weight: 600; font-size: 1rem; border-left: 4px solid transparent; } .adm-nav-link:hover { background: #f1f5f9; color: var(--adm-text-primary); } .adm-nav-link.active { background: var(--adm-accent-soft); color: var(--adm-accent); border-left-color: var(--adm-accent); font-weight: 700; } .adm-nav-link.active:hover { background: var(--adm-accent-soft); color: var(--adm-accent); } .adm-nav-link i { font-size: 1.2rem; width: 22px; text-align: center; flex-shrink: 0; } /* Section label above a group of nav links in the Admin sidebar (e.g. "Operations") — not clickable, just groups the flat link list into scannable sections. */ .adm-nav-section { padding: 16px 14px 4px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--adm-text-secondary); } .adm-nav-section:first-child { padding-top: 8px; } .adm-sidebar-footer { padding: 12px; border-top: 1px solid var(--adm-border); flex-shrink: 0; } .adm-user-card { display: flex; align-items: center; gap: 10px; padding: 8px; } .adm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--adm-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .adm-avatar-manager { background: var(--adm-green); } .adm-user-info { min-width: 0; flex: 1; } .adm-user-name { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-user-role { font-size: 0.78rem; color: var(--adm-text-secondary); } .adm-logout-btn { background: transparent; border: none; color: var(--adm-text-secondary); cursor: pointer; font-size: 1.2rem; padding: 6px; } .adm-logout-btn:hover { color: var(--adm-red); } /* !important is deliberate: this is a visibility utility class applied alongside layout classes like .adm-filter-row (display: flex) further down this file — without !important, cascade order (not role) would decide which display value wins, silently un-hiding role-gated elements regardless of the logged-in role. */ .adm-role-gate { display: none !important; } /* ── Main content ──────────────────────────────────────────── */ .adm-main { flex: 1; /* Without this, a flex item's default automatic minimum size is its content's intrinsic width — so a wide table (even one meant to scroll inside its own .adm-table-wrap) forced this whole column, and the fixed-position sidebar's margin-left offset with it, wider than the viewport instead of just scrolling the table. That showed up as the entire page gaining a horizontal scrollbar on a tablet-width screen. */ min-width: 0; margin-left: var(--adm-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .adm-topbar { min-height: 64px; background: var(--adm-surface); border-bottom: 1px solid var(--adm-border); display: flex; align-items: center; padding: 0 24px; gap: 16px; flex-wrap: wrap; } .adm-topbar-title { font-size: 1.4rem; font-weight: 700; flex: 1; padding: 14px 0; } .adm-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; } .adm-back-btn { flex-shrink: 0; } /* Greeting + live-clock pills, shown on every admin page's topbar. */ /* The active fun zone, stated more firmly than the greeting beside it — it is the one thing on the topbar you can act wrongly on. */ .adm-firm-pill { border-color: rgba(37, 99, 235, 0.45) !important; background: rgba(37, 99, 235, 0.16) !important; font-weight: 700; } .adm-live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.25); background: rgba(37, 99, 235, 0.08); color: #1e3a8a; font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .adm-clock-pill { font-variant-numeric: tabular-nums; } .adm-content { padding: 24px; flex: 1; min-width: 0; } .adm-content-narrow { max-width: 640px; } .adm-center { margin-left: auto; margin-right: auto; } .adm-kid-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .adm-kid-chip { display: inline-block; background: var(--adm-green-soft); color: var(--adm-green); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 0.95rem; } .adm-kid-entry { border: 1px dashed var(--adm-border); border-radius: var(--adm-r); padding: 14px; margin-bottom: 12px; } /* ── Filter bar (Manager & Super Admin list views) ───────────── A bordered toolbar card, every control labeled the same way (small caps label above the field) and bottom-aligned, so search/date/ dropdown fields never sit at mismatched heights. */ .adm-filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-r); padding: 16px; } /* Kept compact on purpose: rows with the most controls (Search + From + To + Staff + Export CSV, e.g. Platform History) need to fit on one line at ordinary laptop widths without Export CSV overflowing onto its own row — the widths below are the tightest that still comfortably fit each control's placeholder/value. */ .adm-filter-row .adm-form-select, .adm-filter-row input[type="date"] { max-width: 150px; } .adm-filter-row input[type="text"] { max-width: 220px; } .adm-filter-row .adm-filter-spacer { flex: 1; } .adm-filter-row label.adm-inline-label { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--adm-text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Every control that can sit in a filter row — text/date/select inputs, the Payment pill-button group, and any bare .adm-btn (Search, Export CSV) — gets the SAME fixed `height` (not min-height). min-height alone doesn't work here: each control type has different padding (buttons use 10px, inputs/pills use 12px), so its natural content-driven size can exceed a shared min-height and the row still renders uneven. An explicit height + box-sizing: border-box makes every control exactly 44px regardless of its own padding, so bottoms truly line up under align-items: flex-end. */ .adm-filter-row .adm-form-control, .adm-filter-row .adm-form-select, .adm-filter-row .adm-btn, .adm-filter-row .adm-choice-group, .adm-filter-row .adm-choice-btn { height: 44px; box-sizing: border-box; } .adm-filter-row .adm-btn { flex-shrink: 0; } .adm-filter-row .adm-choice-group { align-items: stretch; } /* Wraps the Search input on pages with a live suggestions dropdown (the dropdown is absolutely positioned off this). Without an explicit height, this wrapper's own auto height could come out a hair different from a plain sitting directly in a label, which is what made Search sit slightly lower than Payment/Staff on pages that use it — Currently Playing has no suggestions dropdown and was never wrapped, which is why it never showed the offset. */ .adm-search-wrap { position: relative; } .adm-filter-row .adm-search-wrap { height: 44px; } .adm-filter-row .adm-choice-btn { display: flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .adm-filter-row .adm-form-select, .adm-filter-row input[type="date"], .adm-filter-row input[type="text"] { max-width: none; width: 100%; } } /* Small phones (most 5-6" devices in portrait) — the 640px rule above already makes filter inputs full-width; this tightens spacing further and makes Export CSV a full-width row of its own instead of a small end-aligned button that can feel cramped/hard to tap next to other controls. */ @media (max-width: 480px) { .adm-filter-row { gap: 10px; padding: 12px; } .adm-filter-row .adm-btn { width: 100%; } .adm-filter-spacer { display: none; } .adm-form-grid, .adm-kid-grid, .adm-summary-grid { grid-template-columns: 1fr; } .adm-topbar-title { font-size: 1.05rem; } } /* ── Buttons ───────────────────────────────────────────────── */ .adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--adm-r); font-weight: 700; font-size: 1rem; cursor: pointer; border: 1.5px solid transparent; min-height: 44px; } .adm-btn-primary { background: var(--adm-accent); color: #fff !important; } .adm-btn-primary:hover { background: #1d4ed8; color: #fff !important; } .adm-btn-secondary { background: #ffffff; color: var(--adm-text-primary) !important; border-color: var(--adm-border); } .adm-btn-secondary:hover { background: #f1f5f9; } .adm-btn-danger { background: var(--adm-red-soft); color: var(--adm-red) !important; border-color: var(--adm-red); } .adm-btn-danger:hover { background: #fecaca; } .adm-btn-accent { background: var(--adm-accent-soft); color: var(--adm-accent) !important; border-color: #bfdbfe; } .adm-btn-accent:hover { background: #dbeafe; } .adm-btn-solid-danger { background: var(--adm-red); color: #fff !important; border-color: var(--adm-red); } .adm-btn-solid-danger:hover { background: #991b1b; } .adm-btn-link { background: transparent; color: var(--adm-accent) !important; border: none; font-weight: 600; } .adm-btn-lg { min-height: 52px; font-size: 1.1rem; padding: 12px 24px; } .adm-btn-sm { min-height: 38px; padding: 6px 10px; font-size: 0.85rem; } .adm-btn { white-space: nowrap; } /* Big green check-in button — the single most important action on the Register Kid screen, so it gets its own unmissable style. */ .adm-btn-checkin { display: block; width: 100%; margin-top: 20px; padding: 20px; background: var(--adm-green); color: #fff; border: none; border-radius: var(--adm-r); font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; } .adm-btn-checkin:hover { background: #14632f; } /* ── Cards ─────────────────────────────────────────────────── */ .adm-card { background: var(--adm-card); border: 1px solid var(--adm-border); border-radius: var(--adm-r); padding: 20px; margin-bottom: 20px; } .adm-card-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .adm-step-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; background: var(--adm-accent-soft); color: var(--adm-accent); } .adm-step-icon.adm-step-icon-green { background: var(--adm-green-soft); color: var(--adm-green); } .adm-step-icon.adm-step-icon-yellow { background: var(--adm-yellow-soft); color: var(--adm-yellow); } .adm-mt { margin-top: 18px; } .adm-info-line { font-size: 1.1rem; margin-bottom: 6px; } /* ── Forms ─────────────────────────────────────────────────── */ .adm-form-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--adm-text-secondary); margin-bottom: 6px; } .adm-form-control, .adm-form-select { width: 100%; background: #ffffff; border: 1.5px solid var(--adm-border); border-radius: var(--adm-r); padding: 12px 14px; color: var(--adm-text-primary); font-size: 1rem; min-height: 48px; } .adm-form-control:focus, .adm-form-select:focus { border-color: var(--adm-accent); outline: none; } .adm-form-control-lg { font-size: 1.2rem; padding: 16px; min-height: 56px; } .adm-form-group { margin-bottom: 16px; } /* Inline field validation (e.g. Register Kid's mobile number) — shown next to the field itself instead of a blocking alert(), and only once the user has actually left the field or tried to submit, so it can't complain about an entry still mid-typing. */ .adm-form-control.adm-input-invalid { border-color: var(--adm-red); } .adm-field-error { color: var(--adm-red); font-size: 0.82rem; margin-top: 6px; display: none; } .adm-field-error.visible { display: block; } .adm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .adm-search-row { display: flex; gap: 10px; flex-wrap: wrap; } .adm-search-row .adm-form-control { flex: 1; min-width: 220px; } .adm-search-row { position: relative; } /* Live phone-search suggestion dropdown (Register Kid) */ .adm-search-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--adm-surface); border: 1.5px solid var(--adm-border); border-radius: var(--adm-r); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); z-index: 20; max-height: 260px; overflow-y: auto; } .adm-search-suggestion { display: block; width: 100%; text-align: left; padding: 12px 14px; border: none; border-bottom: 1px solid var(--adm-border); background: none; font-size: 1rem; color: var(--adm-text-primary); cursor: pointer; } .adm-search-suggestion:last-child { border-bottom: none; } /* .is-active marks the row the arrow keys have moved to — focus stays in the search input while navigating, so :focus can't show it. */ .adm-search-suggestion:hover, .adm-search-suggestion:focus, .adm-search-suggestion.is-active { background: var(--adm-accent-soft); } .adm-search-suggestion strong { display: block; } .adm-search-suggestion span { font-size: 0.85rem; color: var(--adm-text-secondary); } /* ── Choice buttons — replaces