:root { --ink:#102d2b; --muted:#6e7b78; --line:#e4ebe7; --paper:#f7f9f6; --surface:#fff; --forest:#075942; --teal:#12a894; --lime:#b9e96c; --gold:#d8991e; --coral:#ef806a; --blue:#387aa3; --shadow:0 12px 35px rgba(23,53,47,.06); --radius:14px; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; font-size:14px; } button, select { font:inherit; } button { cursor:pointer; }
@media (max-width:900px) { .manage-page,.manage-table-wrap { min-width:0; max-width:100%; } .manage-table-wrap { overflow-x:auto; } }
.app-shell { display:flex; min-height:100vh; } .sidebar { width:248px; flex:0 0 248px; background:#06263d; color:#dfeae8; padding:28px 16px 20px; display:flex; flex-direction:column; } .brand { display:flex; align-items:center; gap:10px; font:700 24px 'Space Grotesk',sans-serif; letter-spacing:-1px; color:#fff; padding:0 12px; } .brand img { width:36px; height:36px; object-fit:contain; border-radius:10px; background:#fff; } .tagline { margin:26px 20px 34px; color:#e9aa37; line-height:1.45; font-weight:700; font-size:15px; } .tagline em { font-style:normal; } .branch-picker { border:1px solid rgba(255,255,255,.15); border-radius:9px; padding:11px 12px; margin:0 0 24px; display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; color:#fff; } .branch-picker .eyebrow { color:#87a5a1; font-size:9px; letter-spacing:1px; grid-column:1/-1; } .branch-picker span:last-child { grid-column:2; grid-row:2; } nav { display:grid; gap:5px; } .nav-item { border:0; background:transparent; color:#b7ceca; text-align:left; padding:11px 14px; border-radius:8px; display:flex; gap:13px; align-items:center; font-weight:500; } .nav-item:hover,.nav-item.active { color:#fff; background:#123f5e; } .nav-item.active { box-shadow:inset 3px 0 0 #b9e96c; } .nav-icon { width:18px; display:inline-grid; place-items:center; font-size:20px; color:#b9e96c; } .sidebar-bottom { margin-top:auto; display:grid; gap:4px; border-top:1px solid rgba(255,255,255,.12); padding-top:15px; }
.main-content { min-width:0; flex:1; padding:0 36px 24px; } .topbar { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .breadcrumbs { color:var(--muted); } .breadcrumbs span { margin:0 8px; color:#b1c0bc; } .top-actions { display:flex; align-items:center; gap:24px; } .icon-button { background:transparent; border:0; color:var(--ink); font-size:22px; position:relative; } .icon-button b { position:absolute; top:-4px; right:-6px; width:16px; height:16px; border-radius:50%; color:#fff; background:#e77c67; font:10px 'DM Sans'; display:grid; place-items:center; } .user { display:flex; align-items:center; gap:9px; } .user small { display:block; color:var(--muted); font-size:11px; margin-top:2px; } .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--forest); font-size:11px; font-weight:700; } .user>span:last-child { margin-left:4px; color:var(--muted); } .mobile-brand { display:none; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; padding:32px 0 24px; } .kicker { color:var(--forest); font-size:11px; font-weight:700; letter-spacing:1.5px; margin:0 0 9px; } h1,h2 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.5px; } h1 { font-size:34px; line-height:1; margin:0 0 10px; } .subhead,.card-header p { color:var(--muted); margin:0; } .heading-actions { display:flex; gap:10px; } .button { border:1px solid var(--line); border-radius:8px; padding:11px 15px; font-weight:700; } .button.secondary { background:var(--surface); color:var(--ink); } .button.primary { background:var(--forest); color:#fff; border-color:var(--forest); } .button.primary:hover { background:#0b7658; }
.mode-strip { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--line); margin-bottom:22px; } .mode-strip>span { font-size:10px; letter-spacing:1.3px; font-weight:700; color:var(--muted); margin-right:12px; } .mode { border:0; background:transparent; color:var(--muted); padding:10px 12px; border-bottom:2px solid transparent; } .mode.active { color:var(--forest); font-weight:700; border-color:var(--lime); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .metric-card,.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } .metric-card { padding:18px 16px; display:flex; gap:13px; min-width:0; } .metric-icon { flex:0 0 49px; height:49px; border-radius:13px; display:grid; place-items:center; font-size:27px; font-weight:700; } .metric-icon.green { color:var(--forest); background:#e7f4e9; } .metric-icon.teal { color:#079987; background:#e2f5f0; } .metric-icon.gold { color:#b77b09; background:#fff5df; } .metric-icon.blue { color:#327397; background:#e7f1f5; } .metric-card span { display:block; color:var(--muted); font-size:12px; margin:2px 0 5px; white-space:nowrap; } .metric-card strong { display:block; font:700 22px 'Space Grotesk'; white-space:nowrap; } .metric-card small { display:block; color:var(--muted); margin-top:6px; font-size:10px; white-space:nowrap; } .metric-card small b { color:#15925a; }
.dashboard-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; } .card { padding:20px; min-width:0; } .card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:15px; } .card-header h2 { margin:0 0 5px; font-size:17px; } .card-header p { font-size:12px; } select,.quiet-button { border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); padding:8px 10px; font-size:12px; } .quiet-button { border:0; padding:5px 0; color:var(--forest); font-weight:700; white-space:nowrap; } .legend { display:flex; gap:18px; color:var(--muted); font-size:11px; margin-bottom:8px; } .legend i { display:inline-block; width:15px; height:5px; border-radius:3px; margin-right:5px; vertical-align:middle; } .bar-key { background:#123956; } .line-key { background:#1a9a5c; } .chart { height:206px; display:flex; padding-top:6px; } .axis-labels { display:flex; flex-direction:column; justify-content:space-between; padding:0 8px 20px 0; color:#94a09d; font-size:10px; } .chart-area { position:relative; flex:1; display:flex; justify-content:space-around; align-items:stretch; padding:0 4px 21px; background:repeating-linear-gradient(to bottom, transparent 0, transparent 24.5%, #edf1ef 25%, transparent 25.5%); } .bar-col { width:11%; position:relative; display:flex; justify-content:flex-end; align-items:center; flex-direction:column; } .bar { width:29px; max-width:70%; background:#113650; border-radius:3px 3px 0 0; opacity:.97; z-index:1; } .bar-col small { position:absolute; bottom:-19px; font-size:10px; color:#7b8885; white-space:nowrap; } .dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#2ba766; border:2px solid #fff; z-index:2; } .trend-line { position:absolute; inset:8px 4% 28px; pointer-events:none; border-top:3px solid transparent; transform:skewY(-4deg) rotate(-1deg); clip-path:polygon(0 82%, 16% 57%, 32% 68%, 48% 45%, 64% 28%, 80% 34%, 100% 70%, 100% 73%, 80% 37%, 64% 31%, 48% 49%, 32% 72%, 16% 61%, 0 86%); background:#25a460; }
.heatmap { padding-top:5px; display:grid; gap:6px; } .heat-row { display:grid; grid-template-columns:32px repeat(8,1fr); gap:3px; align-items:center; } .heat-row>span { color:var(--muted); font-size:11px; } .heat { height:22px; border-radius:3px; background:#e9f0e9; } .heat.h1 { background:#e9f0e9; }.heat.h2 { background:#d0e4d0; }.heat.h3 { background:#a5c8a6; }.heat.h4 { background:#5d9e72; }.heat.h5 { background:#0d654d; } .heat-labels { display:flex; justify-content:space-between; padding:10px 1px 0 32px; color:var(--muted); font-size:10px; }
.court-card { grid-column:1/-1; } .court-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } .court-tile { border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:9px; padding:12px; min-height:102px; display:flex; flex-direction:column; gap:5px; } .court-tile.playing { border-top-color:var(--forest); }.court-tile.reserved { border-top-color:#e1b132; }.court-tile.maintenance { border-top-color:#8d9694; background:#fbfcfb; }.court-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; } .court-number { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:#fff; background:#102e45; font-weight:700; } .status-icon { color:var(--forest); font-size:20px; }.reserved .status-icon { color:#ba7d09; }.maintenance .status-icon { color:#7f8b88; } .court-tile strong { font-size:12px; color:var(--forest); }.reserved strong { color:#a87007; }.maintenance strong { color:#77817f; }.court-tile>span { color:var(--ink); font-size:12px; }.court-tile small { color:var(--muted); font-size:11px; }
.operations-card { grid-column:1/-1; padding-bottom:8px; } .table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; min-width:760px; } th { text-align:left; color:var(--muted); font-size:10px; letter-spacing:.5px; text-transform:uppercase; font-weight:700; padding:9px 8px; border-bottom:1px solid var(--line); } td { padding:11px 8px; border-bottom:1px solid #edf1ef; font-size:12px; white-space:nowrap; } td.activity { color:var(--forest); font-weight:700; }.activity.reserved { color:#ad770d; }.activity.available { color:#138358; }.activity.maintenance { color:#7c8783; }.pill { border-radius:5px; padding:5px 8px; background:#e4f0e1; color:#33774c; font-size:10px; font-weight:700; }.status-cell:nth-last-child(2) .pill { background:#f9edd7; color:#976b15; } footer { display:flex; gap:25px; color:#87938f; padding:20px 4px 0; font-size:10px; }
body[data-mode="live"] { --paper:#07141c; --surface:#101e25; --ink:#f5f8f6; --muted:#9fb0ac; --line:#28404a; --shadow:none; } body[data-mode="live"] .sidebar { background:#050d12; } body[data-mode="live"] .metric-card,body[data-mode="live"] .card,body[data-mode="live"] .topbar { border-color:#28404a; } body[data-mode="live"] .button.secondary,body[data-mode="live"] select,body[data-mode="live"] .quiet-button { background:#101e25; color:#fff; border-color:#28404a; } body[data-mode="live"] .bar { background:#a8e83b; } body[data-mode="live"] .court-tile { background:#0d1b22; }
body[data-mode="owner"] { --paper:#fbfaf7; --forest:#184f42; } body[data-mode="owner"] .metrics { gap:18px; } body[data-mode="owner"] .metric-card { padding:22px; } body[data-mode="owner"] .card { box-shadow:0 10px 28px rgba(44,55,45,.045); }
@media (max-width:1100px) { .sidebar { width:205px; flex-basis:205px; } .main-content { padding:0 22px 20px; } .metrics { grid-template-columns:repeat(2,1fr); } .court-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .sidebar { width:64px; flex-basis:64px; padding:18px 8px; } .brand span,.tagline,.branch-picker,.nav-item:not(.active) { display:none; } .brand { padding:0 6px; }.brand img{width:40px;height:40px}.nav-item { justify-content:center; padding:12px 5px; width:48px; overflow:hidden; font-size:0; }.nav-icon { width:auto; flex:0 0 auto; font-size:20px; }.sidebar-bottom .nav-item { display:flex; }.main-content { padding:0 15px 18px; }.topbar { height:62px; }.breadcrumbs { display:none; }.mobile-brand { display:block; font:700 20px 'Space Grotesk'; }.top-actions { gap:10px; }.user>span:not(.avatar) { display:none; }.page-heading { display:block; padding:24px 0 18px; }.page-heading h1 { font-size:28px; }.heading-actions { margin-top:18px; }.button { flex:1; }.mode-strip { overflow:auto; white-space:nowrap; }.mode-strip>span { display:none; }.metrics { grid-template-columns:1fr 1fr; gap:9px; }.metric-card { padding:13px 10px; gap:8px; }.metric-icon { flex-basis:36px;height:36px;font-size:21px;border-radius:9px; }.metric-card strong { font-size:17px; }.metric-card span,.metric-card small { font-size:9px; }.dashboard-grid { grid-template-columns:1fr; }.court-card,.operations-card { grid-column:auto; }.court-grid { grid-template-columns:repeat(2,1fr); } .card { padding:15px; } footer { flex-direction:column; gap:5px; } }