/*
* Publecto UI Foundation — Component Styles
* All values use design tokens from design-tokens.css.
* No hard-coded colors, spacing, or radii.
*/
/* ═══════════════════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
height: 100%;
overflow: hidden; /* prevent viewport scroll — all scrolling must happen inside designated containers */
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text-primary);
background: var(--color-bg-primary);
transition: background var(--duration-normal) var(--easing-default),
color var(--duration-normal) var(--easing-default);
-webkit-text-size-adjust: 100%;
}
body { height: 100vh; overflow: hidden; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
img, svg { display: block; max-width: 100%; }
code, pre, kbd { font-family: var(--font-family-mono); }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-context-menu);
padding: var(--space-2) var(--space-4);
background: var(--color-accent);
color: var(--color-text-inverse);
border-radius: var(--radius-base);
font-weight: var(--font-weight-medium);
transition: top var(--duration-fast);
}
.skip-link:focus { top: var(--space-4); }
/* ═══════════════════════════════════════════════════════
TYPOGRAPHY SCALE
═══════════════════════════════════════════════════════ */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
/* ═══════════════════════════════════════════════════════
APP SHELL LAYOUT
═══════════════════════════════════════════════════════ */
.pub-shell {
/* position:fixed anchors the shell to the viewport — immune to ALL browser scroll
triggers (anchor nav, focus, scrollIntoView, html/body overflow quirks).
top/right/bottom/left:0 fills 100% of the viewport without needing height:100vh. */
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: grid;
--icon-bar-col: var(--icon-bar-width); /* overridden to max-content for stacked labels */
grid-template-areas:
"header header header header"
"menu-bar menu-bar menu-bar menu-bar"
"icon-bar left-bar main right-bar"
"footer footer footer footer";
grid-template-rows: var(--header-height) var(--menu-bar-height) 1fr var(--footer-height);
grid-template-columns: var(--icon-bar-col) var(--sidebar-left-width) 1fr var(--sidebar-right-width);
min-width: 768px; /* guard: this is an admin tool — no sub-768px layout defined yet */
/* overflow:clip (not hidden) — clip does NOT create a scroll container.
overflow:hidden would let the browser's anchor-nav algorithm set scrollTop
on the shell, displacing the header by the header height. clip prevents
any scrollTop from ever being set while still clipping visual overflow. */
overflow: clip;
transition: grid-template-columns var(--duration-normal) var(--easing-default);
}
.pub-shell.left-collapsed {
grid-template-columns: var(--icon-bar-col) 0 1fr var(--sidebar-right-width);
}
.pub-shell.right-collapsed {
grid-template-columns: var(--icon-bar-col) var(--sidebar-left-width) 1fr 0;
}
.pub-shell.left-collapsed.right-collapsed {
grid-template-columns: var(--icon-bar-col) 0 1fr 0;
}
.pub-shell.no-icon-bar {
grid-template-columns: 0 var(--sidebar-left-width) 1fr var(--sidebar-right-width);
}
/* ─── Icon Bar Placement Variants ─────────────────────────────────────────
Default (left): no modifier class needed.
iconbar-right: icon bar at the far right edge.
iconbar-top: icon bar as a horizontal strip below the header.
iconbar-bottom: icon bar as a horizontal strip above the footer.
────────────────────────────────────────────────────────────────────────── */
/* RIGHT */
.pub-shell.iconbar-right {
grid-template-areas:
"header header header header"
"menu-bar menu-bar menu-bar menu-bar"
"left-bar main right-bar icon-bar"
"footer footer footer footer";
grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width) var(--icon-bar-col);
}
.pub-shell.iconbar-right.left-collapsed { grid-template-columns: 0 1fr var(--sidebar-right-width) var(--icon-bar-col); }
.pub-shell.iconbar-right.right-collapsed { grid-template-columns: var(--sidebar-left-width) 1fr 0 var(--icon-bar-col); }
.pub-shell.iconbar-right.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0 var(--icon-bar-col); }
.pub-shell.iconbar-right.right-absent { grid-template-columns: var(--sidebar-left-width) 1fr 0 var(--icon-bar-col); }
.pub-shell.iconbar-right.left-collapsed.right-absent { grid-template-columns: 0 1fr 0 var(--icon-bar-col); }
.pub-shell.iconbar-right .pub-icon-bar { border-right: none; border-left: 1px solid var(--color-border); }
/* TOP */
.pub-shell.iconbar-top {
grid-template-areas:
"header header header"
"menu-bar menu-bar menu-bar"
"icon-bar icon-bar icon-bar"
"left-bar main right-bar"
"footer footer footer";
grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
grid-template-rows: var(--header-height) var(--menu-bar-height) var(--icon-bar-col) 1fr var(--footer-height);
}
.pub-shell.iconbar-top.left-collapsed { grid-template-columns: 0 1fr var(--sidebar-right-width); }
.pub-shell.iconbar-top.right-collapsed { grid-template-columns: var(--sidebar-left-width) 1fr 0; }
.pub-shell.iconbar-top.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0; }
.pub-shell.iconbar-top.right-absent { grid-template-columns: var(--sidebar-left-width) 1fr 0; }
.pub-shell.iconbar-top.left-collapsed.right-absent { grid-template-columns: 0 1fr 0; }
.pub-shell.iconbar-top .pub-icon-bar { flex-direction: row; width: 100%; padding: 0 var(--space-2); border-right: none; border-bottom: 1px solid var(--color-border); }
.pub-shell.iconbar-top .pub-icon-bar-top { flex-direction: row; }
.pub-shell.iconbar-top .pub-icon-bar-bottom { flex-direction: row; padding-bottom: 0; padding-right: var(--space-2); }
/* BOTTOM */
.pub-shell.iconbar-bottom {
grid-template-areas:
"header header header"
"menu-bar menu-bar menu-bar"
"left-bar main right-bar"
"icon-bar icon-bar icon-bar"
"footer footer footer";
grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
grid-template-rows: var(--header-height) var(--menu-bar-height) 1fr var(--icon-bar-col) var(--footer-height);
}
.pub-shell.iconbar-bottom.left-collapsed { grid-template-columns: 0 1fr var(--sidebar-right-width); }
.pub-shell.iconbar-bottom.right-collapsed { grid-template-columns: var(--sidebar-left-width) 1fr 0; }
.pub-shell.iconbar-bottom.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0; }
.pub-shell.iconbar-bottom.right-absent { grid-template-columns: var(--sidebar-left-width) 1fr 0; }
.pub-shell.iconbar-bottom.left-collapsed.right-absent { grid-template-columns: 0 1fr 0; }
.pub-shell.iconbar-bottom .pub-icon-bar { flex-direction: row; width: 100%; padding: 0 var(--space-2); border-right: none; border-top: 1px solid var(--color-border); }
.pub-shell.iconbar-bottom .pub-icon-bar-top { flex-direction: row; }
.pub-shell.iconbar-bottom .pub-icon-bar-bottom { flex-direction: row; padding-bottom: 0; padding-right: var(--space-2); }
/* When labels are present in horizontal mode, let the bar row auto-size to its content.
Setting --icon-bar-width for label width (a column concept) would make the bar row
as tall as the label width — use min-content instead. */
.pub-shell.iconbar-top.iconbar-has-labels { grid-template-rows: var(--header-height) var(--menu-bar-height) min-content 1fr var(--footer-height); }
.pub-shell.iconbar-bottom.iconbar-has-labels { grid-template-rows: var(--header-height) var(--menu-bar-height) 1fr min-content var(--footer-height); }
/* md: right sidebar off-canvas */
/* Responsive breakpoints deferred — this is an admin/builder tool.
Responsive layout will be designed intentionally as a dedicated feature.
The min-width: 768px guard on .pub-shell prevents catastrophic collapse. */
/* ═══════════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════════ */
.pub-header {
grid-area: header;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-4);
height: var(--header-height);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
/* position:relative (not sticky) — the grid row already pins the header at top.
sticky inside overflow:hidden falls through to viewport as scroll port, causing
anchor navigation to shift the entire grid layout off-screen. */
position: relative;
z-index: var(--z-header);
transition: box-shadow var(--duration-normal);
}
.pub-header.scrolled { box-shadow: var(--shadow-sm); }
.pub-header-brand {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
flex-shrink: 0;
}
.pub-header-logo {
width: 32px; height: 32px;
background: var(--color-accent);
border-radius: var(--radius-base);
display: flex; align-items: center; justify-content: center;
color: var(--color-text-inverse);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-md);
}
.pub-header-title {
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size: var(--font-size-md);
}
.pub-header-subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-left: var(--space-2);
}
.pub-header-hamburger {
display: none;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: none;
background: transparent;
cursor: pointer;
color: var(--color-text-secondary);
border-radius: var(--radius-base);
}
.pub-header-hamburger:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
/* ── Shared search-field component ───────────────────────────────────────── */
/* Display:flex keeps icon + input + optional badge in one row. */
/* Border and background live on the container so the icon is never painted */
/* behind the input's own background. No absolute positioning needed. */
.pub-search-field {
display: flex;
align-items: center;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pub-search-field:focus-within {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-subtle);
}
.pub-search-field-icon {
flex-shrink: 0;
display: flex;
align-items: center;
padding-left: var(--space-2);
color: var(--color-text-secondary);
pointer-events: none;
}
.pub-search-field input {
flex: 1;
min-width: 0;
padding: var(--space-2);
background: transparent;
border: none;
color: var(--color-text-primary);
font-size: var(--font-size-sm);
line-height: 1.4;
}
.pub-search-field input:focus { outline: none; }
/* ── Header search — layout overrides only ────────────────────────────────── */
.pub-header-search {
flex: 1;
max-width: 480px;
margin: 0 var(--space-4);
border-radius: var(--radius-full);
}
.pub-header-search:focus-within {
box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
/* kbd badge sits as a flex sibling after the input — no absolute needed */
.pub-header-search-kbd {
flex-shrink: 0;
margin-right: var(--space-2);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 1px var(--space-1);
pointer-events: none;
white-space: nowrap;
}
.pub-header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-1);
}
.pub-header-icon-btn {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-base);
position: relative;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-header-icon-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.pub-header-icon-btn[aria-pressed="true"] { color: var(--color-accent); background: var(--color-accent-subtle, rgba(99,102,241,.12)); }
/* ── Panel tabs ── always-visible lids on the outer edge of each sidebar.
Position tracks the sidebar border using the same CSS variable the
splitter updates, and transitions with the same timing as the grid
so the tab moves in sync as sidebars expand/collapse. */
/* Right tab: sits on the LEFT edge of the right sidebar */
.pub-right-panel-tab {
position: absolute;
left: -15px; /* hang off sidebar's left border — moves with the sidebar automatically */
top: 45px;
z-index: var(--z-sidebar);
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 35px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
color: var(--color-text-secondary);
cursor: pointer;
box-shadow: -2px 0 6px rgba(0,0,0,.08);
transition: background var(--duration-fast), color var(--duration-fast);
}
/* When no right sidebar content exists for the page: collapse column AND fully hide elements */
.pub-shell.right-absent {
grid-template-columns: var(--icon-bar-col) var(--sidebar-left-width) 1fr 0;
}
.pub-shell.left-collapsed.right-absent {
grid-template-columns: var(--icon-bar-col) 0 1fr 0;
}
.pub-shell.right-absent .pub-sidebar-right,
.pub-shell.right-absent .pub-right-panel-tab {
display: none;
}
.pub-right-panel-tab:hover {
background: var(--color-item-hover);
color: var(--color-text-primary);
}
/* Left tab: sits on the RIGHT edge of the left sidebar */
.pub-left-panel-tab {
position: absolute;
right: -15px; /* hang off sidebar's right border — moves with the sidebar automatically */
top: 45px;
z-index: var(--z-sidebar);
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 35px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-left: none;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--color-text-secondary);
cursor: pointer;
box-shadow: 2px 0 6px rgba(0,0,0,.08);
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-left-panel-tab:hover {
background: var(--color-item-hover);
color: var(--color-text-primary);
}
/* Chevron flips 180° when the corresponding sidebar is open */
.pub-left-panel-tab svg,
.pub-right-panel-tab svg {
transition: transform var(--duration-normal) var(--easing-default);
}
.pub-shell:not(.left-collapsed) .pub-left-panel-tab svg { transform: rotate(180deg); }
.pub-shell:not(.right-collapsed) .pub-right-panel-tab svg { transform: rotate(180deg); }
.pub-header-icon-btn .badge {
position: absolute;
top: 2px; right: 2px;
min-width: 16px; height: 16px;
background: var(--color-danger);
color: var(--color-text-inverse);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════ */
.pub-footer {
grid-area: footer;
display: flex;
align-items: center;
gap: var(--space-4);
padding: 0 var(--space-4);
height: var(--footer-height);
background: var(--color-bg-elevated);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
position: sticky;
bottom: 0;
z-index: var(--z-sticky);
}
.pub-footer-version { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.pub-footer-status { display: flex; align-items: center; gap: var(--space-1); }
.pub-footer-status-dot {
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: var(--color-success);
}
.pub-footer-status-dot.degraded { background: var(--color-warning); animation: pulse 2s infinite; }
.pub-footer-status-dot.down { background: var(--color-danger); animation: pulse 1s infinite; }
.pub-footer-links { display: flex; gap: var(--space-4); margin: 0 auto; }
.pub-footer-links a { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.pub-footer-links a:hover { color: var(--color-accent); }
.pub-footer-connection { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.pub-footer-hint-line {
flex: 1;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 400px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ═══════════════════════════════════════════════════════
MENU BAR
═══════════════════════════════════════════════════════ */
.pub-menu-bar {
grid-area: menu-bar;
display: flex;
align-items: stretch;
height: var(--menu-bar-height);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
padding: 0 var(--space-2);
gap: 0;
position: relative;
z-index: var(--z-dropdown);
overflow: visible; /* let dropdowns hang below */
}
/* Top-level menu bar trigger buttons */
.pub-menu-bar-btn {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-3);
height: 100%;
border: none;
background: transparent;
color: var(--color-text-primary);
font-size: var(--font-size-sm);
font-family: var(--font-family-base);
cursor: pointer;
border-radius: var(--radius-base);
white-space: nowrap;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-menu-bar-btn:hover { background: var(--color-bg-secondary); }
.pub-menu-bar-btn[aria-expanded="true"] { background: var(--color-bg-secondary); color: var(--color-accent); }
/* Dropdown anchored to menu bar items — opens below the button */
.pub-menu-bar .dropdown-menu {
top: calc(100% + 2px);
transform-origin: top left;
}
/* Separator in the menu bar (e.g. grow spacer or pipe) */
.pub-menu-bar-sep {
flex: 1;
}
/* Icon-only button on the right side of the menu bar */
.pub-menu-bar-icon-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: 0 var(--space-2);
height: 100%;
border: none;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-family: var(--font-family-base);
cursor: pointer;
border-radius: var(--radius-base);
white-space: nowrap;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-menu-bar-icon-btn:hover { background: var(--color-item-hover); color: var(--color-text-primary); }
.pub-menu-bar-icon-btn[aria-expanded="true"] { background: var(--color-item-hover); color: var(--color-accent); }
/* Right-side dropdowns open to the left so they don't clip off-screen */
.pub-menu-bar .dropdown-right .dropdown-menu {
left: auto;
right: 0;
transform-origin: top right;
}
/* Avatar circle for the account button */
.pub-menu-bar-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-text-inverse);
font-size: 9px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.pub-menu-bar-account-name {
font-size: var(--font-size-sm);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════
ICON BAR
═══════════════════════════════════════════════════════ */
.pub-icon-bar {
grid-area: icon-bar;
display: flex;
flex-direction: column;
width: var(--icon-bar-width);
min-height: 0;
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border);
padding: var(--space-2) 0;
overflow: hidden;
/* Custom properties – override on .pub-shell or directly on .pub-icon-bar */
--iconbar-icon-size: 18px;
--iconbar-font-size: 11px;
--iconbar-font-family: inherit;
--iconbar-labels-width: 84px;
}
.pub-icon-bar-top {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pub-icon-bar-top::-webkit-scrollbar { display: none; }
.pub-icon-bar-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-bottom: var(--space-2); flex-shrink: 0; }
/* Horizontal bars — overflow switches axis */
.pub-shell.iconbar-top .pub-icon-bar-top,
.pub-shell.iconbar-bottom .pub-icon-bar-top {
overflow-y: hidden;
overflow-x: auto;
}
/* ─── Scroll arrow buttons ─────────────────────────────── */
/* display:flex below would override the UA [hidden] rule — block that */
.pub-icon-scroll-btn[hidden] { display: none; }
.pub-icon-scroll-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: pointer;
opacity: 0.7;
transition: opacity var(--duration-fast), background var(--duration-fast);
/* Vertical default: full width, short height */
width: 100%;
height: 14px;
}
.pub-icon-scroll-btn:hover { opacity: 1; background: var(--color-bg-elevated); }
/* Horizontal bars: full height, narrow width */
.pub-shell.iconbar-top .pub-icon-scroll-btn,
.pub-shell.iconbar-bottom .pub-icon-scroll-btn {
height: 100%;
width: 14px;
}
/* Rotate chevrons 90° for horizontal orientation */
.pub-shell.iconbar-top .pub-icon-scroll-start svg,
.pub-shell.iconbar-bottom .pub-icon-scroll-start svg { transform: rotate(-90deg); }
.pub-shell.iconbar-top .pub-icon-scroll-end svg,
.pub-shell.iconbar-bottom .pub-icon-scroll-end svg { transform: rotate(90deg); }
/* ─── Icon size ─────────────────────────────────────────── */
.pub-icon-bar .pub-icon-btn svg {
width: var(--iconbar-icon-size);
height: var(--iconbar-icon-size);
flex-shrink: 0;
}
/* ─── Labels ─────────────────────────────────────────────── */
.pub-icon-label {
display: none;
font-size: var(--iconbar-font-size);
font-family: var(--iconbar-font-family);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
user-select: none;
}
/* has-labels: make label visible */
.pub-icon-bar.has-labels .pub-icon-label { display: block; }
/* label-below: column stack (icon on top, label beneath) */
.pub-icon-bar.label-below .pub-icon-btn {
flex-direction: column;
width: auto;
min-width: calc(var(--iconbar-icon-size) + 20px);
height: auto;
padding: var(--space-1) var(--space-2);
gap: 3px;
}
/* label-above: reversed column stack */
.pub-icon-bar.label-above .pub-icon-btn {
flex-direction: column-reverse;
width: auto;
min-width: calc(var(--iconbar-icon-size) + 20px);
height: auto;
padding: var(--space-1) var(--space-2);
gap: 3px;
}
/* label-right: row (icon left, label right) */
.pub-icon-bar.label-right .pub-icon-btn {
flex-direction: row;
width: 100%;
height: auto;
padding: var(--space-2) var(--space-3);
gap: var(--space-2);
justify-content: flex-start;
}
/* label-left: reversed row (label left, icon right) */
.pub-icon-bar.label-left .pub-icon-btn {
flex-direction: row-reverse;
width: 100%;
height: auto;
padding: var(--space-2) var(--space-3);
gap: var(--space-2);
justify-content: flex-end;
}
/* label-only: hide icon, always show label */
.pub-icon-bar.label-only .pub-icon-btn { height: auto; width: 100%; padding: var(--space-2) var(--space-3); }
.pub-icon-bar.label-only .pub-icon-btn svg { display: none; }
.pub-icon-bar.label-only .pub-icon-label { display: block; }
/* Active indicator: left pip doesn't suit wide label buttons — hide it for side/only layouts */
.pub-icon-bar.label-left .pub-icon-btn.active::before,
.pub-icon-bar.label-right .pub-icon-btn.active::before,
.pub-icon-bar.label-only .pub-icon-btn.active::before { display: none; }
/* Horizontal iconbar: buttons must auto-size by content, not stretch to full bar width */
.pub-shell.iconbar-top .pub-icon-bar.has-labels .pub-icon-btn,
.pub-shell.iconbar-bottom .pub-icon-bar.has-labels .pub-icon-btn {
width: auto;
min-width: calc(var(--iconbar-icon-size) + 20px);
}
.pub-icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-base);
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-icon-btn:hover { background: var(--color-item-hover); color: var(--color-text-primary); }
.pub-icon-btn.active {
background: var(--color-accent-subtle);
color: var(--color-accent);
}
.pub-icon-btn.active::before {
content: '';
position: absolute;
left: -4px; top: 50%;
transform: translateY(-50%);
width: 3px; height: 20px;
background: var(--color-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pub-icon-btn .icon-badge {
position: absolute;
top: 2px; right: 2px;
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: var(--color-danger);
border: 2px solid var(--color-bg-secondary);
}
.pub-icon-btn .icon-badge.info { background: var(--color-info); }
.pub-icon-btn .icon-badge.success { background: var(--color-success); }
.pub-icon-btn .icon-badge.warning { background: var(--color-warning); }
/* ═══════════════════════════════════════════════════════
LEFT SIDEBAR
═══════════════════════════════════════════════════════ */
.pub-sidebar-left {
grid-area: left-bar;
display: flex;
flex-direction: column;
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border);
/* overflow:visible — lets .pub-left-panel-tab (position:absolute; right:-15px)
hang outside the right edge. Content clipping is handled by the inner wrapper. */
overflow: visible;
transition: width var(--duration-normal) var(--easing-default);
min-width: 0;
min-height: 0;
position: relative;
}
.pub-sidebar-left-inner {
display: flex;
flex-direction: column;
overflow: hidden; /* clips nav content during sidebar collapse/resize */
flex: 1;
min-height: 0;
position: relative; /* containing block for .pub-splitter */
}
.pub-sidebar-header {
display: flex;
align-items: center;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.pub-sidebar-title {
flex: 1;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}
.pub-sidebar-collapse-btn {
display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border: none; background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--duration-fast), transform var(--duration-normal);
}
.pub-sidebar-collapse-btn:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.pub-sidebar.collapsed .pub-sidebar-collapse-btn { transform: rotate(180deg); }
/* ── Sidebar search — outer padding wrapper only ─────────────────────────── */
.pub-sidebar-search {
padding: var(--space-2) var(--space-3);
flex-shrink: 0;
}
.pub-nav-tree {
flex: 1;
overflow-y: auto;
padding: var(--space-2) 0;
list-style: none;
}
.pub-nav-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
cursor: pointer;
border-radius: var(--radius-base);
margin: 1px var(--space-2);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
transition: background var(--duration-fast), color var(--duration-fast);
user-select: none;
position: relative;
}
.pub-nav-item:hover { background: var(--color-row-hover); color: var(--color-text-primary); }
.pub-nav-item.active {
background: var(--color-accent-subtle);
color: var(--color-accent);
font-weight: var(--font-weight-medium);
}
.pub-nav-item.active::before {
content: '';
position: absolute;
left: -8px; top: 50%;
transform: translateY(-50%);
width: 3px; height: 16px;
background: var(--color-accent);
border-radius: 0 2px 2px 0;
}
.pub-nav-item .nav-chevron {
margin-left: auto;
transition: transform var(--duration-normal);
color: var(--color-text-disabled);
}
.pub-nav-item.expanded .nav-chevron { transform: rotate(90deg); }
.pub-nav-item.disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.pub-nav-children {
list-style: none;
overflow: hidden;
max-height: 0;
transition: max-height var(--duration-slow) var(--easing-out);
}
.pub-nav-children.open { max-height: 1000px; }
/* Suppress transitions during initial state restoration to prevent FOUC */
.pub-nav-initializing .pub-nav-children { transition: none !important; }
/* Filter utility — applied by JS during nav-tree filtering */
.pub-nav-filter-hidden { display: none !important; }
.pub-nav-children .pub-nav-item { padding-left: calc(var(--space-3) + var(--space-4)); }
.pub-nav-children .pub-nav-children .pub-nav-item { padding-left: calc(var(--space-3) + var(--space-8)); }
/* ═══════════════════════════════════════════════════════
RIGHT SIDEBAR
═══════════════════════════════════════════════════════ */
.pub-sidebar-right {
grid-area: right-bar;
display: flex;
flex-direction: column;
background: var(--color-bg-secondary);
border-left: 1px solid var(--color-border);
/* overflow:visible — lets .pub-right-panel-tab (position:absolute; left:-15px)
hang outside the left edge. Content clipping is handled by the inner wrapper. */
overflow: visible;
min-height: 0;
position: relative;
}
.pub-sidebar-right-inner {
display: flex;
flex-direction: column;
overflow: hidden; /* clips content during sidebar collapse/resize */
flex: 1;
min-height: 0;
position: relative; /* containing block for .pub-splitter */
}
/* Right sidebar header: title only, no button — tab on viewport edge handles toggle */
.pub-sidebar-right .pub-sidebar-header {
flex-direction: row;
}
.pub-sidebar-right-content { flex: 1; overflow-y: auto; }
/* ═══════════════════════════════════════════════════════
MAIN CONTENT
═══════════════════════════════════════════════════════ */
.pub-main {
grid-area: main;
overflow-y: auto;
scroll-behavior: smooth; /* anchor links scroll within this container, not the viewport */
min-height: 0;
background: var(--color-bg-primary);
padding: var(--space-6);
}
.pub-page-content { max-width: 1200px; }
/* ═══════════════════════════════════════════════════════
SPLITTER / RESIZE HANDLE
═══════════════════════════════════════════════════════ */
.pub-splitter {
position: absolute;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.pub-splitter.vertical {
right: 0; top: 0; bottom: 0;
width: 4px;
cursor: col-resize;
}
/* Right sidebar splitter sits on the left edge */
.pub-sidebar-right .pub-splitter.vertical {
right: auto;
left: 0;
}
.pub-splitter.horizontal {
left: 0; right: 0; bottom: 0;
height: 4px;
cursor: row-resize;
}
.pub-splitter:hover,
.pub-splitter.dragging {
background: var(--color-accent);
opacity: 0.5;
}
.pub-splitter-handle {
width: 4px;
height: 32px;
background: var(--color-border-strong);
border-radius: var(--radius-full);
transition: background var(--duration-fast);
}
.pub-splitter:hover .pub-splitter-handle,
.pub-splitter.dragging .pub-splitter-handle {
background: var(--color-accent);
}
/* ═══════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0 var(--space-4);
height: 36px;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: 1;
border: 1px solid transparent;
border-radius: var(--radius-base);
cursor: pointer;
text-decoration: none;
transition: background var(--duration-fast) var(--easing-default),
color var(--duration-fast),
border-color var(--duration-fast),
box-shadow var(--duration-fast);
user-select: none;
white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled], .btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Sizes */
.btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.btn-lg { height: 44px; padding: 0 var(--space-6); font-size: var(--font-size-md); }
/* Primary */
.btn-primary {
background: var(--color-accent);
color: var(--color-text-inverse);
border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-primary:active:not(:disabled) { filter: brightness(0.9); }
/* Secondary */
.btn-secondary {
background: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-accent-subtle); }
/* Ghost */
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-text-primary); }
/* Danger */
.btn-danger {
background: var(--color-danger);
color: var(--color-text-inverse);
border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }
/* Link */
.btn-link {
background: transparent;
color: var(--color-accent);
border-color: transparent;
padding: 0;
height: auto;
text-decoration: underline;
}
.btn-link:hover:not(:disabled) { color: var(--color-accent-hover); }
/* Loading state */
.btn.loading { position: relative; pointer-events: none; }
.btn.loading .btn-label { visibility: hidden; }
.btn.loading::after {
content: '';
position: absolute;
width: 14px; height: 14px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: var(--radius-full);
animation: spin 0.6s linear infinite;
}
/* Icon only */
.btn-icon {
width: 36px; padding: 0;
}
.btn-sm.btn-icon { width: 28px; }
.btn-lg.btn-icon { width: 44px; }
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════
FORM ELEMENTS
═══════════════════════════════════════════════════════ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-label {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.form-label .required { color: var(--color-danger); }
.form-label .hint-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--color-bg-sunken);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
cursor: pointer;
}
.form-label .hint-icon:hover { background: var(--color-accent-subtle); color: var(--color-accent); }
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var(--space-2) var(--space-3);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
color: var(--color-text-primary);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
appearance: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
background: var(--color-bg-secondary);
color: var(--color-text-disabled);
cursor: not-allowed;
}
.form-input.error,
.form-textarea.error,
.form-select.error {
border-color: var(--color-danger);
box-shadow: 0 0 0 3px var(--color-danger-subtle);
}
.form-input.readonly { background: var(--color-bg-secondary); cursor: default; }
/* Input with prefix/suffix */
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-prefix, .input-suffix {
position: absolute;
top: 50%; transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
font-size: var(--font-size-sm);
}
.input-prefix { left: var(--space-3); }
.input-suffix { right: var(--space-3); }
.input-wrapper.has-prefix .form-input { padding-left: var(--space-8); }
.input-wrapper.has-suffix .form-input { padding-right: var(--space-8); }
.input-clear {
position: absolute;
right: var(--space-2); top: 50%; transform: translateY(-50%);
background: transparent; border: none;
color: var(--color-text-secondary); cursor: pointer;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: var(--radius-full);
}
.input-clear:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%235A6478' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: var(--space-8);
cursor: pointer;
}
.form-helper { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.form-error { font-size: var(--font-size-xs); color: var(--color-danger); display: flex; align-items: center; gap: var(--space-1); }
/* Checkbox */
.form-check {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 16px; height: 16px;
appearance: none;
border: 2px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-bg-primary);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.form-check input[type="radio"] { border-radius: var(--radius-full); }
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
/* Checkmark via background-image SVG — more reliable than ::after on replaced elements */
.form-check input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.form-check input[type="radio"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.form-check input[type="checkbox"]:indeterminate,
.form-check input[type="checkbox"][data-tri-state="indeterminate"] {
background: var(--color-accent);
border-color: var(--color-accent);
/* Draw the dash via background-image — reliable on replaced elements
unlike ::after which does not repaint consistently on . */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='2' y='5' width='8' height='2' rx='1' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.form-check input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-check input:disabled { opacity: 0.5; cursor: not-allowed; }
.form-check label { font-size: var(--font-size-base); cursor: pointer; }
/* Toggle / Switch */
.form-toggle {
display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.form-toggle-track {
position: relative;
width: 40px; height: 22px;
background: var(--color-border-strong);
border-radius: var(--radius-full);
transition: background var(--duration-fast);
flex-shrink: 0;
}
.form-toggle-thumb {
position: absolute;
left: 3px; top: 3px;
width: 16px; height: 16px;
background: var(--color-text-inverse);
border-radius: var(--radius-full);
transition: transform var(--duration-fast) var(--easing-spring),
box-shadow var(--duration-fast);
box-shadow: var(--shadow-sm);
}
.form-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.form-toggle input:checked + .form-toggle-track { background: var(--color-accent); }
.form-toggle input:checked + .form-toggle-track .form-toggle-thumb { transform: translateX(18px); }
.form-toggle input:disabled + .form-toggle-track { opacity: 0.5; cursor: not-allowed; }
.form-toggle input:focus-visible + .form-toggle-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Tag/Token Input */
.form-tags {
display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
padding: var(--space-1) var(--space-2);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
min-height: 38px;
cursor: text;
}
.form-tags:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.form-tags input { border: none; outline: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-size-base); min-width: 80px; flex: 1; }
/* ═══════════════════════════════════════════════════════
CARDS
═══════════════════════════════════════════════════════ */
.card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-fast);
}
.card.hoverable:hover { box-shadow: var(--shadow-base); cursor: pointer; }
.card.selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-subtle); }
.card-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.card-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.card-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.card-body { padding: var(--space-5); }
.card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.card-media img, .card-media video { width: 100%; display: block; }
/* ═══════════════════════════════════════════════════════
BADGES, PILLS, TAGS
═══════════════════════════════════════════════════════ */
.badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
line-height: 1.5;
}
.badge-solid { background: var(--color-text-secondary); color: var(--color-text-inverse); }
.badge-outline { border: 1px solid currentColor; }
.badge-info { background: var(--color-info-subtle); color: var(--color-info); }
.badge-success { background: var(--color-success-subtle); color: var(--color-success); }
.badge-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.badge-neutral { background: var(--color-bg-sunken); color: var(--color-text-secondary); }
.badge-accent { background: var(--color-accent-subtle); color: var(--color-accent); }
.badge-removable { padding-right: var(--space-1); }
.badge .badge-remove {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
border: none; background: transparent;
cursor: pointer; border-radius: var(--radius-full);
color: currentColor; opacity: 0.7;
}
.badge .badge-remove:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.pill {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 2px var(--space-3);
font-size: var(--font-size-sm);
border-radius: var(--radius-full);
background: var(--color-bg-sunken);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.pill-sm { font-size: var(--font-size-xs); padding: 1px var(--space-2); }
.pill.active { background: var(--color-accent-subtle); color: var(--color-accent); border-color: var(--color-accent); }
.tag {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
background: var(--color-bg-sunken);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-primary { background: var(--color-accent-subtle); color: var(--color-accent); border-color: var(--color-accent); }
.tag-success { background: var(--color-success-subtle); color: var(--color-success); border-color: var(--color-success); }
.tag-warning { background: var(--color-warning-subtle); color: var(--color-warning); border-color: var(--color-warning); }
.tag-danger { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger); }
/* ═══════════════════════════════════════════════════════
AVATAR
═══════════════════════════════════════════════════════ */
.avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-accent-subtle);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--font-size-md); }
.avatar .status-dot {
position: absolute;
bottom: 1px; right: 1px;
width: 10px; height: 10px;
border-radius: var(--radius-full);
border: 2px solid var(--color-bg-elevated);
background: var(--color-success);
}
.avatar .status-dot.away { background: var(--color-warning); }
.avatar .status-dot.busy { background: var(--color-danger); }
.avatar .status-dot.offline { background: var(--color-border-strong); }
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid var(--color-bg-elevated); }
.avatar-group .avatar:first-child { margin-left: 0; }
/* ═══════════════════════════════════════════════════════
PROGRESS BAR
═══════════════════════════════════════════════════════ */
.progress {
height: 8px;
background: var(--color-bg-sunken);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-sm { height: 4px; }
.progress-lg { height: 12px; }
.progress-bar {
height: 100%;
background: var(--color-accent);
border-radius: var(--radius-full);
transition: width var(--duration-slow) var(--easing-default);
}
.progress-bar.success { background: var(--color-success); }
.progress-bar.warning { background: var(--color-warning); }
.progress-bar.danger { background: var(--color-danger); }
.progress-bar.indeterminate {
width: 40% !important;
animation: progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* ═══════════════════════════════════════════════════════
SPINNER
═══════════════════════════════════════════════════════ */
.spinner {
display: inline-block;
width: 20px; height: 20px;
border: 2px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: var(--radius-full);
animation: spin 0.7s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
/* ═══════════════════════════════════════════════════════
SKELETON
═══════════════════════════════════════════════════════ */
.skeleton {
background: linear-gradient(90deg,
var(--color-bg-sunken) 25%,
var(--color-bg-secondary) 50%,
var(--color-bg-sunken) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
.skeleton-line { height: 14px; margin-bottom: var(--space-2); }
.skeleton-circle { border-radius: var(--radius-full); }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ═══════════════════════════════════════════════════════
EMPTY STATE
═══════════════════════════════════════════════════════ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-8);
text-align: center;
color: var(--color-text-secondary);
}
.empty-state-icon {
width: 64px; height: 64px;
margin-bottom: var(--space-4);
color: var(--color-border-strong);
}
.empty-state-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.empty-state-desc { font-size: var(--font-size-base); margin-bottom: var(--space-6); max-width: 360px; }
/* ═══════════════════════════════════════════════════════
KPI / STAT CARD
═══════════════════════════════════════════════════════ */
.kpi-card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.kpi-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }
.kpi-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: var(--line-height-tight); }
.kpi-trend { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--font-size-sm); }
.kpi-trend.up { color: var(--color-success); }
.kpi-trend.down { color: var(--color-danger); }
/* ═══════════════════════════════════════════════════════
ALERTS / BANNERS
═══════════════════════════════════════════════════════ */
.alert {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid;
font-size: var(--font-size-base);
}
.alert-info { background: var(--color-info-subtle); border-color: var(--color-info); color: var(--color-info); }
.alert-success { background: var(--color-success-subtle); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background: var(--color-warning-subtle); border-color: var(--color-warning); color: var(--color-warning); }
.alert-danger { background: var(--color-danger-subtle); border-color: var(--color-danger); color: var(--color-danger); }
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-body { flex: 1; }
.alert-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--color-text-primary); }
.alert-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.alert-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }
.alert-close {
flex-shrink: 0;
background: transparent; border: none;
cursor: pointer; color: inherit; opacity: 0.6;
padding: 0; display: flex; align-items: center;
}
.alert-close:hover { opacity: 1; }
/* Callout / Notice */
.callout {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border-left: 4px solid;
background: var(--color-bg-secondary);
margin: var(--space-4) 0;
}
.callout-tip { border-color: var(--color-success); }
.callout-note { border-color: var(--color-info); }
.callout-important{ border-color: var(--color-accent); }
.callout-caution { border-color: var(--color-warning); }
.callout-deprecated{border-color: var(--color-text-disabled); }
.callout-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.callout-body { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Announcement Bar */
.announcement-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
background: var(--color-accent);
color: var(--color-text-inverse);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
position: relative;
}
.announcement-bar-close {
position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
background: transparent; border: none;
color: var(--color-text-inverse); opacity: 0.8;
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════
TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════ */
.toast-container {
position: fixed;
bottom: calc(var(--footer-height) + var(--space-4));
right: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: var(--z-toast);
max-width: 360px;
pointer-events: none;
}
.toast-container.top-right { top: calc(var(--header-height) + var(--space-4)); bottom: auto; }
.toast-container.top-center { top: calc(var(--header-height) + var(--space-4)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.toast-container.bottom-center{ left: 50%; right: auto; transform: translateX(-50%); }
.toast {
display: flex;
flex-direction: column;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
overflow: hidden;
pointer-events: all;
transform: translateX(120%);
opacity: 0;
transition: transform var(--duration-slow) var(--easing-out),
opacity var(--duration-slow) var(--easing-out);
max-width: 360px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }
.toast-body {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
align-items: flex-start;
}
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); margin-bottom: 2px; }
.toast-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.toast-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.toast-close {
background: transparent; border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0; margin-left: auto;
flex-shrink: 0;
}
.toast-progress {
height: 3px;
background: var(--color-bg-sunken);
}
.toast-progress-bar {
height: 100%;
background: var(--color-accent);
transition: width linear;
}
.toast-info .toast-progress-bar { background: var(--color-info); }
.toast-success .toast-progress-bar { background: var(--color-success); }
.toast-warning .toast-progress-bar { background: var(--color-warning); }
.toast-danger .toast-progress-bar { background: var(--color-danger); }
/* ═══════════════════════════════════════════════════════
DROPDOWN MENU
═══════════════════════════════════════════════════════ */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
position: absolute;
top: calc(100% + var(--space-1));
left: 0;
min-width: 200px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
z-index: var(--z-dropdown);
padding: var(--space-1) 0;
list-style: none;
opacity: 0;
transform: scale(0.95) translateY(-4px);
transform-origin: top left;
transition: opacity var(--duration-normal) var(--easing-out),
transform var(--duration-normal) var(--easing-out);
pointer-events: none;
}
.dropdown-menu.open {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: all;
}
.dropdown-menu.align-right { left: auto; right: 0; transform-origin: top right; }
.menu-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
cursor: pointer;
transition: background var(--duration-fast);
user-select: none;
position: relative;
min-height: 36px;
}
.menu-item:hover { background: var(--color-item-hover); }
.menu-item.focused { background: var(--color-item-hover); }
.menu-item:focus-visible { outline: none; }
.menu-item.disabled { color: var(--color-text-disabled); cursor: not-allowed; pointer-events: none; }
.menu-item.danger { color: var(--color-danger); }
.menu-item.danger:hover { background: var(--color-danger-subtle); }
.menu-item-icon { flex-shrink: 0; width: 16px; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; }
.menu-item-label { flex: 1; }
.menu-item-shortcut { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-left: auto; font-family: var(--font-family-mono); }
.menu-item-check {
flex-shrink: 0; width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
color: var(--color-accent);
opacity: 0;
}
.menu-item.checked .menu-item-check { opacity: 1; }
.menu-item.checked .menu-item-icon { display: none; }
.menu-item-arrow { flex-shrink: 0; color: var(--color-text-secondary); }
.menu-divider {
height: 1px;
background: var(--color-border);
margin: var(--space-1) 0;
}
.menu-header {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}
/* Submenu */
.menu-item-has-submenu {
position: relative;
}
.menu-item-has-submenu .submenu {
position: absolute;
top: 0; left: 100%;
min-width: 180px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--space-1) 0;
list-style: none;
z-index: calc(var(--z-dropdown) + 1);
opacity: 0;
transform: scale(0.95) translateX(-4px);
transform-origin: top left;
transition: opacity var(--duration-normal), transform var(--duration-normal);
pointer-events: none;
}
/* Flip submenu to the left when it would overflow the right edge of the viewport */
.menu-item-has-submenu.submenu-flip-left .submenu {
left: auto;
right: 100%;
transform: scale(0.95) translateX(4px);
transform-origin: top right;
}
/* ── Tier 3 / 4: overlay fallbacks ────────────────────────────────────────
When neither side of the parent item has room, the submenu opens OVER
the parent menu panel. 12px offset keeps it visually distinct.
CSS variable --submenu-overlay-offset can be overridden per-theme. */
.menu-item-has-submenu.submenu-overlay-right .submenu {
left: var(--submenu-overlay-offset, 12px);
right: auto;
top: 0;
transform: scale(0.95);
transform-origin: top left;
}
.menu-item-has-submenu.submenu-overlay-left .submenu {
left: auto;
right: var(--submenu-overlay-offset, 12px);
top: 0;
transform: scale(0.95);
transform-origin: top right;
}
/* ── Tier 5: last-resort squeeze ──────────────────────────────────────────
max-width set inline by JS; min-width overridden to allow narrower panel. */
.menu-item-has-submenu.submenu-squeezed .submenu {
min-width: 120px !important;
white-space: normal;
word-break: break-word;
}
.menu-item-has-submenu:hover .submenu,
.menu-item-has-submenu.submenu-open .submenu {
opacity: 1; transform: scale(1) translateX(0); pointer-events: all;
}
/* ═══════════════════════════════════════════════════════
CONTEXT MENU
═══════════════════════════════════════════════════════ */
.context-menu {
position: fixed;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: var(--z-context-menu);
padding: var(--space-1) 0;
min-width: 180px;
opacity: 0;
transform: scale(0.95);
transform-origin: top left;
transition: opacity var(--duration-normal), transform var(--duration-normal);
pointer-events: none;
}
.context-menu.open { opacity: 1; transform: scale(1); pointer-events: all; }
/* ═══════════════════════════════════════════════════════
MODAL / DIALOG
═══════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: var(--z-overlay);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--duration-slow) var(--easing-default);
pointer-events: none;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
position: relative;
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: var(--z-modal);
display: flex;
flex-direction: column;
max-height: 90vh;
width: 560px;
transform: translateY(-16px);
opacity: 0;
transition: transform var(--duration-slow) var(--easing-out),
opacity var(--duration-slow) var(--easing-out);
}
.modal-overlay.open .modal { transform: translateY(0); opacity: 1; }
.modal.sm { width: 400px; }
.modal.md { width: 560px; }
.modal.lg { width: 720px; }
.modal.xl { width: 960px; }
.modal.full{ width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.modal-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: var(--space-5) var(--space-6) var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.modal-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.modal-close {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border: none; background: transparent;
color: var(--color-text-secondary);
cursor: pointer; border-radius: var(--radius-base);
flex-shrink: 0; margin-left: var(--space-4);
transition: background var(--duration-fast), color var(--duration-fast);
}
.modal-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.modal-body {
flex: 1; overflow-y: auto;
padding: var(--space-6);
max-height: 70vh;
}
.modal-footer {
display: flex; align-items: center; justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
.modal-footer .btn-danger { margin-right: auto; }
/* Confirmation variants */
.modal-confirm-icon {
display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
border-radius: var(--radius-full);
margin: 0 auto var(--space-4);
}
.modal-confirm-icon.danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.modal-confirm-icon.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.modal-confirm-icon.info { background: var(--color-info-subtle); color: var(--color-info); }
.modal-confirm-icon.success { background: var(--color-success-subtle); color: var(--color-success); }
/* ═══════════════════════════════════════════════════════
DRAWER
═══════════════════════════════════════════════════════ */
.drawer-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: var(--z-overlay);
opacity: 0;
transition: opacity var(--duration-slow);
pointer-events: none;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
position: fixed;
background: var(--color-bg-elevated);
box-shadow: var(--shadow-lg);
z-index: var(--z-modal);
display: flex;
flex-direction: column;
transition: transform var(--duration-slow) var(--easing-out);
max-width: 100vw; /* never exceed viewport width regardless of .sm / .lg / custom width */
max-height: 100vh; /* safety cap for top/bottom drawers */
}
.drawer.right { top: 0; right: 0; bottom: 0; width: 480px; transform: translateX(100%); }
.drawer.left { top: 0; left: 0; bottom: 0; width: 480px; transform: translateX(-100%); }
.drawer.bottom { left: 0; right: 0; bottom: 0; height: 60vh; transform: translateY(100%); }
.drawer.top { left: 0; right: 0; top: 0; height: 60vh; transform: translateY(-100%); }
.drawer.sm.right, .drawer.sm.left { width: 320px; }
.drawer.lg.right, .drawer.lg.left { width: 640px; }
.drawer.full.right,.drawer.full.left{ width: 100vw; }
.drawer.open { transform: translate(0); }
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.drawer-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.drawer-footer{
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border);
display: flex; gap: var(--space-3); justify-content: flex-end;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════
TOOLTIP
═══════════════════════════════════════════════════════ */
.tooltip-wrapper { position: relative; display: inline-flex; }
.tooltip {
position: fixed; /* viewport-relative — immune to scroll, always above stacking contexts */
background: var(--color-text-primary);
color: var(--color-bg-primary);
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-base);
white-space: normal;
max-width: 256px;
pointer-events: none;
z-index: var(--z-tooltip); /* 9999 — above modals, overlays, context-menus */
opacity: 0;
transition: opacity var(--duration-fast);
box-shadow: var(--shadow-base);
}
.tooltip.show { opacity: 1; }
/* Arrow caret — CSS only. ALL element positioning is applied inline by JS. */
.tooltip::after {
content: '';
position: absolute;
border: 5px solid transparent;
}
/* bottom */
.tooltip.placement-bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--color-text-primary); }
/* top */
.tooltip.placement-top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--color-text-primary); }
/* right */
.tooltip.placement-right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--color-text-primary); }
/* left */
.tooltip.placement-left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--color-text-primary); }
/* ═══════════════════════════════════════════════════════
POPOVER
═══════════════════════════════════════════════════════ */
.popover {
position: fixed;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
z-index: var(--z-popover);
min-width: 200px;
max-width: 320px;
opacity: 0;
transform: scale(0.95);
transform-origin: top center;
transition: opacity var(--duration-normal), transform var(--duration-normal);
pointer-events: none;
}
.popover.show { opacity: 1; transform: scale(1); pointer-events: all; }
.popover-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.popover-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.popover-body { padding: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Popconfirm */
.popconfirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
/* ═══════════════════════════════════════════════════════
COLLAPSIBLE PANELS / ACCORDION
═══════════════════════════════════════════════════════ */
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-2); }
.panel-header {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-secondary);
cursor: pointer;
user-select: none;
transition: background var(--duration-fast);
}
.panel-header:hover { background: var(--color-row-hover); }
.panel-title { flex: 1; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.panel-badge { margin-left: auto; }
.panel-chevron {
color: var(--color-text-secondary);
transition: transform var(--duration-normal);
flex-shrink: 0;
}
.panel.open .panel-chevron { transform: rotate(90deg); }
.panel-body {
overflow: hidden;
max-height: 0;
transition: max-height var(--duration-slow) var(--easing-out),
padding var(--duration-slow);
}
.panel.open .panel-body { max-height: 2000px; }
.panel-body-inner { padding: var(--space-4); }
/* Nested panels */
.panel .panel { margin-left: var(--space-4); border-radius: var(--radius-base); }
/* ═══════════════════════════════════════════════════════
BREADCRUMB
═══════════════════════════════════════════════════════ */
.breadcrumb {
display: flex; align-items: center; gap: var(--space-1);
flex-wrap: wrap;
font-size: var(--font-size-sm);
}
.breadcrumb-item { display: flex; align-items: center; gap: var(--space-1); }
.breadcrumb-item a { color: var(--color-text-secondary); }
.breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-item.current { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.breadcrumb-sep { color: var(--color-text-disabled); }
/* ═══════════════════════════════════════════════════════
TABS
═══════════════════════════════════════════════════════ */
.tabs {
display: flex;
flex-direction: column;
}
.tab-list {
display: flex;
align-items: flex-end;
gap: 2px;
padding: var(--space-2) var(--space-2) 0;
background: var(--color-bg-sunken);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
scrollbar-width: none;
position: relative;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
/* Reset browser button defaults */
appearance: none;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
white-space: nowrap;
transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
user-select: none;
margin-bottom: -1px;
position: relative;
}
.tab:hover:not(.active):not(.disabled) {
color: var(--color-text-primary);
background: var(--color-bg-elevated);
border-color: var(--color-border);
}
.tab.active {
color: var(--color-text-primary);
background: var(--color-bg-primary);
border-color: var(--color-border);
/* Cover the tab-list border-bottom so the tab merges into the content */
box-shadow: 0 1px 0 var(--color-bg-primary);
}
.tab.disabled { opacity: 0.4; cursor: not-allowed; }
.tab.closeable .tab-close {
display: flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border: none; background: transparent;
cursor: pointer; border-radius: var(--radius-sm);
color: var(--color-text-secondary); opacity: 0.6;
}
.tab.closeable .tab-close:hover { background: var(--color-bg-sunken); opacity: 1; }
.tab-panel { display: none; padding: var(--space-5) 0; }
.tab-panel.active { display: block; }
/* Vertical tabs */
.tabs.vertical { flex-direction: row; }
.tabs.vertical .tab-list {
flex-direction: column; align-items: stretch; gap: 2px;
padding: var(--space-2) 0 var(--space-2) var(--space-2);
border-bottom: none; border-right: 1px solid var(--color-border);
min-width: 160px;
}
.tabs.vertical .tab {
border-radius: var(--radius-md) 0 0 var(--radius-md);
border: 1px solid transparent; border-right: none;
margin-bottom: 0; margin-right: -1px;
box-shadow: none;
}
.tabs.vertical .tab.active {
border-color: var(--color-border);
box-shadow: 1px 0 0 var(--color-bg-primary);
}
.tabs.vertical .tab-content { flex: 1; }
/* Line / underline tab variant — transparent strip, accent underline on active */
.tabs.tabs-line .tab-list {
background: transparent;
padding: 0;
gap: 0;
}
.tabs.tabs-line .tab {
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: var(--space-3) var(--space-4);
margin-bottom: -1px;
color: var(--color-text-muted, var(--color-text-secondary));
}
.tabs.tabs-line .tab:hover:not(.active):not(.disabled) {
background: transparent;
border-color: var(--color-border);
color: var(--color-text-primary);
}
.tabs.tabs-line .tab.active {
background: transparent;
border-color: var(--color-accent);
border-top: none; border-left: none; border-right: none;
color: var(--color-accent);
box-shadow: none;
}
/* ═══════════════════════════════════════════════════════
PAGINATION (standalone)
═══════════════════════════════════════════════════════ */
.pagination {
display: flex; align-items: center; gap: var(--space-1);
font-size: var(--font-size-sm);
}
.page-btn {
display: flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px;
padding: 0 var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
background: var(--color-bg-primary);
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
font-size: var(--font-size-sm);
}
.page-btn:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.page-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-ellipsis { padding: 0 var(--space-1); color: var(--color-text-disabled); }
/* ═══════════════════════════════════════════════════════
STEPS / WIZARD
═══════════════════════════════════════════════════════ */
.steps {
display: flex;
align-items: flex-start;
gap: 0;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.step::before {
content: '';
position: absolute;
top: 14px; left: 50%;
right: -50%;
height: 2px;
background: var(--color-border);
}
.step:last-child::before { display: none; }
.step.completed::before { background: var(--color-accent); }
.step-circle {
width: 28px; height: 28px;
border-radius: var(--radius-full);
border: 2px solid var(--color-border);
background: var(--color-bg-primary);
display: flex; align-items: center; justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
position: relative;
z-index: 1;
transition: border-color var(--duration-normal), background var(--duration-normal);
}
.step.active .step-circle { border-color: var(--color-accent); color: var(--color-accent); }
.step.completed .step-circle{ border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-inverse); }
.step.error .step-circle { border-color: var(--color-danger); color: var(--color-danger); }
.step-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--space-2); text-align: center; }
.step.active .step-label { color: var(--color-accent); font-weight: var(--font-weight-medium); }
.step.completed .step-label { color: var(--color-text-primary); }
/* ═══════════════════════════════════════════════════════
COMMAND PALETTE
═══════════════════════════════════════════════════════ */
.command-overlay {
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
opacity: 0;
transition: opacity var(--duration-normal);
pointer-events: none;
}
.command-overlay.open { opacity: 1; pointer-events: all; }
.command-palette {
width: 640px;
max-width: 90vw;
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: translateY(-16px);
transition: transform var(--duration-slow) var(--easing-out);
}
.command-overlay.open .command-palette { transform: translateY(0); }
.command-input-wrap {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.command-input {
flex: 1; border: none; outline: none;
background: transparent;
font-size: var(--font-size-md);
color: var(--color-text-primary);
}
.command-input::placeholder { color: var(--color-text-secondary); }
.command-results {
max-height: 400px;
overflow-y: auto;
}
.command-group-label {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}
.command-item {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-4);
cursor: pointer;
transition: background var(--duration-fast);
font-size: var(--font-size-base);
}
.command-item:hover,
.command-item.active { background: var(--color-row-hover); }
.command-item-icon { color: var(--color-text-secondary); flex-shrink: 0; }
.command-item-label { flex: 1; }
.command-item-kbd { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-family: var(--font-family-mono); }
.command-footer {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border);
display: flex; gap: var(--space-4);
font-size: var(--font-size-xs); color: var(--color-text-secondary);
}
.command-footer kbd {
background: var(--color-bg-secondary); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); padding: 1px var(--space-1);
}
/* ═══════════════════════════════════════════════════════
DATA TABLE
═══════════════════════════════════════════════════════ */
.data-table-wrapper {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-elevated);
}
.data-table-toolbar {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-secondary);
flex-wrap: wrap;
}
.data-table-title-area { flex: 1; min-width: 200px; }
.data-table-title-text { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.data-table-subtitle-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.data-table-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.data-table-search {
position: relative;
}
.data-table-search input {
padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
background: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
width: 220px;
}
.data-table-search input:focus { outline: none; border-color: var(--color-accent); }
.data-table-search-icon { position: absolute; left: var(--space-2); top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; }
.data-table-container {
overflow-x: auto;
overflow-y: auto;
max-height: 500px;
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--font-size-base);
}
/* Sticky header */
.data-table thead th {
position: sticky;
top: 0;
background: var(--color-bg-secondary);
border-bottom: 2px solid var(--color-border);
z-index: var(--z-sticky);
}
.data-table tfoot td {
position: sticky;
bottom: 0;
background: var(--color-bg-secondary);
border-top: 2px solid var(--color-border);
z-index: var(--z-sticky);
}
.data-table th, .data-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.data-table th {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
user-select: none;
}
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--color-text-primary); }
.data-table th .sort-icon { display: inline-flex; vertical-align: middle; margin-left: var(--space-1); opacity: 0.4; }
.data-table th.asc .sort-icon { opacity: 1; color: var(--color-accent); }
.data-table th.desc .sort-icon { opacity: 1; color: var(--color-accent); transform: rotate(180deg); }
.data-table th .col-resize-handle {
position: absolute; right: 0; top: 0; bottom: 0;
width: 4px; cursor: col-resize;
background: transparent;
}
.data-table th:hover .col-resize-handle { background: var(--color-accent); opacity: 0.3; }
/* Row states */
.data-table tbody tr { transition: background var(--duration-fast); }
.data-table tbody tr:hover { background: var(--color-row-hover); }
.data-table tbody tr.selected { background: var(--color-row-selected); }
.data-table tbody tr.selected td { color: var(--color-accent); }
.data-table tbody tr.stripe:nth-child(even) { background: var(--color-row-stripe); }
.data-table tbody tr.stripe:nth-child(even):hover { background: var(--color-row-hover); }
/* Expandable rows */
.data-table tr.expanded-row > td { background: var(--color-accent-subtle); }
.data-table-detail-row td {
padding: 0;
background: var(--color-bg-secondary);
}
.data-table-detail-row.hidden { display: none; }
.data-table-detail-content { padding: var(--space-4) var(--space-5); }
/* Row expand toggle */
.row-expand-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border: none; background: transparent;
color: var(--color-text-secondary); cursor: pointer;
border-radius: var(--radius-sm);
transition: transform var(--duration-fast);
}
.row-expand-btn.expanded { transform: rotate(90deg); color: var(--color-accent); }
/* Sub-rows */
.data-table tr.sub-row td:first-child { padding-left: calc(var(--space-4) + 24px); }
.data-table tr.sub-row.level-2 td:first-child { padding-left: calc(var(--space-4) + 48px); }
/* Checkbox column */
.data-table .col-checkbox { width: 40px; padding: var(--space-2) var(--space-3); }
.data-table .col-expand { width: 40px; padding: var(--space-2) var(--space-2); }
.data-table .col-actions { width: 80px; text-align: right; }
/* Cell content types */
.cell-badge { }
.cell-progress { min-width: 80px; }
.cell-avatar { display: flex; align-items: center; gap: var(--space-2); }
.cell-actions { display: flex; gap: var(--space-1); justify-content: flex-end; opacity: 0; transition: opacity var(--duration-fast); }
tr:hover .cell-actions { opacity: 1; }
.cell-link { color: var(--color-accent); cursor: pointer; }
.cell-link:hover { text-decoration: underline; }
.cell-hint-icon { color: var(--color-text-disabled); margin-left: var(--space-1); }
tr:hover .cell-hint-icon { color: var(--color-text-secondary); }
/* Table states */
.data-table-empty,
.data-table-loading,
.data-table-error {
padding: var(--space-16) var(--space-8);
text-align: center;
color: var(--color-text-secondary);
}
/* Pagination bar */
.data-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border);
background: var(--color-bg-secondary);
gap: var(--space-4);
flex-wrap: wrap;
}
.pagination-info { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pagination-controls { display: flex; align-items: center; gap: var(--space-1); }
.pagination-go-to { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.pagination-go-to input {
width: 48px; text-align: center;
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
}
.pagination-go-to input:focus { outline: none; border-color: var(--color-accent); }
.pagination-size { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.pagination-size select {
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════
FLOATING WINDOW
═══════════════════════════════════════════════════════ */
.floating-window {
position: fixed;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
/* CSS fallback: above header (1050) and all overlays.
JS overrides this via inline style on each focus/open (starts at 1511). */
z-index: calc(var(--z-context-menu) + 10);
display: flex;
flex-direction: column;
min-width: 320px;
min-height: 240px;
overflow: hidden;
}
.floating-window.focused { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-accent); }
.window-titlebar {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
cursor: move;
user-select: none;
flex-shrink: 0;
}
.window-icon { color: var(--color-text-secondary); }
.window-title { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.window-btn {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent;
color: var(--color-text-secondary); cursor: pointer;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
}
.window-btn:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); }
.window-btn.close:hover { background: var(--color-danger); color: var(--color-text-inverse); }
.window-body {
flex: 1; overflow: auto;
padding: var(--space-4);
}
/* Resize handles */
.window-resize {
position: absolute;
background: transparent;
}
.window-resize.right { right: 0; top: 0; bottom: 0; width: 4px; cursor: e-resize; }
.window-resize.bottom { left: 0; right: 0; bottom: 0; height: 4px; cursor: s-resize; }
.window-resize.corner { right: 0; bottom: 0; width: 12px; height: 12px; cursor: se-resize; }
.window-minimized {
height: 32px !important;
min-height: 32px !important;
overflow: hidden;
}
.window-minimized .window-body { display: none; }
/* ═══════════════════════════════════════════════════════
DESCRIPTION LIST
═══════════════════════════════════════════════════════ */
.desc-list {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-4);
}
.desc-list dt { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.desc-list dd { font-size: var(--font-size-base); color: var(--color-text-primary); }
/* ═══════════════════════════════════════════════════════
DIVIDER
═══════════════════════════════════════════════════════ */
.divider {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin: var(--space-4) 0;
}
.divider::before, .divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
.divider-vertical {
display: inline-block;
width: 1px;
height: 1em;
background: var(--color-border);
margin: 0 var(--space-2);
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════
SCROLL AREA
═══════════════════════════════════════════════════════ */
.scroll-area {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong) transparent;
}
.scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }
/* ═══════════════════════════════════════════════════════
RESULT / STATUS PAGE
═══════════════════════════════════════════════════════ */
.result-page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: var(--space-16) var(--space-8);
}
.result-page-icon {
width: 80px; height: 80px;
border-radius: var(--radius-full);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-6);
font-size: 2.5rem;
}
.result-page-icon.success { background: var(--color-success-subtle); color: var(--color-success); }
.result-page-icon.error { background: var(--color-danger-subtle); color: var(--color-danger); }
.result-page-icon.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.result-page-icon.info { background: var(--color-info-subtle); color: var(--color-info); }
.result-page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
.result-page-subtitle { font-size: var(--font-size-md); color: var(--color-text-secondary); max-width: 480px; margin-bottom: var(--space-8); }
.result-page-actions { display: flex; gap: var(--space-3); justify-content: center; }
/* ═══════════════════════════════════════════════════════
TOOLBAR / RIBBON
═══════════════════════════════════════════════════════ */
.toolbar {
display: flex;
align-items: stretch;
gap: 0;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-2);
flex-wrap: wrap;
}
.toolbar-group {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-2);
position: relative;
}
.toolbar-group::after {
content: '';
position: absolute;
right: 0; top: var(--space-1); bottom: var(--space-1);
width: 1px;
background: var(--color-border);
}
.toolbar-group:last-child::after { display: none; }
.toolbar-group-label {
position: absolute;
bottom: -18px;
left: 50%; transform: translateX(-50%);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
white-space: nowrap;
}
.toolbar-btn {
display: flex; flex-direction: column; align-items: center;
gap: 2px;
padding: var(--space-1) var(--space-2);
border: 1px solid transparent;
border-radius: var(--radius-base);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
font-size: var(--font-size-xs);
min-width: 36px;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.toolbar-btn:hover { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: var(--color-border); }
.toolbar-btn.active { background: var(--color-accent-subtle); color: var(--color-accent); border-color: var(--color-accent); }
.toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.toolbar-btn .toolbar-btn-icon { font-size: 1rem; }
/* Horizontal toolbar separator */
.toolbar-sep {
width: 1px;
background: var(--color-border);
margin: var(--space-1);
align-self: stretch;
}
/* ═══════════════════════════════════════════════════════
USER MENU / AVATAR MENU
═══════════════════════════════════════════════════════ */
.user-menu { position: relative; }
.user-menu-trigger {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-1) var(--space-2);
border: none; background: transparent;
cursor: pointer; border-radius: var(--radius-base);
transition: background var(--duration-fast);
}
.user-menu-trigger:hover { background: var(--color-bg-secondary); }
.user-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
/* ═══════════════════════════════════════════════════════
WATERMARK
═══════════════════════════════════════════════════════ */
.watermark-wrapper { position: relative; }
.watermark-wrapper::after {
content: attr(data-watermark);
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 4rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
opacity: 0.04;
pointer-events: none;
transform: rotate(-30deg);
white-space: nowrap;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════
SYSTEM MENU BAR
═══════════════════════════════════════════════════════ */
.system-menu-bar {
display: flex;
align-items: center;
gap: 0;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
padding: 0 var(--space-2);
height: 32px;
font-size: var(--font-size-sm);
}
.sys-menu-trigger {
padding: var(--space-1) var(--space-3);
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-base);
height: 100%;
transition: background var(--duration-fast), color var(--duration-fast);
}
.sys-menu-trigger:hover,
.sys-menu-trigger.active { background: var(--color-accent); color: var(--color-text-inverse); }
/* ═══════════════════════════════════════════════════════
RTL SUPPORT
═══════════════════════════════════════════════════════ */
[dir="rtl"] .pub-sidebar-left { border-right: none; border-left: 1px solid var(--color-border); }
[dir="rtl"] .pub-sidebar-right { border-left: none; border-right: 1px solid var(--color-border); }
[dir="rtl"] .pub-icon-bar { border-right: none; border-left: 1px solid var(--color-border); }
[dir="rtl"] .pub-nav-item.active::before { left: auto; right: -8px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .pub-icon-btn.active::before { left: auto; right: -4px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; transform-origin: top right; }
[dir="rtl"] .dropdown-menu.align-right { left: 0; right: auto; transform-origin: top left; }
[dir="rtl"] .drawer.right { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.right.open { transform: translateX(0); }
[dir="rtl"] .drawer.left { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .drawer.left.open { transform: translateX(0); }
[dir="rtl"] .toast-container { right: auto; left: var(--space-4); }
[dir="rtl"] .toast { transform: translateX(-120%); }
[dir="rtl"] .toast.show { transform: translateX(0); }
[dir="rtl"] .callout { border-left: none; border-right: 4px solid; }
[dir="rtl"] .modal-footer .btn-danger { margin-right: 0; margin-left: auto; }
[dir="rtl"] .form-select {
background-position: left var(--space-3) center;
padding-right: var(--space-3);
padding-left: var(--space-8);
}
/* ═══════════════════════════════════════════════════════
DEMO PAGE SPECIFIC
═══════════════════════════════════════════════════════ */
.demo-section {
margin-bottom: var(--space-16);
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.demo-section-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-2);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-border);
color: var(--color-text-primary);
}
.demo-section-subtitle {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.demo-row {
display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start;
margin-bottom: var(--space-4);
}
.demo-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 200px; flex: 1; }
.demo-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.demo-context-zone {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-8);
text-align: center;
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
transition: background var(--duration-fast);
}
.demo-context-zone:hover { background: var(--color-bg-secondary); }
.token-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
}
.token-swatch {
border-radius: var(--radius-base);
overflow: hidden;
border: 1px solid var(--color-border);
}
.token-color {
height: 48px;
}
.token-info {
padding: var(--space-2);
background: var(--color-bg-secondary);
font-size: var(--font-size-xs);
}
.token-name { font-family: var(--font-family-mono); color: var(--color-text-primary); word-break: break-all; }
.token-value { color: var(--color-text-secondary); margin-top: 1px; }
/* Side nav jump links */
.demo-jump-nav {
position: sticky;
top: calc(var(--header-height) + var(--space-4));
width: 200px;
flex-shrink: 0;
max-height: calc(100vh - var(--header-height) - var(--space-8));
overflow-y: auto;
font-size: var(--font-size-sm);
}
.demo-jump-nav a {
display: block;
padding: var(--space-1) var(--space-3);
color: var(--color-text-secondary);
border-left: 2px solid transparent;
border-radius: 0 var(--radius-base) var(--radius-base) 0;
transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.demo-jump-nav a:hover { color: var(--color-accent); background: var(--color-accent-subtle); border-left-color: var(--color-accent); text-decoration: none; }
.demo-jump-nav a.active { color: var(--color-accent); border-left-color: var(--color-accent); font-weight: var(--font-weight-medium); }
/* ═══════════════════════════════════════════════════════
UTILITY HELPERS
═══════════════════════════════════════════════════════ */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.d-flex { display: flex; }
.d-inline-flex{ display: inline-flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.font-mono { font-family: var(--font-family-mono); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.rounded-full { border-radius: var(--radius-full); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 768px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════
MOBILE NAV DRAWER — hidden on desktop, shown via CSS on mobile
═══════════════════════════════════════════════════════ */
.pub-mobile-nav,
.pub-mobile-backdrop { display: none; }
/* ═══════════════════════════════════════════════════════
RESPONSIVE — MOBILE SHELL (≤ 768 px)
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── 1. Shell: collapse grid to header + main only ── */
/* !important beats .pub-shell.iconbar-top / .iconbar-bottom (higher specificity)
so their grid-template-areas / rows cannot override the mobile layout */
.pub-shell {
grid-template-columns: 1fr !important;
grid-template-rows: var(--header-height) 1fr !important;
grid-template-areas: "header" "main" !important;
min-width: 0; /* override the 768px desktop guard; inset:0 sizes the shell */
}
/* ── 2. Hide desktop-only chrome ── */
.pub-menu-bar,
.pub-icon-bar,
.pub-sidebar-left,
.pub-sidebar-right,
.pub-footer,
.pub-left-panel-tab,
.pub-right-panel-tab,
.pub-header-desktop-only { display: none !important; }
/* ── 3. Show hamburger ── */
.pub-header-hamburger { display: flex; }
/* ── 4. Compress header search to icon-only tap target ── */
.pub-header-search {
width: 36px;
flex: 0 0 36px; /* prevent flex:1 from growing it */
max-width: 36px;
flex-shrink: 0;
padding: 0;
margin: 0 var(--space-1);
overflow: hidden;
cursor: pointer;
border-radius: var(--radius-base);
min-width: unset;
}
.pub-header-search input,
.pub-header-search-kbd { display: none; }
.pub-header-search .pub-search-field-icon {
width: 100%;
justify-content: center;
pointer-events: none;
}
/* ── 5. Hide header subtitle ── */
.pub-header-subtitle { display: none; }
/* ── 6. Main: reduce padding ── */
.pub-main { padding: var(--space-4) var(--space-3); }
/* ════════════════════════════════════════════════════
MOBILE NAV BACKDROP
════════════════════════════════════════════════════ */
.pub-mobile-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.48);
z-index: calc(var(--z-overlay) - 1);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal);
}
.pub-mobile-backdrop.open {
opacity: 1;
pointer-events: all;
}
/* ════════════════════════════════════════════════════
MOBILE NAV DRAWER
════════════════════════════════════════════════════ */
.pub-mobile-nav {
display: flex;
position: fixed;
top: 0;
left: 0;
width: min(340px, 88vw);
height: 100vh;
height: 100dvh; /* dynamic viewport: avoids Safari address-bar gap */
background: var(--color-bg-elevated);
border-right: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
z-index: var(--z-overlay);
flex-direction: column;
overflow: hidden;
transform: translateX(-100%);
transition: transform var(--duration-normal) var(--easing-out);
}
.pub-mobile-nav.open { transform: translateX(0); }
/* Header row: brand + close button */
.pub-mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-2) 0 var(--space-4);
height: var(--header-height);
flex-shrink: 0;
border-bottom: 1px solid var(--color-border);
}
.pub-mobile-nav-close {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: var(--radius-base);
flex-shrink: 0;
transition: background var(--duration-fast), color var(--duration-fast);
}
.pub-mobile-nav-close:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
/* Scrollable nav tree */
.pub-mobile-nav-body {
flex: 1;
overflow-y: auto;
padding: var(--space-2) 0;
min-height: 0;
}
/* Application menu accordion (native /) */
.pub-mobile-nav-menu {
flex-shrink: 0;
border-top: 1px solid var(--color-border);
padding: var(--space-1) 0;
max-height: 38vh;
overflow-y: auto;
}
.pub-mobile-menu-group {
/* element */
}
.pub-mobile-menu-group summary {
display: flex;
align-items: center;
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
list-style: none;
transition: color var(--duration-fast), background var(--duration-fast);
gap: var(--space-2);
}
.pub-mobile-menu-group summary::-webkit-details-marker { display: none; }
.pub-mobile-menu-group summary::after {
content: '';
display: block;
width: 7px; height: 7px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg) translateY(-1px);
transition: transform var(--duration-fast);
flex-shrink: 0;
}
.pub-mobile-menu-group[open] > summary::after { transform: rotate(45deg) translateY(-3px); }
.pub-mobile-menu-group summary:hover { background: var(--color-item-hover); color: var(--color-text-primary); }
.pub-mobile-menu-group ul { list-style: none; padding: 0; margin: 0; }
.pub-mobile-menu-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + var(--space-4));
font-size: var(--font-size-sm);
color: var(--color-text-primary);
cursor: pointer;
transition: background var(--duration-fast);
}
.pub-mobile-menu-item:hover { background: var(--color-item-hover); }
.pub-mobile-menu-item-shortcut {
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--color-text-disabled);
font-family: var(--font-family-mono);
}
/* Footer: theme switcher + user */
.pub-mobile-nav-footer {
flex-shrink: 0;
border-top: 1px solid var(--color-border);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
background: var(--color-bg-secondary);
}
.pub-mobile-theme-btns {
display: flex;
align-items: center;
gap: var(--space-1);
flex: 1;
}
.pub-mobile-theme-btn {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
border-radius: var(--radius-base);
cursor: pointer;
font-size: 15px;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.pub-mobile-theme-btn:hover { background: var(--color-accent-subtle); border-color: var(--color-accent); }
.pub-mobile-nav-user {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ── RTL: drawer slides from the right ── */
[dir="rtl"] .pub-mobile-nav {
left: auto;
right: 0;
border-right: none;
border-left: 1px solid var(--color-border);
transform: translateX(100%);
}
[dir="rtl"] .pub-mobile-nav.open { transform: translateX(0); }
/* ════════════════════════════════════════════════════
CONTENT RESPONSIVE — components inside pub-main
════════════════════════════════════════════════════ */
/* ── Data table: toolbar wraps, search goes full-width ── */
.data-table-toolbar {
gap: var(--space-2);
}
.data-table-toolbar-actions {
flex-wrap: wrap;
width: 100%;
}
.data-table-search {
flex: 1;
min-width: 0;
}
.data-table-search input {
width: 100%;
}
.data-table-title-area {
min-width: 0;
width: 100%;
}
/* Ensure the table container scrolls horizontally on mobile */
.data-table-container {
-webkit-overflow-scrolling: touch;
}
/* ── Cards and stat grids: single column ── */
.card-grid,
.stats-grid,
.dashboard-grid {
grid-template-columns: 1fr !important;
}
/* ── Modal: full-width on mobile ── */
.modal-dialog {
width: calc(100vw - var(--space-6)) !important;
max-width: none !important;
margin: var(--space-4) auto;
}
.modal-inner {
max-height: calc(100dvh - var(--space-8));
max-height: calc(100vh - var(--space-8));
}
/* ── Drawer: full-width on narrow mobile (viewport < drawer's normal width) ── */
/* max-width:100vw is already on .drawer globally; on truly narrow screens force full-width */
.drawer.right,
.drawer.left {
width: 100%;
}
/* ── Breadcrumb: single line scroll ── */
.breadcrumb {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
/* ── Toolbar / action rows: compress ── */
.toolbar,
.action-bar {
flex-wrap: wrap;
gap: var(--space-2);
}
/* ── Tab bar: scroll horizontally ── */
.tabs-nav {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.tab-item { flex-shrink: 0; }
/* ── Floating windows: smart mobile sizing + no resize handles ── */
.floating-window {
/* Prevent content from blowing the window past the viewport */
min-width: min(280px, calc(100vw - 16px)) !important;
min-height: min(200px, calc(100vh - 48px)) !important;
max-width: calc(100vw - 16px) !important;
max-height: calc(100dvh - 48px) !important;
max-height: calc(100vh - 48px) !important;
}
/* Resize handles are too small to touch; JS re-clamps position on open/resize */
.floating-window .window-resize { display: none !important; }
}