/* ======================================================================
* TAMX Desktop Layout (≥1024px)
* ----------------------------------------------------------------------
* HTML structure (all client pages):
*
*
*
* ...
*
*
* On Desktop we convert the sidebar into a permanent right-side rail
* (RTL primary edge) and offset .app-main + .app-header__inner with
* padding-right equal to the rail width. No JS / DOM restructuring.
* ====================================================================== */
:root {
--desktop-rail-w: 264px;
--desktop-max-content: 1280px;
}
/* ====== Desktop (≥1024px) ====== */
@media (min-width: 1024px) {
/* Hamburger + back are not needed when rail is permanent */
.app-header__actions [data-action="open-sidebar"],
.app-header__actions [data-action="back"] {
display: none !important;
}
/* Pin sidebar as a permanent right rail.
IMPORTANT: dir=rtl can reinterpret right/left as logical properties on
some engines, so we use the explicit physical `inset` shorthand. */
aside.sidebar,
.sidebar,
#sidebar {
position: fixed !important;
inset: 64px 0 0 auto !important; /* below 64px-tall header */
width: var(--desktop-rail-w) !important;
max-width: var(--desktop-rail-w) !important;
height: calc(100vh - 64px) !important;
transform: translateX(0) !important;
visibility: visible !important;
opacity: 1 !important;
box-shadow: -12px 0 28px rgba(0, 0, 0, 0.35) !important;
border-left: none !important;
border-right: 1px solid var(--gold-border, rgba(212, 175, 55, 0.2)) !important;
background: var(--bg-elevated, #0F1424) !important;
z-index: 40;
overflow-y: auto;
display: flex !important;
flex-direction: column;
padding-top: 0 !important;
margin: 0 !important;
}
/* Hide the in-sidebar close button when rail is permanent */
.sidebar__close { display: none !important; }
/* Cancel mobile body scroll lock on desktop */
body.menu-open {
overflow: auto !important;
touch-action: auto !important;
}
body.menu-open .backdrop,
.backdrop { display: none !important; }
/* Header reserves the right rail */
.app-header {
padding-right: var(--desktop-rail-w) !important;
}
.app-header__inner {
max-width: calc(var(--desktop-max-content) - var(--desktop-rail-w));
margin: 0 auto;
}
/* Main reserves the right rail and centres content */
.app-main {
padding-right: calc(var(--desktop-rail-w) + 32px) !important;
padding-left: 32px !important;
padding-top: 32px !important;
padding-bottom: 48px !important;
max-width: var(--desktop-max-content);
margin: 0 auto !important;
box-sizing: border-box;
width: 100%;
}
/* ── Sidebar internal polish ─────────────────────────────────── */
.sidebar__header {
padding: 24px 18px 16px !important;
border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.06)) !important;
background: linear-gradient(180deg,
rgba(212, 175, 55, 0.06) 0%,
transparent 100%) !important;
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
}
.sidebar__user {
border-bottom: 1px solid var(--border-default, rgba(255,255,255,0.06)) !important;
padding: 14px 18px !important;
}
.sidebar__nav {
padding: 14px 12px !important;
gap: 4px !important;
}
.sidebar__link {
padding: 11px 14px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: all 0.18s ease !important;
gap: 12px !important;
color: var(--text-secondary, #B3BEDB) !important;
}
.sidebar__link:hover {
background: rgba(212, 175, 55, 0.10) !important;
color: var(--gold, #D4AF37) !important;
transform: translateX(-3px);
}
.sidebar__link.active,
.sidebar__link[aria-current="page"] {
background: linear-gradient(135deg,
rgba(212, 175, 55, 0.18),
rgba(212, 175, 55, 0.08)) !important;
color: var(--gold, #D4AF37) !important;
border: 1px solid rgba(212, 175, 55, 0.25);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
}
.sidebar__link i {
width: 20px;
text-align: center;
font-size: 15px;
}
.sidebar__footer {
padding: 12px 14px 18px !important;
border-top: 1px solid var(--border-default, rgba(255,255,255,0.06)) !important;
margin-top: auto;
}
.sidebar__link.danger {
background: rgba(239, 68, 68, 0.06) !important;
color: #F87171 !important;
}
.sidebar__link.danger:hover {
background: rgba(239, 68, 68, 0.18) !important;
color: #FCA5A5 !important;
}
/* ── Card polish ─────────────────────────────────────────────── */
.card {
padding: 28px !important;
border-radius: 16px !important;
}
.section { padding-bottom: 24px; }
.card-header { margin-bottom: 20px; }
.card-title {
font-size: 18px !important;
font-weight: 800 !important;
}
/* Filter bars no longer need horizontal scroll on wide screens */
.filter-bar {
overflow-x: visible !important;
flex-wrap: wrap !important;
gap: 8px;
}
/* ── Dashboard-specific: multi-column stat grids ─────────────── */
.stats-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
/* ── Forms: 2-col on desktop ─────────────────────────────────── */
.form-grid,
.form-grid--2col {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px !important;
}
.form-grid > .form-grid__full,
.form-grid--2col > .form-grid__full {
grid-column: 1 / -1;
}
/* ── AI widget float position avoids the rail ────────────────── */
#tamx-ai-widget,
.ai-widget-fab,
.ai-floating-btn {
right: calc(var(--desktop-rail-w) + 24px) !important;
}
}
/* ====== Tablet 768-1023: keep mobile rail off-canvas, widen content ====== */
@media (min-width: 768px) and (max-width: 1023px) {
.app-main {
padding: 24px 24px 60px !important;
max-width: 720px;
margin: 0 auto !important;
}
.form-grid,
.form-grid--2col {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
}
/* ====== Extra-wide screens (≥1400px) ====== */
@media (min-width: 1400px) {
:root {
--desktop-max-content: 1400px;
}
}