/* Painter Links — app shell layout + command palette on top of theme.css */ /* full-height app shell; sticky sidebar + topbar */ .bl-shell { min-height: 100vh; transition: grid-template-columns .2s ease; } /* sidebar is a flex column so the collapse control pins to the bottom (fills the full height instead of leaving dead space below the last nav item) */ .bl-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } .bl-side .nav2 { flex: 1 1 auto; } .main { min-height: 100vh; } /* sidebar footer + collapse toggle */ .bl-sidefoot { margin-top: auto; padding-top: .55rem; border-top: .0625rem solid rgba(255, 255, 255, .08); } .bl-collapse { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .42rem .5rem; border: 0; background: transparent; border-radius: .45rem; color: #9fb0c4; font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .bl-collapse:hover { background: rgba(255, 255, 255, .07); color: #fff; } .bl-collapse .material-symbols-rounded { font-size: 1.05rem; transition: transform .2s ease; } /* collapsed icon-rail state (toggled on pre-paint to avoid a flash) */ .bl-nav-collapsed .bl-shell { grid-template-columns: 3.75rem 1fr; } .bl-nav-collapsed .bl-side { padding-left: .35rem; padding-right: .35rem; } .bl-nav-collapsed .bl-side .nl, .bl-nav-collapsed .bl-side .bn, .bl-nav-collapsed .bl-side .navseg { display: none; } .bl-nav-collapsed .bl-side .ni, .bl-nav-collapsed .bl-side .sbrand, .bl-nav-collapsed .bl-collapse { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .bl-nav-collapsed .bl-collapse .material-symbols-rounded { transform: rotate(180deg); } .topbar { position: sticky; top: 0; z-index: 50; } .bl-content { padding: 1.1rem 1.25rem 2.5rem; } /* topbar search / command-palette trigger */ .bl-search { display: inline-flex; align-items: center; gap: .4rem; margin-left: .6rem; background: rgba(255, 255, 255, .1); border: .0625rem solid rgba(255, 255, 255, .14); border-radius: 625rem; padding: .3rem .55rem .3rem .7rem; color: #cfe0ef; font-family: inherit; font-size: .7rem; cursor: pointer; min-width: 12rem; } .bl-search:hover { background: rgba(255, 255, 255, .16); } .bl-search .material-symbols-rounded { font-size: .95rem; } .bl-search-lbl { color: #9fb0c4; } .bl-kbd { margin-left: auto; font-size: .58rem; font-weight: 700; color: #9fb0c4; background: rgba(255, 255, 255, .1); border-radius: .3rem; padding: .08rem .3rem; } /* command palette overlay */ .bl-palette-wrap[hidden] { display: none !important; } .bl-palette-wrap { position: fixed; inset: 0; z-index: 400; background: rgba(6, 15, 28, .55); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(.125rem); } .bl-palette { width: min(34rem, 92vw); background: var(--surface); border: .0625rem solid var(--line); border-radius: .8rem; box-shadow: 0 1.5rem 3rem rgba(16, 33, 58, .35); overflow: hidden; } .bl-palette-search { display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; border-bottom: .0625rem solid var(--line); } .bl-palette-search .material-symbols-rounded { font-size: 1.2rem; color: var(--muted); } .bl-palette-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: .9rem; color: var(--text); } .bl-palette-list { max-height: 22rem; overflow-y: auto; padding: .35rem; } .bl-pi { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: .5rem; color: var(--text); cursor: pointer; } .bl-pi:hover, .bl-pi.hot { background: var(--hover); } .bl-pi .material-symbols-rounded { font-size: 1.15rem; color: var(--royal-600); } .bl-pi b { font-size: .8rem; font-weight: 600; display: block; } .bl-pi small { font-size: .66rem; color: var(--muted); } .bl-pi-search b { color: var(--royal-600); } .bl-pi-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: .76rem; } /* page header + toolbar helpers (used by every page) */ .bl-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .bl-head .ht { flex: 1; min-width: 0; } .bl-head h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--text); display: flex; align-items: center; gap: .5rem; } .bl-head h1 .material-symbols-rounded { color: var(--gold); font-size: 1.3rem; } .bl-head .hs { font-size: .74rem; color: var(--muted); margin: .15rem 0 0; } .bl-head .ha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .bl-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; } .bl-spacer { flex: 1; } .bl-section { margin-bottom: 1.4rem; } /* compact form rhythm */ .bl-formcard { max-width: 60rem; } /* responsive: sidebar becomes a drawer under 53.75rem */ .bl-burger { display: none; } @media (max-width: 53.75rem) { .bl-shell { grid-template-columns: 1fr; } .bl-side { position: fixed; left: 0; top: 0; bottom: 0; width: 13rem; z-index: 200; transform: translateX(-100%); transition: transform .22s ease; box-shadow: .5rem 0 2rem rgba(0, 0, 0, .35); } body.bl-nav-open .bl-side { transform: none; } .bl-burger { display: inline-flex !important; } .bl-search { min-width: 0; } .bl-search-lbl, .bl-kbd { display: none; } .topbar { gap: .4rem; padding-left: .7rem; padding-right: .7rem; } .topbar .tr { gap: .25rem; min-width: 0; } .bl-logout-form .btn { min-width: 0; padding-left: .35rem; padding-right: .35rem; } .bl-logout-form .btn { font-size: 0; } .bl-logout-form .material-symbols-rounded { font-size: 1rem; } .bl-content { padding: .9rem .8rem 2rem; } /* the drawer shows full labels on mobile — neutralize the desktop icon-rail */ .bl-nav-collapsed .bl-shell { grid-template-columns: 1fr; } .bl-nav-collapsed .bl-side { width: 13rem; padding: .75rem .55rem; } .bl-nav-collapsed .bl-side .nl, .bl-nav-collapsed .bl-side .bn, .bl-nav-collapsed .bl-side .navseg { display: revert; } .bl-nav-collapsed .bl-side .ni, .bl-nav-collapsed .bl-side .sbrand, .bl-nav-collapsed .bl-collapse { justify-content: flex-start; gap: .5rem; } .bl-sidefoot { display: none; } } /* row-action overflow (kebab) menu — collapses the per-row icon clutter. position:fixed so it escapes the table's overflow-x:auto clipping; JS sets top/left. */ .bl-rowmenu { position: relative; display: inline-flex; } .bl-rowmenu > .menu { position: fixed; z-index: 200; display: none; text-align: left; min-width: 12rem; } .bl-rowmenu > .menu.open { display: block; } .bl-rowmenu .menu form { margin: 0; } .bl-rowmenu .menu button.mi { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; } .bl-rowmenu .menu .mi.danger, .bl-rowmenu .menu .mi.danger .material-symbols-rounded { color: var(--risk); } .bl-actions { display: inline-flex; align-items: center; gap: .15rem; justify-content: flex-end; } /* live-preview empty state (covers the frame until first render — theme-aware) */ .bl-preview-shell { position: relative; background: var(--surface-2); } .bl-preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; color: var(--muted); background: var(--surface); border: .0625rem solid var(--line); border-radius: .5rem; pointer-events: none; } .bl-preview-empty .material-symbols-rounded { font-size: 2.1rem; color: var(--royal-600); opacity: .45; } .bl-preview-empty p { font-size: .8rem; margin: 0; } .bl-preview-shell.rendered .bl-preview-empty { display: none; } /* KPI trend delta chip (analytics) */ .bl-trend { display: inline-flex; align-items: center; gap: .05rem; font-size: .6rem; font-weight: 800; margin-left: .45rem; padding: .08rem .32rem; border-radius: 625rem; vertical-align: middle; letter-spacing: 0; } .bl-trend .material-symbols-rounded { font-size: .72rem; } .bl-trend.up { color: var(--teal); background: rgba(18, 165, 148, .13); } .bl-trend.down { color: var(--coral); background: rgba(239, 111, 83, .13); } .bl-trend.flat { color: var(--muted); background: var(--hover); } /* toast stack (copy feedback + future notices) */ .bl-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 500; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; } .bl-toasts .toast { opacity: 0; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease; } .bl-toasts .toast.in { opacity: 1; transform: none; } /* bulk action bar (list) */ .bl-bulk-bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .75rem; padding: .5rem .7rem; background: var(--surface); border: .0625rem solid var(--royal); border-radius: .6rem; box-shadow: var(--sh); } .bl-bulk-bar[hidden] { display: none !important; } .bl-bulk-bar .cnt { font-size: .74rem; font-weight: 700; color: var(--royal-600); display: inline-flex; align-items: center; gap: .35rem; } .bl-bulk-bar .material-symbols-rounded { font-size: 1rem; } /* page-hero marker (no extra style needed beyond .bl-head) */ .bl-page-hero { } /* The shared grid defines .c2-.c8; forms also use full-width .c12 (and 9-11). */ .g12 .c9 { grid-column: span 9; } .g12 .c10 { grid-column: span 10; } .g12 .c11 { grid-column: span 11; } .g12 .c12 { grid-column: span 12; } /* authentication surface */ .bl-login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; } .bl-login-shell { width: min(100%, 28rem); } .bl-login-card { background: var(--surface); border: .0625rem solid var(--line); border-radius: 1rem; padding: 2rem; box-shadow: var(--sh); } .bl-login-mark { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; background: var(--hover); color: var(--teal); margin-bottom: 1.25rem; } .bl-login-mark .material-symbols-rounded { font-size: 1.7rem; } .bl-login-card h1 { margin: .25rem 0 .5rem; color: var(--text); font-size: 1.45rem; } .bl-login-copy { color: var(--muted); font-size: .8rem; margin: 0 0 1.25rem; } .bl-login-form { display: grid; gap: 1rem; margin-top: 1rem; } .bl-login-form .btn { justify-content: center; width: 100%; } .bl-logout-form { margin: 0; } .bl-logout-form .btn { color: var(--text); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: .125rem solid var(--teal-bright); outline-offset: .125rem; } button:disabled { cursor: wait; opacity: .65; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }