/**
* Layout modes: driven by attributes on (see layout-preferences.js).
* Variables default in style.css :root; this file overrides per mode.
*/
/* --- Sidebar: pinned (always expanded) --- */
html[data-sidebar-mode="pinned"] .sidebar {
width: var(--sidebar-width-expanded);
}
html[data-sidebar-mode="pinned"] .sidebar:hover {
width: var(--sidebar-width-expanded);
}
html[data-sidebar-mode="pinned"] .sidebar .sidebar-link-text {
opacity: 1;
width: auto;
}
html[data-sidebar-mode="pinned"] .sidebar .sidebar-link {
justify-content: flex-start;
padding: 12px 16px;
}
/* --- Sidebar: icons only (narrow rail, no hover expand) --- */
html[data-sidebar-mode="icons"] .sidebar,
html[data-sidebar-mode="icons"] .sidebar:hover {
width: var(--sidebar-width-collapsed);
}
html[data-sidebar-mode="icons"] .sidebar .sidebar-link-text {
opacity: 0;
width: 0;
overflow: hidden;
}
html[data-sidebar-mode="icons"] .sidebar .sidebar-link {
justify-content: center;
padding: 12px;
}
/* --- Content max width --- */
html[data-content-width="wide"] {
--layout-max-width: min(1680px, 96vw);
}
html[data-content-width="full"] {
--layout-max-width: 100%;
}
/* --- Main area column layout --- */
html[data-content-columns="1"] {
--layout-main-columns: 1fr;
}
html[data-content-columns="2"] {
--layout-main-columns: 1fr 1fr;
}
/* --- Density --- */
html[data-density="compact"] {
--layout-container-padding: 12px;
--layout-section-gap: 16px;
--layout-font-scale: 0.95;
}
html[data-density="compact"] .main-wrapper {
font-size: calc(1rem * var(--layout-font-scale, 0.95));
}
html[data-density="compact"] .page-header,
html[data-density="compact"] .stat-card,
html[data-density="compact"] .settings-card {
padding-top: 14px;
padding-bottom: 14px;
}
html[data-density="compact"] .sidebar-body {
padding: 16px 12px;
gap: 20px;
}
/* --- Layout controls (FAB + panel) --- */
.layout-controls-fab {
position: fixed;
right: 18px;
bottom: 88px;
z-index: 9998;
min-width: 44px;
min-height: 40px;
height: auto;
padding: 6px 10px;
gap: 5px;
border-radius: 12px;
border: 1px solid var(--border-color);
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
backdrop-filter: blur(16px);
color: var(--text-primary);
font-size: 0.8125rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.layout-controls-fab-icon {
font-size: 1.05rem;
line-height: 1;
flex-shrink: 0;
}
.layout-controls-fab-label {
font-weight: 600;
font-size: 0.6875rem;
letter-spacing: 0.02em;
line-height: 1.15;
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-controls-fab--labeled {
min-width: auto;
}
.layout-controls-fab:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
}
.layout-controls-panel {
position: fixed;
right: 18px;
bottom: 146px;
z-index: 9999;
width: min(320px, calc(100vw - 36px));
max-height: min(70vh, 520px);
overflow: auto;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--border-color);
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-lg);
display: none;
flex-direction: column;
gap: 14px;
}
.layout-controls-panel.is-open {
display: flex;
}
.layout-controls-panel h3 {
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 4px 0;
color: var(--text-primary);
}
.layout-controls-panel label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
display: block;
margin-bottom: 6px;
}
.layout-controls-panel select {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: rgba(30, 41, 59, 0.85);
color: var(--text-primary);
font-size: 0.9rem;
cursor: pointer;
}
.layout-controls-panel .layout-controls-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.layout-controls-panel .layout-controls-actions .btn-small {
flex: 1;
min-width: 0;
text-align: center;
}
@media (max-width: 768px) {
html[data-content-width="wide"],
html[data-content-width="full"] {
--layout-max-width: 100%;
}
.layout-controls-fab {
bottom: 72px;
right: 12px;
}
.layout-controls-panel {
right: 12px;
left: 12px;
width: auto;
bottom: 130px;
}
}
@media (prefers-reduced-motion: reduce) {
.sidebar,
.layout-controls-fab {
transition: none !important;
}
}