/* Shared, tenant-aware finish for the customer site and club panel. */
:root {
  --ink: #111c39;
  --ink-soft: #24365f;
  --muted: #68758c;
  --line: #e0e7f2;
  --paper: #f5f7fc;
  --white: #fff;
  --shadow: 0 22px 60px rgba(17, 28, 57, .09);
}

body {
  background: var(--paper);
  background-image: radial-gradient(ellipse at 4% 0%, color-mix(in srgb, var(--orange), transparent 91%), transparent 30rem),
    radial-gradient(ellipse at 95% 16%, color-mix(in srgb, var(--green), transparent 94%), transparent 34rem);
}

.skip-link { color: var(--brand-accent-contrast, var(--ink)); background: var(--orange); }
.site-header { min-height: 82px; }
.brand-name { max-width: 225px; font-size: 20px; letter-spacing: -.8px; }
.brand-name > span { color: var(--green); }
.main-nav, .admin-nav { color: #596780; }
.main-nav a:hover, .admin-nav a:hover { color: var(--green); }
.eyebrow, .hero-eyebrow, .mini-label { color: var(--brand-primary-readable, var(--green)); }
.pulse-dot { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 82%); }

.hero { padding-top: 24px; }
.hero h1 { letter-spacing: -.075em; }
.hero h1 em, .how-heading h2 em { color: var(--brand-primary-readable, var(--green)); }
.hero-lead { max-width: 440px; color: #5f6d85; }
.hero-cta, .primary-button {
  color: var(--brand-accent-contrast, var(--ink));
  background: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange), var(--ink) 8%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange), transparent 72%);
}
.hero-cta:hover, .primary-button:hover {
  color: var(--brand-accent-contrast, var(--ink));
  background: color-mix(in srgb, var(--orange), white 12%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--orange), transparent 65%);
}
.hero-cta span { background: color-mix(in srgb, var(--brand-accent-contrast, var(--ink)), transparent 88%); }
.hero-proof { margin-top: 27px; }
.proof-icon, .field-icon, .retention-icon {
  color: var(--brand-primary-readable, var(--green));
  background: color-mix(in srgb, var(--green), white 92%);
}
.hero-art { border: 1px solid rgba(255,255,255,.55); box-shadow: 0 28px 65px rgba(11,31,91,.2); }
.hero-photo-shade {
  background: linear-gradient(180deg, rgba(7,19,53,.04) 28%, rgba(7,19,53,.28) 62%, rgba(7,19,53,.9) 100%),
    linear-gradient(90deg, rgba(7,19,53,.12), transparent 68%);
}
.photo-tag { background: rgba(11,31,91,.78); }
.floating-card { border-color: rgba(255,255,255,.84); box-shadow: 0 17px 40px rgba(5,16,48,.22); }
.court-stamp i { background: var(--orange); }
.retention-note { border-color: color-mix(in srgb, var(--green), white 85%); box-shadow: 0 8px 24px rgba(17,28,57,.035); }
.search-form { border-color: #e4eaf4; box-shadow: 0 16px 38px rgba(17,28,57,.06); }
input:focus, select:focus { border-color: var(--orange); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible,
.weekday-options input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--orange), white 24%); outline-offset: 3px; }
.empty-state { border-color: color-mix(in srgb, var(--green), white 72%); }
.how-section { background: linear-gradient(118deg, #0b1f5b, #102b70 66%, #163d81); }
.how-section::before { opacity: .18; }
.how-link, .how-heading .eyebrow { color: var(--orange); }
.step-card { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.055); }
.step-icon { color: var(--brand-accent-contrast, var(--ink)); background: var(--orange); }
.footer-status i { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 82%); }

