:root { --bg: #F5F6FA; --card: #FFFFFF; --text: #111827; --text-muted: #6B7280; --border: #EEF0F4; --blue: #3B82F6; --blue-light: #BFDBFE; --purple: #A78BFA; --amber: #F5B942; --green: #22C55E; --red: #EF4444; --pink: #EC4899; --shadow: 0 4px 20px rgba(17, 24, 39, 0.05); --radius-card: 16px; /* consistent card radius, 12-16px */ --radius-md: 12px; --sidebar-w: 240px; --sidebar-w-collapsed: 76px; } body.dark-theme { --bg: #0F1117; --card: #171A23; --text: #F3F4F6; --text-muted: #9CA3AF; --border: #262A36; --shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { height: 100%; } /* Set on by default on every protected page; auth.js's requireSession() removes it once a real Supabase session is confirmed (or the page is already navigating away to login.html) — this is what stands in for the old inline-script "redirect before paint" trick, which can't work anymore now that the check is an async network/local session read instead of a synchronous localStorage read. */ html.auth-checking body { visibility: hidden; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); transition: background .25s ease, color .25s ease; } .app { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border); padding: 28px 20px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 20; transition: width .2s ease, padding .2s ease; } .sidebar-collapse-toggle { position: absolute; top: 26px; right: -14px; width: 28px; height: 28px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; box-shadow: 0 3px 10px rgba(59, 130, 246, .4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 25; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; } .sidebar-collapse-toggle:hover { transform: scale(1.18) rotate(-10deg); box-shadow: 0 5px 16px rgba(59, 130, 246, .55); } .sidebar-collapse-toggle:active { transform: scale(.8); } .sidebar-collapse-toggle svg { width: 13px; height: 13px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } .sidebar.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); } /* Little burst ring on click, plus a one-time wiggle hint (JS-triggered via the .hint class) so people notice it's clickable without nagging. */ .sidebar-collapse-toggle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); opacity: 0; pointer-events: none; } .sidebar-collapse-toggle.pop { animation: toggle-pop .45s cubic-bezier(.34, 1.56, .64, 1); } .sidebar-collapse-toggle.pop::after { animation: toggle-ring .5s ease-out; } .sidebar-collapse-toggle.hint { animation: toggle-wiggle 1.5s ease-in-out 2; } @keyframes toggle-pop { 0% { transform: scale(1); } 40% { transform: scale(.78); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes toggle-ring { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2); opacity: 0; } } @keyframes toggle-wiggle { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } } @media (prefers-reduced-motion: reduce) { .sidebar-collapse-toggle, .sidebar-collapse-toggle svg, .sidebar-collapse-toggle::after { animation: none !important; transition-duration: .01ms !important; } } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; flex-shrink: 0; } .logo-text, .nav-label { transition: opacity .15s ease; white-space: nowrap; } .sidebar.collapsed .logo { justify-content: center; } .sidebar.collapsed .logo-text, .sidebar.collapsed .nav-label { display: none; } .sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; } .logo-house { flex-shrink: 0; color: var(--blue); } .nav { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } /* Groups the settings/sign-out links and the support card as one unit pinned to the bottom, so there's a single margin-top:auto boundary instead of two competing ones. */ .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; } .nav-bottom { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1.2; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nav-item:hover { background: var(--bg); color: var(--text); } .nav-item.active { background: var(--blue-light); color: #1D4ED8; } body.dark-theme .nav-item.active { background: rgba(59, 130, 246, 0.18); color: #93C5FD; } .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } /* ---------- Main ---------- */ .main { flex: 1; min-width: 0; padding: 28px 32px 60px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .topbar-title h1 { font-size: 26px; font-weight: 700; margin: 0; } .welcome { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); } .topbar-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .theme-toggle { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 6px 10px; cursor: pointer; font-size: 12px; user-select: none; } .theme-toggle .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--blue); display: inline-block; transition: transform .2s ease; } body.dark-theme .theme-toggle .dot { transform: translateX(2px); } .user-chip { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; white-space: nowrap; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* ---------- Cards (generic) ---------- */ .card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 22px; min-width: 0; min-height: 0; transition: transform .25s ease, box-shadow .25s ease; } .card:focus-within, .card.touch-active { transform: translateY(-6px); box-shadow: 0 22px 45px -12px rgba(59, 130, 246, .35), 0 10px 20px rgba(17, 24, 39, .08); } body.dark-theme .card:focus-within, body.dark-theme .card.touch-active { box-shadow: 0 22px 45px -10px rgba(59, 130, 246, .45), 0 10px 24px rgba(0, 0, 0, .5); } /* :hover scoped to real pointer devices — touch already gets the same lift via .touch-active (toggled in script.js on touchstart/touchend), and touch-simulated :hover can get stuck "on" after lifting a finger. */ @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px -12px rgba(59, 130, 246, .35), 0 10px 20px rgba(17, 24, 39, .08); } body.dark-theme .card:hover { box-shadow: 0 22px 45px -10px rgba(59, 130, 246, .45), 0 10px 24px rgba(0, 0, 0, .5); } } /* ---------- Summary (Net Income / Balance / Expenditures) ---------- */ .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .summary-card { border: 1px solid var(--border); } .summary-label { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .summary-value { font-size: 28px; font-weight: 800; margin-bottom: 8px; overflow-wrap: break-word; } .delta { font-size: 12.5px; font-weight: 600; } .delta.up { color: var(--green); } .delta.down { color: var(--red); } .delta .muted { color: var(--text-muted); font-weight: 400; } /* ---------- Stats grid ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .stat-card { grid-column: span 1; min-width: 0; } .donut-card { grid-column: span 2; } .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .stat-label { font-size: 13px; color: var(--text-muted); font-weight: 600; } .stat-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .stat-value { font-size: 24px; font-weight: 800; margin-bottom: 6px; overflow-wrap: break-word; } /* ---------- Donut cards (center-labeled total + legend) ---------- */ .donut-wrap { position: relative; display: flex; justify-content: center; align-items: center; margin: 6px auto 14px; width: 148px; height: 148px; } .donut-wrap canvas { width: 148px; height: 148px; display: block; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; max-width: 84px; } .donut-total { display: block; font-size: 14px; font-weight: 800; line-height: 1.15; white-space: nowrap; } .donut-sub { display: block; font-size: 10.5px; color: var(--text-muted); font-weight: 500; margin-top: 3px; } .donut-footnote { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); text-align: center; } .legend { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; } .legend li { display: flex; align-items: center; gap: 6px; } .legend li b { margin-left: auto; color: var(--text); font-weight: 700; } .legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } /* ---------- Charts grid ---------- */ .charts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "sales sales ring1 ring2" "comm1 comm1 comm2 comm2" "table table line line"; gap: 20px; } .area-sales { grid-area: sales; } .area-ring1 { grid-area: ring1; } .area-ring2 { grid-area: ring2; } .area-comm1 { grid-area: comm1; } .area-comm2 { grid-area: comm2; } .area-table { grid-area: table; } .area-line { grid-area: line; } .chart-card { display: flex; flex-direction: column; min-width: 0; } .chart-wrap { position: relative; width: 100%; height: 220px; } .chart-wrap canvas { width: 100%; height: 100%; display: block; } #lineChart { cursor: crosshair; } .chart-tooltip { position: absolute; top: 0; left: 0; transform: translate(-50%, -125%); background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 5; } .chart-tooltip.show { opacity: 1; } .chart-tooltip .tt-label { display: block; color: var(--text-muted); font-weight: 500; font-size: 11px; } .chart-tooltip .tt-value { display: block; font-weight: 700; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; } .card-header h2 { font-size: 15px; font-weight: 700; margin: 0; } .toggle-group, .month-tabs { display: flex; align-items: center; background: var(--bg); border-radius: 20px; padding: 3px; gap: 2px; } .toggle-btn { border: none; background: transparent; padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .toggle-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(17, 24, 39, .12); } .refresh { color: var(--text-muted); cursor: pointer; } /* simple payout cards (Paid to Host / Unpaid to Host) */ .simple-card { display: flex; flex-direction: column; min-width: 0; } .simple-top { display: flex; align-items: center; margin-bottom: 14px; } .ring-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ring-label { font-size: 13px; color: var(--text-muted); font-weight: 600; } .ring-value { font-size: 19px; font-weight: 800; margin: 4px 0; overflow-wrap: break-word; } .muted { color: var(--text-muted); } .small { font-size: 12px; } /* per-host breakdown under Paid to Host / Unpaid to Host */ .host-mini-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .host-mini-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; } .host-mini-name { color: var(--text-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .host-mini-amount { color: var(--text); font-weight: 700; flex-shrink: 0; } .host-mini-empty { color: var(--text-muted); font-size: 12px; } /* table */ .table-card { min-width: 0; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; /* breathing room so the horizontal scrollbar doesn't sit flush against the last row of the table */ padding-bottom: 10px; } /* Desktop already shows every column at once — this only exists on phone, below the table, as a reliable way to move it: a swipe gesture on a horizontally scrollable strip nested inside a vertically scrolling page is easy to fumble (the browser often reads it as page-scroll instead). Draggable directly, or tap anywhere on the track to jump there; the thumb's width shows how much more there is. */ .table-scroll-ui { display: none; margin: 8px 0 0; } @media (max-width: 760px) { .table-scroll-ui { display: block; } } .scroll-track { position: relative; height: 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); } .scroll-thumb { position: absolute; top: 1px; left: 1px; height: 6px; min-width: 24px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--purple)); cursor: grab; touch-action: none; } .scroll-thumb:active { cursor: grabbing; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 10px; white-space: nowrap; } tbody tr { border-radius: 10px; } .mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-light); color: #1D4ED8; font-size: 10px; font-weight: 700; margin-right: 8px; } .status { padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; } .status.delivered { background: rgba(34,197,94,.12); color: var(--green); } .status.processed { background: rgba(59,130,246,.12); color: var(--blue); } .status.cancelled { background: rgba(239,68,68,.12); color: var(--red); } .status.upcoming { background: rgba(167,139,250,.16); color: var(--purple); } td.amount-owed { color: var(--red); font-weight: 700; } /* ---------- Remaining-days pill (Booking Activity table) ---------- */ .checkin-countdown { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(59,130,246,.12); color: var(--blue); white-space: nowrap; } .checkin-countdown.today { background: rgba(34,197,94,.12); color: var(--green); } .checkin-countdown.past { background: var(--bg); color: var(--text-muted); } .checkin-empty { padding: 18px 0; text-align: center; color: var(--text-muted); font-size: 13px; } /* ---------- Totals panel (Bookings page) ---------- */ .totals-panel { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .totals-panel-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 14px; } .totals-panel-title { font-size: 13.5px; font-weight: 700; } .totals-panel-sub { font-size: 12px; color: var(--text-muted); } .totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } .total-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .total-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .total-chip-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .total-chip-icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .total-chip-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .total-chip-value { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .total-chip.c-total .total-chip-icon, .total-chip.c-paid .total-chip-icon { background: rgba(59, 130, 246, .14); color: var(--blue); } .total-chip.c-host .total-chip-icon, .total-chip.c-hostpaid .total-chip-icon { background: rgba(167, 139, 250, .16); color: var(--purple); } .total-chip.c-commission .total-chip-icon { background: rgba(34, 197, 94, .14); color: var(--green); } .total-chip.c-remaining .total-chip-icon { background: var(--border); color: var(--text-muted); } .total-chip.owed { border-color: rgba(239, 68, 68, .35); } .total-chip.owed .total-chip-icon { background: rgba(239, 68, 68, .14); color: var(--red); } .total-chip.owed .total-chip-value { color: var(--red); } .row-actions { display: flex; gap: 6px; } .row-edit-btn, .row-delete-btn { border: 1px solid var(--border); background: var(--card); color: var(--text-muted); width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .row-edit-btn:disabled, .row-delete-btn:disabled { opacity: .5; cursor: default; } .row-edit-btn:hover { background: var(--bg); color: var(--blue); } .row-delete-btn:hover { background: var(--bg); color: var(--red); } .row-edit-btn svg, .row-delete-btn svg { width: 15px; height: 15px; } /* ---------- Buttons ---------- */ .btn-primary { background: var(--blue); color: #fff; border: none; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 13.5px; font-family: inherit; cursor: pointer; transition: background .15s ease; } .btn-primary:hover { background: #2563EB; } .btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 13.5px; font-family: inherit; cursor: pointer; transition: background .15s ease; } .btn-secondary:hover { background: var(--border); } .export-month-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; font-family: inherit; cursor: pointer; } .page-toolbar { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 20px; } /* ---------- Month picker (Bookings page) ---------- */ .month-picker { position: relative; } .month-picker-btn { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; font-family: inherit; cursor: pointer; } .month-picker-chevron { width: 14px; height: 14px; transition: transform .15s ease; } .month-picker.open .month-picker-chevron { transform: rotate(180deg); } .month-picker-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; z-index: 20; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 240px; } .month-picker.open .month-picker-menu { display: grid; } .month-picker-item { border: none; background: transparent; color: var(--text); padding: 9px 6px; border-radius: 8px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; } .month-picker-item:hover { background: var(--bg); } .month-picker-item.active { background: var(--blue); color: #fff; } .month-picker-item.has-data::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); margin: 4px auto 0; } .month-picker-item.active.has-data::after { background: #fff; } /* ---------- Add/Edit booking modal ---------- */ .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; } .checkbox-row input { width: 16px; height: 16px; cursor: pointer; } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 17, 23, .5); z-index: 50; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.show { display: flex; } .modal-card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 24px; width: 100%; max-width: 480px; /* vh ignores the on-screen keyboard, so on a phone with the keyboard up a 90vh box can run past the actually-visible area with no way to reach the bottom of the form; dvh accounts for it. Declared after vh so unsupported browsers just keep the vh fallback. */ max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-card-wide { max-width: 620px; } .form-hint { font-size: 11.5px; color: var(--text-muted); margin: -6px 0 14px; } .form-row input[readonly] { color: var(--text-muted); background: var(--border); } .recovery-code-display { margin: 16px 0; padding: 16px; background: var(--bg); border: 1px dashed var(--border); border-radius: 12px; text-align: center; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--text); word-break: break-all; } .recovery-confirm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; margin-top: 4px; } .recovery-confirm input { cursor: pointer; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-header h2 { font-size: 17px; font-weight: 700; margin: 0; } .modal-close { border: none; background: var(--bg); color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; } .form-row { margin-bottom: 14px; } .form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .form-row input, .form-row select { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; padding: 9px 12px; /* 16px, not smaller — iOS Safari auto-zooms the page on focus for any input under 16px, which is jarring in these forms on a phone. */ font-size: 16px; font-family: inherit; } /* Up/Down now move between fields (see bookings.js) instead of nudging the number, so the spinner arrows that used to do that no longer make sense to show. */ .form-row input[type="number"]::-webkit-outer-spin-button, .form-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .form-row input[type="number"] { -moz-appearance: textfield; } .form-row input:focus, .form-row select:focus { outline: 2px solid var(--blue); outline-offset: 1px; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ---------- Sidebar toggle (mobile) ---------- */ .sidebar-toggle { display: none; position: fixed; top: 18px; left: 18px; z-index: 40; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .sidebar-toggle span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; } .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 15; } /* Collapsed width only applies on desktop — on mobile the sidebar is an off-canvas flyout (see the 860px block below) where full labels are always shown. */ @media (min-width: 861px) { .sidebar.collapsed { width: var(--sidebar-w-collapsed); } } /* ---------- Host cards ---------- */ .host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; } .host-card { position: relative; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 18px 14px; text-align: center; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; } .host-card:focus, .host-card.show { transform: translateY(-6px); box-shadow: 0 22px 45px -12px rgba(59, 130, 246, .35), 0 10px 20px rgba(17, 24, 39, .08); outline: none; z-index: 10; } body.dark-theme .host-card:focus, body.dark-theme .host-card.show { box-shadow: 0 22px 45px -10px rgba(59, 130, 246, .45), 0 10px 24px rgba(0, 0, 0, .5); } /* :hover is scoped to real pointer devices only — touch would fire a synthetic hover that browsers often fail to clear when you tap a different card, leaving two popups visible at once. Tapping a card opens the booking calendar (see host.js) rather than toggling a hover-style popup, so touch devices don't need an equivalent here. */ @media (hover: hover) and (pointer: fine) { .host-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px -12px rgba(59, 130, 246, .35), 0 10px 20px rgba(17, 24, 39, .08); z-index: 10; } body.dark-theme .host-card:hover { box-shadow: 0 22px 45px -10px rgba(59, 130, 246, .45), 0 10px 24px rgba(0, 0, 0, .5); } } .host-icon { font-size: 24px; margin-bottom: 8px; } .host-name { font-weight: 700; font-size: 13.5px; } .host-count { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .host-delete-btn { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease; z-index: 20; } .host-card:focus-within .host-delete-btn, .host-card.show .host-delete-btn { opacity: 1; transform: scale(1); } @media (hover: hover) and (pointer: fine) { .host-card:hover .host-delete-btn { opacity: 1; transform: scale(1); } } /* No hover to reveal it on touch, and tapping the card now opens the calendar instead of toggling a reveal state — so keep it visible here rather than leaving deletion undiscoverable. */ @media (hover: none) { .host-delete-btn { opacity: 1; transform: scale(1); } } .host-delete-btn:hover { background: var(--red); border-color: var(--red); color: #fff; } .host-popup { position: absolute; top: calc(100% + 10px); left: 50%; width: 220px; max-width: calc(100vw - 40px); transform: translate(-50%, 6px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30; } .host-card:focus .host-popup, .host-card.show .host-popup { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } @media (hover: hover) and (pointer: fine) { .host-card:hover .host-popup { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } } .host-popup-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; } .host-popup-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); padding: 3px 0; } .host-popup-row span:last-child { color: var(--text); font-weight: 600; text-align: right; } .host-popup-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; text-align: right; } /* ---------- Host calendar modal ---------- */ .hcal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hcal-nav-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; } .hcal-nav-btn:hover { background: var(--border); } .hcal-nav-btn svg { width: 15px; height: 15px; } .hcal-month-label { font-size: 14px; font-weight: 700; } .hcal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; } .hcal-weekdays span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); } .hcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .hcal-cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 12.5px; color: var(--text); } .hcal-cell.empty { visibility: hidden; } .hcal-cell.has-guest { background: rgba(59,130,246,.12); color: var(--blue); font-weight: 700; cursor: default; } .hcal-cell.today { outline: 1.5px solid var(--purple); outline-offset: -1.5px; } .hcal-dot { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); } .hcal-summary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); text-align: center; } /* ---------- Settings page ---------- */ .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .settings-card-wide { grid-column: span 2; } .settings-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .settings-card-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; } .settings-card-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; } .form-actions-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .settings-saved { font-size: 12px; font-weight: 600; color: var(--green); opacity: 0; transition: opacity .2s ease; } .settings-saved:not(:empty) { opacity: 1; } .settings-note { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); } .settings-note.error { color: var(--red); font-weight: 600; } .theme-options { display: flex; gap: 10px; flex-wrap: wrap; } .theme-option { border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 10px 18px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .theme-option.active { background: var(--blue); border-color: var(--blue); color: #fff; } .security-status { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--bg); color: var(--text-muted); white-space: nowrap; } .security-status.on { background: rgba(34, 197, 94, .14); color: var(--green); } .security-error { min-height: 16px; font-size: 12px; font-weight: 600; color: var(--red); margin-top: 4px; } .security-error.success { color: var(--green); } .file-btn { display: inline-flex; align-items: center; cursor: pointer; } .btn-danger { border-color: rgba(239, 68, 68, .4); color: var(--red); } .btn-danger:hover { background: rgba(239, 68, 68, .12); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .donut-card { grid-column: span 3; } /* Every area used by the cards below (including comm1/comm2 — easy to forget since they're not visually adjacent to ring1/ring2 in the markup) has to be listed here, or the browser drops that card out of the intended flow and auto-places it wherever it finds room, in whatever order it wants. Stays a 2-column grid all the way down to the 860px breakpoint too — Paid/Unpaid to Host and the two commission cards are meant to read as pairs, not stack vertically. */ .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sales sales" "ring1 ring2" "comm1 comm2" "table table" "line line"; } } @media (max-width: 860px) { .summary-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .donut-card { grid-column: span 2; } .settings-grid { grid-template-columns: 1fr; } .settings-card-wide { grid-column: span 1; } .sidebar-toggle { display: flex; } .sidebar-collapse-toggle { display: none; } .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w) !important; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .overlay.show { display: block; } .main { padding: 80px 18px 40px; } .topbar-title h1 { font-size: 22px; } } /* Phone portrait — everything above only cuts down to fewer *columns* of otherwise desktop-sized cards/text, which is still cramped in a ~360- 430px-wide single column. This tightens the sizing itself, not just the grid, so phones don't need a landscape rotation to read comfortably. */ @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .donut-card { grid-column: span 1; } .topbar-actions { gap: 10px; } .summary-grid, .stats-grid, .charts-grid { gap: 12px; margin-bottom: 16px; } .card { padding: 16px; } .summary-value { font-size: 22px; } .stat-value { font-size: 19px; } .stat-icon { width: 24px; height: 24px; font-size: 12px; } .ring-icon { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; } .topbar-title h1 { font-size: 19px; } .welcome { font-size: 13px; } .ring-value { font-size: 17px; } .chart-wrap { height: 180px; } .donut-wrap { width: 116px; height: 116px; margin: 6px auto 10px; } .modal-card { padding: 18px; } .modal-header h2 { font-size: 15.5px; } /* Two fields side by side in an already-narrow modal leaves each one ~140px wide — too tight to read/tap comfortably, so stack them. */ .form-row.two-col { grid-template-columns: 1fr; } .totals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .total-chip { padding: 10px 12px; } }