/* ═══════════════════════════════════════════════════════════════════════════ AdminLayout — sidebar + header Extracted from Components/Layout/AdminLayout.razor (Wave 1.7) so the razor file is markup-only and this file can be cached by the browser independently of the component output. Loaded from App.razor in the ; the .v suffix is cache-bust on deploy (Cloudflare + browser caches keyed on URL). ═══════════════════════════════════════════════════════════════════════════ Two responsive modes: - Desktop (768px and up): persistent left sidebar, optional collapse to a 56px icon strip - Mobile (under 768px): off-canvas drawer, hamburger reveals as overlay Body classes drive both: .sidebar-collapsed → desktop only: 56px icon strip .sidebar-mobile-open → mobile only: drawer slid in admin-layout.v1.js handles toggling based on window.innerWidth. ═══════════════════════════════════════════════════════════════════════════ */ /* Header toggle — 44pt minimum touch target (iOS HIG). */ .sidebar-toggle-btn { background: transparent; border: 0; cursor: pointer; padding: .5rem .65rem; margin-left: .25rem; color: inherit; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; min-width: 44px; min-height: 44px; } .sidebar-toggle-btn:hover, .sidebar-toggle-btn:focus-visible { background: rgba(127,127,127,0.15); outline: none; } .sidebar-toggle-btn .material-icons { font-size: 1.6rem; } /* Header logo + title sizing — desktop defaults. Mobile overrides below. */ .portal-header-logo { max-height: 36px; max-width: 200px; margin-left: .75rem; object-fit: contain; } .portal-header-title { font-size: 1.1rem; font-weight: 600; margin-left: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .portal-header-admin-label { font-size: .8rem; opacity: .7; margin-left: .4rem; white-space: nowrap; } .portal-header-left { min-width: 0; flex: 1 1 auto; } .portal-header-right { margin-right: 1rem; flex: 0 0 auto; } /* Page content padding control — apply to the inner div Radzen wraps in rz-p-4 so we can dial it back on mobile (Radzen's 1.5rem padding eats valuable width). */ .portal-main-content { box-sizing: border-box; } /* ─── Desktop sidebar (≥ 768px) ────────────────────────────────────────── */ .portal-sidebar { width: 260px !important; transition: width .18s ease, transform .25s ease, box-shadow .18s ease; } .rz-body { transition: margin-left .18s ease; } /* Collapsed (icon-strip) mode — DESKTOP ONLY; gated by the media query below to avoid colliding with the mobile off-canvas state. */ @media (min-width: 768px) { body.sidebar-collapsed .portal-sidebar { width: 56px !important; } body.sidebar-collapsed .rz-body { margin-left: 56px !important; } body.sidebar-collapsed .portal-sidebar .rz-navigation-item-text, body.sidebar-collapsed .portal-sidebar .rz-navigation-item-title, body.sidebar-collapsed .portal-sidebar .rz-navigation-item-link-arrow, body.sidebar-collapsed .portal-sidebar .rz-navigation-item-icon-children, body.sidebar-collapsed .portal-sidebar .rz-navigation-menu { display: none !important; } body.sidebar-collapsed .portal-sidebar .rz-navigation-item-link { justify-content: center; padding-left: .25rem !important; padding-right: .25rem !important; } body.sidebar-collapsed .admin-mode-divider { margin: .75rem .5rem; } /* ─── Hover-expand on a COLLAPSED desktop sidebar ──────────────────── Without this the strip is permanently icon-only with sub-menus display:none — top-level Admin / Setup / etc. items have no leaf href and only "expand" their (hidden) child UL, so a click looks like nothing happens. Restoring hover-expand pops the full menu out as a transient overlay; the body margin stays at 56px so the page does NOT reflow. */ body.sidebar-collapsed .portal-sidebar:hover { width: 260px !important; z-index: 1000; box-shadow: 2px 0 14px rgba(0,0,0,.18); overflow: visible; } body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-item-text, body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-item-title { display: initial !important; } body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-item-link-arrow, body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-item-icon-children { display: inline-block !important; } body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-menu { display: block !important; } body.sidebar-collapsed .portal-sidebar:hover .rz-navigation-item-link { justify-content: flex-start; padding-left: 1rem !important; padding-right: 1rem !important; } } /* Backdrop — rendered in markup at all sizes; shown only on mobile via the sidebar-mobile-open body class rule in the @media block below. */ .portal-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; } /* ─── Mobile (under 768px) ─────────────────────────────────────────────── */ @media (max-width: 767.98px) { /* Header polish — hide the standalone "admin" label, tighten gaps. */ .portal-header-admin-label { display: none; } .portal-header-logo { max-height: 28px; max-width: 140px; margin-left: .5rem; } .portal-header-title { font-size: 1rem; margin-left: .5rem; max-width: 40vw; } .portal-header-right { margin-right: .25rem; gap: .25rem !important; } /* Header sizing — force the RadzenHeader and its inner flex stacks to honour the actual viewport. Without this Radzen's defaults left the right cluster wider than the parent, so the language picker rendered ON TOP of the hamburger. Hamburger gets explicit flex: 0 0 44px so it never shrinks; the title gets flex 1 1 + min-width 0 + overflow hidden so it absorbs any remaining width pressure with an ellipsis. */ .rz-header { padding: 0 .25rem !important; max-width: 100% !important; } .rz-header > * { max-width: 100% !important; min-width: 0 !important; } .portal-header-left { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; } .portal-header-right { flex: 0 0 auto !important; } .sidebar-toggle-btn { flex: 0 0 44px; } .culture-picker, .user-menu { flex: 0 0 auto; } .culture-picker select { max-width: 90px; } .user-menu-name { display: none !important; } /* Sidebar — off-canvas via display none/block (transforms got fought by Radzen's own CSS + JS during the original attempt; display:none takes the element out of layout entirely and is uncontestable). Radzen's own responsive layer is disabled via Responsive="false" on the markup, so the simple .portal-sidebar selector wins here. */ .portal-sidebar { display: none !important; } body.sidebar-mobile-open .portal-sidebar { display: block !important; position: fixed !important; top: 56px !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: 80vw !important; max-width: 320px !important; height: auto !important; z-index: 1000 !important; transform: none !important; box-shadow: 2px 0 14px rgba(0,0,0,.18) !important; margin: 0 !important; overflow-y: auto; } body.sidebar-mobile-open .portal-sidebar-backdrop { display: block; } body.sidebar-mobile-open { overflow: hidden; } /* Body margin reset — Radzen's default leaves room for the sidebar; on mobile the drawer overlays, so the body should be full width and start at left:0. Also zero out any horizontal margins from .rz-layout / .rz-content so the page content actually reaches the viewport edges. */ .rz-body, .rz-layout .rz-body { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; width: 100% !important; left: 0 !important; } /* Tighter page padding so the actual content gets more width. */ .portal-main-content.rz-p-4 { padding: 0.75rem !important; } } /* ─── Tiny phones (under 480px) — extra trim ──────────────────────────── */ @media (max-width: 479.98px) { .portal-header-logo { max-width: 110px; } .portal-header-title { max-width: 40vw; font-size: .95rem; } .portal-header-right { gap: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ UserMenu — top-right profile dropdown Extracted from Components/Layout/UserMenu.razor (Wave 1.7). Lives here rather than in a co-located .razor.css because the dark-theme overrides need to match [data-theme="material-dark"] on , which is an ancestor of the component and so isn't reachable from Blazor's scoped CSS. The .user-menu-* class names are uniquely prefixed so global is safe. ═══════════════════════════════════════════════════════════════════════════ */ /* Important markers below override Radzen's anchor / button styles that otherwise de-saturate the text and made the dropdown items look greyed-out at rest. */ .user-menu { position: relative; outline: none; } .user-menu-avatar { display: inline-flex; align-items: center; gap: .4rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 10px 4px 8px; cursor: pointer; font: inherit; } .user-menu-avatar:hover { background: rgba(255,255,255,.08); } .user-menu-avatar .material-icons { font-size: 1.2rem; } .user-menu-name { font-size: .85rem; opacity: .9; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-caret { font-size: 1rem !important; opacity: .7; } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #ffffff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px 0; z-index: 1000; } .user-menu-item { display: flex; align-items: center; gap: .65rem; padding: 8px 14px; text-decoration: none !important; color: #1f1f1f !important; font-size: .9rem; font-weight: 500; cursor: pointer; } .user-menu-item:visited { color: #1f1f1f !important; } .user-menu-item:hover, .user-menu-item:hover * { background: #eef1f6; color: #000 !important; } .user-menu-item .material-icons { font-size: 1.1rem; color: #5469d4; opacity: 1; } .user-menu-sep { height: 1px; background: rgba(0,0,0,.1); margin: 4px 0; } .user-menu-logout { padding: 0; } .user-menu-logout button { all: unset; display: flex; align-items: center; gap: .65rem; padding: 8px 14px; width: 100%; cursor: pointer; color: #1f1f1f; font-weight: 500; font-size: .9rem; } .user-menu-logout button:hover { background: #eef1f6; color: #000; } .user-menu-logout button .material-icons { color: #c0392b; opacity: 1; } /* Theme-toggle row mirrors the logout row's button-as-anchor styling, but with a neutral icon tint so the moon/sun reads as a control rather than a warning. */ .user-menu-theme { padding: 0; } .user-menu-theme button { all: unset; display: flex; align-items: center; gap: .65rem; padding: 8px 14px; width: 100%; cursor: pointer; color: #1f1f1f; font-weight: 500; font-size: .9rem; } .user-menu-theme button:hover { background: #eef1f6; color: #000; } .user-menu-theme button .material-icons { color: #5469d4; opacity: 1; } /* Dark-theme overrides. App.razor stamps data-theme="material-dark" on the root html element. */ [data-theme="material-dark"] .user-menu-panel { background: #2b2b2b; border-color: rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.6); } [data-theme="material-dark"] .user-menu-item, [data-theme="material-dark"] .user-menu-item:visited, [data-theme="material-dark"] .user-menu-logout button, [data-theme="material-dark"] .user-menu-theme button { color: #e8e8e8 !important; } [data-theme="material-dark"] .user-menu-item:hover, [data-theme="material-dark"] .user-menu-item:hover *, [data-theme="material-dark"] .user-menu-logout button:hover, [data-theme="material-dark"] .user-menu-theme button:hover { background: #3a3a3a; color: #fff !important; } [data-theme="material-dark"] .user-menu-sep { background: rgba(255,255,255,.12); }