.admin-body { min-height: 100vh; background-color: var(--paper); }
.admin-header { gap: 20px; }
.admin-nav { gap: clamp(12px, 1.7vw, 24px); }
.admin-nav > a:not(.back-link) { padding: 10px 0; }
.admin-nav > a:not(.back-link):hover { color: var(--brand-primary-readable, var(--green)); }
.back-link { color: var(--ink); background: white; border-color: var(--line); }
.admin-shell { padding-bottom: 88px; }
.admin-hero {
  min-height: 275px;
  margin-top: 2px;
  background: linear-gradient(112deg, #091944 0%, #0b1f5b 58%, #174b91 100%);
  box-shadow: 0 24px 55px rgba(11,31,91,.18);
}
.admin-hero::after { opacity: .2; background-image: radial-gradient(color-mix(in srgb, var(--orange), white 12%) .8px, transparent .8px); }
.admin-title .eyebrow { color: color-mix(in srgb, var(--orange), white 14%); }
.eyebrow-mark, .admin-ball { background: var(--orange); }
.admin-ball { box-shadow: 0 0 25px color-mix(in srgb, var(--orange), transparent 30%); }
.admin-hero-art::before, .admin-court-line { border-color: color-mix(in srgb, var(--orange), transparent 45%); }
.admin-hero-art::after, .line-three { border-color: color-mix(in srgb, var(--orange), transparent 45%); }
.admin-hero-stamp { color: color-mix(in srgb, var(--orange), white 12%); }
.admin-title h1 em { color: var(--orange); }
.metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric, .admin-panel { border-color: #e3e9f3; box-shadow: 0 10px 28px rgba(17,28,57,.045); }
.metric::after { border-color: color-mix(in srgb, var(--green), transparent 82%); box-shadow: 0 0 0 12px color-mix(in srgb, var(--green), transparent 96%), 0 0 0 25px color-mix(in srgb, var(--green), transparent 97%); }
.metric-label, .panel-subtitle { color: #68758c; }
.metric strong { color: var(--ink); }
.table-action { color: var(--brand-primary-readable, var(--green)); }
.table-action:hover { color: var(--ink-soft); }
.admin-table-wrap { overflow-x: auto; border-radius: 10px; }
th { color: #71809a; border-color: var(--line); }
td { border-color: #edf0f6; }
.add-panel input, .add-panel select, .camera-form input, .camera-form select,
.video-library-filters input, .video-library-filters select {
  color: var(--ink);
  background: #fbfcff;
  border-color: #dce4f0;
  border-radius: 10px;
}
.camera-card-item, .court-list-item, .schedule-list-item, .court-qr-item { background: #fbfcff; border-color: #e4eaf3; }
.privacy-chip { color: #174e3b; background: #eaf7f0; border-color: #d4eddf; }
.weekday-options span { border-color: #dce4f0; }
.weekday-options input:checked + span { color: var(--brand-accent-contrast, var(--ink)); background: var(--orange); border-color: var(--orange); }
.brand-logo-preview { background: #f5f7fc; border-color: #dce4f0; }
.brand-color-fields input[type="color"] { border-color: #dce4f0; }
.tenant-state-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 17px;
  color: #20345f;
  background: #edf5ff;
  border: 1px solid #c9def9;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.55;
}
.tenant-state-banner[hidden], .login-access-note[hidden] { display: none; }
.tenant-state-banner strong { margin-right: 4px; color: var(--ink); }
.state-icon { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; color: #12326e; background: #d8e9ff; border-radius: 50%; font-weight: 800; }
.login-access-note { margin: 0; padding: 12px 14px; color: #6d4c12; background: #fff6df; border: 1px solid #eedca7; border-radius: 11px; font-size: 12px; line-height: 1.55; }
.club-login { border-color: #e1e8f3; box-shadow: var(--shadow); }
.club-login input { padding: 11px 12px; background: #fbfcff; border: 1px solid #dce4f0; border-radius: 10px; }
.club-login form { gap: 14px; }
.club-login label { gap: 7px; color: #55627a; font-size: 12px; font-weight: 700; }
.camera-intro, .muted { color: #64718a; }
.live-label { color: #17583d; background: #eaf7f0; }
.qr-dialog { color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 90px rgba(7,18,49,.32); }
.qr-dialog::backdrop { background: rgba(7,18,49,.72); }

@media (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .site-header { min-height: 72px; }
  .admin-header { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding-top: 12px; }
  .admin-nav:not(.logged-out) { order: 2; display: flex; width: 100%; max-width: 100%; overflow-x: auto; justify-content: flex-start; gap: 20px; padding: 6px 2px 11px; scrollbar-width: thin; }
  .admin-nav:not(.logged-out) > a:not(.back-link) { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
  .admin-nav:not(.logged-out) .back-link { flex: 0 0 auto; white-space: nowrap; }
  .admin-nav:not(.logged-out) #logout-button { flex: 0 0 auto; white-space: nowrap; }
  .admin-hero { min-height: 240px; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric { min-height: 92px; }
  .tenant-state-banner { align-items: flex-start; }
  .tenant-state-banner .state-icon { margin-top: 1px; }
}

@media (max-width: 460px) {
  .brand-name { max-width: 175px; font-size: 18px; }
  .admin-hero { padding: 24px 18px; }
  .admin-hero-art { right: -10px; }
  .admin-title h1 { font-size: 44px; }
  .admin-nav:not(.logged-out) { gap: 17px; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric { padding: 13px; }
  .metric-label { font-size: 8px; }
  .metric strong { font-size: 24px; }
  .admin-table-wrap { margin: 0; width: 100%; overflow-x: auto; }
  table { min-width: 560px; table-layout: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Vichoca showcase finish: one cohesive court-side system across client and admin. */
:root {
  --court-night: #081943;
  --court-blue: #102b70;
  --court-surface: #ffffff;
  --court-edge: #dce5f1;
  --court-shadow: 0 18px 48px rgba(8, 25, 67, .085);
}

html { scroll-padding-top: 100px; }
body {
  background-color: #f5f7fc;
  background-image:
    radial-gradient(ellipse at 5% 10%, color-mix(in srgb, var(--orange), transparent 92%), transparent 28rem),
    radial-gradient(ellipse at 94% 25%, rgba(75, 129, 222, .06), transparent 34rem);
}
.shell { width: min(1240px, calc(100% - 64px)); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  background: color-mix(in srgb, #f5f7fc, transparent 10%);
  border-bottom: 1px solid rgba(220, 229, 241, .72);
  backdrop-filter: blur(18px);
}
.brand-mark.has-logo { overflow: hidden; padding: 4px; background: #fff; border: 1px solid var(--court-edge); }
.brand-mark.has-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name { color: var(--court-night); }
.main-nav { gap: 5px; padding: 5px; background: rgba(255,255,255,.78); border: 1px solid var(--court-edge); border-radius: 999px; }
.main-nav a { padding: 10px 14px; border-radius: 999px; }
.main-nav a.active { color: #fff; background: var(--court-night); }
.main-nav a:hover { color: var(--court-night); background: color-mix(in srgb, var(--orange), white 86%); }
.admin-link { border-color: var(--court-edge); box-shadow: 0 5px 16px rgba(8,25,67,.05); }

.test-banner { border-radius: 16px; }
.hero { gap: clamp(36px, 6vw, 82px); padding-top: 42px; padding-bottom: 70px; }
.hero-copy { padding-block: 35px; }
.hero-eyebrow { width: fit-content; padding: 9px 12px; background: rgba(255,255,255,.78); border: 1px solid var(--court-edge); border-radius: 999px; letter-spacing: 1.15px; }
.pulse-dot { animation: court-pulse 1.8s ease-in-out infinite; }
@keyframes court-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--orange), transparent 90%); } }
.hero h1 { max-width: 610px; color: var(--court-night); font-size: clamp(58px, 6.3vw, 82px); line-height: .96; letter-spacing: -.078em; }
.hero-lead { max-width: 460px; margin-top: 24px; color: #596983; font-size: 16px; line-height: 1.75; }
.hero-cta { min-height: 54px; padding: 8px 9px 8px 20px; border-radius: 999px; }
.hero-cta span { width: 36px; height: 36px; }
.hero-proof { margin-top: 29px; }
.proof-icon { color: var(--court-night); background: #e8edf8; }
.hero-art { height: clamp(410px, 42vw, 540px); border-radius: 30px; box-shadow: 0 30px 74px rgba(8,25,67,.22); }
.hero-art::after { position: absolute; inset: 13px; content: ''; border: 1px solid rgba(255,255,255,.24); border-radius: 21px; pointer-events: none; }
.photo-tag { top: 27px; left: 27px; padding: 11px 14px; }
.floating-card { left: 28px; bottom: 28px; padding: 19px 22px; border-radius: 17px; }
.court-stamp { right: 31px; bottom: 32px; }

.search-section { padding-top: 26px; padding-bottom: 104px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2, .how-heading h2 { color: var(--court-night); }
.section-lead { color: #64728a; font-size: 14px; }
.retention-note { padding: 13px 16px; border-color: var(--court-edge); border-radius: 16px; box-shadow: 0 9px 25px rgba(8,25,67,.04); }
.retention-icon { color: var(--court-night); background: color-mix(in srgb, var(--orange), white 84%); }
.retention-note strong { font-size: 11px; }
.retention-note small { font-size: 10px; }
.search-form { gap: 11px; padding: 13px; border-color: var(--court-edge); border-radius: 21px; box-shadow: var(--court-shadow); }
.search-form .field-group { min-height: 70px; align-content: center; gap: 5px; padding: 9px 13px; background: #f8faff; border: 1px solid #e8edf5; border-radius: 13px; }
.search-form .field-label { letter-spacing: .65px; }
.search-form input, .search-form select { min-height: 27px; padding: 4px 0; border: 0; font-size: 13px; }
.search-form input:focus, .search-form select:focus { box-shadow: 0 2px 0 var(--orange); }
.primary-button { min-height: 50px; border-radius: 13px; }
.search-form .primary-button { min-height: 70px; padding-inline: 19px; border-radius: 14px; }
.search-status { min-height: 43px; padding-top: 18px; color: #64728a; }
.results-grid { gap: 18px; }
.match-card { padding: 13px; border-color: var(--court-edge); border-radius: 19px; box-shadow: 0 8px 24px rgba(8,25,67,.035); }
.match-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--orange), white 48%); box-shadow: var(--court-shadow); }
.card-color { height: 136px; border-radius: 13px; }
.card-color::before { inset: 17px; border-color: rgba(255,255,255,.42); }
.card-color.sunset { background: linear-gradient(135deg, #ffb173, #e76550); }
.card-color.violet { background: linear-gradient(135deg, #6489db, #263f81); }
.card-color .card-time { top: 13px; left: 13px; padding: 7px 10px; border-radius: 999px; }
.play-chip { right: 13px; bottom: 13px; width: 42px; height: 42px; color: var(--brand-accent-contrast, var(--court-night)); background: var(--orange); }
.match-top h3 { color: var(--court-night); font-size: 17px; }
.match-meta { font-size: 11px; }
.match-footer { margin-top: 15px; padding-top: 12px; color: #69778e; border-color: #edf0f6; font-size: 10px; }
.empty-state { padding: 42px 24px; color: #596983; background: rgba(255,255,255,.9); border-color: #bdcbe0; border-radius: 20px; font-size: 14px; }

.how-section { background: linear-gradient(118deg, var(--court-night), #102b70 68%, #174c91); }
.how-section::before, .how-section::after { border-color: color-mix(in srgb, var(--orange), transparent 58%); }
.how-inner { padding-block: 92px 96px; }
.how-heading h2 { color: #fff; }
.how-heading > p:not(.eyebrow) { color: #c4cde0; font-size: 13px; }
.steps { gap: 14px; }
.step-card { min-height: 225px; padding: 18px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); border-radius: 17px; transition: transform .2s ease, background .2s ease; }
.step-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.step-number { color: color-mix(in srgb, var(--orange), white 16%); }
.step-icon { color: var(--brand-accent-contrast, var(--court-night)); background: var(--orange); border-radius: 12px; }
.step-card h3 { font-size: 15px; }
.step-card p { color: #c4cde0; font-size: 11px; line-height: 1.65; }
.site-footer { min-height: 92px; color: #6a7890; font-size: 11px; }
.footer-status { padding: 8px 12px; background: #fff; border: 1px solid var(--court-edge); border-radius: 999px; }
.footer-status i { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 86%); }

.admin-body { background-color: #f5f7fc; }
.admin-header { min-height: 74px; }
.admin-nav { gap: 7px; }
.admin-nav > a:not(.back-link) { padding: 10px 11px; border-radius: 999px; }
.admin-nav > a:not(.back-link):hover { background: #fff; }
.back-link { padding: 10px 14px; border-radius: 999px; }
.admin-shell { padding-bottom: 96px; }
.admin-hero { min-height: 295px; margin: 12px 0 20px; border-radius: 26px; }
.admin-hero-art { opacity: .62; }
.metrics { gap: 14px; margin-bottom: 18px; }
.metric, .admin-panel { background: rgba(255,255,255,.96); border-color: #e2e9f3; border-radius: 19px; box-shadow: 0 9px 28px rgba(8,25,67,.045); }
.metric { min-height: 120px; padding: 20px 22px; }
.metric-label { font-size: 10px; letter-spacing: .65px; }
.metric strong { font-size: 32px; }
.admin-grid { gap: 17px; }
.admin-panel { padding: 24px; }
.panel-heading { margin-bottom: 18px; }
.panel-subtitle { max-width: 760px; margin-top: 8px; color: #69778e; font-size: 12px; line-height: 1.6; }
.admin-table-wrap { border: 1px solid #e8edf5; border-radius: 13px; }
th { padding: 12px 11px; background: #f8faff; }
td { padding: 12px 11px; }
.add-panel form { gap: 14px; }
.camera-section, .brand-management, .court-management, .qr-management { margin-top: 18px; }
.camera-card-item, .court-list-item, .schedule-list-item, .court-qr-item { padding: 16px; border-radius: 14px; }
.camera-card-actions { gap: 8px; }
.camera-card-item .table-action { padding: 7px 10px; color: var(--court-night); background: #fff; border: 1px solid #dce5f1; border-radius: 999px; }
.camera-card-item .table-action:hover { color: var(--court-night); background: color-mix(in srgb, var(--orange), white 88%); border-color: color-mix(in srgb, var(--orange), white 55%); text-decoration: none; }
.camera-card-item .table-action:disabled { color: #8190a4; background: #f2f4f8; border-color: #e4e9f0; }
.camera-status { padding: 7px 10px; font-size: 9px; font-weight: 700; }
.camera-status.online { color: #145c42; background: #e2f4ea; }
.camera-status.offline, .camera-status.timeout, .camera-status.probe_error { color: #9a392f; background: #fff0ed; }
.camera-form { gap: 13px; padding: 18px; background: #f8faff; border-color: #e3eaf4; border-radius: 16px; }
.camera-form input, .camera-form select, .add-panel input, .add-panel select { min-height: 42px; padding: 9px 11px; border-radius: 10px; }
.camera-rtsp-builder { padding: 14px; background: #fff; border-color: #e1e8f2; border-radius: 13px; }
.camera-rtsp-builder legend { color: var(--court-night); font-size: 9px; }
.branding-form { gap: 1.7rem 2.2rem; }
.brand-logo-preview { min-height: 126px; border-color: #d6dfed; border-radius: 17px; }
.brand-color-fields { gap: 1.2rem; }
.brand-color-fields label { color: var(--court-night); font-size: 12px; }
.weekday-picker { border-color: #dfe7f2; border-radius: 13px; }
.weekday-options span { min-width: 42px; justify-content: center; padding: .55rem .7rem; border-radius: 999px; }
.schedule-form, .court-form { gap: 14px; }
.video-library-filters input, .video-library-filters select { border-radius: 11px; }
.club-login { margin-top: clamp(2rem, 8vh, 5rem); border-radius: 22px; }
.club-login h1 { color: var(--court-night); font: 700 clamp(30px, 4vw, 38px)/1.1 var(--font-display); letter-spacing: -.05em; }
.club-login .primary-button { width: 100%; }

.modal-backdrop { background: rgba(5, 13, 37, .82); }
.video-modal { background: #081630; border-color: rgba(255,255,255,.12); border-radius: 23px; }
.modal-close:hover { background: color-mix(in srgb, var(--orange), transparent 58%); }
.video-frame { border-color: color-mix(in srgb, var(--orange), transparent 76%); }
.ready-pill { color: #fff0e8; background: color-mix(in srgb, var(--orange), transparent 86%); border-color: color-mix(in srgb, var(--orange), transparent 62%); }

@media (max-width: 1000px) {
  .shell { width: min(100% - 44px, 900px); }
  .hero { gap: 28px; }
  .hero h1 { font-size: clamp(52px, 6.4vw, 70px); }
  .admin-nav { gap: 3px; }
  .admin-nav > a:not(.back-link) { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 36px, 620px); }
  .site-header { position: relative; min-height: 72px; background: transparent; border: 0; backdrop-filter: none; }
  .main-nav { gap: 3px; padding: 4px; }
  .main-nav a { padding: 8px 11px; }
  .hero { padding-top: 25px; padding-bottom: 58px; }
  .hero-copy { padding-top: 18px; }
  .hero h1 { font-size: clamp(51px, 10vw, 68px); }
  .hero-art { height: clamp(300px, 70vw, 430px); }
  .search-section { padding-bottom: 70px; }
  .search-form { padding: 10px; border-radius: 17px; }
  .search-form .field-group { min-height: 66px; }
  .search-form .primary-button { min-height: 54px; }
  .admin-header { position: relative; }
  .admin-nav:not(.logged-out) { margin-inline: -4px; }
  .admin-hero { min-height: 245px; }
  .admin-shell { padding-bottom: 56px; }
  .admin-panel { padding: 18px; }
  .metrics { gap: 9px; }
}
@media (max-width: 460px) {
  .shell { width: calc(100% - 28px); }
  .main-nav { border: 0; background: transparent; }
  .main-nav a.active { background: var(--court-night); }
  .hero h1 { font-size: 50px; }
  .hero-art { height: 300px; }
  .hero-art::after { inset: 9px; border-radius: 16px; }
  .photo-tag { top: 17px; left: 17px; }
  .floating-card { left: 17px; bottom: 17px; }
  .court-stamp { right: 16px; bottom: 19px; }
  .section-heading h2 { font-size: 31px; }
  .match-card { border-radius: 16px; }
  .card-color { height: 128px; }
  .how-inner { padding-block: 60px; }
  .step-card { border-radius: 14px; }
  .footer-status { font-size: 9px; }
  .admin-hero { padding: 25px 19px; }
  .admin-title h1 { font-size: 43px; }
  .metric { min-height: 94px; padding: 13px; }
  .metric strong { font-size: 25px; }
  .camera-card-item { padding: 13px; }
  .camera-card-actions { gap: 7px; }
  .camera-card-item .table-action { padding: 7px 9px; font-size: 9px; }
  .live-modal .video-frame { min-height: 230px; }
}