/* WI-308 — Bento dashboard styles * * Provides: * - Theme tokens (light + dark) selected via [data-theme="..."] on * - Bento grid container (4-column responsive grid, span via grid-column / grid-row) * - Glassmorphic widget card on dark; clean card on light * - Per-widget hover menu (resize submenu + show/hide) * - Loading / empty / error states * - Theme toggle button * * Brand tokens (light) come from booking-links.css. Dark palette is bespoke: * deep navy surface with brand teal accents and frosted-glass cards. */ /* ============ THEME TOKENS ============ */ body[data-theme="light"], body:not([data-theme]) { --bento-bg: #f5f7fb; --bento-card-bg: rgba(255, 255, 255, 0.92); --bento-card-border: rgba(15, 23, 42, 0.08); --bento-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); --bento-text-primary: #0f172a; --bento-text-secondary: #475569; --bento-text-muted: #94a3b8; --bento-accent: #0f6bb2; --bento-accent-soft: rgba(15, 107, 178, 0.10); --bento-divider: rgba(15, 23, 42, 0.07); --bento-row-hover: rgba(15, 107, 178, 0.05); --bento-status-confirmed: #2563eb; --bento-status-checked-in: #16a34a; --bento-status-checked-out: #64748b; --bento-error-bg: #fef2f2; --bento-error-fg: #991b1b; --bento-tier-platinum: #6366f1; --bento-tier-gold: #d97706; --bento-tier-silver: #64748b; --bento-blur: blur(0px); } body[data-theme="dark"] { --bento-bg: #0a1628; --bento-card-bg: rgba(20, 36, 60, 0.55); --bento-card-border: rgba(120, 195, 255, 0.18); --bento-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); --bento-text-primary: #e6f2ff; --bento-text-secondary: #94b8db; --bento-text-muted: #5d7a9e; --bento-accent: #38bdf8; --bento-accent-soft: rgba(56, 189, 248, 0.16); --bento-divider: rgba(120, 195, 255, 0.12); --bento-row-hover: rgba(56, 189, 248, 0.08); --bento-status-confirmed: #38bdf8; --bento-status-checked-in: #4ade80; --bento-status-checked-out: #94a3b8; --bento-error-bg: rgba(220, 38, 38, 0.12); --bento-error-fg: #fca5a5; --bento-tier-platinum: #a5b4fc; --bento-tier-gold: #fbbf24; --bento-tier-silver: #cbd5e1; --bento-blur: blur(10px); } /* When dark theme is active, paint the page background to the bento bg. */ body[data-theme="dark"] { background: var(--bento-bg); } body[data-theme="dark"] .role-home-shell, body[data-theme="dark"] .main-content { color: var(--bento-text-primary); } body[data-theme="dark"] .role-home-title, body[data-theme="dark"] .role-home-section-title { color: var(--bento-text-primary); } body[data-theme="dark"] .role-home-subtitle, body[data-theme="dark"] .role-home-muted { color: var(--bento-text-secondary); } /* ============ THEME TOGGLE BUTTON (in content header) ============ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bento-card-border, #cbd5e1); background: var(--bento-card-bg, #ffffff); color: var(--bento-text-secondary, #475569); cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 120ms ease; } .theme-toggle-btn:hover { color: var(--bento-accent); transform: translateY(-1px); } .theme-toggle-btn .material-icons { font-size: 18px; } /* ============ BENTO GRID ============ */ .bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 14px; padding-top: 8px; } @media (max-width: 1100px) { .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } } /* ============ WIDGET CARD ============ */ .bento-widget { position: relative; display: flex; flex-direction: column; min-height: 0; /* allow children to scroll */ border-radius: 14px; border: 1px solid var(--bento-card-border); background: var(--bento-card-bg); box-shadow: var(--bento-card-shadow); backdrop-filter: var(--bento-blur); -webkit-backdrop-filter: var(--bento-blur); overflow: hidden; transition: box-shadow 160ms ease, transform 160ms ease; } .bento-widget:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); } body[data-theme="dark"] .bento-widget:hover { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(56, 189, 248, 0.25); } .bento-widget-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px solid var(--bento-divider); } .bento-widget-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bento-accent-soft); color: var(--bento-accent); } .bento-widget-icon .material-icons { font-size: 17px; } .bento-widget-title-wrap { flex: 1; min-width: 0; } .bento-widget-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--bento-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bento-widget-subtitle { margin: 2px 0 0; font-size: 11px; font-weight: 600; color: var(--bento-text-muted); letter-spacing: 0.02em; text-transform: uppercase; } .bento-widget-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 12px; } .bento-widget-body::-webkit-scrollbar { width: 8px; } .bento-widget-body::-webkit-scrollbar-thumb { background: var(--bento-divider); border-radius: 4px; } /* ============ HOVER MENU ============ */ .bento-widget-menu-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--bento-text-secondary); cursor: pointer; display: inline-grid; place-items: center; opacity: 0; transition: opacity 120ms ease, background 120ms ease, color 120ms ease; } .bento-widget:hover .bento-widget-menu-btn, .bento-widget-menu-btn[aria-expanded="true"] { opacity: 1; } .bento-widget-menu-btn:hover { background: var(--bento-accent-soft); color: var(--bento-accent); } .bento-widget-menu-btn .material-icons { font-size: 18px; } .bento-widget-menu { position: absolute; top: 40px; right: 8px; z-index: 5; min-width: 180px; padding: 6px; border-radius: 10px; border: 1px solid var(--bento-card-border); background: var(--bento-card-bg); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); backdrop-filter: var(--bento-blur); -webkit-backdrop-filter: var(--bento-blur); } .bento-widget-menu[hidden] { display: none; } .bento-widget-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; background: transparent; color: var(--bento-text-primary); font-size: 13px; font-weight: 600; text-align: left; border-radius: 6px; cursor: pointer; } .bento-widget-menu-item:hover { background: var(--bento-accent-soft); color: var(--bento-accent); } .bento-widget-menu-item .material-icons { font-size: 16px; } .bento-widget-menu-divider { height: 1px; margin: 4px 6px; background: var(--bento-divider); } .bento-widget-menu-section-label { padding: 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bento-text-muted); } .bento-widget-menu-size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; } .bento-widget-menu-size { padding: 6px 4px; border: 1px solid var(--bento-divider); background: transparent; color: var(--bento-text-secondary); font-size: 11px; font-weight: 700; border-radius: 6px; cursor: pointer; } .bento-widget-menu-size:hover { border-color: var(--bento-accent); color: var(--bento-accent); } .bento-widget-menu-size.active { background: var(--bento-accent-soft); border-color: var(--bento-accent); color: var(--bento-accent); } /* ============ STATES ============ */ .bento-widget-loading, .bento-widget-empty, .bento-widget-error { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; font-weight: 600; text-align: center; padding: 12px; } .bento-widget-loading { color: var(--bento-text-muted); } .bento-widget-empty { color: var(--bento-text-muted); } .bento-widget-error { color: var(--bento-error-fg); background: var(--bento-error-bg); border-radius: 8px; margin: 8px; } /* ============ SHARED ROW STYLES (used by widgets) ============ */ .bento-list { list-style: none; margin: 0; padding: 0; } .bento-list-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--bento-divider); } .bento-list-row:last-child { border-bottom: none; } .bento-list-row:hover { background: var(--bento-row-hover); } .bento-list-primary { font-size: 13px; font-weight: 600; color: var(--bento-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bento-list-secondary { margin-top: 2px; font-size: 11px; color: var(--bento-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bento-list-meta { font-size: 11px; font-weight: 700; color: var(--bento-text-muted); text-align: right; white-space: nowrap; } .bento-status-pill { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; background: var(--bento-accent-soft); color: var(--bento-accent); } .bento-status-pill.confirmed { color: var(--bento-status-confirmed); } .bento-status-pill.checked-in, .bento-status-pill.in_house { color: var(--bento-status-checked-in); } .bento-status-pill.checked-out { color: var(--bento-status-checked-out); } .bento-tier-platinum { color: var(--bento-tier-platinum); } .bento-tier-gold { color: var(--bento-tier-gold); } .bento-tier-silver { color: var(--bento-tier-silver); } .bento-summary-strip { display: flex; gap: 10px; padding: 6px 0 8px; font-size: 11px; font-weight: 700; color: var(--bento-text-secondary); } .bento-summary-strip strong { color: var(--bento-text-primary); font-weight: 800; font-size: 14px; margin-right: 4px; } /* ============ WI-932 — CONCIERGE SPA WIDGET (cascade Rewards template) ============ * * Beige-pill row treatment mirrors the Rewards hero card (WI-896) and the * beta-site /account greeting-card vocabulary. Scoped to `.widget-spa` so it * does not bleed into other concierge widgets (Day Passes, Cabanas, Dinners), * each of which will cascade in their own WI when the owner cascades the * template. Status chip vocabulary mirrors hero-card.css `.hero-card__status-pill` * and rewards.css `.stay-card-badge` (3px 10px, 100px radius, 11px/700/cap). */ .widget-spa { display: flex; flex-direction: column; gap: 8px; height: 100%; } .widget-spa-search-wrap { flex-shrink: 0; padding: 0 0 4px; } .widget-spa-search { width: 100%; height: 30px; padding: 0 10px; border: 1px solid rgba(242, 242, 242, 1); border-radius: 8px; background: #ffffff; color: #012d53; font-size: 12px; font-family: inherit; box-sizing: border-box; } .widget-spa-search:focus { outline: none; border-color: rgba(0, 178, 207, 0.4); box-shadow: 0 0 0 3px rgba(0, 178, 207, 0.12); } body[data-theme="dark"] .widget-spa-search { background: rgba(255, 255, 255, 0.06); border-color: rgba(120, 195, 255, 0.18); color: var(--bento-text-primary); } .widget-spa-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } .widget-spa-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: linear-gradient(135deg, #f8f6f0 0%, #faf8f2 100%); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 12px; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .widget-spa-row[data-drawer] { cursor: pointer; } .widget-spa-row[data-drawer]:hover { background-color: rgba(0, 178, 207, 0.08); border-color: rgba(0, 178, 207, 0.18); } .widget-spa-row[data-drawer]:focus-visible { outline: 2px solid rgba(0, 178, 207, 1); outline-offset: 2px; } .widget-spa-row-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .widget-spa-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex-shrink: 0; } .widget-spa-row-name { font-family: 'Bitter', Georgia, serif; font-size: 13px; font-weight: 600; color: #012d53; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .widget-spa-row-meta { font-family: 'Bitter', Georgia, serif; font-size: 11px; font-weight: 400; color: rgba(82, 82, 82, 1); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .widget-spa-row-time { font-size: 10.5px; color: rgba(82, 82, 82, 1); letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; } /* Status chip — same vocab as hero-card.css `.hero-card__status-pill` / * beta-site .stay-card-badge. Capitalize via CSS so backend status_label * strings ('pending_approval' → 'Pending approval') read naturally. */ .widget-spa-status-chip { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.02em; background: rgba(100, 116, 139, 0.14); color: #475569; white-space: nowrap; } .widget-spa-status-chip--confirmed { background: rgba(22, 163, 74, 0.14); color: #15803d; } .widget-spa-status-chip--pending { background: rgba(217, 119, 6, 0.14); color: #b45309; } .widget-spa-status-chip--scheduled { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; } .widget-spa-status-chip--completed { background: rgba(15, 107, 178, 0.14); color: #0f6bb2; } .widget-spa-status-chip--canceled { background: rgba(220, 38, 38, 0.14); color: #991b1b; } body[data-theme="dark"] .widget-spa-row { background: rgba(255, 255, 255, 0.04); border-color: rgba(120, 195, 255, 0.12); } body[data-theme="dark"] .widget-spa-row-name { color: var(--bento-text-primary); } body[data-theme="dark"] .widget-spa-row-meta, body[data-theme="dark"] .widget-spa-row-time { color: var(--bento-text-secondary); } body[data-theme="dark"] .widget-spa-row[data-drawer]:hover { background-color: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.22); } /* WI-323 — Live price-quotes feed widget */ .bento-quote-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; vertical-align: 1px; } .bento-quote-tag.tag-member { background: rgba(34, 197, 94, 0.16); color: #166534; } .bento-quote-tag.tag-visitor { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; } .bento-quote-tag.tag-ta { background: rgba(217, 119, 6, 0.16); color: #92400e; } .bento-quote-pulse { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #166534; } .bento-quote-pulse .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: bento-quote-pulse-anim 1.6s ease-out infinite; } @keyframes bento-quote-pulse-anim { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .bento-quote-row { transition: background-color 1.2s ease-out; } .bento-quote-row.bento-quote-flash { background: rgba(34, 197, 94, 0.18); } /* WI-842 — Space Check shortcut card */ .bento-shortcut-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; padding: 8px 4px; } .bento-shortcut-body { display: flex; align-items: flex-start; gap: 12px; } .bento-shortcut-icon { font-size: 32px; color: #2563eb; background: rgba(37, 99, 235, 0.10); border-radius: 10px; padding: 8px; } .bento-shortcut-text { display: flex; flex-direction: column; gap: 4px; } .bento-shortcut-title { font-weight: 600; font-size: 0.95rem; color: var(--bento-text, #111827); } .bento-shortcut-meta { font-size: 0.8rem; color: var(--bento-muted, #6b7280); } .bento-shortcut-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; background: #2563eb; color: #fff; font-weight: 600; font-size: 0.85rem; border-radius: 8px; text-decoration: none; transition: background 0.15s ease-out; } .bento-shortcut-button:hover { background: #1d4ed8; } /* ============================================================ */ /* WI-930 — DAY PASSES WIDGET (cascade from Rewards hero card) */ /* ============================================================ */ /* Scoped exclusively under .widget-day-passes so styling cannot bleed into * sibling widgets (Cabanas, Spa, etc.). Mirrors the Rewards card visual * vocabulary at standard-card scale: beige row pills, Bitter font on * primary anchor + date, status chip + amount on right in muted style. * Reference: hero-card.css .hero-card.hero-card--rewards .hero-card__row. */ .widget-day-passes { display: flex; flex-direction: column; min-height: 0; height: 100%; } .widget-day-passes__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 6px; } .widget-day-passes__list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } /* Beige row pill — mirrors hero-card .hero-card--rewards .hero-card__row at * a slightly smaller scale appropriate to a standard 2x2 card. */ .widget-day-passes__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: linear-gradient(135deg, #f8f6f0 0%, #faf8f2 100%); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 10px; transition: background-color 0.15s ease, border-color 0.15s ease; } .widget-day-passes__row[data-drawer] { cursor: pointer; } .widget-day-passes__row[data-drawer]:hover { background-color: rgba(0, 178, 207, 0.08); border-color: rgba(0, 178, 207, 0.18); } .widget-day-passes__row[data-drawer]:focus-visible { outline: 2px solid rgba(0, 178, 207, 1); outline-offset: 2px; } .widget-day-passes__row-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } /* Bitter serif on guest name (matches hero card .hero-card__row-name). */ .widget-day-passes__row-name { font-family: 'Bitter', Georgia, serif; font-size: 13px; font-weight: 600; color: #012d53; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bitter serif on pass date row (muted) — secondary anchor per WI-930 brief. */ .widget-day-passes__row-meta { font-family: 'Bitter', Georgia, serif; font-size: 11px; font-weight: 500; color: rgba(82, 82, 82, 1); line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-day-passes__row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; flex-shrink: 0; } /* Status chip — PENDING / APPROVED / DECLINED. Mirrors the hero card * .hero-card__status-pill scale (3px 10px / 11px 700) and beta-site * .stay-card-badge color tokens. */ .widget-day-passes__chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; } .widget-day-passes__chip--pending { background: rgba(217, 119, 6, 0.14); color: #b45309; } .widget-day-passes__chip--approved { background: rgba(22, 163, 74, 0.14); color: #15803d; } .widget-day-passes__chip--declined { background: rgba(100, 116, 139, 0.14); color: #475569; } /* Amount on the right in muted style (matches hero card row-meta tone). */ .widget-day-passes__amount { font-size: 11px; font-weight: 700; color: rgba(82, 82, 82, 1); letter-spacing: 0.01em; line-height: 1.2; } /* Smart-search input — mirrors hero-card .hero-card__search at a slightly * smaller scale for the standard card. * WI-949 Fix 5 — Moved to the TOP of the widget body. Use a bottom hairline * (separates search from rows below) and margin-bottom for breathing room. */ .widget-day-passes__search-wrap { padding: 2px 2px 8px; border-bottom: 1px solid rgba(242, 242, 242, 1); margin-bottom: 8px; } .widget-day-passes__search-wrap--top { /* Same as base — keeps the explicit modifier so future overrides don't have * to scope across both selectors. */ padding: 2px 2px 8px; border-top: none; border-bottom: 1px solid rgba(242, 242, 242, 1); margin-top: 0; margin-bottom: 8px; } .widget-day-passes__search { width: 100%; height: 30px; padding: 0 10px; border: 1px solid rgba(242, 242, 242, 1); border-radius: 8px; background: #ffffff; color: #012d53; font-size: 12px; font-family: inherit; box-sizing: border-box; } .widget-day-passes__search:focus { outline: none; border-color: rgba(0, 178, 207, 0.4); box-shadow: 0 0 0 3px rgba(0, 178, 207, 0.12); } /* Dark theme — soften the beige to keep contrast acceptable. */ body[data-theme="dark"] .widget-day-passes__row { background: linear-gradient(135deg, #2b2a26 0%, #302e29 100%); border-color: rgba(255, 255, 255, 0.06); } body[data-theme="dark"] .widget-day-passes__row-name { color: #e6eefb; } body[data-theme="dark"] .widget-day-passes__row-meta { color: rgba(220, 220, 220, 0.7); } body[data-theme="dark"] .widget-day-passes__search { background: rgba(255, 255, 255, 0.04); color: #e6eefb; border-color: rgba(255, 255, 255, 0.08); }