/* ============================================================ Koto Design System — app shell (sidebar + topbar + content) ============================================================ Depends on tokens.css. Provides the click-to-pin "luxe" sidebar used by both legacy base.html and the new _koto_app_base.html. Desktop model: sidebar is always 64px collapsed. A pin-toggle button (#luxeSidebarPinToggle) locks it to 260px and pushes .main-content — no hover-expand, no layout overlay. Mobile model: sidebar slides in as a full overlay with a backdrop. Reference: /Koto Design System/ui_kits/app/Navigation.jsx /Koto Design System/ui_kits/app/index.html ============================================================ */ :root { --sidebar-w-collapsed: 64px; --sidebar-w-expanded: 260px; } /* ============================================================ Luxe sidebar — fixed rail, click-to-pin on desktop ============================================================ */ .luxe-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w-collapsed); /* Fully opaque background — prevents dark page content bleeding through on schedule and other pages with non-white backgrounds. backdrop-filter remains for the frosted border-edge depth effect. */ background: var(--bg-elevated); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: visible; /* Labels + flyouts escape the rail */ z-index: 1040; } /* Schedule (base.html) loads Bootstrap Reboot — universal border-box. Koto-only pages (e.g. Rooms on _koto_app_base) do not — padding on nav links then sizes differently and icons look shifted. Scope border-box to the rail only. */ .luxe-sidebar, .luxe-sidebar *, .luxe-sidebar *::before, .luxe-sidebar *::after { box-sizing: border-box; } /* Pinned-open state (set by sidebar.js + no-flash init in ) */ .luxe-sidebar.is-open { width: var(--sidebar-w-expanded); box-shadow: var(--shadow-md); } /* No hover-expand — sidebar only opens on explicit click */ /* ── Keyboard expansion via :focus-visible only ──────────────── */ @supports selector(:has(> *)) { .luxe-sidebar:has(*:focus-visible) { width: var(--sidebar-w-expanded); box-shadow: var(--shadow-md); } } @supports not selector(:has(> *)) { .luxe-sidebar:focus-within { width: var(--sidebar-w-expanded); box-shadow: var(--shadow-md); } } /* No-flash init: html.sidebar-pinned applied synchronously from */ html.sidebar-pinned .luxe-sidebar { width: var(--sidebar-w-expanded); box-shadow: var(--shadow-md); } html.sidebar-pinned .luxe-sidebar .nav-label, html.sidebar-pinned .luxe-sidebar .luxe-brand-text { opacity: 1; max-width: 200px; pointer-events: auto; } /* ----- Brand area at the top ----- */ .luxe-sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); min-height: 64px; border-bottom: 1px solid var(--neutral-100); text-decoration: none; color: inherit; flex-shrink: 0; } .luxe-sidebar-brand:hover { color: inherit; } .luxe-sidebar-brand--static { cursor: default; text-decoration: none; } .luxe-sidebar-brand--static:hover { color: inherit; } /* Matte identity badges — flat fills, squircle; tone via data-avatar-tone (see avatar_identity.py / getAvatarTone in base-main.js) */ .luxe-brand-avatar, .luxe-sidebar-user-avatar { border-radius: var(--radius-lg); color: var(--neutral-0); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; box-shadow: none; border: 1px solid color-mix(in srgb, var(--neutral-0) 22%, transparent); background: var(--sky-700); letter-spacing: 0.02em; } /* Default size for standalone .luxe-brand-avatar — not .account-avatar (48px in components.css) */ .luxe-brand-avatar:not(.account-avatar) { width: 36px; height: 36px; font-size: 0.8rem; } .luxe-brand-avatar[data-avatar-tone="coral"], .luxe-sidebar-user-avatar[data-avatar-tone="coral"] { background: var(--coral-700); } .luxe-brand-avatar[data-avatar-tone="sky"], .luxe-sidebar-user-avatar[data-avatar-tone="sky"] { background: var(--sky-700); } .luxe-brand-avatar[data-avatar-tone="peri"], .luxe-sidebar-user-avatar[data-avatar-tone="peri"] { background: var(--peri-700); } .luxe-brand-avatar[data-avatar-tone="amber"], .luxe-sidebar-user-avatar[data-avatar-tone="amber"] { background: var(--amber-700); } .luxe-brand-avatar[data-avatar-tone="mint"], .luxe-sidebar-user-avatar[data-avatar-tone="mint"] { background: var(--mint-700); } .luxe-brand-avatar[data-avatar-tone="lilac"], .luxe-sidebar-user-avatar[data-avatar-tone="lilac"] { background: var(--lilac-700); } .luxe-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .luxe-brand-text .brand-title { font-weight: 700; color: var(--fg1); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .luxe-brand-text .brand-subtitle { color: var(--fg3); font-size: var(--t-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Desktop pin-toggle button ───────────────────────────────── */ .luxe-sidebar-pin-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid transparent; color: var(--fg3); cursor: pointer; flex-shrink: 0; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); /* Subtle glass on hover */ } .luxe-sidebar-pin-toggle:hover { background: color-mix(in srgb, var(--bg-elevated) 80%, var(--sky-100) 20%); border-color: var(--border); color: var(--fg1); box-shadow: 0 1px 4px rgba(30, 58, 138, 0.08); } .luxe-sidebar-pin-toggle:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 2px; } /* Rotate icon when sidebar is open */ .luxe-sidebar.is-open .luxe-sidebar-pin-toggle [data-lucide] { transform: rotate(0deg); } /* Hide on mobile — mobile uses #luxeSidebarToggle instead */ @media (max-width: 991.98px) { .luxe-sidebar-pin-toggle { display: none; } } /* Hide labels when collapsed */ .luxe-sidebar .nav-label, .luxe-sidebar .luxe-brand-text { opacity: 0; max-width: 0; min-width: 0; /* flex: allow true collapse (else min-width:auto keeps gap vs icons) */ overflow: hidden; pointer-events: none; white-space: nowrap; transition: opacity 0.15s var(--ease-out) 0.05s, max-width 0.25s var(--ease-out); } .luxe-sidebar.is-open .nav-label, .luxe-sidebar.is-open .luxe-brand-text { opacity: 1; max-width: 200px; pointer-events: auto; } @supports selector(:has(> *)) { .luxe-sidebar:has(*:focus-visible) .nav-label, .luxe-sidebar:has(*:focus-visible) .luxe-brand-text { opacity: 1; max-width: 200px; pointer-events: auto; } } @supports not selector(:has(> *)) { .luxe-sidebar:focus-within .nav-label, .luxe-sidebar:focus-within .luxe-brand-text { opacity: 1; max-width: 200px; pointer-events: auto; } } /* ----- Primary nav list ----- */ .luxe-side-nav { list-style: none; margin: var(--space-2) 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .luxe-side-nav .nav-item { position: relative; } .luxe-side-nav .nav-link { display: flex !important; align-items: center !important; gap: var(--space-3); padding: 12px 18px !important; color: var(--fg2) !important; font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 0.95rem !important; text-decoration: none !important; border-left: 3px solid transparent !important; border-bottom: none !important; border-radius: 0 !important; min-height: unset !important; /* prevent base-main.css min-height:48px */ white-space: normal !important; /* prevent base-main.css white-space:nowrap */ background: transparent !important; position: relative; /* Required for tooltip ::after */ transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out); } .luxe-side-nav .nav-link i, .luxe-side-nav .nav-link [data-lucide] { width: 22px; text-align: center; font-size: 1.05rem; flex-shrink: 0; } .luxe-side-nav .nav-link:hover { color: var(--fg1) !important; background: var(--neutral-50) !important; } .luxe-side-nav .nav-link.active { color: var(--sky-700) !important; /* base-main.css sets color:#111827 */ background: var(--sky-50) !important; /* base-main.css sets background:transparent */ border-left-color: var(--sky-500) !important; box-shadow: inset 0 1px 0 rgba(14, 165, 233, 0.10), inset 0 -1px 0 rgba(14, 165, 233, 0.10); } /* Dropend caret tidy */ .luxe-side-nav .dropdown-toggle::after { margin-left: auto; } /* Spacer pushes footer to the bottom */ .luxe-sidebar-spacer { flex: 1 1 auto; } /* ----- Footer area ----- */ .luxe-sidebar-footer { border-top: 1px solid var(--neutral-100) !important; /* prevent base-main.css from overriding */ padding: var(--space-2) 0 !important; flex-shrink: 0; position: relative; isolation: isolate; } .luxe-sidebar-footer > * { position: relative; } .luxe-sidebar-footer > *:nth-child(1) { z-index: 8; } .luxe-sidebar-footer > *:nth-child(2) { z-index: 7; } .luxe-sidebar-footer > *:nth-child(3) { z-index: 6; } .luxe-sidebar-footer > *:nth-child(4) { z-index: 5; } .luxe-sidebar-footer > *:nth-child(5) { z-index: 4; } .luxe-sidebar-footer > *:nth-child(6) { z-index: 3; } .luxe-sidebar-footer > *:nth-child(7) { z-index: 2; } .luxe-sidebar-footer > *:nth-child(8) { z-index: 1; } .luxe-sidebar-footer .nav-link, .luxe-sidebar-footer .nav-notification-center .nav-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: var(--space-3); padding: 12px 18px !important; min-height: 44px !important; /* prevent base-main.css min-height:48px */ min-width: 0 !important; /* prevent base-main.css min-width:auto */ width: 100%; color: var(--fg2) !important; font-weight: 600 !important; font-size: 0.95rem !important; text-decoration: none !important; border-bottom: none !important; position: relative; border-radius: 0 !important; background: transparent !important; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out); } .luxe-sidebar-footer .nav-link:hover, .luxe-sidebar-footer .nav-notification-center .nav-link:hover { color: var(--fg1); background: var(--neutral-50) !important; } .luxe-sidebar-footer .nav-link.text-danger { color: var(--danger-strong); } .luxe-sidebar-footer .nav-link.text-danger:hover { color: var(--red-900); background: var(--red-50) !important; } /* Suppress the global .nav-link::after underline indicator inside the sidebar. Uses #mainSidebar ID selector (specificity 1,0,1) so it definitively beats every class-based rule in base-main.css regardless of load order. */ #mainSidebar .nav-link::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; bottom: auto !important; } /* Re-enable dropdown-toggle caret (uses ::after) for the More menu */ .luxe-sidebar .dropdown-toggle::after { content: "" !important; display: inline-block; margin-left: auto; vertical-align: middle; border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.3em solid currentColor; border-right: 0; position: static; background: transparent; width: 0; height: 0; transform: none; transition: none; } /* Icon column */ .luxe-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .luxe-icon-wrap i, .luxe-icon-wrap [data-lucide] { font-size: 1.05rem; line-height: 1; } .luxe-sidebar-footer .nav-link i, .luxe-sidebar-footer .nav-link [data-lucide], .luxe-side-nav .nav-link i, .luxe-side-nav .nav-link [data-lucide] { width: 22px; text-align: center; font-size: 1.05rem; flex-shrink: 0; } /* base-main.css (base.html only) sets .nav-link i { margin-right: 8px } (+ media tweaks). Koto-only shells never load it — icons then misalign vs Schedule/Housekeeping on legacy base. */ #mainSidebar .nav-link i, #mainSidebar .nav-link svg, #mainSidebar .nav-link [data-lucide] { margin-left: 0 !important; margin-right: 0 !important; } /* Desktop collapsed rail: center icon column so Schedule (base-main) matches Koto pages */ @media (min-width: 992px) { html:not(.sidebar-pinned) #mainSidebar .luxe-side-nav > .nav-item > .nav-link { justify-content: center !important; gap: 0 !important; } html:not(.sidebar-pinned) #mainSidebar .luxe-sidebar-footer .nav-link, html:not(.sidebar-pinned) #mainSidebar .luxe-sidebar-footer .nav-notification-center .nav-link { justify-content: center !important; gap: 0 !important; } html:not(.sidebar-pinned) #mainSidebar .luxe-sidebar-user-btn { justify-content: center !important; gap: 0 !important; } } /* Compact notification badge */ .luxe-sidebar .luxe-icon-wrap .notification-badge { position: absolute !important; top: -6px !important; right: -10px !important; left: auto !important; bottom: auto !important; transform: none !important; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; font-weight: 700; line-height: 1; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(42, 70, 86, 0.18); } .luxe-sidebar .luxe-icon-wrap .notification-badge.report-count { min-width: 18px; background: linear-gradient(135deg, var(--butter-200) 0%, var(--butter-500) 100%); color: var(--fg1); border: 2px solid var(--bg-elevated); box-shadow: 0 2px 6px color-mix(in srgb, var(--butter-700) 32%, transparent); } .luxe-sidebar .luxe-icon-wrap .notification-badge:not(.report-count) { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-strong) 100%); color: var(--neutral-0); border: 2px solid var(--bg-elevated); box-shadow: 0 2px 6px color-mix(in srgb, var(--danger-strong) 40%, transparent); } .luxe-sidebar .dropdown-menu { margin-left: var(--space-2) !important; } .luxe-sidebar .nav-notification-center { position: static; } /* ============================================================ Collapsed icon hover tooltips (desktop only, not pinned) ============================================================ Each .nav-link gets data-label="Schedule" etc. from the template. Uses content: attr(data-label) !important to override the global content:none !important suppression on #mainSidebar .nav-link::after. ============================================================ */ @media (min-width: 992px) { /* Uses #mainSidebar ID (specificity 1,2,1) — beats all base-main.css class rules. All base-main.css overrides (height:2px, bottom:10px, width:calc, background:#111827, left:50%, transform:translateX) are explicitly reset here with !important. */ html:not(.sidebar-pinned) #mainSidebar .nav-link[data-label]:not(.dropdown-toggle):hover::after { content: attr(data-label) !important; display: block !important; width: auto !important; height: auto !important; /* reset base-main.css height:2px */ bottom: auto !important; /* reset base-main.css bottom:10px so top:50% centres correctly */ background: var(--fg1) !important; /* reset base-main.css background:#111827 */ position: absolute; left: calc(var(--sidebar-w-collapsed) + 8px); top: 50%; transform: translateY(-50%); color: var(--neutral-0); padding: 4px 12px; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 1060; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15); letter-spacing: 0.01em; border: none; text-decoration: none; } } /* ============================================================ User avatar button (bottom of footer) ============================================================ */ .luxe-sidebar-user-wrap { position: relative; } .luxe-sidebar-user-btn { display: flex; align-items: center; gap: var(--space-3); padding: 10px 13px; min-height: 52px; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; transition: background 0.15s var(--ease-out); } .luxe-sidebar-user-btn:hover { background: var(--neutral-50); } .luxe-sidebar-user-btn:focus-visible { outline: 2px solid var(--sky-400); outline-offset: -2px; } .luxe-sidebar-user-avatar { width: 36px; height: 36px; font-size: 0.72rem; transition: filter 0.15s var(--ease-out); } .luxe-sidebar-user-btn:hover .luxe-sidebar-user-avatar { filter: brightness(1.07); } .luxe-sidebar-user-name { font-weight: 600; font-size: 0.9rem; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; max-width: 0; min-width: 0; pointer-events: none; transition: opacity 0.15s var(--ease-out) 0.05s, max-width 0.25s var(--ease-out); } .luxe-sidebar.is-open .luxe-sidebar-user-name, html.sidebar-pinned .luxe-sidebar .luxe-sidebar-user-name { opacity: 1; max-width: 160px; pointer-events: auto; } /* ============================================================ User popover card (opaque surface — no glass / no bleed-through) ============================================================ */ .luxe-user-popover { display: none; /* toggled by sidebar.js */ position: absolute; bottom: 8px; left: calc(var(--sidebar-w-collapsed) + 8px); z-index: 1060; min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10), 0 2px 8px rgba(30, 58, 138, 0.07); overflow: hidden; /* Motion JS handles entrance; this opacity reset ensures hidden state */ opacity: 1; } /* Shift popover right when sidebar is pinned open */ html.sidebar-pinned .luxe-user-popover { left: calc(var(--sidebar-w-expanded) + 8px); } .luxe-user-popover-section { padding: 10px 14px 4px; } .luxe-user-popover-section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); user-select: none; } .luxe-user-popover-divider { height: 1px; background: color-mix(in srgb, var(--border) 60%, transparent); margin: 4px 0; } .luxe-user-popover-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 14px; color: var(--fg2); text-decoration: none; font-size: 0.92rem; font-weight: 500; border-radius: 0; transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out); cursor: pointer; } .luxe-user-popover-item:hover { background: var(--neutral-50); color: var(--fg1); text-decoration: none; } .luxe-user-popover-item [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg3); } .luxe-user-popover-item:hover [data-lucide] { color: var(--fg2); } .luxe-user-popover-item.danger { color: var(--danger-strong); } .luxe-user-popover-item.danger [data-lucide] { color: var(--danger); } .luxe-user-popover-item.danger:hover { background: var(--red-50); color: var(--red-900); } /* ============================================================ Main content area — always pushed right by sidebar width ============================================================ */ .main-content { margin-left: var(--sidebar-w-collapsed) !important; transition: margin-left 0.18s ease-out; } /* Pinned-open state: push the whole page right, not overlaid */ html.sidebar-pinned .main-content { margin-left: var(--sidebar-w-expanded) !important; } /* ============================================================ Mobile toggle button + backdrop ============================================================ */ .luxe-sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1050; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--fg1); align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.10); } .luxe-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(42, 70, 86, 0.4); z-index: 1039; } .luxe-sidebar-backdrop.is-visible { display: block; } @media (max-width: 991.98px) { .luxe-sidebar { width: var(--sidebar-w-expanded); transform: translateX(-100%); /* Motion JS handles slide animation — CSS transition is fallback */ transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .luxe-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); } .luxe-sidebar .nav-label, .luxe-sidebar .luxe-brand-text { opacity: 1; max-width: 200px; } .luxe-sidebar-toggle { display: inline-flex; } .main-content { margin-left: 0; padding-top: 56px; } /* User popover on mobile: open above button, same left edge */ .luxe-user-popover { left: 8px; bottom: 64px; } } /* ============================================================ Optional Koto top bar (used by _koto_app_base.html) ============================================================ */ .koto-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; } .koto-topbar-left, .koto-topbar-right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .koto-topbar .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; letter-spacing: -0.01em; color: var(--fg1); text-decoration: none; } .koto-topbar .brand img { height: 28px; } /* Inner page wrapper for app-base content */ .koto-page-content { padding: var(--space-5); max-width: 1400px; margin: 0 auto; } .koto-page-content--wide { max-width: none; margin-left: 0; margin-right: 0; } @media (max-width: 768px) { .koto-page-content { padding: var(--space-4); } } /* ============================================================ Koto Dropdowns (Vanilla JS toggled) ============================================================ */ .koto-dropdown { position: relative; } .koto-dropdown-menu { display: none; position: absolute; top: 0; left: 100%; margin-left: var(--space-2); z-index: 1050; min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2) 0; list-style: none; } .koto-dropdown-menu.show { display: block; } .luxe-sidebar-footer .koto-dropdown-menu { top: auto; bottom: 0; } .koto-dropdown-item { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px; color: var(--fg2); text-decoration: none; font-size: 0.95rem; transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out); } .koto-dropdown-item:hover { background: var(--neutral-50); color: var(--fg1); text-decoration: none; } .koto-dropdown-item [data-lucide] { width: 18px; height: 18px; } /* ── Bed Alerts — sidebar bell pulse animation ─────────────────────────────── */ @keyframes bedAlertPulse { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(9deg); } } #bedAlertsNavItem.bed-alert-vibrating .luxe-icon-wrap [data-lucide] { animation: bedAlertPulse 0.55s ease-in-out; transform-origin: top center; } /* Badge pulse when there are active alerts */ #bedAlertsNavItem .notification-badge.has-notifications { animation: none; }