/* ============================================================ Kamareddy Badminton Academy — App stylesheet Builds on css/style.css design tokens (navy/teal/orange). Covers: auth flow, app shell, panels, tables, forms, toasts, modals, badges, stat cards, empty/loading states. ============================================================ */ /* ============================================================ APP THEME — "court" palette (overrides marketing tokens for app pages only; app.css is loaded solely by the SPA shell). Deep court green · shuttle white · charcoal · warm gold accent. ============================================================ */ :root { /* India tricolor theme — India-green scale (primary), saffron accent, chakra navy for deep surfaces. Surfaces stay light, text charcoal. */ --green-900: #06330f; /* deepest India green — sidebar & hero base */ --green-800: #0a4a15; --green-700: #138808; /* India green — primary */ --green-600: #17a30b; /* lighter primary / hover */ --green-100: #dcf0d6; /* light tint */ --green-50: #eef8ea; /* lightest tint */ --teal: #17a30b; /* accent green */ /* Saffron accent (replaces the old gold) */ --orange: #ff9933; /* saffron */ --orange-dark: #b5620e; /* readable saffron for small text (AA on white) */ --gold: #ff9933; --gold-deep: #d97a0e; --gold-soft: #fff0d9; /* Flag reference tokens */ --saffron: #ff9933; --india-green: #138808; --chakra: #0a1f4a; /* chakra navy */ /* Neutrals — charcoal text on a soft neutral canvas */ --ink: #17202a; --muted: #6b7683; --line: #e8ebee; --line-2: #f0f2f4; --white: #ffffff; --surface: #f4f6f8; /* Soft modern radii (SaaS-style rounded cards) */ --radius: 12px; --r-sm: 8px; /* Soft, diffuse shadows */ --shadow-sm: 0 1px 2px rgba(20, 40, 60, 0.04), 0 2px 6px rgba(20, 40, 60, 0.05); --shadow: 0 8px 24px rgba(20, 40, 60, 0.08); --shadow-lg: 0 24px 50px rgba(20, 40, 60, 0.16); /* Athletic display font for headings / big numbers */ --font-display: "Barlow Condensed", "Poppins", "Segoe UI", sans-serif; /* 4/8px spacing rhythm */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Motion tokens */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 150ms; --t-base: 220ms; --t-slow: 320ms; /* Layered z-index scale */ --z-nav: 100; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 900; } .app-body { /* Quiet court-inspired canvas for the web dashboard: subtle badminton court lines and soft green/saffron washes. The court photo that used to sit at the bottom of this stack is gone; the flat wash above it went with it, since it existed only to mute the photo and over the same base colour it renders identically. The gradients and court lines are unchanged. */ background: radial-gradient(60vmax 38vmax at 18% -8%, rgba(19, 136, 8, 0.11), transparent 62%) fixed, radial-gradient(48vmax 34vmax at 100% 8%, rgba(255, 153, 51, 0.09), transparent 64%) fixed, linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(19, 136, 8, 0.08) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) fixed, linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(19, 136, 8, 0.06) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) fixed, #f5f7f4; color: var(--ink); position: relative; isolation: isolate; -webkit-font-smoothing: antialiased; /* Clip (not hidden) so we don't turn into a scroll container — that would break the sticky sidebar. Clip still prevents h-scroll. */ overflow-x: clip; } /* India tricolor stripe pinned across the very top of the whole app (covers the shell and the auth screen; sits above chrome, below overlays). */ .app-body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 250; background: linear-gradient(90deg, var(--saffron) 0 33.333%, #ffffff 33.333% 66.666%, var(--india-green) 66.666% 100%); } .app-body::after { content: ""; position: fixed; inset: 0; /* -1 for the same reason as body::before in style.css: .app-body isolates, so this paints above its background and below its content without needing a `> *` rule that would clobber injected overlays. */ z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 8%, rgba(19, 136, 8, 0.055) 8% calc(8% + 1px), transparent calc(8% + 1px) 92%, rgba(19, 136, 8, 0.055) 92% calc(92% + 1px), transparent calc(92% + 1px)), linear-gradient(0deg, transparent 14%, rgba(19, 136, 8, 0.045) 14% calc(14% + 1px), transparent calc(14% + 1px) 86%, rgba(19, 136, 8, 0.045) 86% calc(86% + 1px), transparent calc(86% + 1px)); } /* `.app-body > * { position: relative; z-index: 1 }` removed -- see the note on .app-body::after. Both stylesheets load on /app, so this was a second copy of the same landmine hitting anything appended to . */ /* Reuse the site logo mark */ .logo-mark { width: 46px; height: 46px; border-radius: 50%; background: url("../assets/logo.jpeg") center / 165% no-repeat; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-shrink: 0; display: inline-block; } .brand-text { font-family: var(--font-logo); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1; } .brand-text small { display: block; font-family: var(--font-head); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; color: var(--green-700); } .hidden { display: none !important; } .muted { color: var(--muted); } .ic { flex-shrink: 0; } /* ---- Boot splash (animated, India-flag themed — mirrors the native app) ---- */ .app-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #ffffff; color: var(--ink, #16202e); font-family: var(--font-head); } .app-boot .logo-mark { width: 104px; height: 104px; border-radius: 24px; animation: bootLogo 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; } @keyframes bootLogo { 0% { opacity: 0; transform: scale(0.55); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } /* Tricolour bar sweeps open beneath the logo */ .boot-tricolour { display: flex; width: 150px; height: 6px; border-radius: 3px; overflow: hidden; transform: scaleX(0); transform-origin: center; animation: bootBar 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.34s forwards; } .boot-tricolour i { flex: 1; } .boot-tricolour i:nth-child(1) { background: #ff9933; } .boot-tricolour i:nth-child(2) { background: #ffffff; box-shadow: inset 0 0 0 1px #e2e7ec; } .boot-tricolour i:nth-child(3) { background: #138808; } @keyframes bootBar { to { transform: scaleX(1); } } /* Name fades in last */ .app-boot .boot-name { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink, #16202e); opacity: 0; animation: bootName 0.42s ease-out 0.58s forwards; } @keyframes bootName { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Light view entrance: each screen's top-level blocks fade + slide up, lightly staggered for a gentle cascade (matches the native app). ---- */ #view > * { animation: viewReveal 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; } #view > *:nth-child(2) { animation-delay: 0.05s; } #view > *:nth-child(3) { animation-delay: 0.10s; } #view > *:nth-child(4) { animation-delay: 0.15s; } #view > *:nth-child(n + 5) { animation-delay: 0.18s; } @keyframes viewReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #view > * { animation: none; } } /* ============================================================ AUTH LAYOUT ============================================================ */ .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; background: var(--surface); } /* ---- Left hero panel: academy photo under a deep-green gradient wash ---- */ .auth-aside { position: relative; isolation: isolate; color: var(--white); padding: 54px 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .auth-aside::before { /* the photograph */ content: ""; position: absolute; inset: 0; z-index: -2; background: url("../assets/court-action-1.jpg") center / cover no-repeat; transform: scale(1.04); } .auth-aside::after { /* legibility wash + brand tint */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(158deg, rgba(6,37,26,0.94) 0%, rgba(10,56,38,0.84) 46%, rgba(15,107,72,0.70) 100%); } .auth-brand { display: flex; align-items: center; gap: 12px; } .auth-brand .logo-mark { width: 50px; height: 50px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); } .auth-brand .brand-text { color: var(--white); font-size: 1.5rem; } .auth-brand .brand-text small { color: var(--orange); } .auth-aside-body { max-width: 470px; } .auth-aside-body .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; color: var(--orange); margin-bottom: 16px; } .auth-aside-body h2 { font-family: var(--font-head); font-size: clamp(2rem, 3.1vw, 2.95rem); font-weight: 800; line-height: 1.1; margin-bottom: 18px; text-shadow: 0 2px 24px rgba(0,0,0,0.28); } /* Saffron top line over the green auth panel — flag order top-to-bottom */ .auth-aside-body h2 .tri-saffron { color: var(--saffron); } .auth-aside-body > p { opacity: 0.92; margin-bottom: 30px; max-width: 400px; line-height: 1.65; } .auth-perks { list-style: none; display: grid; gap: 13px; } .auth-perks li { display: flex; align-items: center; gap: 13px; font-family: var(--font-head); font-weight: 500; font-size: 0.95rem; } .auth-perks li .ic-ring { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(4px); } .auth-aside-foot { font-size: 0.8rem; opacity: 0.68; } /* ---- Right form panel ---- */ .auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; overflow-y: auto; background: radial-gradient(120% 78% at 100% 0%, var(--green-50) 0%, transparent 56%), var(--surface); } .auth-panel-inner { width: min(452px, 100%); } /* Compact brand + "back to website" bar — shown on mobile, where the hero panel (with the brand link home) is hidden. */ .auth-mobile-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 18px; } .auth-mobile-head .auth-brand { gap: 10px; } .auth-mobile-head .logo-mark { width: 40px; height: 40px; } .auth-mobile-head .brand-text { font-size: 1.15rem; color: var(--ink); } .auth-mobile-head .brand-text small { color: var(--green-700); } .auth-back { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--green-700); background: var(--white); border: 1px solid var(--line); padding: 8px 15px; border-radius: 999px; box-shadow: var(--shadow-sm); } .auth-back:hover { border-color: var(--green-600); color: var(--green-800); } .auth-card { position: relative; width: min(452px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(6,37,26,0.10), 0 4px 14px rgba(20,40,60,0.05); padding: 40px 38px; animation: authIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes authIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } } .auth-title { font-family: var(--font-head); font-size: 1.72rem; font-weight: 800; letter-spacing: -0.01em; } .auth-lede { color: var(--muted); margin: 7px 0 26px; line-height: 1.5; } .auth-switch { text-align: center; margin-top: 22px; font-size: 0.92rem; color: var(--muted); } .auth-switch a { color: var(--green-700); font-weight: 600; } .auth-switch a:hover { color: var(--orange); } /* "Continue with Google" button + "or" divider on the auth screens. */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #3c4043; border: 1.5px solid var(--line); font-family: var(--font-head); font-weight: 600; box-shadow: var(--shadow-sm); } .btn-google:hover { background: #f8f9fa; border-color: #cbd2d8; transform: translateY(-1px); box-shadow: var(--shadow); } .btn-google svg { flex-shrink: 0; } .auth-row-end { display: flex; justify-content: flex-end; margin: -6px 0 4px; } .auth-link { font-size: 0.86rem; font-weight: 600; color: var(--green-700); } .auth-link:hover { color: var(--orange); } .demo-hint { display: flex; gap: 10px; margin-top: 22px; padding: 14px 16px; background: var(--green-50); border: 1px dashed var(--green-600); border-radius: 10px; font-size: 0.82rem; } .demo-hint .ic { color: var(--green-700); margin-top: 2px; } .demo-hint strong { display: block; font-family: var(--font-head); margin-bottom: 4px; } .demo-hint span { display: block; color: var(--muted); } .demo-hint code, .demo-code code { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1px 6px; font-size: 0.82rem; color: var(--green-800); white-space: nowrap; /* keep each email/password intact, don't break mid-token */ } .demo-hint span { word-break: break-word; } /* Demo credentials panel on the login page (shown only in demo mode) */ .demo-accounts { margin-top: 22px; padding: 14px 14px 12px; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; } .demo-accounts .da-title { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--green-700); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .demo-accounts .da-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .demo-accounts .da-row { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 9px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all 0.15s; font: inherit; } .demo-accounts .da-row:hover { border-color: var(--green-600); box-shadow: 0 2px 8px rgba(19,136,8, 0.14); } .demo-accounts .da-row strong { font-family: var(--font-head); font-size: 0.85rem; } .demo-accounts .da-row span { font-size: 0.75rem; color: var(--muted); word-break: break-all; } .demo-accounts .da-row code { font-size: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; } /* Stepper — numbered circles with inline labels (gradient/glow active state) */ .stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .step { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; color: var(--muted); flex: 1; min-width: 0; } .step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 1.5px solid var(--line); font-size: 0.78rem; flex-shrink: 0; transition: all 0.25s ease; } .step.active { color: var(--green-700); } .step.active span { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: var(--white); border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(23,163,11,0.16); } .step.done { color: var(--green-700); } .step.done span { background: var(--teal); color: var(--white); border-color: var(--teal); } /* Phones: stack each label under its number. Inline labels can't fit five steps on a narrow screen — "Contact" ran over the next step's circle — and .step has flex:1/min-width:0 with no ellipsis, so the text simply spilled. */ @media (max-width: 560px) { .stepper { gap: 2px; align-items: flex-start; } .step { flex-direction: column; align-items: center; text-align: center; gap: 5px; font-size: 0.66rem; line-height: 1.15; } .step span { width: 24px; height: 24px; font-size: 0.72rem; } } /* Verify blocks */ .verify-block { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; transition: border-color 0.25s; } .verify-block.verified { border-color: var(--teal); background: var(--green-50); } .verify-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .verify-ic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--green-50); color: var(--green-700); border: 1px solid var(--line); } .verify-head strong { display: block; font-family: var(--font-head); font-size: 0.95rem; } .verify-head span { font-size: 0.82rem; color: var(--muted); } .verify-head > div:nth-child(2) { flex: 1; } .verify-body { padding: 0 16px 16px; } .verify-body.collapsed { display: none; } .demo-code { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; } .demo-code .ic { color: var(--green-700); } .verify-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } /* OTP inputs */ .otp-row { display: flex; gap: 8px; } .otp-box { width: 100%; aspect-ratio: 1 / 1; max-width: 48px; text-align: center; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; } .otp-box:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(23,163,11,0.15); } /* Waiver */ .waiver-doc { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: var(--green-50); margin-bottom: 16px; font-size: 0.9rem; /* Keep the swipe inside the policy box instead of handing it to the page, so scrolling to the end actually reaches the end on a phone. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Phones: the text reflows far taller in a narrow column, so a 260px window turns acceptance into ~20 screens of scrolling. Give it most of the screen. */ @media (max-width: 560px) { .waiver-doc { max-height: 52vh; padding: 16px 16px; } } .waiver-doc h4 { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); margin: 14px 0 8px; color: var(--green-800); } .waiver-doc h4:first-child { margin-top: 0; } .waiver-doc p { color: var(--muted); margin-bottom: 10px; } .waiver-doc ul { margin: 0 0 10px 18px; color: var(--muted); display: grid; gap: 6px; } .waiver-scroll-hint { display: flex; align-items: center; gap: 6px; color: var(--orange-dark); font-weight: 500; } /* Combined policies popup (Terms + Privacy + Refund shown as one document) */ .policy-doc .policy-section { margin-bottom: 26px; } .policy-doc .policy-section:last-child { margin-bottom: 0; } .policy-doc .policy-section > h2 { font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; color: var(--green-800); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--green-100, var(--line)); } .policy-doc .section { padding: 0 !important; } .policy-doc .container { max-width: none !important; padding: 0 !important; } .policy-doc h2:not(.policy-section > h2) { font-size: 0.95rem; margin-top: 16px; } .policy-doc p, .policy-doc li { font-size: 0.9rem; line-height: 1.7; color: var(--muted); } .policy-doc a { color: var(--green-700); } .policy-doc .btn { display: none; } /* hide the "View …" buttons from the marketing pages */ .policy-link { color: var(--green-700); font-weight: 600; text-decoration: underline; cursor: pointer; } .waiver-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; cursor: pointer; font-size: 0.9rem; } .waiver-check.disabled { opacity: 0.55; cursor: not-allowed; } .waiver-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green-700); } /* Banner shown when a member must re-accept because the policies changed */ .reaccept-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; margin-bottom: 16px; background: var(--gold-soft); border: 1px solid var(--gold-deep); border-radius: 10px; color: var(--orange-dark); font-size: 0.86rem; font-weight: 500; line-height: 1.45; } .reaccept-note .ic { color: var(--gold-deep); flex-shrink: 0; margin-top: 1px; } /* Legal links line (profile / footer) */ .signup-legal { margin: 12px 0 0; text-align: center; font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .signup-legal a { color: var(--green-700); font-weight: 600; } /* T&C + Privacy consent checkbox on the signup form */ .terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 8px; cursor: pointer; font-size: 0.88rem; color: var(--muted); line-height: 1.5; } .terms-check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--green-700); flex-shrink: 0; } .terms-check a { color: var(--green-700); font-weight: 600; } .terms-check.invalid { color: #d64545; } .terms-check.invalid input { outline: 2px solid #d64545; outline-offset: 2px; border-radius: 3px; } /* Phone input with a fixed +91 country-code prefix (India only) */ .phone-group { display: flex; align-items: stretch; } .phone-group .cc { display: flex; align-items: center; padding: 0 12px; font-weight: 600; color: var(--ink); background: var(--green-50); border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; } .phone-group input { border-radius: 0 8px 8px 0 !important; flex: 1; min-width: 0; } /* ============================================================ BUTTONS (extend site .btn) ============================================================ */ .btn-block { width: 100%; justify-content: center; } .btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: 10px; } .btn-danger { background: #d64545; color: var(--white); } .btn-danger:hover { background: #b83636; color: var(--white); transform: translateY(-2px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn.loading { color: transparent !important; position: relative; pointer-events: none; } .btn.loading::after { content: ""; position: absolute; width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn-outline.loading::after, .btn-light.loading::after { border-color: rgba(19,136,8,0.4); border-top-color: var(--green-700); } @keyframes spin { to { transform: rotate(360deg); } } .link-btn { background: none; border: none; cursor: pointer; color: var(--green-700); font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; padding: 0; } .link-btn:hover { color: var(--orange); text-decoration: underline; } /* ============================================================ FORMS ============================================================ */ .app-form { display: grid; gap: 16px; } .app-form .field { display: grid; gap: 6px; } .app-form label { font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; color: var(--ink); } .app-form label .muted { font-weight: 400; } .app-form label .opt { font-weight: 400; color: var(--muted); font-size: 0.82em; } .app-form input, .app-form select, .app-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 0.93rem; color: var(--ink); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; } .app-form input:focus, .app-form select:focus, .app-form textarea:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(23,163,11,0.13); } .app-form input.invalid, .app-form select.invalid, .app-form textarea:invalid.invalid { border-color: #d64545; } .app-form textarea { resize: vertical; } /* Checkboxes/radios must not stretch full-width like text inputs (the generic .app-form input rule above otherwise blows them up and breaks the label row). */ .app-form input[type="checkbox"], .app-form input[type="radio"] { width: auto; padding: 0; } .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-error { color: #d64545; font-size: 0.8rem; font-weight: 500; } .form-section-title { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-700); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; } .form-actions { display: flex; justify-content: flex-end; gap: 12px; } .search-input { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 0.9rem; min-width: 240px; background: var(--white); } .search-input:focus { outline: none; border-color: var(--green-600); } /* ============================================================ APP SHELL ============================================================ */ .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .sidebar { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); border-right: 1px solid var(--line); color: var(--muted); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; align-self: start; height: 100vh; overflow: hidden; /* contain; the nav region scrolls internally if needed */ } .sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; } .sidebar-brand .brand-text { color: var(--ink); font-size: 1.25rem; } .sidebar-brand .brand-text small { color: var(--green-700); } .side-nav { display: grid; gap: 2px; flex: 1; align-content: start; min-height: 0; overflow-y: auto; /* Scroll only if the screen is very short — but never show a scrollbar. */ scrollbar-width: none; -ms-overflow-style: none; } .side-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-radius: 10px; font-family: var(--font-head); font-weight: 500; font-size: 0.92rem; color: var(--muted); transition: all 0.18s; position: relative; } .nav-item .ic { color: #9aa4ae; transition: color 0.18s; } .nav-item:hover { background: var(--surface); color: var(--ink); } .nav-item:hover .ic { color: var(--green-700); } .nav-item.active { background: var(--green-50); color: var(--green-700); } .nav-item.active .ic { color: var(--green-700); } .nav-badge { margin-left: auto; background: var(--gold); color: #3a2703; font-size: 0.72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; } .sidebar-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; } .side-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; } .side-user-info { line-height: 1.2; overflow: hidden; } .side-user-info strong { display: block; color: var(--ink); font-size: 0.9rem; font-family: var(--font-head); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .side-user-info span { font-size: 0.76rem; color: var(--green-700); text-transform: capitalize; } .side-logout { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: var(--muted); padding: 11px 14px; border-radius: 10px; font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; transition: all 0.18s; } .side-logout:hover { background: #fbe6e3; border-color: #f3c3c3; color: #c0392b; } .sidebar-scrim { display: none; } .app-main { display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; } .app-main::before { content: ""; position: fixed; top: 4px; right: 0; bottom: 0; left: 260px; z-index: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 11%, rgba(255, 153, 51, 0.24) 11% 18%, transparent 18% 42%, rgba(19, 136, 8, 0.18) 42% 50%, transparent 50%), linear-gradient(302deg, transparent 0 13%, rgba(19, 136, 8, 0.20) 13% 20%, transparent 20% 58%, rgba(255, 153, 51, 0.16) 58% 66%, transparent 66%), radial-gradient(360px 260px at 18% 13%, rgba(255, 153, 51, 0.22), transparent 68%), radial-gradient(460px 330px at 86% 20%, rgba(19, 136, 8, 0.20), transparent 70%), radial-gradient(520px 340px at 50% 92%, rgba(10, 31, 74, 0.08), transparent 72%), linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(19, 136, 8, 0.08) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(19, 136, 8, 0.06) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); } .app-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 12px 26px; } /* App brand in the header — only shown on mobile, where the sidebar (and its brand) is off-canvas. */ .topbar-brand { display: none; align-items: center; gap: 9px; margin-right: auto; min-height: 44px; font-family: var(--font-logo); font-size: 1.15rem; font-weight: 700; color: var(--ink); } .topbar-brand .logo-mark { width: 36px; height: 36px; } /* Centered search field */ .topbar-search { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; transition: border-color 0.18s, box-shadow 0.18s; } .topbar-search:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(19,136,8,0.12); background: #fff; } .topbar-search .ts-ic { color: var(--muted); display: grid; place-items: center; } .topbar-search input { border: none; outline: none; background: transparent; width: 100%; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); } .topbar-search input::-webkit-search-cancel-button { cursor: pointer; } /* Right cluster: icons + user block */ .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 10px; border-left: 1px solid var(--line); } .topbar-user .tu-info { line-height: 1.15; } .topbar-user .tu-info strong { display: block; font-family: var(--font-head); font-size: 0.86rem; font-weight: 700; color: var(--ink); } .topbar-user .tu-info span { font-size: 0.76rem; color: var(--muted); } .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--white); color: var(--ink); border: 1px solid var(--line); cursor: pointer; transition: all 0.18s; } .icon-btn:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); } .icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; } .icon-btn.sm.danger:hover { background: #fbe4e4; color: #d64545; border-color: #f3c3c3; } .icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; border: 2px solid var(--white); } .menu-btn { display: none; } .app-content { padding: 26px; max-width: 1180px; width: 100%; margin: 0 auto; position: relative; z-index: 1; } /* Page header */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-title { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; } .page-sub { color: var(--muted); margin-top: 4px; } .page-head-actions { display: flex; gap: 10px; align-items: center; } /* ============================================================ PANELS / CARDS / GRIDS ============================================================ */ .panel { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(226, 231, 236, 0.94); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .panel-head h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; } .panel-head h2 .ic { color: var(--green-700); } .col-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .col-2 .panel { margin-bottom: 0; min-width: 0; } .col-2 + .panel, .col-2 + .col-2 { margin-top: 20px; } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } .stat-card { --accent: var(--green-700); position: relative; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(226, 231, 236, 0.94); border-radius: 10px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; overflow: hidden; } .stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0.9; } .stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .stat-ic { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); } .stat-body { display: flex; flex-direction: column; min-width: 0; } .stat-label { font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; } .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--ink); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .stat-hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; } /* Trend chip */ .trend { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-sm); } .trend-up { color: var(--green-700); background: var(--green-100); } .trend-down { color: #c0392b; background: #fbe6e3; } .trend-flat { color: var(--muted); background: #eef1f4; } /* Dashboard hero banner */ .dash-hero { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--green-900) 0%, var(--green-700) 70%, var(--teal) 130%); color: #fff; border-radius: 12px; padding: 26px 28px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow); } .dash-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, transparent 10px 22px); border-radius: 50%; pointer-events: none; } .dash-hero .dash-eyebrow { font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); } .dash-hero h1 { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 6px 0 6px; } .dash-hero p { opacity: 0.9; font-size: 0.94rem; max-width: 46ch; } .dash-hero-cta { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; } /* Quick actions */ .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .quick-action { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: var(--ink); box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .quick-action:hover { border-color: var(--green-600); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--green-700); } .quick-action .qa-ic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--green-50); color: var(--green-700); transition: all 0.2s ease; } .quick-action:hover .qa-ic { background: var(--green-700); color: #fff; } /* Progress bar */ .progress { display: block; width: 100%; height: 8px; border-radius: 20px; background: #e9eef2; overflow: hidden; } .progress-fill { display: block; height: 100%; border-radius: 20px; transition: width 0.5s ease; } /* Accounting: donut + bars */ .acct-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; } .acct-donut { display: flex; align-items: center; gap: 18px; } .donut { --deg: 0deg; --c: var(--green-700); --t: #e6edf2; width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--c) var(--deg), var(--t) 0); display: grid; place-items: center; } .donut-hole { width: 84px; height: 84px; border-radius: 50%; background: var(--white); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--line); } .donut-hole b { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1; } .donut-hole small { display: block; font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } .legend { list-style: none; display: grid; gap: 10px; } .legend li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); } .legend li b { color: var(--ink); font-family: var(--font-head); margin-left: auto; } .legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .acct-label { font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 12px; } .bar-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; } .bar-row:last-child { margin-bottom: 0; } .bar-label { font-size: 0.84rem; color: var(--ink); font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .bar-track { height: 10px; border-radius: 20px; background: #eef2f5; overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--green-700), var(--teal)); transition: width 0.5s ease; } .bar-val { font-family: var(--font-head); font-weight: 700; font-size: 0.84rem; font-variant-numeric: tabular-nums; } /* Dues progress strip */ .dues-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dues-card .dues-fig { min-width: 130px; } .dues-card .progress { flex: 1; min-width: 160px; } /* Compact member list (dashboard) */ .mini-list { display: grid; gap: 2px; } .mini-member { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background 0.15s; } .mini-member:hover { background: var(--green-50); } .mini-member .mm-info { flex: 1; min-width: 0; } .mini-member .mm-info strong { display: block; font-family: var(--font-head); font-size: 0.9rem; } .mini-member .mm-info span { font-size: 0.78rem; color: var(--muted); } .mini-member .mm-due { font-family: var(--font-head); font-weight: 700; font-size: 0.86rem; color: var(--green-700); white-space: nowrap; } .mini-member .mm-due.warn { color: var(--orange-dark); } /* Alerts */ .alert { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; margin-bottom: 20px; } .alert .ic { flex-shrink: 0; } .alert strong { display: block; font-family: var(--font-head); font-size: 0.95rem; } .alert span { font-size: 0.86rem; opacity: 0.9; } .alert > div { flex: 1; } .alert-warning { background: #fff5e2; border: 1px solid #f5cf87; color: #8a5a00; } .alert-warning .ic { color: var(--orange-dark); } .alert-success { background: var(--green-100); border: 1px solid var(--green-600); color: var(--green-800); } .alert-success .ic { color: var(--green-700); } .mini-alert { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); } .mini-alert:last-child { border-bottom: none; } .mini-alert.ok { display: flex; align-items: center; gap: 8px; color: var(--green-700); font-weight: 500; font-size: 0.9rem; } /* ============================================================ BADGES ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle; } .badge-neutral { background: #eef1f4; color: #5a6876; } .badge-info { background: #e2eefc; color: #1f6fc4; } .badge-success { background: var(--green-100); color: var(--green-700); } .badge-warning { background: #fff0d9; color: #b5620e; } .badge-accent { background: #ffe6c9; color: var(--orange-dark); } /* ============================================================ TABLES ============================================================ */ .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--line); white-space: nowrap; } .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-head); font-weight: 600; } .data-table .num.pos { color: var(--green-700); } .data-table .num.warn, .warn { color: var(--orange-dark); font-weight: 600; } .data-table .num.neg, .neg { color: #d64545; font-weight: 600; } .row-link { cursor: pointer; transition: background 0.15s; } .row-link:hover td { background: var(--green-50); } /* Cards/rows that open their editor when clicked (edit button removed). */ .click-edit { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; } .gallery-admin-card.click-edit:hover, .admin-tour-card.click-edit:hover { box-shadow: var(--shadow); border-color: var(--green-600); } .plan-row.click-edit:hover { background: var(--green-50); } .cell-user { display: flex; align-items: center; gap: 10px; } .cell-user strong { font-family: var(--font-head); font-size: 0.9rem; display: block; } .cell-sub { font-size: 0.78rem; color: var(--muted); } .cell-contact { display: flex; flex-direction: column; } .row-actions { display: flex; gap: 6px; } .avatar { border-radius: 50%; color: var(--white); display: inline-grid; place-items: center; font-family: var(--font-head); font-weight: 700; flex-shrink: 0; } /* ============================================================ CLASS / SCHEDULE ============================================================ */ .day-group { margin-bottom: 22px; } .day-title { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-700); margin-bottom: 10px; padding-left: 2px; } .class-list { display: grid; gap: 10px; } .class-row { display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; transition: box-shadow 0.2s, border-color 0.2s; } .class-row:hover { box-shadow: var(--shadow); border-color: var(--green-600); } .class-day { width: 60px; height: 58px; flex-shrink: 0; border-radius: 10px; background: var(--green-700); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-head); line-height: 1.1; } .class-day .d { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; } .class-day .t { font-size: 0.66rem; opacity: 0.9; margin-top: 2px; } .class-main { flex: 1; min-width: 0; } .class-main h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .class-main p { color: var(--muted); font-size: 0.85rem; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .class-main p .ic { color: var(--green-700); } .class-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .cap { font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--muted); } .cap.full { color: #d64545; } .filter-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .chip { padding: 7px 15px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--white); color: var(--muted); cursor: pointer; font-family: var(--font-head); font-weight: 500; font-size: 0.84rem; transition: all 0.18s; } .chip:hover { border-color: var(--green-600); color: var(--green-700); } .chip.active { background: var(--green-700); color: var(--white); border-color: var(--green-700); } /* ============================================================ TOURNAMENTS ============================================================ */ .tournament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .tournament-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow 0.2s; } .tournament-card:hover { box-shadow: var(--shadow); } .tournament-card.special { border-color: var(--orange); background: linear-gradient(180deg, #fffaf0, var(--white)); } .tc-top { display: flex; gap: 14px; align-items: center; } .tc-date { width: 58px; height: 58px; flex-shrink: 0; border-radius: 12px; background: var(--green-700); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-head); } .tournament-card.special .tc-date { background: var(--orange); } .tc-day { font-size: 1.4rem; font-weight: 800; line-height: 1; } .tc-mon { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; } .tc-title h3 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; } .tc-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .tc-desc { color: var(--muted); font-size: 0.88rem; } .tc-meta { display: grid; gap: 7px; font-size: 0.84rem; color: var(--ink); } .tc-meta span { display: flex; align-items: center; gap: 7px; } .tc-meta .ic { color: var(--green-700); } .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; } .tc-when { font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--green-700); } .tc-actions { display: flex; align-items: center; gap: 8px; } .tournament-mini { display: grid; gap: 10px; } .tmini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; transition: all 0.18s; } .tmini:hover { border-color: var(--green-600); box-shadow: var(--shadow); } .tmini-date { width: 40px; height: 40px; border-radius: 10px; background: var(--green-50); color: var(--green-700); display: grid; place-items: center; flex-shrink: 0; } .tmini-body { flex: 1; } .tmini-body strong { display: block; font-family: var(--font-head); font-size: 0.92rem; } .tmini-body span { font-size: 0.8rem; color: var(--muted); } .tmini-fee { font-family: var(--font-head); font-weight: 700; color: var(--green-700); font-size: 0.9rem; } /* Admin tournament cards */ .admin-tourney-list { display: grid; gap: 14px; } .admin-tour-card { display: flex; gap: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 20px; align-items: center; flex-wrap: wrap; } .admin-tour-card.special { border-left: 4px solid var(--orange); } .atc-main { flex: 1; min-width: 260px; } .atc-head { display: flex; align-items: center; gap: 10px; } .atc-head h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; } .atc-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; margin: 6px 0 8px; } .atc-meta .ic { color: var(--green-700); vertical-align: middle; } .atc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .atc-count { text-align: right; font-family: var(--font-head); } .atc-count strong { font-size: 1.5rem; font-weight: 800; color: var(--green-700); } .atc-count span { font-size: 0.8rem; color: var(--muted); } /* ============================================================ PAYMENTS ============================================================ */ .pay-list { display: grid; gap: 10px; } .pay-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .pay-row:last-child { border-bottom: none; } .pay-cat { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--green-50); color: var(--green-700); } .pay-cat-tournament { background: #ffe6c9; color: var(--orange-dark); } .pay-cat-membership { background: #e2eefc; color: #1f6fc4; } .pay-info { flex: 1; min-width: 0; } .pay-info strong { display: block; font-family: var(--font-head); font-size: 0.92rem; } .pay-info span { font-size: 0.82rem; color: var(--muted); } .overdue { color: #d64545; font-weight: 600; } .pay-amt { font-family: var(--font-head); font-weight: 700; font-size: 1rem; } .pay-status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pay-modal { text-align: center; } .pay-amount-big { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--green-700); } .pay-modal .field { text-align: left; margin-top: 16px; } .pay-note { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); margin-top: 14px; background: var(--green-50); padding: 10px 12px; border-radius: 10px; } .pay-note .ic { color: var(--green-700); flex-shrink: 0; } /* ============================================================ NOTIFICATIONS ============================================================ */ .notif-list, .notif-list-full { display: grid; gap: 4px; } .notif-list-full { gap: 8px; } /* Push-notification opt-in card (top of the notifications view) */ .push-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .push-card .push-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--green-50); color: var(--green-700); } .push-card .push-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .push-card .push-txt strong { font-weight: 600; font-size: 0.96rem; } .push-card .push-txt span { color: var(--muted); font-size: 0.85rem; } .push-card .push-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; } .push-card.push-on { border-color: var(--green-200); background: #f4fbf8; } .push-card.push-on .push-ic { background: var(--green-100); } .push-card.push-off { opacity: 0.85; } @media (max-width: 560px) { .push-card { flex-wrap: wrap; } /* Full-width action row on its own line — no left margin (that + width:100% pushed the buttons past the viewport edge). */ .push-card .push-actions { margin-left: 0; width: 100%; } .push-card .push-actions .btn { flex: 1; justify-content: center; } } /* Membership — member card + plan tiles */ .membership-card { border: 1px solid rgba(226, 231, 236, 0.94); border-radius: var(--radius); padding: 20px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm); } .membership-card.is-active { background: linear-gradient(120deg, #10294a, #0a1e38); color: #fff; border-color: transparent; } .membership-card .mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .membership-card .mc-label { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .72; } .membership-card h2 { margin: 2px 0 0; font-size: 1.5rem; font-family: var(--font-head); } .membership-card .mc-meta { display: flex; flex-wrap: wrap; gap: 16px 34px; margin-top: 18px; } .membership-card .mc-meta > div { display: flex; flex-direction: column; gap: 2px; } .membership-card .mc-meta span { font-size: .74rem; opacity: .72; } .membership-card .mc-meta strong { font-size: 1rem; } .membership-card .mc-note { margin: 14px 0 0; color: var(--muted); font-size: .9rem; } .membership-card.is-active .badge { background: rgba(255,255,255,.18); color: #fff; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 760px; } .plan-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 22px; background: var(--white); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .plan-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfe3d8; } .plan-tile.current { border-color: var(--green-600); box-shadow: 0 0 0 2px rgba(23,163,11,.18), var(--shadow-sm); } .plan-tile.queued .pt-tag { color: var(--gold-deep); background: var(--gold-soft); border-color: var(--gold-deep); } /* Standard tenure dropdown (1 / 6 / 12 months) */ .pt-tenure-label { display: block; font-family: var(--font-head); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; } .pt-tenure { width: 100%; padding: 10px 12px; margin: 0 0 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: var(--white); cursor: pointer; } .pt-tenure:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(23,163,11,.13); } /* Payment receipt (shown in a modal, shareable on WhatsApp) */ .receipt-pre { white-space: pre-wrap; font-family: var(--font-body); font-size: .88rem; line-height: 1.65; color: var(--ink); background: var(--green-50); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0; } /* ============================================================ CUSTOM DATE PICKER (replaces native ) ============================================================ */ .dp-wrap { position: relative; width: 100%; } .dp-input { cursor: pointer; color: transparent !important; caret-color: transparent; } /* hide the raw ISO; overlay shows the pretty date */ .dp-input::selection { background: transparent; } .dp-display { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 38px 0 14px; pointer-events: none; font-family: var(--font-body); font-size: 0.93rem; color: var(--ink); } .book-card .dp-display { padding-left: 13px; } .dp-display.ph { color: #9aa4ad; } .dp-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--green-700); pointer-events: none; display: grid; } .dp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 280px; max-width: calc(100vw - 32px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; animation: authIn 0.16s ease both; } .dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .dp-nav { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; } .dp-nav:hover { border-color: var(--green-600); color: var(--green-700); } .dp-sels { flex: 1; display: flex; gap: 6px; } .dp-sels select { flex: 1; min-width: 0; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--ink); background: var(--white); cursor: pointer; } .dp-sels select:focus { outline: none; border-color: var(--green-600); } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-wd { margin-bottom: 4px; } .dp-wdl { text-align: center; font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; color: var(--muted); padding: 4px 0; } .dp-day { aspect-ratio: 1 / 1; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink); display: grid; place-items: center; transition: background 0.12s, color 0.12s; } .dp-day:hover:not(.dis):not(.dp-empty) { background: var(--green-50); color: var(--green-800); } .dp-day.sel { background: linear-gradient(180deg, var(--green-600), var(--green-700)); color: #fff; font-weight: 700; } .dp-day.dis { color: #cdd3d8; cursor: not-allowed; } .dp-empty { cursor: default; } .plan-tile .pt-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--green-50); color: var(--green-700); margin-bottom: 14px; } .plan-tile .pt-tag { position: absolute; top: 14px; right: 14px; font-family: var(--font-head); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); padding: 3px 9px; border-radius: 999px; } .plan-tile .pt-aud { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--green-700); } .plan-tile h3 { margin: 5px 0 8px; font-size: 1.3rem; font-family: var(--font-head); } .plan-tile .pt-price { margin: 0 0 12px; font-weight: 800; font-size: 2rem; font-family: var(--font-head); color: var(--ink); letter-spacing: -.01em; } .plan-tile .pt-price small { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .plan-tile .pt-desc { margin: 0 0 18px; font-size: .88rem; color: var(--muted); line-height: 1.6; flex: 1; } .plan-tile .btn { margin-top: auto; } .plan-manage { display: flex; flex-direction: column; gap: 8px; } .plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; cursor: pointer; transition: background 0.15s; position: relative; } .notif-item:hover { background: var(--green-50); } .notif-list-full .notif-item { border: 1px solid var(--line); } .notif-item.unread { background: #f4fbf8; } .notif-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--green-50); color: var(--green-700); } .notif-announcement { background: #e2eefc; color: #1f6fc4; } .notif-payment { background: #fff0d9; color: #b5620e; } .notif-tournament { background: #ffe6c9; color: var(--orange-dark); } .notif-class { background: var(--green-100); color: var(--green-700); } .notif-text { flex: 1; min-width: 0; } .notif-text strong { font-family: var(--font-head); font-size: 0.92rem; display: block; } .notif-text p { font-size: 0.85rem; color: var(--muted); margin: 2px 0 4px; } .notif-time { font-size: 0.75rem; color: var(--muted); } .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 6px; } .sent-history { max-height: 520px; overflow-y: auto; } /* ============================================================ PROFILE ============================================================ */ .profile-head { display: flex; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin-bottom: 20px; flex-wrap: wrap; } .profile-head h2 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; } .profile-head p { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .profile-head .muted .ic { color: var(--green-700); vertical-align: middle; } .profile-form { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 24px; } /* User detail modal */ .user-detail { } .ud-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .ud-head h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; } .ud-head p { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .ud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-bottom: 20px; } .ud-grid > div { display: flex; flex-direction: column; gap: 2px; } .ud-full { grid-column: 1 / -1; } .ud-label { font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .ud-role { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--green-50); } .ud-role-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .ud-role-select { max-width: 240px; margin: 0; } .ud-role-hint { font-size: 0.8rem; margin-top: 8px; } .ud-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .ud-stats .stat-card { padding: 14px; gap: 10px; } .ud-stats .stat-ic { width: 38px; height: 38px; } .ud-stats .stat-label { font-size: 0.66rem; letter-spacing: 0; } .ud-stats .stat-value { font-size: 1.2rem; } /* ============================================================ EMPTY / SKELETON ============================================================ */ .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); } .empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green-700); display: grid; place-items: center; margin: 0 auto 14px; } .empty-state h3 { font-family: var(--font-head); font-size: 1rem; color: var(--ink); } .empty-state p { font-size: 0.88rem; margin-top: 4px; } .skeleton { display: grid; gap: 10px; } .skeleton-row { height: 52px; border-radius: 10px; background: linear-gradient(90deg, #eef2f5 25%, #f6f9fb 50%, #eef2f5 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* ============================================================ TOASTS ============================================================ */ .toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 3000; display: grid; gap: 10px; } .toast { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green-700); border-radius: 10px; padding: 13px 16px; box-shadow: var(--shadow); min-width: 260px; max-width: 360px; font-size: 0.9rem; font-weight: 500; transform: translateX(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .toast.show { transform: translateX(0); opacity: 1; } .toast .ic { flex-shrink: 0; } .toast-success { border-left-color: var(--green-700); } .toast-success .ic { color: var(--green-700); } .toast-error { border-left-color: #d64545; } .toast-error .ic { color: #d64545; } .toast-info { border-left-color: var(--orange); } .toast-info .ic { color: var(--orange-dark); } /* ============================================================ MODALS ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 30, 56, 0.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.22s; } .modal-overlay.show { opacity: 1; } .modal { background: var(--white); border-radius: 10px; width: min(480px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(10,30,56,0.3); transform: translateY(16px) scale(0.98); transition: transform 0.22s; } .modal-lg { width: min(720px, 100%); } .modal-overlay.show .modal { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); } .modal-head h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; } .modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 12px; display: grid; place-items: center; } /* .modal-overlay and .toast-wrap keep their own position:fixed / z-index now that nothing overrides them. */ .modal-close:hover { background: var(--green-50); color: var(--ink); } .modal-body { padding: 22px; overflow-y: auto; } .modal-body > .muted { margin-bottom: 4px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .col-2 { grid-template-columns: minmax(0, 1fr); } .ud-stats { grid-template-columns: repeat(2, 1fr); } .quick-actions { grid-template-columns: repeat(2, 1fr); } .acct-grid { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-mobile-head { display: flex; } .app-shell { grid-template-columns: 1fr; } .app-main::before { left: 0; top: 62px; } .sidebar { position: fixed; top: 0; left: 0; z-index: 200; width: 262px; transform: translateX(-100%); transition: transform 0.28s ease; } /* On the slide-in menu there's room to scroll, so keep comfortable 44px touch targets (the desktop sidebar stays compressed). */ .sidebar.open { transform: translateX(0); box-shadow: 12px 0 40px rgba(0,0,0,0.2); } .side-nav { gap: 4px; } .nav-item { min-height: 44px; padding: 10px 14px; } /* App-style header: brand on the left, actions on the right, no big search. */ .topbar-brand { display: flex; } .topbar-search { display: none; } .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(10,30,56,0.5); opacity: 0; pointer-events: none; transition: opacity 0.28s; } .sidebar-scrim.show { opacity: 1; pointer-events: auto; } .menu-btn { display: grid; } } @media (max-width: 560px) { .app-content { padding: 18px 14px; } .auth-panel { padding: 24px 16px; } .auth-card { padding: 30px 22px; border-radius: 16px; box-shadow: 0 10px 30px rgba(6,37,26,0.08); } .form-2col { grid-template-columns: 1fr; } .ud-grid { grid-template-columns: 1fr; } .page-head { align-items: flex-start; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .stat-card { padding: 14px; gap: 12px; } .stat-value { font-size: 1.4rem; } .quick-actions { gap: 12px; } .qa-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .dash-hero { padding: 22px; } .bar-row { grid-template-columns: 88px 1fr auto; gap: 8px; } .panel-head { flex-wrap: wrap; gap: 8px 10px; } .class-row { flex-wrap: wrap; } .class-cta { width: 100%; justify-content: space-between; } .pay-row { flex-wrap: wrap; } .pay-status { width: 100%; justify-content: flex-end; } .search-input { min-width: 0; width: 100%; } .toast-wrap { left: 14px; right: 14px; } .toast { min-width: 0; max-width: none; } .book-actions { flex-direction: column; } } /* ============================================================ COURT BOOKING WIZARD · FILTERS · WAIVER · SHARE ============================================================ */ .book-page { min-height: 100vh; display: flex; flex-direction: column; } .book-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--white); } .book-brand { display: flex; align-items: center; gap: 11px; } .book-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; } .book-card { width: min(560px, 100%); background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(226, 231, 236, 0.94); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 28px 26px; } .book-card-inline { width: 100%; max-width: 640px; box-shadow: var(--shadow-sm); padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; } .book-foot { text-align: center; color: var(--muted); font-size: 0.86rem; padding: 0 16px 28px; } .book-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 24px 0; justify-content: center; } .book-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; } .book-lede { color: var(--muted); margin-bottom: 18px; } .book-card .field { display: grid; gap: 6px; margin-bottom: 14px; } .book-card .field > label { font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; color: var(--ink); } .book-card select, .book-card input:not(.otp-box) { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 0.93rem; color: var(--ink); background: var(--white); } .book-card select:focus, .book-card input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(23,163,11,0.13); } /* Checkboxes/radios (e.g. the guest T&C consent) keep their natural size — the full-width rule above is for text inputs only, not the consent tick. */ .book-card input[type="checkbox"], .book-card input[type="radio"] { width: auto; padding: 0; border: 0; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .slot-wrap { margin-top: 6px; } .slot-price { font-size: 0.9rem; color: var(--muted); margin-bottom: 10px; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } .slot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); font-family: var(--font-head); cursor: pointer; transition: all 0.18s; } .slot:hover:not(.taken) { border-color: var(--green-600); box-shadow: 0 3px 10px rgba(19,136,8, 0.14); transform: translateY(-1px); } .slot .slot-time { font-weight: 700; font-size: 0.98rem; color: var(--ink); } .slot .slot-left { font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.02em; } .slot .slot-left.ok { background: #e2f3ec; color: #0d6e56; } .slot .slot-left.low { background: #fdf0dc; color: #a3641a; } .slot .slot-left.full { background: #f0f2f4; color: #97a1ab; } .slot.taken { background: #f7f8fa; cursor: not-allowed; } .slot.taken .slot-time { color: #b7c0c9; } .book-summary { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; margin-bottom: 16px; } .bs-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; } .bs-row:last-child { border-bottom: none; } .bs-row span { display: flex; align-items: center; gap: 8px; color: var(--muted); } .bs-row .ic { color: var(--green-700); } .bs-total { font-size: 1.05rem; } .bs-total b { color: var(--green-700); font-size: 1.15rem; } .book-actions { display: flex; gap: 12px; } .book-actions .btn { flex: 1; justify-content: center; } .book-done { text-align: center; } .book-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; margin: 0 auto 14px; } .book-ref { font-family: var(--font-head); background: var(--green-50); border: 1px dashed var(--green-600); border-radius: 10px; padding: 10px 14px; display: inline-block; margin-top: 6px; } .book-ref b { color: var(--green-800); letter-spacing: 0.04em; } /* Booking ticket + receipt shown on the confirmation screen */ .book-ticket { text-align: left; max-width: 360px; margin: 16px auto 16px; padding: 4px 16px; border: 1px dashed var(--green-600); border-radius: 12px; background: var(--green-50); } .book-ticket .bs-row { border-bottom-color: rgba(15,107,72,0.14); } .book-ticket .bs-row b { font-family: var(--font-head); } /* ============================================================ PRINTABLE RECEIPT (Save as PDF) — hidden on screen, shown in print ============================================================ */ #kba-receipt-host { display: none; } @media print { body > *:not(#kba-receipt-host) { display: none !important; } #kba-receipt-host { display: block; } @page { margin: 16mm; } html, body { background: #fff; } } .rc-doc { font-family: var(--font-body); color: #17202a; max-width: 720px; margin: 0 auto; position: relative; } .rc-top { display: flex; justify-content: space-between; gap: 24px; border-bottom: 3px solid #138808; padding-bottom: 16px; } .rc-brand { display: flex; gap: 14px; align-items: flex-start; } .rc-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .rc-brand h1 { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 4px; color: #138808; } .rc-brand p { margin: 0; font-size: 0.72rem; color: #6b7683; line-height: 1.5; } .rc-title { text-align: right; } .rc-title h2 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em; } .rc-title p { margin: 0; font-size: 0.78rem; color: #6b7683; line-height: 1.6; } .rc-party { margin: 20px 0 10px; font-size: 0.8rem; } .rc-party span { display: block; color: #6b7683; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; } .rc-party strong { font-size: 1rem; } .rc-table { width: 100%; border-collapse: collapse; margin-top: 6px; } .rc-table td { padding: 11px 4px; border-bottom: 1px solid #e8ebee; font-size: 0.9rem; } .rc-table td:last-child { text-align: right; font-weight: 600; } .rc-table tfoot td { border-top: 2px solid #138808; border-bottom: none; padding-top: 14px; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #138808; } .rc-note { margin-top: 16px; font-size: 0.8rem; color: #6b7683; } .rc-paid { position: absolute; top: 92px; right: 16px; border: 3px solid #17a30b; color: #17a30b; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.08em; font-size: 1.1rem; padding: 4px 14px; border-radius: 8px; transform: rotate(-12deg); opacity: 0.85; } .rc-foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid #e8ebee; font-size: 0.72rem; color: #9aa4ad; text-align: center; } .share-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .share-grid .btn, .share-row .btn { justify-content: center; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; } .filter-grid .field { display: grid; gap: 6px; } .filter-grid .field-end { display: flex; align-items: flex-end; } .filter-grid .field > label { font-family: var(--font-head); font-size: 0.8rem; font-weight: 600; color: var(--muted); } .filter-grid input, .filter-grid select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background: var(--white); } .filter-grid input:focus, .filter-grid select:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(23,163,11,0.13); } .waiver-body { white-space: pre-wrap; } .waiver-preview { white-space: pre-wrap; max-height: 240px; overflow-y: auto; background: var(--green-50); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.7; } .ud-agreements { display: grid; gap: 8px; } .ud-agreement { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 0.85rem; } .ud-agreement .cell-sub { margin-top: 2px; word-break: break-word; } .pay-cat-court { background: #e2eefc; color: #1f6fc4; } .notif-booking { background: #e2eefc; color: #1f6fc4; } /* ============================================================ THEME REFINEMENTS — buttons, shell, panels, badges, tables ============================================================ */ /* Buttons — gradient primary, green (not orange) hover for a premium feel */ .app-body .btn { border-radius: var(--r-sm); letter-spacing: 0.01em; } .app-body .btn-primary { /* Clean flat green — no bright gradient/inset (which read as a heavy 3D block). A soft green-tinted shadow gives just enough lift. */ background: var(--green-700); box-shadow: 0 1px 2px rgba(6,51,15,0.10); } .app-body .btn-primary:hover { background: var(--green-800); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(19,136,8,0.22); } .app-body .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(6,51,15,0.10); } .app-body .btn-outline { color: var(--green-700); border-color: #cdd8d3; background: var(--white); } .app-body .btn-outline:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; } .btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #3a2703; border: none; } .btn-gold:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: var(--shadow); color: #3a2703; } /* Sidebar — light, with green only on the active item */ .sidebar { background: var(--white); border-right: 1px solid var(--line); } .nav-item.active { background: var(--green-50); box-shadow: none; } .nav-item.active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--green-700); } /* Topbar */ .app-topbar { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--line); } /* Panels — crisper, layered */ .panel { border-color: var(--line); box-shadow: var(--shadow-sm); } .panel-head h2 .ic, .panel-head h2 { color: var(--ink); } .panel-head h2 .ic { color: var(--green-700); } /* Section grouping + tinted "soft" panel */ .dash-section { margin-bottom: 20px; } .section-label { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 14px; } /* First heading in a view shouldn't push down from the page header. */ .section-label:first-child { margin-top: 4px; } .section-label h2 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 1.02rem; font-weight: 800; color: var(--ink); } .section-label h2 .ic { color: var(--green-700); } .soft-panel { background: linear-gradient(180deg, var(--green-50), #fff); border: 1px solid var(--green-100); } /* Badges — warm gold accent, crisper */ .badge { border-radius: var(--r-sm); } .badge-accent { background: var(--gold-soft); color: var(--gold-deep); } .badge-gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #3a2703; } /* Tables — tinted header, subtle zebra */ .data-table th { background: var(--green-50); color: var(--green-800); border-bottom: 1px solid var(--green-100); border-radius: 0; } .data-table tbody tr:hover td { background: var(--green-50); } .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; background: var(--white); } .table-scroll .data-table th:first-child { padding-left: 16px; } /* Alerts — warmer, clearer */ .alert { border-radius: var(--radius); } .alert-warning { background: var(--gold-soft); border-color: #f0d18a; color: #7a4e05; } .alert-warning .ic { color: var(--gold-deep); } /* ============================================================ DASHBOARD — hero, up-next, quick actions, week timeline, court highlight, ops overview ============================================================ */ /* Hero: light, airy header (green kept only as a subtle accent) */ .dash-hero { background: linear-gradient(120deg, #ffffff 0%, var(--green-50) 130%); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); } .dash-hero::after { display: none; } /* India tricolour stripe across the top of the welcome card */ .dash-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 1; background: linear-gradient(90deg, var(--saffron) 0 33.333%, #ffffff 33.333% 66.666%, var(--india-green) 66.666% 100%); } .dash-hero h1 { color: var(--ink); } .dash-hero p { color: var(--muted); opacity: 1; } .dash-hero .dash-eyebrow { color: var(--gold-deep); } .dash-hero .hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .hero-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); color: var(--ink); padding: 5px 11px; border-radius: 999px; font-size: 0.8rem; font-family: var(--font-head); font-weight: 600; box-shadow: var(--shadow-sm); } .hero-chip .ic { color: var(--green-700); } /* Up-next strip: prioritised next actions */ /* "Recommended for you" — the single most relevant next action */ .rec-card { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--rec, var(--green-700)); border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .rec-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .rec-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: var(--rec, var(--green-700)); background: color-mix(in srgb, var(--rec, var(--green-700)) 12%, #fff); } .rec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rec-label { font-family: var(--font-head); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .rec-body strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--ink); } .rec-sub { font-size: .85rem; color: var(--muted); } .rec-cta { flex-shrink: 0; font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--rec, var(--green-700)); white-space: nowrap; } @media (max-width: 560px) { .rec-card { flex-wrap: wrap; } .rec-cta { width: 100%; text-align: right; } } /* Admin "Insights" panel */ .insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .insight { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; } .ins-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ins-val { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; } .ins-trend { font-size: .8rem; color: var(--muted); } .ins-trend.up { color: var(--green-700); font-weight: 600; } .ins-trend.down { color: #d64545; font-weight: 600; } .ins-list { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; } .ins-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); } .ins-row:last-child { border-bottom: none; } .ins-name { font-weight: 600; flex: 1; min-width: 0; } .ins-row .cell-sub, .ins-row .link-btn { flex-shrink: 0; } .upnext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; } .upnext { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--green-700)); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; } .upnext:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .upnext .un-ic { width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, var(--green-700)) 13%, #fff); color: var(--accent, var(--green-700)); border: 1px solid color-mix(in srgb, var(--accent, var(--green-700)) 22%, #fff); } .upnext .un-body { min-width: 0; flex: 1; display: flex; flex-direction: column; } .upnext .un-label { display: block; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .upnext .un-title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; margin: 3px 0; color: var(--ink); line-height: 1.25; } .upnext .un-sub { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.35; } .upnext .un-cta { margin-top: 10px; } /* Quick actions grid (both dashboards) */ /* Big, obvious icon tiles — the main navigation. Sized so anyone can recognise and tap them without reading much. */ .qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .qa-tile { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-height: 0; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--ink); overflow-wrap: break-word; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .qa-tile:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); } .qa-tile .qa-ic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease; } .qa-tile .qa-ic > svg { width: 20px; height: 20px; } /* Uniform, restrained action tiles — one subtle accent for a professional, enterprise-console look (legacy per-tile colours intentionally flattened). */ .qa-tile .qa-ic, .qa-tile.qa-green .qa-ic, .qa-tile.qa-saffron .qa-ic, .qa-tile.qa-navy .qa-ic { background: var(--green-50); color: var(--green-700); } .qa-tile:hover .qa-ic, .qa-tile.qa-green:hover .qa-ic, .qa-tile.qa-saffron:hover .qa-ic, .qa-tile.qa-navy:hover .qa-ic { background: var(--green-700); color: #fff; } .qa-tile.qa-green:hover, .qa-tile.qa-saffron:hover, .qa-tile.qa-navy:hover { color: var(--ink); border-color: var(--green-600); } /* Court booking highlight card */ .court-highlight { position: relative; overflow: hidden; background: linear-gradient(120deg, #ffffff 0%, var(--gold-soft) 140%); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; box-shadow: var(--shadow-sm); } .court-highlight .ch-ic { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--green-700); border: none; display: grid; place-items: center; color: #fff; flex-shrink: 0; } .court-highlight h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; color: var(--ink); } .court-highlight p { color: var(--muted); font-size: 0.88rem; margin-top: 2px; } .court-highlight .ch-body { flex: 1; min-width: 200px; } .court-highlight .btn { margin-left: auto; } /* Week timeline list */ .week-list { display: grid; gap: 8px; } .week-item { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); } .week-when { flex-shrink: 0; width: 58px; text-align: center; font-family: var(--font-head); } .week-when .wd { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--green-700); letter-spacing: 0.04em; } .week-when .wt { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; } .week-tag { width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; } .week-item .wi-body { flex: 1; min-width: 0; } .week-item .wi-body strong { display: block; font-family: var(--font-head); font-size: 0.92rem; } .week-item .wi-body span { font-size: 0.8rem; color: var(--muted); } /* Ops mini-stat grid (admin accounting extras) */ .mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mini-stat { background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 12px 14px; } .mini-stat .ms-label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .mini-stat .ms-value { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; margin-top: 3px; } .mini-stat.warn .ms-value { color: var(--gold-deep); } .mini-stat.neg .ms-value { color: #c0392b; } /* Attention list rows */ .attn-list { display: grid; gap: 8px; } .attn-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .attn-item.warn { border-left: 3px solid var(--gold-deep); } .attn-item.neg { border-left: 3px solid #c0392b; } .attn-item.ok { border-left: 3px solid var(--teal); } .attn-ic { width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center; background: var(--green-50); color: var(--green-700); } .attn-item.warn .attn-ic { background: var(--gold-soft); color: var(--gold-deep); } .attn-item.neg .attn-ic { background: #fbe6e3; color: #c0392b; } .attn-body { flex: 1; min-width: 0; } .attn-body strong { display: block; font-family: var(--font-head); font-size: 0.9rem; } .attn-body span { font-size: 0.8rem; color: var(--muted); } .attn-item .badge { flex-shrink: 0; } /* Capacity progress rows (near-capacity classes) */ .cap-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); } .cap-row:last-child { border-bottom: none; } .cap-row .cap-name { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; } .cap-row .cap-count { font-family: var(--font-head); font-weight: 700; font-size: 0.84rem; color: var(--muted); } .cap-row .progress { grid-column: 1 / -1; } /* Responsive dashboard */ @media (max-width: 1000px) { .qa-grid { grid-template-columns: repeat(3, 1fr); } .mini-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .qa-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .qa-tile { padding: 13px 14px; font-size: 0.85rem; } .mini-grid { grid-template-columns: 1fr; } .court-highlight { padding: 18px; } .court-highlight .btn { margin-left: 0; width: 100%; justify-content: center; } .upnext-grid { grid-template-columns: 1fr; } } button.qa-tile { cursor: pointer; } .attn-body span, .wi-body span, .mm-info span { overflow-wrap: anywhere; } .attn-body, .wi-body, .mm-info { min-width: 0; } .data-table tr.row-inactive td { opacity: 0.55; } .data-table tr.row-inactive:hover td { opacity: 0.8; } /* ============================================================ KPI CARDS (dashboard headline row) + reference polish ============================================================ */ .kpi { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-height: 132px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; min-width: 0; } .kpi:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .kpi-label { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--muted); min-width: 0; overflow-wrap: anywhere; } .kpi-arrow { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink); background: var(--white); border: 1px solid var(--line); transition: all 0.18s; } .kpi-arrow:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); transform: rotate(0deg) scale(1.05); } .kpi-value { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--ink); margin-top: auto; } .kpi-trend { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); } .kpi-trend .ic { color: var(--teal); flex-shrink: 0; } .kpi-trend.warn .ic { color: var(--gold-deep); } .kpi-trend.neg .ic { color: #c0392b; } /* Featured KPI — same white card as the rest, just a subtle green accent so the headline metric stands out without breaking the grid's professional uniformity. */ .kpi-featured { overflow: hidden; } .kpi-featured::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green-700); } .kpi-featured .kpi-value { color: var(--green-700); } /* Softer, rounder buttons (reference style) */ .app-body .btn { border-radius: 10px; } .app-body .btn-sm { border-radius: 999px; } /* Panels a touch airier */ .panel { border-radius: 14px; } @media (max-width: 760px) { .topbar-user .tu-info { display: none; } .topbar-search { max-width: none; } .app-topbar { padding: 10px 16px; gap: 10px; } .topbar-user { padding-left: 8px; } } @media (max-width: 480px) { .topbar-search input::placeholder { color: transparent; } } /* ============================================================ Mobile & tablet data tables → stacked cards (dedicated layout). Each row becomes a card; each cell shows its column label via the td's data-label. Kills horizontal table scroll on phones and tablets (≤860px), where the full table would otherwise overflow. ============================================================ */ @media (max-width: 860px) { .table-scroll { overflow: visible; border: none; background: transparent; border-radius: 0; } .data-table { border-collapse: separate; } .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; } .data-table tr { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 4px 14px; margin-bottom: 12px; } .data-table tbody tr:hover td { background: transparent; } .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: right; font-size: 0.92rem; } .data-table tr td:last-child { border-bottom: none; } .data-table td::before { content: attr(data-label); flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; } /* Cells with no label (action buttons) go full-width, centered */ .data-table td[data-label=""] { justify-content: stretch; } .data-table td[data-label=""]::before { display: none; } .data-table td[data-label=""] .btn { width: 100%; } .data-table td.num { justify-content: space-between; } } .slot-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 12px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 6px; } .slot-empty .ic { color: var(--gold-deep); } .slot-empty p { font-size: 0.9rem; line-height: 1.5; } /* ---- Admin gallery management ---- */ .gallery-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .gallery-admin-card { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); } .gallery-admin-thumb { aspect-ratio: 4 / 3; background: var(--surface); } .gallery-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-admin-meta { padding: 10px 12px; display: grid; gap: 4px; } .gallery-admin-meta strong { font-family: var(--font-head); font-size: 0.95rem; } .gallery-admin-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; } .gallery-admin-actions .icon-btn { background: rgba(255,255,255,0.92); } .gallery-admin-card.is-hidden .gallery-admin-thumb { opacity: 0.5; } .gallery-upload-preview { aspect-ratio: 4 / 3; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); display: grid; place-items: center; overflow: hidden; text-align: center; } .gallery-upload-preview img { width: 100%; height: 100%; object-fit: cover; } .gallery-upload-preview .muted .ic { color: var(--muted); opacity: 0.6; } /* Styled "Choose photo" button replacing the browser-default file input */ .gallery-file-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 16px; border: 1.5px solid var(--green-700); border-radius: 8px; background: #fff; color: var(--green-700); font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.18s; } .gallery-file-btn:hover { background: var(--green-50); } .gallery-form #galFileName { display: block; margin-top: 7px; } /* Clean inline checkbox (no bordered box) */ .check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; margin-top: 2px; } .check-inline input { width: 16px; height: 16px; accent-color: var(--green-700); } /* ---- Court picker (list-all-courts booking step) ---- */ .court-list { display: flex; flex-direction: column; margin-top: 8px; } .court-pick { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-top: 1px solid var(--line); } .court-pick:last-child { border-bottom: 1px solid var(--line); } .court-pick-info { flex: 1; min-width: 0; } .court-pick-info h3 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; } .court-pick-info p { font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; line-height: 1.45; } .court-pick-price { text-align: right; flex-shrink: 0; line-height: 1.2; } .court-pick-price span { display: block; font-size: 0.76rem; color: var(--muted); } .court-pick-price strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); } .court-pick-btn { flex-shrink: 0; } .book-chosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; font-size: 0.95rem; } .book-chosen .bc-eyebrow { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; } @media (max-width: 560px) { .court-pick { flex-wrap: wrap; gap: 10px; } .court-pick-info { flex: 1 1 60%; } .court-pick-price { flex: 0 0 auto; } .court-pick-btn { width: 100%; } } /* ============================================================ Mobile bottom tab bar — app-style navigation (phones only). Replaces the top hamburger; 4 primary tabs + a "More" tab that opens the full sidebar menu. ============================================================ */ .bottom-nav { display: none; } @media (max-width: 640px) { .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 180; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 20px rgba(10, 30, 56, 0.07); } .bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: none; background: none; cursor: pointer; font-family: var(--font-head); font-size: 0.65rem; font-weight: 600; color: var(--muted); text-decoration: none; position: relative; border-radius: 10px; transition: color 0.18s; } .bn-item .ic { width: 22px; height: 22px; } .bn-item.active { color: var(--green-700); } .bn-item.active .ic { color: var(--green-700); } .bn-badge { position: absolute; top: 1px; right: calc(50% - 22px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--gold-deep); color: #fff; font-size: 0.58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Content clears the fixed bar. The top hamburger stays alongside "More": the bottom bar can sit under the browser's own toolbar on a real phone, which swallows taps, so the topbar always keeps a reachable opener. */ .app-content { padding-bottom: 82px; } } /* ============================================================ Touch targets — on phones, ensure interactive controls meet the ~40px minimum tap size so they're easy to hit one-handed. ============================================================ */ @media (max-width: 640px) { .chip { min-height: 44px; display: inline-flex; align-items: center; } .icon-btn.sm { width: 44px; height: 44px; flex-shrink: 0; } .kpi-arrow { width: 44px; height: 44px; } /* Expand the hit area of short inline text actions to ~44px without shifting layout (padding cancelled by an equal negative margin). */ .link-btn, .auth-link { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 8px; margin-inline: -8px; } .topbar-search { min-height: 44px; } input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { min-height: 44px; } } /* ============================================================ GLOBAL POLISH LAYER (UI/UX pass — a11y, motion, interaction) ============================================================ */ /* Keyboard focus: one consistent, visible ring app-wide (keyboard only) */ a:focus-visible, button:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .bn-item:focus-visible, .nav-item:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; border-radius: 8px; } a, button, .btn, [role="button"], summary, label[for], .icon-btn, .chip { cursor: pointer; } button, .btn, a, .icon-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } ::selection { background: rgba(19,136,8, 0.22); color: var(--ink); } /* Buttons share one motion rhythm; springy press feedback */ .btn:active { transform: translateY(0) scale(0.98); } /* Cards / rows lift smoothly on hover instead of snapping */ .panel, .stat-card, .plan-tile, .membership-card, .rec-card, .insight { transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } /* Tabular figures wherever numbers matter, so columns don't jump */ .data-table .num, .stat-value, .kpi-value, .price, .amount { font-variant-numeric: tabular-nums; } /* Dashboard motion + interaction polish */ @keyframes dashRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dashShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(160%) skewX(-18deg); } } @keyframes ringSweep { from { --deg: 0deg; } } @keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .dash-hero, .panel, .qa-grid, .stat-grid, .col-2 { animation: dashRise 0.58s cubic-bezier(.2,.8,.2,1) both; } .panel { animation-delay: 0.04s; } .qa-grid { animation-delay: 0.08s; } .stat-grid { animation-delay: 0.12s; } .col-2 { animation-delay: 0.16s; } .col-2 + .col-2 { animation-delay: 0.2s; } .dash-hero { isolation: isolate; transition: transform 0.35s ease, box-shadow 0.35s ease; } .dash-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .dash-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.46) 45%, transparent 70%); animation: dashShine 5.8s ease-in-out infinite; } .dash-hero > * { position: relative; z-index: 1; } .hero-chip { transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease; } .hero-chip:hover { transform: translateY(-2px); background: #fff; border-color: var(--green-200); } .insight, .kpi, .mini-stat, .attn-item, .tmini, .mini-member, .week-item { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .insight:hover, .mini-stat:hover, .tmini:hover, .mini-member:hover, .week-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--green-200); } .attn-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); } .qa-tile { position: relative; overflow: hidden; transform: translateZ(0); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .qa-tile::after { content: ""; position: absolute; inset: -40% auto -40% -55%; width: 46%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left 0.42s ease; } .qa-tile:hover { transform: translateY(-4px); } .qa-tile:hover::after { left: 115%; } .qa-tile:active { transform: translateY(-1px) scale(0.985); } .qa-tile:hover .qa-ic { transform: rotate(-5deg) scale(1.08); } .kpi { animation: dashRise 0.5s cubic-bezier(.2,.8,.2,1) both; } .stat-grid .kpi:nth-child(1) { animation-delay: 0.12s; } .stat-grid .kpi:nth-child(2) { animation-delay: 0.18s; } .stat-grid .kpi:nth-child(3) { animation-delay: 0.24s; } .stat-grid .kpi:nth-child(4) { animation-delay: 0.3s; } .kpi:hover { transform: translateY(-5px); } .kpi-featured::after { animation: dashShine 6.5s ease-in-out infinite; } .kpi-arrow:active { transform: rotate(0deg) scale(0.92); } .donut { animation: ringSweep 0.95s cubic-bezier(.2,.8,.2,1) both; } .bar-fill { transform-origin: left center; animation: barGrow 0.8s cubic-bezier(.2,.8,.2,1) both; } .acct-bars .bar-row:nth-child(2) .bar-fill { animation-delay: 0.06s; } .acct-bars .bar-row:nth-child(3) .bar-fill { animation-delay: 0.12s; } .acct-bars .bar-row:nth-child(4) .bar-fill { animation-delay: 0.18s; } .acct-bars .bar-row:nth-child(5) .bar-fill { animation-delay: 0.24s; } .btn, .link-btn, .icon-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .btn:active, .link-btn:active, .icon-btn:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .dash-hero, .panel, .qa-grid, .stat-grid, .col-2, .kpi, .donut, .bar-fill, .dash-hero::after, .kpi-featured::after { animation: none !important; } .dash-hero, .panel, .qa-tile, .kpi, .insight, .mini-stat, .attn-item, .tmini, .mini-member, .week-item, .btn, .link-btn, .icon-btn, .hero-chip { transition: none !important; } } /* Reduced motion: kill shimmer/pulse/decorative loops, keep content visible */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .skeleton-row { animation: none; background: #eef2f5; } .app-boot .logo-mark { animation: none; } .btn:hover, .btn:active { transform: none; } } /* ============================================================ Free demo (trial) class booking — public flow at #/demo, plus the dashboard promo shown only to accounts without a membership. ============================================================ */ .demo-card { max-width: 560px; } /* Back control, same place on every step. */ .demo-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; background: none; border: none; cursor: pointer; padding: 6px 8px; margin-left: -8px; font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--green-700); border-radius: 8px; min-height: 40px; } .demo-back:hover { background: var(--green-50); } /* Day picker — the four batches repeat all week, so choosing a day first keeps the list to four rows instead of twenty-eight. */ .demo-days { display: flex; gap: 7px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .demo-days::-webkit-scrollbar { display: none; } .demo-day-chip { flex: 1 0 auto; min-width: 52px; min-height: 52px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; color: var(--muted); transition: background 0.16s, border-color 0.16s, color 0.16s; } .demo-day-chip:hover { border-color: var(--green-600); color: var(--ink); } .demo-day-chip.is-on { background: linear-gradient(180deg, var(--green-600), var(--green-700)); border-color: var(--green-700); color: var(--white); } .demo-day-chip .dc-today { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; } .demo-list { display: grid; gap: 8px; } .demo-slot { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; text-align: left; cursor: pointer; background: var(--white); border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease-out); } .demo-slot:hover:not(:disabled) { border-color: var(--green-600); box-shadow: 0 6px 18px rgba(19,136,8,0.12); transform: translateY(-1px); } .demo-slot:active:not(:disabled) { transform: translateY(0) scale(0.995); } .demo-slot.is-full { opacity: 0.55; cursor: not-allowed; } .demo-slot .ds-time { flex-shrink: 0; width: 46px; font-family: var(--font-head); font-weight: 700; font-size: 0.84rem; color: var(--green-700); } .demo-slot .ds-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .demo-slot .ds-main strong { font-family: var(--font-head); font-size: 0.92rem; color: var(--ink); } .demo-slot .ds-sub { font-size: 0.78rem; color: var(--muted); } .demo-slot .ds-seats { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; font-family: var(--font-head); color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100, var(--line)); border-radius: 999px; padding: 4px 9px; } .demo-slot.is-full .ds-seats { color: var(--muted); background: var(--surface); } /* Dashboard promo — prospects only */ .demo-promo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(120deg, var(--green-50), var(--white) 70%); border: 1px solid var(--green-100, var(--line)); transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease; } .demo-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19,136,8,0.14); } .demo-promo .dp-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; color: var(--white); background: linear-gradient(180deg, var(--green-600), var(--green-700)); } .demo-promo .dp-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .demo-promo .dp-text strong { font-family: var(--font-head); font-size: 0.98rem; color: var(--ink); } .demo-promo .dp-text span { font-size: 0.84rem; color: var(--muted); } .demo-promo .dp-go { flex-shrink: 0; color: var(--green-700); } @media (max-width: 560px) { .demo-promo { padding: 14px; gap: 11px; } .demo-promo .dp-text span { font-size: 0.8rem; } } @media (prefers-reduced-motion: reduce) { .demo-slot, .demo-promo { transition: none; } .demo-slot:hover:not(:disabled), .demo-promo:hover { transform: none; } }