/* ========================================================= DEWPOINT PICKLEBALL MANAGEMENT / OWNER / DEVELOPER DASHBOARD THEME This file is exclusive to dewpoint.picklemaniaph.com ========================================================= */ /* --------------------------------------------------------- MAIN MANAGEMENT AREA --------------------------------------------------------- */ .shell:not(.player-shell){ background:#f8fafc !important; color:#172033 !important; } .shell:not(.player-shell) .content{ background:#f8fafc !important; } /* --------------------------------------------------------- LEFT SIDEBAR DEWPOINT PURPLE --------------------------------------------------------- */ .shell:not(.player-shell) .rail{ background: linear-gradient( 180deg, #35106f 0%, #45138d 48%, #2a0b60 100% ) !important; color:#fff !important; border-right:1px solid rgba(255,255,255,.10) !important; } .shell:not(.player-shell) .rail .venue{ border-bottom-color:rgba(255,255,255,.16) !important; } .shell:not(.player-shell) .rail .venue b, .shell:not(.player-shell) .rail .venue small{ color:#fff !important; } .shell:not(.player-shell) .rail nav button{ color:rgba(255,255,255,.90) !important; background:transparent !important; } .shell:not(.player-shell) .rail nav button:hover{ background:rgba(255,255,255,.10) !important; color:#fff !important; } .shell:not(.player-shell) .rail nav button.active{ background: linear-gradient( 90deg, #7c3aed, #8b5cf6 ) !important; color:#fff !important; box-shadow: 0 8px 20px rgba(28,8,72,.28) !important; } .shell:not(.player-shell) .rail-foot{ border-top-color:rgba(255,255,255,.12) !important; } .shell:not(.player-shell) .rail-foot button{ color:#fff !important; } /* --------------------------------------------------------- DEWPOINT LOGO IN SIDEBAR --------------------------------------------------------- */ .shell:not(.player-shell) .dewpoint-logo{ color:#fff !important; } .shell:not(.player-shell) .dewpoint-logo b{ color:#c8ff2f !important; } .shell:not(.player-shell) .dewpoint-logo i{ color:#ffd633 !important; } /* --------------------------------------------------------- TOP DASHBOARD HEADER --------------------------------------------------------- */ .shell:not(.player-shell) .content > header{ background:#fff !important; color:#172033 !important; border-bottom:1px solid #e5e7eb !important; } .shell:not(.player-shell) .content > header small{ color:#64748b !important; } /* --------------------------------------------------------- VENUE / COURT NAME UPPER RIGHT DEWPOINT LANDING-PAGE ACCENT --------------------------------------------------------- */ .shell:not(.player-shell) .content > header b, .shell:not(.player-shell) .content > header strong{ color:#65a30d !important; } .shell:not(.player-shell) .content > header small:last-child{ color:#4d7c0f !important; } /* --------------------------------------------------------- DASHBOARD TITLE AREA --------------------------------------------------------- */ .shell:not(.player-shell) .content h1, .shell:not(.player-shell) .content h2, .shell:not(.player-shell) .content h3{ color:#172033; } /* --------------------------------------------------------- DASHBOARD CARDS --------------------------------------------------------- */ .shell:not(.player-shell) .card, .shell:not(.player-shell) .panel, .shell:not(.player-shell) .stat-card, .shell:not(.player-shell) article{ background:#fff; } .shell:not(.player-shell) .owner-dashboard, .shell:not(.player-shell) .owner-dashboard-redesign{ background:#f8fafc !important; } /* --------------------------------------------------------- DEVELOPER MODE KEEP ITS OWN LIGHT PURPLE IDENTITY --------------------------------------------------------- */ .developer-mode-bar{ background: linear-gradient( 110deg, #f5f3ff, #eef2ff ) !important; border-color:#ddd6fe !important; } /* --------------------------------------------------------- SCROLLBAR INSIDE SIDEBAR --------------------------------------------------------- */ .shell:not(.player-shell) .rail nav{ scrollbar-color:#a78bfa rgba(255,255,255,.08); } .shell:not(.player-shell) .rail nav::-webkit-scrollbar{ width:7px; } .shell:not(.player-shell) .rail nav::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); } .shell:not(.player-shell) .rail nav::-webkit-scrollbar-thumb{ background:#a78bfa; border-radius:20px; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:760px){ .shell:not(.player-shell) .content{ background:#f8fafc !important; } .shell:not(.player-shell) .mobile-menu-sheet{ background: linear-gradient( 180deg, #35106f, #2a0b60 ) !important; color:#fff !important; } .shell:not(.player-shell) .mobile-menu-sheet button{ color:#fff !important; } } /* ========================================================= DEWPOINT DASHBOARD THEME PICKER ========================================================= */ :root{ --dp-accent:#2563eb; --dp-accent-2:#3b82f6; --dp-accent-soft:#dbeafe; --dp-accent-text:#1d4ed8; --dp-sidebar:#172554; --dp-sidebar-2:#1e3a8a; } /* RED */ :root[data-dewpoint-theme="red"]{ --dp-accent:#dc2626; --dp-accent-2:#ef4444; --dp-accent-soft:#fee2e2; --dp-accent-text:#b91c1c; --dp-sidebar:#450a0a; --dp-sidebar-2:#7f1d1d; } /* BLACK */ :root[data-dewpoint-theme="black"]{ --dp-accent:#111827; --dp-accent-2:#374151; --dp-accent-soft:#e5e7eb; --dp-accent-text:#111827; --dp-sidebar:#030712; --dp-sidebar-2:#111827; } /* YELLOW */ :root[data-dewpoint-theme="yellow"]{ --dp-accent:#eab308; --dp-accent-2:#facc15; --dp-accent-soft:#fef9c3; --dp-accent-text:#a16207; --dp-sidebar:#422006; --dp-sidebar-2:#713f12; } /* PINK */ :root[data-dewpoint-theme="pink"]{ --dp-accent:#db2777; --dp-accent-2:#ec4899; --dp-accent-soft:#fce7f3; --dp-accent-text:#be185d; --dp-sidebar:#500724; --dp-sidebar-2:#831843; } /* BLUE */ :root[data-dewpoint-theme="blue"]{ --dp-accent:#2563eb; --dp-accent-2:#3b82f6; --dp-accent-soft:#dbeafe; --dp-accent-text:#1d4ed8; --dp-sidebar:#172554; --dp-sidebar-2:#1e3a8a; } /* GREEN */ :root[data-dewpoint-theme="green"]{ --dp-accent:#16a34a; --dp-accent-2:#22c55e; --dp-accent-soft:#dcfce7; --dp-accent-text:#15803d; --dp-sidebar:#052e16; --dp-sidebar-2:#14532d; } /* --------------------------------------------------------- APPLY VARIABLES --------------------------------------------------------- */ .shell:not(.player-shell) .rail{ background: linear-gradient( 180deg, var(--dp-sidebar), var(--dp-sidebar-2) ) !important; } .shell:not(.player-shell) .rail nav button.active{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } .shell:not(.player-shell) .content > header b, .shell:not(.player-shell) .content > header strong{ color:var(--dp-accent-text) !important; } .developer-view-switcher button.active{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* --------------------------------------------------------- THEME PICKER --------------------------------------------------------- */ .dewpoint-theme-panel{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; margin:0 0 12px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 6px 18px rgba(15,23,42,.05); } .dewpoint-theme-copy{ display:flex; flex-direction:column; gap:3px; } .dewpoint-theme-copy strong{ font-size:12px; letter-spacing:.10em; color:#111827; } .dewpoint-theme-copy small{ color:#64748b; font-size:12px; } .dewpoint-theme-options{ display:flex; flex-wrap:wrap; gap:7px; } .dewpoint-theme-options button{ border:2px solid transparent; border-radius:999px; padding:8px 12px; font-size:11px; font-weight:800; cursor:pointer; background:#f8fafc; } .dewpoint-theme-options button.active{ border-color:#111827; box-shadow:0 0 0 2px #fff inset; } .dewpoint-theme-options .theme-red{ background:#dc2626; color:#fff; } .dewpoint-theme-options .theme-black{ background:#111827; color:#fff; } .dewpoint-theme-options .theme-yellow{ background:#facc15; color:#111827; } .dewpoint-theme-options .theme-pink{ background:#ec4899; color:#fff; } .dewpoint-theme-options .theme-blue{ background:#2563eb; color:#fff; } .dewpoint-theme-options .theme-green{ background:#16a34a; color:#fff; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:760px){ .dewpoint-theme-panel{ align-items:flex-start; flex-direction:column; } .dewpoint-theme-options{ width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; } .dewpoint-theme-options button{ flex:0 0 auto; } } /* ========================================================= DEWPOINT COLOR BOX THEME PICKER V2 ========================================================= */ /* PURPLE */ :root[data-dewpoint-theme="purple"]{ --dp-accent:#7c3aed; --dp-accent-2:#a855f7; --dp-accent-soft:#f3e8ff; --dp-accent-text:#6d28d9; --dp-sidebar:#2e1065; --dp-sidebar-2:#581c87; } /* ORANGE */ :root[data-dewpoint-theme="orange"]{ --dp-accent:#ea580c; --dp-accent-2:#f97316; --dp-accent-soft:#ffedd5; --dp-accent-text:#c2410c; --dp-sidebar:#431407; --dp-sidebar-2:#7c2d12; } /* TEAL */ :root[data-dewpoint-theme="teal"]{ --dp-accent:#0d9488; --dp-accent-2:#14b8a6; --dp-accent-soft:#ccfbf1; --dp-accent-text:#0f766e; --dp-sidebar:#042f2e; --dp-sidebar-2:#134e4a; } /* CYAN */ :root[data-dewpoint-theme="cyan"]{ --dp-accent:#0891b2; --dp-accent-2:#06b6d4; --dp-accent-soft:#cffafe; --dp-accent-text:#0e7490; --dp-sidebar:#083344; --dp-sidebar-2:#164e63; } /* GRAY */ :root[data-dewpoint-theme="gray"]{ --dp-accent:#4b5563; --dp-accent-2:#6b7280; --dp-accent-soft:#f3f4f6; --dp-accent-text:#374151; --dp-sidebar:#111827; --dp-sidebar-2:#374151; } /* BROWN */ :root[data-dewpoint-theme="brown"]{ --dp-accent:#92400e; --dp-accent-2:#b45309; --dp-accent-soft:#fef3c7; --dp-accent-text:#78350f; --dp-sidebar:#2d1606; --dp-sidebar-2:#5c2d0b; } /* --------------------------------------------------------- COLOR BOX PICKER --------------------------------------------------------- */ .dewpoint-theme-panel{ display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin:0 0 14px; padding:16px 18px; background:#fff; border:1px solid #e5e7eb; border-radius:18px; box-shadow: 0 8px 25px rgba(15,23,42,.05); } .dewpoint-theme-copy{ display:flex; flex-direction:column; gap:4px; min-width:160px; } .dewpoint-theme-copy strong{ font-size:12px; letter-spacing:.11em; color:#111827; } .dewpoint-theme-copy small{ font-size:12px; color:#64748b; } .dewpoint-theme-options{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; } .dewpoint-theme-options .theme-box{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:52px; padding:5px; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .dewpoint-theme-options .theme-box:hover{ transform:translateY(-2px); background:#f8fafc; } .dewpoint-theme-options .theme-box.active{ background:#f8fafc; border-color:#cbd5e1; } .theme-swatch{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; color:#fff; font-size:18px; font-weight:900; border:2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(15,23,42,.15), 0 4px 10px rgba(15,23,42,.12); } .dewpoint-theme-options small{ font-size:9px; font-weight:800; letter-spacing:.03em; color:#475569; } /* SWATCH COLORS */ .swatch-red{ background:#dc2626; } .swatch-black{ background:#111827; } .swatch-yellow{ background:#facc15; color:#111827; } .swatch-pink{ background:#ec4899; } .swatch-blue{ background:#2563eb; } .swatch-green{ background:#16a34a; } .swatch-purple{ background:#7c3aed; } .swatch-orange{ background:#f97316; } .swatch-teal{ background:#0d9488; } .swatch-cyan{ background:#06b6d4; } .swatch-gray{ background:#6b7280; } .swatch-brown{ background:#92400e; } /* --------------------------------------------------------- MAKE SELECTED THEME CONTROL OTHER ACCENTS --------------------------------------------------------- */ .shell:not(.player-shell) .rail{ background: linear-gradient( 180deg, var(--dp-sidebar), var(--dp-sidebar-2) ) !important; } .shell:not(.player-shell) .rail nav button.active{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } .shell:not(.player-shell) .content > header b, .shell:not(.player-shell) .content > header strong{ color:var(--dp-accent-text) !important; } .developer-view-switcher button.active{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* MOBILE */ @media(max-width:760px){ .dewpoint-theme-panel{ flex-direction:column; gap:12px; } .dewpoint-theme-options{ justify-content:flex-start; width:100%; flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; } .dewpoint-theme-options .theme-box{ flex:0 0 auto; } } /* ========================================================= DEWPOINT THEME-AWARE TEXT / FONT ACCENTS Override remaining Pickle Mania green accents ========================================================= */ /* Venue / court name */ .shell:not(.player-shell) .content > header b, .shell:not(.player-shell) .content > header strong, .shell:not(.player-shell) .venue-name, .shell:not(.player-shell) .court-name{ color:var(--dp-accent-text) !important; } /* Section eyebrow / overline / highlighted labels */ .shell:not(.player-shell) .eyebrow, .shell:not(.player-shell) .overline, .shell:not(.player-shell) .section-label, .shell:not(.player-shell) .section-kicker, .shell:not(.player-shell) .panel-label, .shell:not(.player-shell) .card-label{ color:var(--dp-accent-text) !important; } /* Links and accent text */ .shell:not(.player-shell) a:not(.button):not(.btn){ color:var(--dp-accent-text); } /* Highlighted values / totals */ .shell:not(.player-shell) .accent, .shell:not(.player-shell) .highlight, .shell:not(.player-shell) .stat-value, .shell:not(.player-shell) .metric-value{ color:var(--dp-accent-text) !important; } /* Common owner dashboard accent text */ .shell:not(.player-shell) .owner-dashboard small, .shell:not(.player-shell) .owner-dashboard-redesign small{ border-color:var(--dp-accent-soft); } /* Active tabs */ .shell:not(.player-shell) .tabs button.active, .shell:not(.player-shell) .tab-buttons button.active, .shell:not(.player-shell) [role="tab"].active{ color:var(--dp-accent-text) !important; border-color:var(--dp-accent) !important; } /* Buttons that previously inherit Pickle Mania green */ .shell:not(.player-shell) button.primary, .shell:not(.player-shell) .btn-primary, .shell:not(.player-shell) .primary-button{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } /* Focus / selected elements */ .shell:not(.player-shell) input:focus, .shell:not(.player-shell) select:focus, .shell:not(.player-shell) textarea:focus{ border-color:var(--dp-accent) !important; outline-color:var(--dp-accent-soft) !important; } /* Generic green-looking Pickle Mania utility classes scoped ONLY to Dewpoint management pages */ .shell:not(.player-shell) .text-green, .shell:not(.player-shell) .green-text, .shell:not(.player-shell) .text-success:not(.status-success), .shell:not(.player-shell) .brand-green{ color:var(--dp-accent-text) !important; } /* Keep TRUE statuses semantically green. Paid / Available / Success should stay green. */ .shell:not(.player-shell) .status-success, .shell:not(.player-shell) .status-paid, .shell:not(.player-shell) .status-available, .shell:not(.player-shell) .paid, .shell:not(.player-shell) .available{ color:#15803d; } /* ========================================================= DEWPOINT FULL MANAGEMENT THEME ACCENTS Dashboard / Profile / Court / Court Schedule / Booking Calendar / Live Court Status ========================================================= */ :root{ --dp-theme-soft:var(--dp-accent-soft); --dp-theme-border:color-mix(in srgb,var(--dp-accent) 28%,white); --dp-theme-faint:color-mix(in srgb,var(--dp-accent) 7%,white); --dp-theme-mid:color-mix(in srgb,var(--dp-accent) 16%,white); } /* ========================================================= GENERAL DEWPOINT MANAGEMENT ACCENTS ========================================================= */ .shell:not(.player-shell) .section-row > button, .shell:not(.player-shell) .text-action, .shell:not(.player-shell) .court-count, .shell:not(.player-shell) .profile-stats em{ color:var(--dp-accent-text) !important; } .shell:not(.player-shell) .text-action{ background:var(--dp-theme-faint) !important; border-color:var(--dp-theme-border) !important; } /* Generic decorative icons */ .shell:not(.player-shell) .quick button, .shell:not(.player-shell) .payment-method-info article > span{ color:var(--dp-accent-text) !important; } /* ========================================================= DASHBOARD ========================================================= */ /* Owner / venue avatar */ .shell:not(.player-shell) .venue > span, .shell:not(.player-shell) .user > span{ color:var(--dp-accent-text) !important; background: linear-gradient( 135deg, var(--dp-theme-soft), color-mix(in srgb,var(--dp-accent-2) 45%,white) ) !important; } /* Dashboard decorative values */ .shell:not(.player-shell) .stats em, .shell:not(.player-shell) .kpis em, .shell:not(.player-shell) .booking-mix .mix-row b{ color:var(--dp-accent-text) !important; } /* Booking demographics donut */ .shell:not(.player-shell) .demo-legend i.returning{ background:var(--dp-accent) !important; } .shell:not(.player-shell) .donut b{ color:var(--dp-accent-text) !important; } /* Popular hours bars */ .shell:not(.player-shell) .hour-bars em{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* Today at a glance / summary icons */ .shell:not(.player-shell) .manual-selection-summary > span{ background:var(--dp-accent) !important; } /* ========================================================= PROFILE ========================================================= */ .shell:not(.player-shell) .profile-avatar{ color:var(--dp-accent-text) !important; background: linear-gradient( 135deg, var(--dp-theme-soft), color-mix(in srgb,var(--dp-accent-2) 38%,white) ) !important; } /* Verified owner badge */ .shell:not(.player-shell) .profile-card > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Choose / Change Photo */ .shell:not(.player-shell) .profile-card > button, .shell:not(.player-shell) .profile-photo-actions label, .shell:not(.player-shell) .profile-photo-actions button{ color:var(--dp-accent-text) !important; border-color:var(--dp-accent) !important; } .shell:not(.player-shell) .profile-photo-actions button{ color:#fff !important; background:var(--dp-accent) !important; } /* Profile upload / court photo upload buttons */ .shell:not(.player-shell) .owner-court-info-panel button, .shell:not(.player-shell) .owner-court-config-panel button{ border-color:var(--dp-accent) !important; } /* ========================================================= COURT PAGE ========================================================= */ /* COURT INFO / section accents */ .shell:not(.player-shell) .owner-court-info-panel > small, .shell:not(.player-shell) .owner-court-config-panel > small, .shell:not(.player-shell) .court-info-grid small{ color:var(--dp-accent-text) !important; } /* Court Live toggle */ .shell:not(.player-shell) .court-live-switch.on, .shell:not(.player-shell) .court-live-control button.on, .shell:not(.player-shell) .setting-toggle button.on{ background:var(--dp-accent) !important; } /* Court information panel tint */ .shell:not(.player-shell) .owner-court-info-panel .court-info-grid, .shell:not(.player-shell) .court-live-control{ border-color:var(--dp-theme-border) !important; } /* Upload buttons inside Court page */ .shell:not(.player-shell) .owner-court-info-panel button:not(.danger){ color:var(--dp-accent-text); border-color:var(--dp-accent); } /* ========================================================= COURT SCHEDULE / MANUAL AVAILABILITY ========================================================= */ /* Days */ .shell:not(.player-shell) .manual-date-strip small{ color:var(--dp-accent-text) !important; } .shell:not(.player-shell) .manual-date-strip button.active{ color:#fff !important; background: linear-gradient( 145deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; box-shadow: 0 8px 20px color-mix(in srgb,var(--dp-accent) 25%,transparent) !important; } .shell:not(.player-shell) .manual-date-strip button.active small, .shell:not(.player-shell) .manual-date-strip button.active em{ color:#fff !important; } /* Available court cells */ .shell:not(.player-shell) .manual-cell:not(.picked):not(.booking):not(.openplay):not(.blocked):not(.lapsed){ color:var(--dp-accent-text) !important; background:var(--dp-theme-faint) !important; border-color:var(--dp-theme-border) !important; } .shell:not(.player-shell) .manual-cell:not(.picked):not(.booking):not(.openplay):not(.blocked):not(.lapsed) strong{ color:var(--dp-accent-text) !important; } /* Selected cells */ .shell:not(.player-shell) .manual-cell.picked{ color:#fff !important; background: linear-gradient( 145deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } .shell:not(.player-shell) .manual-cell.picked small{ color:rgba(255,255,255,.85) !important; } /* Active manual reason */ .shell:not(.player-shell) .manual-reasons button.active{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; border-color:var(--dp-accent) !important; } /* Schedule legend */ .shell:not(.player-shell) .manual-legend .picked:before{ background:var(--dp-accent) !important; border-color:var(--dp-accent) !important; } .shell:not(.player-shell) .manual-legend span:not(.booking):not(.openplay):not(.blocked):not(.lapsed):before{ background:var(--dp-theme-faint); border-color:var(--dp-theme-border); } /* ========================================================= BOOKING CALENDAR ========================================================= */ /* Selected calendar day */ .shell:not(.player-shell) .calendar-grid button.selected{ background:var(--dp-theme-faint) !important; outline: 2px solid var(--dp-accent) !important; } /* Booking count pills */ .shell:not(.player-shell) .calendar-grid em:not(.pending){ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Day total */ .shell:not(.player-shell) .calendar-day-panel .day-total{ color:var(--dp-accent-text) !important; } /* Booking badges in day list */ .shell:not(.player-shell) .calendar-day-list em:not(.pending){ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Calendar navigation hover */ .shell:not(.player-shell) .calendar-head button:hover{ color:var(--dp-accent-text) !important; border-color:var(--dp-accent) !important; background:var(--dp-theme-faint) !important; } /* ========================================================= LIVE COURT STATUS ========================================================= */ /* Decorative "available" presentation follows selected theme. Operational state remains readable from the wording itself. */ .shell:not(.player-shell) .court-overview .available{ color:var(--dp-accent-text) !important; background:var(--dp-theme-faint) !important; border-color:var(--dp-theme-border) !important; } /* Live court cards / decorative court visuals */ .shell:not(.player-shell) .court-net, .shell:not(.player-shell) .live-court-card .court-net{ color:var(--dp-accent) !important; border-color:var(--dp-accent) !important; } /* Live badge where used as decorative venue accent */ .shell:not(.player-shell) .court-live-control .live, .shell:not(.player-shell) .live-court-status .live-badge{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* ========================================================= OWNER DASHBOARD REVENUE / HIGHLIGHTS ========================================================= */ .shell:not(.player-shell) .revenue-snapshot b, .shell:not(.player-shell) .revenue-snapshot strong, .shell:not(.player-shell) .owner-dashboard .revenue-value{ color:var(--dp-accent-text) !important; } /* ========================================================= IMPORTANT SEMANTIC COLORS Keep these meanings independent of selected theme. ========================================================= */ /* Positive system status */ .shell:not(.player-shell) .status-success, .shell:not(.player-shell) .status-paid, .shell:not(.player-shell) .paid{ color:#15803d !important; } /* Pending / warning */ .shell:not(.player-shell) .pending, .shell:not(.player-shell) .status-warning{ /* preserve existing warning styling */ } /* Booking conflict / booked / error */ .shell:not(.player-shell) .manual-cell.booking{ color:#b9422c !important; background:#fff0ec !important; border-color:#ffb5a4 !important; } /* Open Play remains distinguishable from manual selected */ .shell:not(.player-shell) .manual-cell.openplay{ color:#5d47a8 !important; background:#f1edff !important; border-color:#cdc3ff !important; } /* Lapsed / unavailable remain neutral */ .shell:not(.player-shell) .manual-cell.blocked, .shell:not(.player-shell) .manual-cell.lapsed{ color:#69736f !important; } /* ========================================================= FALLBACK FOR BROWSERS WITHOUT color-mix() ========================================================= */ @supports not (color:color-mix(in srgb,red,white)){ :root{ --dp-theme-border:var(--dp-accent-soft); --dp-theme-faint:var(--dp-accent-soft); --dp-theme-mid:var(--dp-accent-soft); } } /* ========================================================= DEWPOINT DASHBOARD - FINAL THEME ACCENT CLEANUP Replace remaining Pickle Mania green on Dashboard only ========================================================= */ /* --------------------------------------------------------- DASHBOARD VENUE AVATAR --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .venue-avatar, .shell:not(.player-shell) .owner-dashboard-redesign .venue-avatar, .shell:not(.player-shell) .owner-dashboard > * span.avatar, .shell:not(.player-shell) .owner-dashboard-redesign > * span.avatar{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Fallback for dashboard welcome avatar */ .shell:not(.player-shell) .owner-dashboard .profile-avatar, .shell:not(.player-shell) .owner-dashboard-redesign .profile-avatar{ color:var(--dp-accent-text) !important; background: linear-gradient( 135deg, var(--dp-theme-soft), color-mix(in srgb,var(--dp-accent) 18%,white) ) !important; } /* --------------------------------------------------------- VENUE STATUS / ACTIVE On dashboard this is treated as theme branding --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .venue-status, .shell:not(.player-shell) .owner-dashboard-redesign .venue-status, .shell:not(.player-shell) .owner-dashboard .venue-status b, .shell:not(.player-shell) .owner-dashboard-redesign .venue-status b, .shell:not(.player-shell) .owner-dashboard .venue-status strong, .shell:not(.player-shell) .owner-dashboard-redesign .venue-status strong{ color:var(--dp-accent-text) !important; } .shell:not(.player-shell) .owner-dashboard .venue-status::before, .shell:not(.player-shell) .owner-dashboard-redesign .venue-status::before{ background:var(--dp-accent) !important; } /* --------------------------------------------------------- KPI ICONS / STAT CARDS --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .kpis article:first-child > span, .shell:not(.player-shell) .owner-dashboard-redesign .kpis article:first-child > span, .shell:not(.player-shell) .owner-dashboard .stats article:first-child > span, .shell:not(.player-shell) .owner-dashboard-redesign .stats article:first-child > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Common dashboard KPI icon wrappers */ .shell:not(.player-shell) .owner-dashboard .kpi-icon, .shell:not(.player-shell) .owner-dashboard-redesign .kpi-icon, .shell:not(.player-shell) .owner-dashboard .stat-icon, .shell:not(.player-shell) .owner-dashboard-redesign .stat-icon{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* --------------------------------------------------------- BOOKING DEMOGRAPHICS DONUT --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .donut, .shell:not(.player-shell) .owner-dashboard-redesign .donut{ background: conic-gradient( var(--dp-accent) 0deg, var(--dp-accent) var(--donut-angle,0deg), color-mix(in srgb,var(--dp-accent) 18%,white) var(--donut-angle,0deg), color-mix(in srgb,var(--dp-accent) 18%,white) 360deg ) !important; } /* Current empty/0% donut has no data angle, so give it a soft full-theme ring instead of green. */ .shell:not(.player-shell) .owner-dashboard .donut, .shell:not(.player-shell) .owner-dashboard-redesign .donut{ background: color-mix(in srgb,var(--dp-accent) 20%,white) !important; } /* Donut center percentage */ .shell:not(.player-shell) .owner-dashboard .donut b, .shell:not(.player-shell) .owner-dashboard-redesign .donut b{ color:var(--dp-accent-text) !important; } /* Returning-player legend dot */ .shell:not(.player-shell) .owner-dashboard .demo-legend i.returning, .shell:not(.player-shell) .owner-dashboard-redesign .demo-legend i.returning{ background:var(--dp-accent) !important; } /* New-player legend dot */ .shell:not(.player-shell) .owner-dashboard .demo-legend i:not(.returning), .shell:not(.player-shell) .owner-dashboard-redesign .demo-legend i:not(.returning){ background: color-mix(in srgb,var(--dp-accent) 20%,white) !important; } /* --------------------------------------------------------- COURT PERFORMANCE --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .court-performance b, .shell:not(.player-shell) .owner-dashboard .court-performance em, .shell:not(.player-shell) .owner-dashboard .court-performance strong, .shell:not(.player-shell) .owner-dashboard-redesign .court-performance b, .shell:not(.player-shell) .owner-dashboard-redesign .court-performance em, .shell:not(.player-shell) .owner-dashboard-redesign .court-performance strong{ color:var(--dp-accent-text) !important; } /* Generic performance percentages */ .shell:not(.player-shell) .owner-dashboard .court-overview .available, .shell:not(.player-shell) .owner-dashboard-redesign .court-overview .available{ color:var(--dp-accent-text) !important; } /* Performance bars when populated */ .shell:not(.player-shell) .owner-dashboard .court-performance i, .shell:not(.player-shell) .owner-dashboard-redesign .court-performance i, .shell:not(.player-shell) .owner-dashboard .performance-bar > span, .shell:not(.player-shell) .owner-dashboard-redesign .performance-bar > span{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* --------------------------------------------------------- TODAY AT A GLANCE --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .today-glance article > span, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance article > span, .shell:not(.player-shell) .owner-dashboard .today-at-a-glance article > span, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance article > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Generic left-side icons inside dashboard summary cards */ .shell:not(.player-shell) .owner-dashboard .summary-card > span, .shell:not(.player-shell) .owner-dashboard-redesign .summary-card > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* --------------------------------------------------------- REVENUE SNAPSHOT --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .revenue-snapshot b, .shell:not(.player-shell) .owner-dashboard .revenue-snapshot strong, .shell:not(.player-shell) .owner-dashboard .revenue-snapshot em, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot b, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot strong, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot em{ color:var(--dp-accent-text) !important; } /* Revenue table/value fallbacks */ .shell:not(.player-shell) .owner-dashboard .revenue-value, .shell:not(.player-shell) .owner-dashboard .revenue-total, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-value, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-total{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- OWNER INSIGHTS / BOOKING MIX --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .booking-mix .mix-row b, .shell:not(.player-shell) .owner-dashboard-redesign .booking-mix .mix-row b{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- DASHBOARD-ONLY OLD GREEN VARIABLES Override var(--green) inside dashboard without affecting the rest of the application. --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard, .shell:not(.player-shell) .owner-dashboard-redesign{ --green:var(--dp-accent); --lime:var(--dp-accent-2); } /* --------------------------------------------------------- DASHBOARD SVG / ICON ACCENTS --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard svg.theme-accent, .shell:not(.player-shell) .owner-dashboard-redesign svg.theme-accent{ color:var(--dp-accent) !important; stroke:currentColor !important; } /* --------------------------------------------------------- FALLBACK FOR OLD HARD-CODED SUCCESS-LIKE DECORATIVE TEXT ONLY INSIDE OWNER DASHBOARD --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .accent, .shell:not(.player-shell) .owner-dashboard .highlight, .shell:not(.player-shell) .owner-dashboard .metric-value, .shell:not(.player-shell) .owner-dashboard .stat-value, .shell:not(.player-shell) .owner-dashboard-redesign .accent, .shell:not(.player-shell) .owner-dashboard-redesign .highlight, .shell:not(.player-shell) .owner-dashboard-redesign .metric-value, .shell:not(.player-shell) .owner-dashboard-redesign .stat-value{ color:var(--dp-accent-text) !important; } /* ========================================================= DEWPOINT DASHBOARD BOOKING DEMOGRAPHICS + TODAY AT A GLANCE FINAL THEME OVERRIDES ========================================================= */ /* --------------------------------------------------------- 1) BOOKING DEMOGRAPHICS --------------------------------------------------------- */ /* Card scope */ .shell:not(.player-shell) .owner-dashboard .booking-demographics, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics, .shell:not(.player-shell) .owner-dashboard .demographics-card, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card{ --green: var(--dp-accent) !important; --lime: var(--dp-accent-2) !important; } /* Donut / ring */ .shell:not(.player-shell) .owner-dashboard .booking-demographics .donut, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .donut, .shell:not(.player-shell) .owner-dashboard .demographics-card .donut, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card .donut, .shell:not(.player-shell) .owner-dashboard .booking-demographics [class*="donut"], .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics [class*="donut"], .shell:not(.player-shell) .owner-dashboard .booking-demographics [class*="ring"], .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics [class*="ring"]{ background: conic-gradient( var(--dp-accent) 0deg, var(--dp-accent) var(--donut-angle, 0deg), color-mix(in srgb, var(--dp-accent) 18%, white) var(--donut-angle, 0deg), color-mix(in srgb, var(--dp-accent) 18%, white) 360deg ) !important; } /* If empty-state ring still appears pale green, force a soft theme ring */ .shell:not(.player-shell) .owner-dashboard .booking-demographics .donut:before, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .donut:before, .shell:not(.player-shell) .owner-dashboard .demographics-card .donut:before, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card .donut:before{ background:#fff !important; } /* Donut center % text */ .shell:not(.player-shell) .owner-dashboard .booking-demographics .donut b, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .donut b, .shell:not(.player-shell) .owner-dashboard .booking-demographics .donut strong, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .donut strong, .shell:not(.player-shell) .owner-dashboard .booking-demographics .donut .value, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .donut .value, .shell:not(.player-shell) .owner-dashboard .demographics-card .donut b, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card .donut b{ color:var(--dp-accent-text) !important; } /* Legend dots */ .shell:not(.player-shell) .owner-dashboard .booking-demographics i, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics i, .shell:not(.player-shell) .owner-dashboard .booking-demographics .dot, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .dot, .shell:not(.player-shell) .owner-dashboard .booking-demographics .legend-dot, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .legend-dot, .shell:not(.player-shell) .owner-dashboard .demographics-card i, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card i{ background:var(--dp-accent) !important; color:var(--dp-accent) !important; } /* Secondary legend dot (new players) */ .shell:not(.player-shell) .owner-dashboard .booking-demographics .new-players i, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .new-players i, .shell:not(.player-shell) .owner-dashboard .booking-demographics .new-players .dot, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .new-players .dot, .shell:not(.player-shell) .owner-dashboard .booking-demographics .legend-item:last-child i, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .legend-item:last-child i{ background:color-mix(in srgb, var(--dp-accent) 25%, white) !important; color:color-mix(in srgb, var(--dp-accent) 25%, white) !important; } /* Small values / counts inside demographics */ .shell:not(.player-shell) .owner-dashboard .booking-demographics .count, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .count, .shell:not(.player-shell) .owner-dashboard .booking-demographics .metric-value, .shell:not(.player-shell) .owner-dashboard-redesign .booking-demographics .metric-value, .shell:not(.player-shell) .owner-dashboard .demographics-card .count, .shell:not(.player-shell) .owner-dashboard-redesign .demographics-card .count{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- 2) TODAY AT A GLANCE --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .today-at-a-glance, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance, .shell:not(.player-shell) .owner-dashboard .today-glance, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance{ --green: var(--dp-accent) !important; --lime: var(--dp-accent-2) !important; } /* Icon boxes */ .shell:not(.player-shell) .owner-dashboard .today-at-a-glance article > span, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance article > span, .shell:not(.player-shell) .owner-dashboard .today-glance article > span, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance article > span, .shell:not(.player-shell) .owner-dashboard .today-at-a-glance .icon, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance .icon, .shell:not(.player-shell) .owner-dashboard .today-glance .icon, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance .icon, .shell:not(.player-shell) .owner-dashboard .summary-card > span, .shell:not(.player-shell) .owner-dashboard-redesign .summary-card > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; border:1px solid color-mix(in srgb, var(--dp-accent) 18%, white) !important; } /* Numbers and values */ .shell:not(.player-shell) .owner-dashboard .today-at-a-glance b, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance b, .shell:not(.player-shell) .owner-dashboard .today-at-a-glance strong, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance strong, .shell:not(.player-shell) .owner-dashboard .today-glance b, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance b, .shell:not(.player-shell) .owner-dashboard .today-glance strong, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance strong{ color:var(--dp-accent-text) !important; } /* If any mini-icons are SVGs */ .shell:not(.player-shell) .owner-dashboard .today-at-a-glance svg, .shell:not(.player-shell) .owner-dashboard-redesign .today-at-a-glance svg, .shell:not(.player-shell) .owner-dashboard .today-glance svg, .shell:not(.player-shell) .owner-dashboard-redesign .today-glance svg{ color:var(--dp-accent-text) !important; stroke:currentColor !important; fill:none !important; } /* --------------------------------------------------------- 3) REVENUE SNAPSHOT VALUES --------------------------------------------------------- */ .shell:not(.player-shell) .owner-dashboard .revenue-snapshot .value, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot .value, .shell:not(.player-shell) .owner-dashboard .revenue-snapshot strong, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot strong, .shell:not(.player-shell) .owner-dashboard .revenue-snapshot b, .shell:not(.player-shell) .owner-dashboard-redesign .revenue-snapshot b{ color:var(--dp-accent-text) !important; } /* ========================================================= DEWPOINT OWNER DASHBOARD V3 EXACT THEME SELECTOR OVERRIDES ========================================================= */ /* --------------------------------------------------------- WELCOME / VENUE AVATAR --------------------------------------------------------- */ .owner-dashboard-v3 .od3-venue-avatar{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; border-color:var(--dp-theme-border) !important; } /* --------------------------------------------------------- VENUE STATUS --------------------------------------------------------- */ .owner-dashboard-v3 .od3-venue-status > span, .owner-dashboard-v3 .od3-venue-status > b{ color:var(--dp-accent-text) !important; } .owner-dashboard-v3 .od3-venue-status > span > i{ background:var(--dp-accent) !important; } /* --------------------------------------------------------- KPI — FIRST RESERVATION CARD --------------------------------------------------------- */ .owner-dashboard-v3 .od3-kpis i.green{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Keep Blue / Orange / Purple KPI cards distinct. Only the old Pickle Mania green KPI follows theme. */ /* ========================================================= BOOKING DEMOGRAPHICS ========================================================= */ /* Ring: --od3-returning already contains percentage, e.g. 0%, 25%, 75%. */ .owner-dashboard-v3 .od3-donut{ background: conic-gradient( var(--dp-accent) 0 var(--od3-returning), color-mix( in srgb, var(--dp-accent) 20%, white ) var(--od3-returning) 100% ) !important; } /* Percentage in center */ .owner-dashboard-v3 .od3-donut > strong{ color:var(--dp-accent-text) !important; } /* Returning Players dot */ .owner-dashboard-v3 .od3-demo-legend i.returning{ background:var(--dp-accent) !important; } /* New Players dot */ .owner-dashboard-v3 .od3-demo-legend i.new{ background: color-mix( in srgb, var(--dp-accent) 24%, white ) !important; } /* --------------------------------------------------------- POPULAR HOURS --------------------------------------------------------- */ .owner-dashboard-v3 .od3-bar-list > div > span > i{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } .owner-dashboard-v3 .od3-bar-list > div > strong{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- COURT PERFORMANCE --------------------------------------------------------- */ .owner-dashboard-v3 .od3-performance > div > span > i{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } .owner-dashboard-v3 .od3-performance > div > strong{ color:var(--dp-accent-text) !important; } /* ========================================================= TODAY AT A GLANCE ========================================================= */ /* Icon squares */ .owner-dashboard-v3 .od3-glance > span > i{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; border-color:var(--dp-theme-border) !important; } /* Keep the actual numbers dark for readability. Only icons become the selected theme color. */ .owner-dashboard-v3 .od3-glance > span > label > b{ color:#111827 !important; } /* ========================================================= REVENUE SNAPSHOT ========================================================= */ .owner-dashboard-v3 .od3-revenue > div > span > b{ color:var(--dp-accent-text) !important; } /* Pending remains orange/red because it represents a different operational state. */ .owner-dashboard-v3 .od3-revenue > footer > b{ /* preserve warning/status color */ } /* --------------------------------------------------------- SECTION OVERLINES Optional subtle theme branding --------------------------------------------------------- */ .owner-dashboard-v3 .od3-over{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- THEME TRANSITIONS Makes switching colors feel smoother --------------------------------------------------------- */ .owner-dashboard-v3 .od3-venue-avatar, .owner-dashboard-v3 .od3-donut, .owner-dashboard-v3 .od3-demo-legend i, .owner-dashboard-v3 .od3-glance > span > i, .owner-dashboard-v3 .od3-performance i, .owner-dashboard-v3 .od3-bar-list i, .owner-dashboard-v3 .od3-revenue b{ transition: color .18s ease, background .18s ease, border-color .18s ease; } /* ========================================================= DEWPOINT OWNER PROFILE / COURT PAGE EXACT SELECTED-THEME OVERRIDES ========================================================= */ /* ========================================================= LEFT PROFILE CARD ========================================================= */ .owner-profile-grid .owner-profile-photo-card .profile-avatar{ color:var(--dp-accent-text) !important; background: linear-gradient( 135deg, var(--dp-theme-soft), color-mix(in srgb,var(--dp-accent) 16%,white) ) !important; } /* Verified Court Owner */ .owner-profile-grid .owner-profile-photo-card > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Choose Photo */ .owner-profile-grid .profile-photo-actions label{ color:var(--dp-accent-text) !important; background:#fff !important; border-color:var(--dp-accent) !important; } /* Save Profile Photo */ .owner-profile-grid .profile-photo-actions button{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } /* Successful photo message */ .owner-profile-grid .profile-photo-message{ color:var(--dp-accent-text) !important; } /* ========================================================= ACCOUNT DETAILS ========================================================= */ .owner-profile-grid .owner-account-card .title small, .owner-profile-grid .owner-account-card .title > small{ color:var(--dp-accent-text) !important; } /* ========================================================= COURT INFO HEADER ========================================================= */ .owner-profile-grid .owner-court-info-panel .owner-venue-head{ background: linear-gradient( 90deg, var(--dp-theme-faint), #fff ) !important; border-color:var(--dp-theme-border) !important; } /* COURT INFO label */ .owner-profile-grid .owner-venue-head > div:first-child > small{ color:var(--dp-accent-text) !important; } /* Court name */ .owner-profile-grid .owner-venue-head h3{ color:#111827 !important; } /* ========================================================= LIVE BADGE + TOGGLE ========================================================= */ .owner-profile-grid .venue-live-control .venue-status.live{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Coming Soon can remain neutral */ .owner-profile-grid .venue-live-control .venue-status.coming{ color:#64748b !important; background:#f1f5f9 !important; } /* Toggle track */ .owner-profile-grid .venue-live-switch.on{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* Toggle knob remains white */ .owner-profile-grid .venue-live-switch i{ background:#fff !important; } /* ========================================================= COURT INFORMATION SECTION ========================================================= */ /* COURT INFORMATION overline */ .owner-profile-grid .court-owner-profile-editor .title small, .owner-profile-grid .court-owner-profile-editor .title > small{ color:var(--dp-accent-text) !important; } /* ========================================================= COURT PHOTO PLACEHOLDERS ========================================================= */ .owner-profile-grid .court-photo-preview{ background: linear-gradient( 135deg, var(--dp-theme-faint), color-mix(in srgb,var(--dp-accent) 10%,white) ) !important; } /* Placeholder text */ .owner-profile-grid .court-photo-preview span{ color:var(--dp-accent-text) !important; } /* Upload / Change Photo */ .owner-profile-grid .court-photo-button{ color:var(--dp-accent-text) !important; border-color:var(--dp-accent) !important; background:#fff !important; } .owner-profile-grid .court-photo-button:hover{ background:var(--dp-theme-faint) !important; } /* Remove photo remains red because destructive */ .owner-profile-grid .court-photo-remove{ color:#b91c1c !important; } /* ========================================================= FORM INPUTS ========================================================= */ .owner-profile-grid .court-profile-info-form input, .owner-profile-grid .court-profile-info-form textarea, .owner-profile-grid .owner-profile-settings input, .owner-profile-grid .owner-profile-settings select{ border-color:#dbe3e8; } /* Focus */ .owner-profile-grid .court-profile-info-form input:focus, .owner-profile-grid .court-profile-info-form textarea:focus, .owner-profile-grid .owner-profile-settings input:focus, .owner-profile-grid .owner-profile-settings select:focus{ border-color:var(--dp-accent) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 12%, transparent ) !important; outline:none !important; } /* ========================================================= OPERATING HOURS ========================================================= */ .owner-profile-grid .court-hours-preview{ background: linear-gradient( 90deg, var(--dp-theme-faint), color-mix(in srgb,var(--dp-accent) 5%,white) ) !important; border-color:var(--dp-theme-border) !important; } /* OPERATING HOURS label */ .owner-profile-grid .court-hours-preview > small{ color:var(--dp-accent-text) !important; } /* Time */ .owner-profile-grid .court-hours-preview > b{ color:#111827 !important; } /* ========================================================= SAVE COURT INFORMATION ========================================================= */ .owner-profile-grid .court-profile-info-form > button.primary{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } /* ========================================================= CONFIGURATION PAGE SUPPORT ========================================================= */ /* Active operating days */ .owner-profile-grid .day-picker button.active{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } /* Add Court */ .owner-profile-grid .add-court-button{ color:var(--dp-accent-text) !important; background:var(--dp-theme-faint) !important; border-color:var(--dp-accent) !important; } /* Save venue setup already uses primary, but reinforce */ .owner-profile-grid .owner-save-setup{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* ========================================================= SMOOTH THEME SWITCH ========================================================= */ .owner-profile-grid .profile-avatar, .owner-profile-grid .owner-profile-photo-card > span, .owner-profile-grid .profile-photo-actions label, .owner-profile-grid .profile-photo-actions button, .owner-profile-grid .owner-venue-head, .owner-profile-grid .venue-status, .owner-profile-grid .venue-live-switch, .owner-profile-grid .court-photo-preview, .owner-profile-grid .court-photo-button, .owner-profile-grid .court-hours-preview, .owner-profile-grid .day-picker button{ transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } /* ========================================================= DEWPOINT TEAM / STAFF PAGE VENUE ACCESS HERO THEME ========================================================= */ /* Main Venue Access hero */ .owner-team-page .booking-page-head{ background: linear-gradient( 115deg, var(--dp-sidebar), var(--dp-accent) ) !important; border:1px solid color-mix( in srgb, var(--dp-accent) 35%, transparent ) !important; box-shadow: 0 14px 32px color-mix( in srgb, var(--dp-accent) 12%, transparent ) !important; } /* VENUE ACCESS overline */ .owner-team-page .booking-page-head > div > small{ color: color-mix( in srgb, var(--dp-accent-2) 35%, white ) !important; } /* Team / Staff Accounts title */ .owner-team-page .booking-page-head h2{ color:#fff !important; } /* Subtitle */ .owner-team-page .booking-page-head p{ color:rgba(255,255,255,.82) !important; } /* + Add Team Member */ .owner-team-page .booking-page-head > button{ color:var(--dp-accent-text) !important; background:#fff !important; border: 1px solid rgba(255,255,255,.65) !important; box-shadow: 0 7px 18px rgba(15,23,42,.12) !important; } /* Button hover */ .owner-team-page .booking-page-head > button:hover{ background:var(--dp-theme-soft) !important; border-color:#fff !important; } /* ========================================================= SMALL TEAM PAGE ACCENTS ========================================================= */ /* KPI helper text */ .owner-team-page .owner-team-kpis article em{ color:var(--dp-accent-text) !important; } /* Selected/emphasized KPI border if one is highlighted */ .owner-team-page .owner-team-kpis article:hover{ border-color:var(--dp-theme-border) !important; } /* Team Directory overline */ .owner-team-page .title small{ color:var(--dp-accent-text) !important; } /* Empty-state icon */ .owner-team-page .team-empty > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Add First Team Member */ .owner-team-page .team-empty > button.primary{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; color:#fff !important; } /* Create/Save account */ .owner-team-page .team-member-form > button.primary{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; color:#fff !important; } /* Form focus */ .owner-team-page .team-member-form input:focus, .owner-team-page .team-member-form select:focus{ border-color:var(--dp-accent) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 12%, transparent ) !important; outline:none !important; } /* Smooth theme switching */ .owner-team-page .booking-page-head, .owner-team-page .booking-page-head > button, .owner-team-page .team-empty > span, .owner-team-page .team-empty > button{ transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* ========================================================= DEWPOINT COURT PAGE EXACT SELECTED-THEME OVERRIDES ========================================================= */ /* --------------------------------------------------------- LIVE COURT STATUS HEADER --------------------------------------------------------- */ .owner-live-court-status .staff-live-heading h2 span{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- AVAILABLE SUMMARY CARD --------------------------------------------------------- */ .owner-live-court-status .staff-status-summary article.available > i{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } .owner-live-court-status .staff-status-summary article.available b, .owner-live-court-status .staff-status-summary article.available small{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- AVAILABLE COURT CARDS --------------------------------------------------------- */ /* Court drawing base */ .owner-live-court-status .staff-court-card.available .mini-court{ background: color-mix( in srgb, var(--dp-accent) 55%, white ) !important; border-color:var(--dp-accent) !important; } /* Court outline pieces */ .owner-live-court-status .staff-court-card.available .mini-court::before, .owner-live-court-status .staff-court-card.available .mini-court::after, .owner-live-court-status .staff-court-card.available .mini-court .court-center-line, .owner-live-court-status .staff-court-card.available .mini-court .court-net, .owner-live-court-status .staff-court-card.available .mini-court .court-left-box, .owner-live-court-status .staff-court-card.available .mini-court .court-right-box{ border-color:var(--dp-accent) !important; } /* Available Now badge */ .owner-live-court-status .staff-court-card.available > strong{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* No upcoming booking / Next booking */ .owner-live-court-status .staff-court-card.available .court-detail{ color:var(--dp-accent-text) !important; } /* --------------------------------------------------------- KEEP SEMANTIC STATES --------------------------------------------------------- */ /* In Use stays blue */ .owner-live-court-status .staff-status-summary article.busy > i, .owner-live-court-status .staff-court-card.busy > strong{ /* preserve existing blue styling */ } /* On Hold stays orange */ .owner-live-court-status .staff-status-summary article.hold > i, .owner-live-court-status .staff-court-card.hold > strong{ /* preserve existing orange styling */ } /* Offline stays gray */ .owner-live-court-status .staff-status-summary article.offline > i, .owner-live-court-status .staff-court-card.offline > strong{ /* preserve existing gray styling */ } /* --------------------------------------------------------- SMOOTH THEME SWITCH --------------------------------------------------------- */ .owner-live-court-status .staff-live-heading h2 span, .owner-live-court-status .staff-status-summary article.available > i, .owner-live-court-status .staff-court-card.available .mini-court, .owner-live-court-status .staff-court-card.available > strong, .owner-live-court-status .staff-court-card.available .court-detail{ transition: color .18s ease, background .18s ease, border-color .18s ease; } /* ========================================================= DEWPOINT PAYMENT PAGE EXACT SELECTED-THEME OVERRIDES ========================================================= */ /* ========================================================= VENUE PAYMENTS HERO ========================================================= */ .payment-settings-page .booking-page-head{ background: linear-gradient( 115deg, var(--dp-sidebar), var(--dp-accent) ) !important; border-color: color-mix( in srgb, var(--dp-accent) 35%, transparent ) !important; box-shadow: 0 14px 32px color-mix( in srgb, var(--dp-accent) 12%, transparent ) !important; } /* VENUE PAYMENTS */ .payment-settings-page .booking-page-head small{ color: color-mix( in srgb, var(--dp-accent-2) 35%, white ) !important; } /* Payment Methods */ .payment-settings-page .booking-page-head h2{ color:#fff !important; } /* Hero description */ .payment-settings-page .booking-page-head p{ color:rgba(255,255,255,.84) !important; } /* ========================================================= PAYMENT METHOD CARDS ========================================================= */ .payment-settings-page .payment-setting-card{ background:#fff !important; border: 1px solid #dbe3e8 !important; transition: border-color .18s ease, box-shadow .18s ease; } /* Soft hover */ .payment-settings-page .payment-setting-card:hover{ border-color:var(--dp-theme-border) !important; box-shadow: 0 8px 24px color-mix( in srgb, var(--dp-accent) 7%, transparent ) !important; } /* ========================================================= PAYMENT TOGGLES ========================================================= */ /* OFF */ .payment-settings-page .setting-toggle button{ background:#cbd5d1 !important; } /* ON */ .payment-settings-page .setting-toggle button.on{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* Toggle knob */ .payment-settings-page .setting-toggle button i{ background:#fff !important; } /* Disabled toggle */ .payment-settings-page .setting-toggle button:disabled{ opacity:.55; } /* ========================================================= FORM INPUTS ========================================================= */ .payment-settings-page .payment-setting-card input:not([type="file"]){ border-color:#ccd8d5 !important; background:#fff !important; } /* Focus */ .payment-settings-page .payment-setting-card input:not([type="file"]):focus{ border-color:var(--dp-accent) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 12%, transparent ) !important; outline:none !important; } /* ========================================================= QR UPLOAD ========================================================= */ .payment-settings-page .qr-upload input[type="file"]{ border: 2px dashed var(--dp-theme-border) !important; background: var(--dp-theme-faint) !important; color:#475569 !important; } /* Hover */ .payment-settings-page .qr-upload input[type="file"]:hover{ border-color:var(--dp-accent) !important; background:var(--dp-theme-soft) !important; } /* QR image */ .payment-settings-page .qr-upload img{ border: 2px solid var(--dp-theme-border) !important; border-radius:12px; } /* ========================================================= CARD HELPER TEXT ========================================================= */ .payment-settings-page .payment-setting-card > small{ color:var(--dp-accent-text) !important; } /* ========================================================= GATEWAY CARD ========================================================= */ .payment-settings-page .gateway-card > b{ color:var(--dp-accent-text) !important; } /* ========================================================= SAVE PAYMENT METHODS ========================================================= */ .payment-settings-page .save-payment-methods{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; box-shadow: 0 8px 20px color-mix( in srgb, var(--dp-accent) 18%, transparent ) !important; } /* Hover */ .payment-settings-page .save-payment-methods:hover:not(:disabled){ filter:brightness(1.05); transform:translateY(-1px); } /* Disabled */ .payment-settings-page .save-payment-methods:disabled{ opacity:.65; } /* ========================================================= SMOOTH THEME SWITCH ========================================================= */ .payment-settings-page .booking-page-head, .payment-settings-page .payment-setting-card, .payment-settings-page .setting-toggle button, .payment-settings-page .qr-upload input[type="file"], .payment-settings-page .save-payment-methods{ transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* ========================================================= DEWPOINT PAYMENT INPUT FOCUS REMOVE OLD PICKLE MANIA GREEN GLOW ========================================================= */ .payment-settings-page .payment-setting-card input:not([type="file"]):focus, .payment-settings-page .payment-setting-card input:not([type="file"]):focus-visible{ border-color:var(--dp-accent) !important; outline:none !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 18%, transparent ) !important; } /* QR file box focus */ .payment-settings-page .qr-upload input[type="file"]:focus, .payment-settings-page .qr-upload input[type="file"]:focus-visible{ border-color:var(--dp-accent) !important; outline:none !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 16%, transparent ) !important; } /* Browser autofill / active edge cleanup */ .payment-settings-page .payment-setting-card input{ caret-color:var(--dp-accent-text) !important; } /* Prevent inherited green outline */ .payment-settings-page input:focus, .payment-settings-page input:focus-visible{ outline-color:var(--dp-accent) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE EXACT INPUT FOCUS OVERRIDE Replaces hard-coded Pickle Mania green glow ========================================================= */ .payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]):focus, .payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]):focus-visible{ border-color:var(--dp-accent) !important; outline:none !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 18%, transparent ), inset 0 1px 2px rgba(15,23,42,.03) !important; } /* Hover also follows selected theme */ .payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]):hover{ border-color: color-mix( in srgb, var(--dp-accent) 55%, #cbd5e1 ) !important; } /* Caret follows theme */ .payment-settings-page .payment-setting-card label input:not([type="checkbox"]):not([type="file"]){ caret-color:var(--dp-accent) !important; } /* ========================================================= DEWPOINT CONFIGURATION PAGE EXACT SELECTED-THEME OVERRIDES ========================================================= */ /* ========================================================= COURT CARDS ========================================================= */ .owner-courts-config .owner-court-price-card{ background:#fff !important; border-color:#dbe3e8 !important; } /* ON toggle */ .owner-courts-config .court-live-switch.on{ background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* Toggle knob stays white */ .owner-courts-config .court-live-switch i{ background:#fff !important; } /* ON text */ .owner-courts-config .court-live-control > span{ color:var(--dp-accent-text) !important; } /* ========================================================= SAVE NAME / SAVE RATE ========================================================= */ .owner-courts-config .owner-inline-name-form > button, .owner-courts-config .owner-inline-rate-form > button{ color:var(--dp-accent-text) !important; background:#fff !important; border-color:var(--dp-accent) !important; } /* Hover */ .owner-courts-config .owner-inline-name-form > button:hover:not(:disabled), .owner-courts-config .owner-inline-rate-form > button:hover:not(:disabled){ background:var(--dp-theme-soft) !important; } /* Peso symbol */ .owner-courts-config .owner-inline-rate-input > i{ color:var(--dp-accent-text) !important; } /* ========================================================= COURT NAME / RATE INPUT FOCUS ========================================================= */ .owner-courts-config .owner-inline-name-form input:focus, .owner-courts-config .owner-inline-name-form input:focus-visible, .owner-courts-config .owner-inline-rate-form input:focus, .owner-courts-config .owner-inline-rate-form input:focus-visible{ border-color:var(--dp-accent) !important; outline:none !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 16%, transparent ) !important; } /* ========================================================= ADD COURT ========================================================= */ .owner-courts-config .add-court-button, .owner-courts-config .add-court-wide{ color:var(--dp-accent-text) !important; background: var(--dp-theme-faint) !important; border-color:var(--dp-accent) !important; } .owner-courts-config .add-court-button:hover, .owner-courts-config .add-court-wide:hover{ background:var(--dp-theme-soft) !important; } /* ========================================================= PEAK / SPECIAL PRICING HEADING ========================================================= */ .owner-peak-pricing .owner-pricing-head small{ color:var(--dp-accent-text) !important; } /* ========================================================= PEAK PRICING CONTAINER ========================================================= */ .owner-peak-pricing .owner-peak-pricing-form{ border-color:var(--dp-theme-border) !important; } /* ========================================================= APPLY TO COURTS CHIPS ========================================================= */ /* Default */ .owner-peak-pricing .owner-court-chip-grid button{ color:#172033 !important; background:#fff !important; border-color:var(--dp-theme-border) !important; } /* Active */ .owner-peak-pricing .owner-court-chip-grid button.active{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; box-shadow: 0 5px 14px color-mix( in srgb, var(--dp-accent) 16%, transparent ) !important; } /* Check mark */ .owner-peak-pricing .owner-court-chip-grid button.active span{ color:#fff !important; } /* ========================================================= DAY CHIPS ========================================================= */ /* Default */ .owner-peak-pricing .owner-day-chip-grid button{ color:#172033 !important; background:#fff !important; border-color:var(--dp-theme-border) !important; } /* Active */ .owner-peak-pricing .owner-day-chip-grid button.active{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } /* ========================================================= PEAK PRICING INPUTS ========================================================= */ .owner-peak-pricing .owner-pricing-time-row input:focus, .owner-peak-pricing .owner-pricing-time-row input:focus-visible, .owner-peak-pricing .owner-pricing-rate input:focus, .owner-peak-pricing .owner-pricing-rate input:focus-visible{ border-color:var(--dp-accent) !important; outline:none !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--dp-accent) 16%, transparent ) !important; } /* Peso symbol */ .owner-peak-pricing .owner-pricing-rate i{ color:var(--dp-accent-text) !important; } /* ========================================================= ADD PRICING RULE ========================================================= */ .owner-peak-pricing .owner-add-pricing-rule{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; box-shadow: 0 7px 18px color-mix( in srgb, var(--dp-accent) 16%, transparent ) !important; } /* ========================================================= ACTIVE PRICING RULES ========================================================= */ .owner-peak-pricing .owner-pricing-rules-head > span{ color:var(--dp-accent-text) !important; background:var(--dp-theme-soft) !important; } /* Price amount */ .owner-peak-pricing .owner-pricing-rule-main > strong{ color:var(--dp-accent-text) !important; } /* Delete remains destructive red */ .owner-peak-pricing .owner-pricing-rule-foot > button{ color:#b91c1c !important; background:#fff1f2 !important; border-color:#fecdd3 !important; } /* ========================================================= VENUE SETUP SUPPORT ========================================================= */ .owner-profile-settings .day-picker button.active{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; border-color:var(--dp-accent) !important; } .owner-profile-settings .owner-save-setup{ color:#fff !important; background: linear-gradient( 90deg, var(--dp-accent), var(--dp-accent-2) ) !important; } /* ========================================================= SMOOTH THEME CHANGES ========================================================= */ .owner-courts-config .court-live-switch, .owner-courts-config .owner-inline-name-form > button, .owner-courts-config .owner-inline-rate-form > button, .owner-courts-config .add-court-wide, .owner-peak-pricing .owner-court-chip-grid button, .owner-peak-pricing .owner-day-chip-grid button, .owner-peak-pricing .owner-add-pricing-rule{ transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }