/* =====================================================================
PREMIUM THEME OVERLAY · BasicProjectLaravel admin CMS
---------------------------------------------------------------------
A design-token layer that re-skins the Argon (Bootstrap 5) shell and
the legacy Metronic components (.kt-*) into a 2026-class premium SaaS
look. Loaded LAST in the so it wins the cascade.
- Zero markup/JS dependency for the look (maps onto existing classes).
- Light = :root ; Dark = html[data-theme="dark"].
- RTL-safe: logical properties (margin-inline / inset) only.
- Motion gated behind prefers-reduced-motion.
===================================================================== */
/* Poppins import removed — the admin now uses the TriangleCMS system-UI font stack.
(JetBrains Mono is still loaded via the layout's Google Fonts for monospace.) */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS — LIGHT (default)
--------------------------------------------------------------------- */
:root {
/* =================================================================
TRIANGLE BRAND PRIMITIVES (single source of truth — brand palette)
Ref: Triangle brand guidelines v1.0 (2025)
primary dark grey #2E2D32 · off-white #F5F5F5 · white #FFFFFF
accent red #ED1A2F (used sparingly: CTA / active / danger)
All semantic --pt-* tokens below map onto these. Never hardcode a
brand colour in a component rule — reference a token.
================================================================= */
--tri-red: #ed1a2f; /* secondary/accent — RGB 237,26,47 */
--tri-red-600: #d11528; /* hover / pressed */
--tri-red-700: #b01020; /* active text on light tints (AA-safe) */
--tri-red-300: #f2637a; /* tint (secondary ramp) */
--tri-red-100: #fbd0d7; /* faint tint */
--tri-grey: #2e2d32; /* primary — RGB 46,45,50 */
--tri-grey-2: #3a3940; /* raised dark surface */
--tri-offwhite: #f5f5f5; /* RGB 245,245,245 */
--tri-white: #ffffff;
/* Brand red ramp (TriangleCMS spec) */
--tri-red-50: #fef2f3;
--tri-red-200: #f8b9bf;
/* Surfaces — flat TriangleCMS spec */
--pt-bg: #f4f4f5;
--pt-bg-subtle: #ececef;
--pt-surface: var(--tri-white);
--pt-surface-2: #fafafa;
--pt-surface-3: #f6f6f7;
--pt-surface-hover: #f2f1f4;
--pt-border: #e7e6ea;
--pt-border-2: #efeef1;
--pt-border-strong: #d8d7dd;
/* Text */
--pt-text: var(--tri-grey);
--pt-text-muted: #66646d;
--pt-text-soft: #9795a0;
--pt-text-on-accent: var(--tri-white);
/* Accents — brand red. Legacy indigo/cyan/violet names kept as
aliases so existing component rules resolve without edits. */
--pt-indigo: var(--tri-red);
--pt-indigo-600: var(--tri-red-600);
--pt-indigo-700: var(--tri-red-700);
--pt-cyan: var(--tri-red-300);
--pt-violet: #7a5ae0;
--pt-accent: var(--tri-red);
--pt-accent-600: var(--tri-red-600);
--pt-accent-soft: rgba(237, 26, 47, 0.10);
--pt-accent-soft-2: rgba(237, 26, 47, 0.16);
--pt-accent-tint: #fef2f3;
--pt-focus-ring: rgba(237, 26, 47, 0.28);
--pt-cta-grad: var(--tri-red); /* flattened — was liquid-chrome gradient */
/* Semantic — desaturated to match TriangleCMS spec; danger = brand red */
--pt-success: #2a9d6f;
--pt-success-soft: rgba(42, 157, 111, 0.12);
--pt-warning: #de9526;
--pt-warning-soft: rgba(222, 149, 38, 0.14);
--pt-danger: var(--tri-red);
--pt-danger-soft: rgba(237, 26, 47, 0.10);
--pt-info: #3b79d4;
--pt-info-soft: rgba(59, 121, 212, 0.12);
/* Alert body text — darker than the fill colour for AA contrast on the soft tints */
--pt-alert-success-text: #1b7a53;
--pt-alert-danger-text: #ae0e23;
--pt-alert-warning-text: #9a6612;
--pt-alert-info-text: #2a5ba8;
/* Legacy palette remap (consumed by custom.css refactor) */
--pt-navy: var(--tri-grey); /* was #061222 → brand dark grey */
--pt-slate: #4a4951; /* neutral dark accent */
--pt-chip: #ececef; /* was #e9ecef */
/* Sidebar — ALWAYS charcoal in BOTH themes (TriangleCMS spec) */
--sb-bg: #232227;
--sb-bg-2: #2a2930;
--sb-border: rgba(255, 255, 255, 0.07);
--sb-text: rgba(255, 255, 255, 0.66);
--sb-text-hi: #ffffff;
--sb-muted: rgba(255, 255, 255, 0.40);
--sb-hover: rgba(255, 255, 255, 0.06);
--sb-active: rgba(255, 255, 255, 0.10);
/* Spacing — 8px scale (refined in Phase 2) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* Radii — TriangleCMS flat spec (base 12 / sm 8 / lg 16) */
--r-xs: 5px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* Elevation — flat, cool-tinted depth (TriangleCMS spec) */
--shadow-sm: 0 1px 2px rgba(26, 25, 29, 0.05), 0 1px 1px rgba(26, 25, 29, 0.04);
--shadow-md: 0 4px 14px rgba(26, 25, 29, 0.07), 0 1px 3px rgba(26, 25, 29, 0.05);
--shadow-lg: 0 18px 50px -8px rgba(26, 25, 29, 0.16), 0 4px 14px rgba(26, 25, 29, 0.10);
--shadow-pop: 0 12px 32px rgba(26, 25, 29, 0.13), 0 2px 6px rgba(26, 25, 29, 0.07);
--shadow-accent: 0 1px 2px rgba(237, 26, 47, 0.25);
--shadow-glow: none; /* flattened — was red glow */
/* Glass/chrome/mesh tokens REPOINTED to flat values so all consumers
resolve to flat surfaces without editing each rule. Literal
backdrop-filter declarations are stripped individually below. */
--glass-bg: var(--pt-surface);
--glass-bg-strong: var(--pt-surface);
--glass-border: var(--pt-border);
--glass-top: var(--pt-surface);
--glass-blur: none;
--glass-blur-strong: none;
/* CTA — flat brand fill (was liquid-chrome gradient + specular shadow) */
--accent-gradient: var(--tri-red);
--chrome-shadow: none;
/* Hero — flattened (was atmospheric mesh-gradient) */
--mesh-base: var(--pt-surface);
--mesh-header: none;
/* Typography — system-UI stack to match the TriangleCMS design (native feel;
Segoe UI on Windows, SF on macOS). "Cairo" retained for Arabic / RTL.
JetBrains Mono kept for monospace (code/kbd/file paths). */
--pt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Cairo", sans-serif;
--pt-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Cairo", sans-serif;
--pt-font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Motion */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 200ms;
color-scheme: light;
}
/* ---------------------------------------------------------------------
2. DESIGN TOKENS — DARK
--------------------------------------------------------------------- */
html[data-theme="dark"] {
/* Dark surfaces — TriangleCMS dark ramp (cool near-black) */
--pt-bg: #141317;
--pt-bg-subtle: #1d1c21;
--pt-surface: #1d1c21;
--pt-surface-2: #232227;
--pt-surface-3: #26252b;
--pt-surface-hover: #2a2930;
--pt-border: #2f2e35;
--pt-border-2: #2a2930;
--pt-border-strong: #3b3a42;
--pt-text: #edecef;
--pt-text-muted: #a3a1ab;
--pt-text-soft: #76747d;
--pt-text-on-accent: #ffffff;
--pt-accent-soft: rgba(237, 26, 47, 0.18);
--pt-accent-soft-2: rgba(237, 26, 47, 0.26);
--pt-accent-tint: rgba(237, 26, 47, 0.14);
--pt-focus-ring: rgba(237, 26, 47, 0.42);
--pt-success-soft: rgba(42, 157, 111, 0.18);
--pt-warning-soft: rgba(222, 149, 38, 0.20);
--pt-danger-soft: rgba(237, 26, 47, 0.20);
--pt-info-soft: rgba(59, 121, 212, 0.18);
/* Lighter alert text for legibility on dark soft tints */
--pt-alert-success-text: #52c79a;
--pt-alert-danger-text: #f0808d;
--pt-alert-warning-text: #e7b463;
--pt-alert-info-text: #7aa6e8;
--pt-navy: var(--tri-offwhite);
--pt-slate: #c4c3c9;
--pt-chip: #2a2930;
/* Sidebar — even darker charcoal in dark mode (TriangleCMS spec) */
--sb-bg: #131215;
--sb-bg-2: #1a191d;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.34);
--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.40);
--shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.50);
--shadow-accent: 0 1px 2px rgba(237, 26, 47, 0.35);
--shadow-glow: none;
/* Glass tokens repointed to flat dark surfaces */
--glass-bg: var(--pt-surface);
--glass-bg-strong: var(--pt-surface);
--glass-border: var(--pt-border);
--glass-top: var(--pt-surface);
/* Hero — flattened */
--mesh-base: var(--pt-surface);
--mesh-header: none;
color-scheme: dark;
}
/* ---------------------------------------------------------------------
2b. GLASS CAPABILITY FALLBACK + SIGNATURE KEYFRAMES
---------------------------------------------------------------------
Where backdrop-filter is unsupported, collapse every glass surface to an
opaque one in a single place (all glass rules read these tokens). Keyframes
power the mesh drift and the liquid-chrome CTA sheen.
--------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root {
--glass-bg: var(--pt-surface);
--glass-bg-strong: var(--pt-surface);
}
html[data-theme="dark"] {
--glass-bg: var(--pt-surface);
--glass-bg-strong: var(--pt-surface);
}
}
@keyframes ptMeshDrift {
0% { transform: translate3d(0, 0, 0) scale(1.02); }
50% { transform: translate3d(2%, -2%, 0) scale(1.08); }
100% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
}
@keyframes ptChromeShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* ---------------------------------------------------------------------
3. BASE / TYPOGRAPHY
--------------------------------------------------------------------- */
/* Metronic's style.bundle.css ends with `html,body{font-size:13px!important}`, which
pins the root at 13px and shrinks every rem-based size ~19% below the TriangleCMS
design spec (the overlay + argon/Bootstrap layout are authored for a 16px root) and
forces Poppins. Restore the intended 16px root + system font so rem values match. */
html {
font-size: 16px !important;
font-family: var(--pt-font) !important;
}
body {
font-family: var(--pt-font) !important;
background-color: var(--pt-bg) !important;
color: var(--pt-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.006em;
}
body.bg-gray-100 { background-color: var(--pt-bg) !important; }
/* Metronic hardcodes `font-family: Poppins` on these containers (it was masked while
Poppins was our brand font). Re-point them to the system-UI stack so the whole
admin is consistent. Container-level only — icon fonts on inner are untouched. */
.tooltip, .popover, .modal-content, .dropdown-menu, .swal2-popup, .select2-container, .ql-toolbar, .ql-container { font-family: var(--pt-font) !important; }
/* Remaining hardcoded-Poppins plugin containers in style.bundle.css that the list
above doesn't reach (jstree menus, uppy uploader, apexcharts, leaflet maps). */
.vakata-context, .vakata-context ul, .uppy-Root, .uppy-Root *,
.apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text,
.leaflet-container, .leaflet-popup-content { font-family: var(--pt-font) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--pt-font-heading);
color: var(--pt-text);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
}
p, span, label, td, th, li, .text-sm, .text-xs { color: inherit; }
a { color: var(--pt-accent); }
a:hover { color: var(--pt-indigo-700); }
.text-muted, .text-secondary { color: var(--pt-text-muted) !important; }
hr.horizontal.dark, hr.horizontal {
background-color: transparent;
background-image: linear-gradient(90deg, transparent, var(--pt-border-strong), transparent);
opacity: 1;
}
/* Selection */
::selection { background: var(--pt-accent-soft-2); }
/* ---------------------------------------------------------------------
4. LAYOUT · mesh-gradient hero header
--------------------------------------------------------------------- */
/* Hero band REMOVED — the prototype has a clean page background, no dark header
slab. Neutralise Argon's .bg-primary hero so no dark strip shows behind the
topbar / beside the sidebar (the topbar is now a theme-aware glass bar). */
.min-height-300.bg-primary,
.position-absolute.bg-primary.w-100 {
background: transparent !important;
background-image: none !important;
min-height: 0 !important;
box-shadow: none !important;
}
.min-height-300.bg-primary::before,
.position-absolute.bg-primary.w-100::before { display: none !important; }
/* Profile-page hero mask over its photo: keep a soft neutral wash (not a slab) */
.mask.bg-primary {
background-image: linear-gradient(180deg, rgba(46, 45, 50, 0.50), rgba(46, 45, 50, 0.12)) !important;
background-color: transparent !important;
}
main.main-content { color: var(--pt-text); }
/* Dashboard welcome hero (flat, brand mark + greeting) */
.pt-dash-welcome { max-width: 560px; margin: clamp(40px, 9vh, 110px) auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.pt-dash-welcome__mark { inline-size: 72px; block-size: 72px; border-radius: var(--r-xl); display: grid; place-items: center; background: var(--tri-grey); border: 0; box-shadow: var(--shadow-md); }
.pt-dash-welcome__mark img { inline-size: 44px; height: auto; }
.pt-dash-welcome__title { font-family: var(--pt-font-heading); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--pt-text); margin: 0; }
.pt-dash-welcome__sub { font-size: 0.95rem; color: var(--pt-text-muted); margin: 0; line-height: 1.6; }
/* ---------------------------------------------------------------------
5. SIDEBAR
--------------------------------------------------------------------- */
/* Sidebar is theme-aware: light surface in light mode, brand-grey (#2E2D32)
in dark mode. Colours come from --pt-* tokens so they flip automatically.
(Logo renders fine on both; supply a reversed/white logomark asset if it
ever needs more contrast on the dark surface — never recolour via filter.) */
.sidenav,
.navbar-vertical.navbar-expand-xs {
background: var(--sb-bg) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid var(--sb-border) !important;
box-shadow: none !important;
border-radius: var(--r-lg) !important;
}
.sidenav .navbar-brand,
.sidenav .navbar-brand span { color: var(--sb-text-hi) !important; font-weight: 700; }
.sidenav .navbar-brand { padding-block: var(--sp-3); }
.sidenav .navbar-brand-img { filter: none; width: auto; }
.sidenav .pt-brand-pill__logo img { height: auto !important; max-height: 28px; max-width: 100%; width: auto; }
/* Header GROWS with the brand pill — Argon hardcodes a fixed height:4.875rem
that the pill can exceed, which made it overlap the first menu item. */
.sidenav .sidenav-header { height: auto !important; min-height: 56px; padding-block: var(--sp-2); }
.navbar-vertical .navbar-nav .nav-link {
color: var(--sb-text) !important;
border-radius: var(--r-sm);
margin: 1px var(--sp-2); /* 1px vertical matches TriangleCMS margin-bottom:1px */
padding-block: 9px;
font-weight: 500;
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.navbar-vertical .navbar-nav .nav-link .icon,
.navbar-vertical .navbar-nav .nav-link > i {
color: var(--sb-muted);
transition: color var(--dur) var(--ease-out);
}
.navbar-vertical .navbar-nav .nav-link:hover {
background-color: var(--sb-hover) !important;
color: var(--sb-text-hi) !important;
}
/* Hover: icon inherits white from parent — NOT brand-red (TriangleCMS pattern) */
.navbar-vertical .navbar-nav .nav-link:hover > i { color: inherit; }
/* Selected item: white overlay, white text. Red is ONLY the ::before accent bar. */
.navbar-vertical .navbar-nav .nav-link.active {
background: var(--sb-active) !important;
color: var(--sb-text-hi) !important;
box-shadow: none !important;
font-weight: 600;
}
/* Active icon: white (inherits from parent text colour) — the accent bar is red */
.navbar-vertical .navbar-nav .nav-link.active > i,
.navbar-vertical .navbar-nav .nav-link.active .icon i,
.navbar-vertical .navbar-nav .nav-link.active i.kt-menu__link-icon { color: var(--sb-text-hi) !important; }
/* collapsible parent caret — right-pointing chevron (→), rotates 90° ↓ when open (TriangleCMS pattern) */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
content: "";
display: inline-block;
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-inline-start: auto;
/* chevron-right in --sb-muted colour (rgba 255,255,255,0.40) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.40)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: rotate(0deg);
transition: transform 0.2s cubic-bezier(0.4, 0.2, 0.2, 1);
/* suppress any inherited font-icon character */
font-family: unset;
font-size: 0;
color: transparent;
border: none;
vertical-align: middle;
}
/* Open state: rotate 90° so the chevron points ↓ */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
transform: rotate(90deg);
}
/* RTL: chevron faces LEFT (←), absolutely pinned to a fixed left edge so all items
align in one clean vertical column regardless of indentation depth */
[dir="rtl"] .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"] {
position: relative;
padding-inline-end: 28px !important;
}
[dir="rtl"] .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.40)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
position: absolute;
left: 10px;
top: 50%;
margin-inline-start: 0;
transform: translateY(-50%);
}
[dir="rtl"] .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
transform: translateY(-50%) rotate(-90deg);
}
/* When a parent group is OPEN (active child inside), suppress the parent's own
red accent bar — the active child carries it (TriangleCMS design). */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"].active:not(.collapsed)::before { display: none; }
/* thin brand rule under the sidebar header */
.sidenav hr.horizontal { background-image: linear-gradient(90deg, transparent, var(--sb-border), transparent); }
/* ---------------------------------------------------------------------
5b. SIDEBAR SHELL — prototype active accent bar, brand pill, footer, rail
--------------------------------------------------------------------- */
/* Active-item accent bar (RTL-safe via logical inset) */
.navbar-vertical .navbar-nav .nav-link.active { position: relative; }
.navbar-vertical .navbar-nav .nav-link.active::before {
content: "";
position: absolute;
inset-inline-start: -8px; /* flush with sidebar left edge (8px = item margin) */
top: 50%;
transform: translateY(-50%);
inline-size: 3px;
block-size: 20px;
border-radius: var(--r-pill);
background: var(--tri-red);
}
/* Make the aside a flex column so the footer pins to the bottom.
align-items:stretch is REQUIRED — overriding Argon's display:block to flex
would otherwise inherit .navbar's align-items:center and shove every child
(brand pill, menu, footer) into a centered/offset column (the empty gutter). */
/* flex-wrap:nowrap is CRITICAL — the base .navbar sets flex-wrap:wrap, so a
tall menu (height:auto, below) would otherwise wrap the items into extra
columns to the right (cut-off labels, footer beside the menu). nowrap keeps
ONE vertical column; the menu scrolls instead. */
.sidenav.pt-sidenav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; overflow-x: hidden; }
.sidenav.pt-sidenav > * { width: 100%; max-width: 100%; min-width: 0; flex-shrink: 0; }
/* height:auto !important overrides Argon's fixed `height: calc(100vh - 360px)`
on .navbar-collapse so the menu becomes a proper flex child that scrolls
VERTICALLY, letting the footer pin to the viewport bottom on EVERY page.
width:100% beats the markup's `.w-auto`, and overflow-x:hidden defeats
Argon's `overflow:auto` → no horizontal scrollbar. */
.sidenav.pt-sidenav #sidenav-collapse-main {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
width: 100% !important;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden !important;
}
.sidenav.pt-sidenav .pt-sidenav-footer { flex: 0 0 auto; }
/* Brand pill (display-only workspace identity) */
.pt-brand-pill {
display: flex;
align-items: center;
gap: var(--sp-3);
inline-size: 100%;
padding: var(--sp-2);
border-radius: 0;
border: 0;
background: transparent;
transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.pt-brand-pill:hover { background: transparent; }
/* Specificity-matched (0,2,0) so it beats Argon's .navbar-vertical .navbar-brand:
keep the logo + name on ONE row, never stacked. */
.sidenav .pt-brand-pill { display: flex; flex-direction: row; align-items: center; }
.pt-brand-pill__logo {
inline-size: 34px;
block-size: 34px;
border-radius: var(--r-sm);
flex: 0 0 auto;
display: grid;
place-items: center;
overflow: hidden;
background: transparent;
}
.pt-brand-pill__logo img { max-block-size: 28px; width: auto; }
.pt-brand-pill__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pt-brand-pill__name {
font-size: 0.9rem;
font-weight: 700;
color: var(--sb-text-hi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pt-brand-pill__sub { font-size: 0.72rem; color: var(--sb-muted); white-space: nowrap; }
/* Brand logo: white wordmark (expanded) ↔ red triangle mark (collapsed rail) */
.sidenav .pt-brand-pill { gap: 0; padding-inline: 20px; }
.pt-brand-logo { display: block; width: auto; }
.pt-brand-logo--full { block-size: 24px; max-inline-size: 100%; }
.pt-brand-logo--mark { block-size: 26px; display: none; }
.g-sidenav-hidden .navbar-vertical .pt-brand-logo--full { display: none !important; }
.g-sidenav-hidden .navbar-vertical .pt-brand-logo--mark { display: block !important; }
/* Sidebar footer: user-mini only (collapse toggle moved to topbar) */
.pt-sidenav-footer {
margin-top: auto;
padding: var(--sp-3);
border-top: 1px solid var(--sb-border);
display: flex;
flex-direction: column;
gap: 0;
}
.pt-collapse-toggle {
display: flex;
align-items: center;
gap: var(--sp-3);
inline-size: 100%;
padding: 9px var(--sp-3);
border: 0;
background: transparent;
border-radius: var(--r-sm);
color: var(--sb-text);
font-weight: 500;
cursor: pointer;
transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pt-collapse-toggle:hover { background: var(--sb-hover); color: var(--sb-text-hi); }
.pt-collapse-toggle svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pt-user-mini {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 8px 10px;
border-radius: var(--r-sm);
cursor: pointer;
}
.pt-user-mini:hover { background: var(--sb-hover); }
.pt-user-mini__avatar {
inline-size: 34px;
block-size: 34px;
border-radius: 50%;
flex: 0 0 auto;
display: grid;
place-items: center;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
}
.pt-user-mini__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pt-user-mini__name {
font-size: 0.8125rem; /* 13px — TriangleCMS .nm */
font-weight: 600;
color: var(--sb-text-hi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pt-user-mini__role { font-size: 0.71875rem; color: var(--sb-muted); } /* 11.5px */
.pt-user-mini__chev { margin-inline-start: auto; flex: 0 0 auto; color: var(--sb-muted); opacity: 0.5; }
/* =====================================================================
COLLAPSED ICON RAIL (g-sidenav-hidden) — prototype behaviour
---------------------------------------------------------------------
The rail is FIXED. Argon + custom.css expand it back on :hover, which
meant clicking "Collapse" while the cursor was over the menu didn't take
effect until the cursor left. The prototype keeps it collapsed until
toggled again, so we disable the hover-expand entirely.
===================================================================== */
/* Kill the hover-expand (custom.css uses 0,4,0 + !important; premium loads
last so an equal-specificity rule wins): keep rail width + content margin. */
.g-sidenav-show.g-sidenav-hidden .navbar-vertical:hover { max-width: 6rem !important; }
.g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { margin-inline-start: 7.5rem !important; margin-inline-end: 0 !important; }
.g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .nav-link-text,
.g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .sidenav-normal { opacity: 0 !important; width: 0 !important; }
/* Footer stays visible in the rail (Argon hides it by default) */
.g-sidenav-hidden .sidenav-footer.pt-sidenav-footer { display: flex !important; }
/* Keep the brand LOGO visible — Argon blanks EVERY .navbar-brand span with
opacity:0, and our logo is wrapped in a span (0,4,0 beats Argon's 0,3,0). */
.g-sidenav-hidden .navbar-vertical .navbar-brand .pt-brand-pill__logo { opacity: 1 !important; }
/* Hide all text/meta + every text span inside nav-links — only icons remain.
Using display:none (not opacity/width tricks) so no margin/padding residue
from ms-1 etc. can push an icon off-centre. */
.g-sidenav-hidden .navbar-vertical .pt-brand-pill__meta,
.g-sidenav-hidden .navbar-vertical .pt-user-mini__meta,
.g-sidenav-hidden .navbar-vertical .pt-user-mini__chev,
.g-sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-mini-icon,
.g-sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-normal,
.g-sidenav-hidden .navbar-vertical .nav-item .nav-link .nav-link-text { display: none !important; }
/* Centre the icons + shell bits in the rail — reset inline padding so the
logo-mark / avatar / icons sit centred in the narrow 6rem rail, not offset
by the expanded 20px / 10px block padding. */
.g-sidenav-hidden .navbar-vertical .pt-brand-pill { justify-content: center; padding-inline: 0; }
.g-sidenav-hidden .navbar-vertical .pt-user-mini { justify-content: center; padding-inline: 0; }
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link { justify-content: center; padding-inline: 0 !important; }
/* Collapsed rail: drop the icon's label-gap (margin-inline-end:10px) so it
centres exactly. Otherwise the trailing margin offsets the icon ~5px toward
the inline-start — barely visible in LTR but obvious in RTL (Arabic). */
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link > i,
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link i.kt-menu__link-icon,
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link span.kt-menu__link-icon,
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link .icon.icon-shape { margin-inline-end: 0 !important; }
/* RTL parent items reserve padding-inline-end:28px for the left-pinned chevron
(see ~L423); that chevron is hidden in the rail, so the leftover padding shoves
the icon off-centre in Arabic. Drop it so the icon centres like LTR. */
[dir="rtl"] .g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"] { padding-inline-end: 0 !important; }
/* In icon-rail mode, collapse all open accordion sub-menus so they don't bleed
into the rail as invisible blank rows. Bootstrap restores the open state when
the sidebar expands again (g-sidenav-hidden is removed from body). */
.g-sidenav-hidden .navbar-vertical .navbar-nav .collapse,
.g-sidenav-hidden .navbar-vertical .navbar-nav .collapsing { display: none !important; }
/* PerfectScrollbar rail sits position:absolute at the right edge of the nav
container (z-index:3), invisibly overlapping the collapse chevrons. On
Windows, where Argon initialises PS, clicking near a chevron fires the PS
rail's mousedown instead of reaching the nav-link — Bootstrap's collapse
handler never fires and the menu appears frozen.
Removing pointer-events from the rail lets clicks pass through to nav-links;
the thumb retains pointer-events so drag-to-scroll still works. */
#sidenav-main .ps__rail-y { pointer-events: none; }
#sidenav-main .ps__thumb-y { pointer-events: auto; }
/* Zero out the inherited font-size on nav-links so the leading 3× text
node collapses to zero width (centering the icon perfectly). The already
has an explicit font-size: 0.95rem so it renders at full size regardless. */
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link { font-size: 0; }
/* ROOT-CAUSE FIX: the collapse-toggle ::after chevron has margin-left:auto
(argon-dashboard.css line 19297) which absorbs all free space and defeats
justify-content:center — pinning parent-item icons hard-left while leaf
items (Settings, Pages, SEO) that have no ::after sit centred. Removing the
pseudo-element from layout with display:none makes every icon centre at the
same point in the icon rail. */
.g-sidenav-hidden .navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse]::after { display: none !important; }
/* ---------------------------------------------------------------------
5c. SIDEBAR SECTION LABELS (tab group headers — TriangleCMS design)
--------------------------------------------------------------------- */
/* Section labels are
items inside
the navbar-nav
. They function as non-clickable group headings. */
.navbar-vertical .navbar-nav .pt-nav-section-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--sb-muted);
padding: 18px 20px 6px;
list-style: none;
pointer-events: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* First section label sits closer to the header — reduce top gap */
.navbar-vertical .navbar-nav .pt-nav-section-label:first-child { padding-top: 8px; }
/* In icon-rail mode, hide labels entirely (no space to show them) */
.g-sidenav-hidden .navbar-vertical .navbar-nav .pt-nav-section-label { display: none !important; }
/* R8.9 merged menu: GetNavigation() puts a toggle button in each tab heading. The label
itself stays non-interactive; only the button takes clicks. */
.navbar-vertical .navbar-nav .pt-nav-section-toggle {
pointer-events: auto;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-align: start;
cursor: pointer;
}
.navbar-vertical .navbar-nav .pt-nav-section-toggle > span { overflow: hidden; text-overflow: ellipsis; }
.navbar-vertical .navbar-nav .pt-nav-section-toggle::after {
content: "";
margin-inline-start: auto;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .15s ease;
}
.navbar-vertical .navbar-nav .pt-nav-section-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
[dir="rtl"] .navbar-vertical .navbar-nav .pt-nav-section-toggle[aria-expanded="false"]::after { transform: rotate(135deg); }
.navbar-vertical .navbar-nav .pt-nav-section-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.navbar-vertical .navbar-nav .pt-nav-group-hidden { display: none !important; }
/* Icon rail: headings are hidden, so a collapsed group must not hide its icons */
.g-sidenav-hidden .navbar-vertical .navbar-nav .pt-nav-group-hidden { display: list-item !important; }
/* Top bar / profile toggle between merged and tab-at-a-time menus */
.pt-menu-display-form { display: inline-flex; margin: 0; }
.pt-menu-display-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 8px;
background: transparent;
color: inherit;
font-size: 12.5px;
white-space: nowrap;
cursor: pointer;
}
.pt-menu-display-toggle:hover { background: rgba(0, 0, 0, .04); }
.pt-menu-display-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* ---------------------------------------------------------------------
5d. SIDEBAR MENU ITEMS — prototype list polish
---------------------------------------------------------------------
The server menu prefixes each item with 3× + a bare
. Pure CSS — GetNavigation() HTML
is untouched.
--------------------------------------------------------------------- */
/* Flex row + font-size:0 collapses the leading 3× text node so EVERY icon
(DB items + the hardcoded Dashboard) starts at the same x and lines up with its
label. Label/icon font-sizes are restored on their own elements below. */
.navbar-vertical .navbar-nav .nav-link {
display: flex !important;
align-items: center !important;
font-size: 0;
padding-inline: var(--sp-3);
}
/* Force Argon's mini-icon (which carries the FULL name here) to truly collapse
in the expanded sidebar — its flex min-width:auto + nowrap text otherwise
reserves a wide gap between the icon and the visible label. */
.g-sidenav-show:not(.g-sidenav-hidden) .navbar-vertical .nav-item .nav-link span.sidenav-mini-icon {
width: 0 !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
/* Icon: uniform 22px box, vertically centred, muted; brand-red on hover (active in §5).
Covers DB items (i.kt-menu__link-icon) AND the hardcoded Dashboard (.icon.icon-shape). */
.navbar-vertical .navbar-nav .nav-link > i,
.navbar-vertical .navbar-nav .nav-link i.kt-menu__link-icon,
.navbar-vertical .navbar-nav .nav-link .icon.icon-shape {
min-width: 22px;
inline-size: 22px;
height: auto;
text-align: center;
font-size: 0.95rem;
line-height: 1;
color: var(--sb-muted);
background: transparent !important;
box-shadow: none !important;
margin: 0 !important;
margin-inline-end: 10px !important;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--dur) var(--ease-out);
}
.navbar-vertical .navbar-nav .nav-link .icon.icon-shape i { font-size: 0.95rem; color: inherit; margin: 0; }
/* Hover icon inherits white from parent — NOT brand-red */
.navbar-vertical .navbar-nav .nav-link:hover > i,
.navbar-vertical .navbar-nav .nav-link:hover i.kt-menu__link-icon,
.navbar-vertical .navbar-nav .nav-link:hover .icon.icon-shape { color: inherit; }
/* Labels wrap to full text (override Argon's white-space:nowrap); long tokens
break instead of forcing a horizontal scrollbar */
.navbar-vertical .navbar-nav .nav-link .nav-link-text,
.navbar-vertical .navbar-nav .nav-link .sidenav-normal {
font-size: 13.5px; /* TriangleCMS nav-item exact spec */
font-weight: 500;
white-space: normal;
line-height: 1.3;
overflow-wrap: anywhere;
min-width: 0;
}
/* Nested submenu → TREE VIEW. Every nesting level steps in by one consistent
amount AND draws a vertical guide rail, so a child always sits further in
than its parent across 3+ level trees (e.g. Manage users › Admin users ›
Add / View / Activity logs, or Companies › Sectors / Content). The indent
compounds because every nests inside the previous level's
. All properties are logical (…-inline-…) so the whole tree mirrors
automatically for RTL (Arabic). */
.navbar-vertical .navbar-nav .collapse .nav.ms-4 {
margin-inline-start: 1.15rem !important; /* one indent step per nesting level */
padding-inline-start: 0 !important;
/* vertical tree-guide rail — a touch brighter than --sb-border so it reads */
border-inline-start: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}
.navbar-vertical .navbar-nav .collapse .nav .nav-link {
margin-inline: 4px; /* sit closer to the guide rail */
padding-block: 7px;
padding-inline-start: 0.5rem; /* small gap rail → marker; sub-parents show their icon here */
position: relative;
}
/* Sub-parents KEEP their icon (it is the depth marker); leaves have no icon so
they reserve the SAME 32px icon column and drop their dot into it. Result:
every same-depth label lines up in one column while deeper levels still step
further in — alignment now depends only on nesting depth, never on whether a
row happens to carry an icon (that dependency was the original bug). */
.navbar-vertical .navbar-nav .collapse .nav .nav-link:not([data-bs-toggle="collapse"]) {
padding-inline-start: calc(0.5rem + 32px);
}
/* Neutralise the 4px `ms-1` the server adds to sub-parent labels so their text
lines up exactly with sibling leaf labels at the same depth. */
.navbar-vertical .navbar-nav .collapse .nav .nav-link .nav-link-text {
margin-inline-start: 0 !important;
}
/* Leaf sub-items get a small dot bullet. Collapsible sub-parents
(data-bs-toggle, e.g. "Admin users") are EXCLUDED here so their caret
shows instead — this is what gives the 2nd-through-before-last levels an
expand/collapse arrow in a 3+ level tree. */
.navbar-vertical .navbar-nav .collapse .nav .nav-link:not([data-bs-toggle="collapse"])::after {
content: "";
position: absolute;
inset-inline-start: calc(0.5rem + 8px); /* centre of the 22px marker column (aligns under sub-parent icons) */
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.3;
transition: opacity 0.15s;
}
/* Active leaf sub-item: hide dot, accent bar (::before) takes over.
Toggles are excluded so an active sub-parent keeps its caret. */
.navbar-vertical .navbar-nav .collapse .nav .nav-link:not([data-bs-toggle="collapse"]).active::after { opacity: 0; }
/* 3rd-level active item: argon-dashboard.css sets `content:none` on `::before` at
this nesting depth (specificity 0,8,1), which kills the accent bar entirely. Re-
enable it — same specificity but premium-theme.css loads AFTER argon-dashboard.css
so cascade order wins. The base rule's inset-inline-start:-8px already positions
the bar correctly at the left of the item row (no position override needed). */
.navbar-vertical .navbar-nav .collapse .nav .collapse .nav .nav-link.active::before {
content: "";
}
/* Hide the per-item DB icon on LEAF rows only — sub-parents keep theirs as the
depth marker, leaves show a dot in that same reserved column (see above). The
old bug (2nd level looking deeper than the 3rd) is gone because leaves now
reserve the icon column, so alignment tracks nesting depth, not icons. */
.navbar-vertical .navbar-nav .collapse .nav .nav-link:not([data-bs-toggle="collapse"]) i.kt-menu__link-icon {
display: none !important;
}
/* Submenu open/close = INSTANT. Bootstrap's ~0.35s height animation ignores
further clicks while `.collapsing` is mid-flight (its `_isTransitioning`
guard), so rapid clicking felt frozen and an interrupted animation could
leave a submenu stuck half-open. No transition → the toggle completes on the
same tick, so every click registers immediately. */
.navbar-vertical .navbar-nav .collapse,
.navbar-vertical .navbar-nav .collapsing {
transition: none !important;
-webkit-transition: none !important;
}
/* ---------------------------------------------------------------------
6. TOP NAVBAR · theme-aware glass bar (prototype topbar)
--------------------------------------------------------------------- */
/* Theme-aware chrome text (overrides the hardcoded .text-white in the blade) */
.navbar-main .text-white,
.navbar-main h6,
.navbar-main .nav-link,
.navbar-main .breadcrumb-item,
.navbar-main .breadcrumb-item.active { color: var(--pt-text) !important; }
.navbar-main .breadcrumb-item a,
.navbar-main .breadcrumb-item a > i { color: var(--pt-text-muted) !important; }
.navbar-main .breadcrumb-item a:hover,
.navbar-main .nav-link:hover { color: var(--pt-accent) !important; }
.navbar-main .sidenav-toggler-line { background-color: var(--pt-text-muted) !important; }
/* Hide Argon's native topbar hamburger — our custom .pt-topbar-collapse button takes its place.
(Only the desktop toggler carries .sidenav-toggler; the mobile #iconNavbarSidenav is untouched.) */
.navbar-main .sidenav-toggler { display: none !important; }
/* The team and tab selectors share .menu-tabs in the topbar. Keep both visible. */
/* Hamburger collapse toggle (TriangleCMS design: leftmost element in topbar).
The SINGLE sidebar toggle on EVERY breakpoint: on desktop (≥1200px) it
collapses the icon-rail; on mobile its JS handler proxies a click to the
Argon drawer toggle (#iconNavbarSidenav). */
.pt-topbar-collapse {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: var(--r-sm);
border: 0;
padding: 0;
background: transparent;
color: var(--pt-text-muted);
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pt-topbar-collapse:hover { background: var(--pt-surface-3); color: var(--pt-text); }
/* Collapse-toggle icon swap — burger (☰) while the sidebar is EXPANDED; the
collapsed glyph while it is collapsed (g-sidenav-hidden) OR on mobile (<768px). */
#ptSidebarCollapse .pt-collapse-ico--collapsed { display: none; }
#ptSidebarCollapse .pt-collapse-ico--menu { display: block; }
body.g-sidenav-hidden #ptSidebarCollapse .pt-collapse-ico--menu { display: none; }
body.g-sidenav-hidden #ptSidebarCollapse .pt-collapse-ico--collapsed { display: block; }
/* fa-grip-lines renders at 1em — size it to sit level with the 19px burger. */
#ptSidebarCollapse .pt-collapse-ico--collapsed { font-size: 18px; }
@media (max-width: 767.98px) {
#ptSidebarCollapse .pt-collapse-ico--menu { display: none !important; }
#ptSidebarCollapse .pt-collapse-ico--collapsed { display: block !important; }
}
/* Legacy Metronic subheader hamburger — superseded by .pt-topbar-collapse.
Hide it on every page so the only sidebar toggle is the topbar one (top-start). */
.kt-subheader__mobile-toggle { display: none !important; }
/* Argon's legacy mobile drawer toggle is superseded by .pt-topbar-collapse plus
the permanent icon-rail; hide its list item so it leaves no empty gap on the
topbar's end side (#iconNavbarSidenav itself is already hidden ≤1199px). */
.navbar-main .nav-item:has(> #iconNavbarSidenav) { display: none !important; }
/* theme toggle → subtle surface chip */
.navbar-main .pt-theme-toggle {
background: var(--pt-surface-2);
border: 1px solid var(--pt-border);
color: var(--pt-text-muted);
width: 38px;
height: 38px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out);
}
.navbar-main .pt-theme-toggle:hover { background: var(--pt-surface-hover); color: var(--pt-text); transform: translateY(-1px); }
.navbar-main .pt-theme-toggle:active { transform: translateY(0); }
/* Action buttons (purge cache) → neutral surface chip on the glass bar */
.navbar-main .btn-info,
.navbar-main .btn-info:focus {
background: var(--pt-surface-2) !important;
background-image: none !important;
border: 1px solid var(--pt-border) !important;
color: var(--pt-text) !important;
box-shadow: none !important;
}
.navbar-main .btn-info:hover { background: var(--pt-surface-hover) !important; color: var(--pt-text) !important; }
/* ---------------------------------------------------------------------
6b. GLASS TOPBAR + ⌘K SEARCH TRIGGER
---------------------------------------------------------------------
The bar floats over the dark mesh hero, so it stays a frosted DARK glass in
BOTH themes — the existing white chrome text remains AA-legible.
--------------------------------------------------------------------- */
.navbar-main.pt-topbar {
/* Theme-aware frosted glass: light in light mode, dark in dark mode.
!important + the 0,2,0 specificity beats Argon's blur-mode .bg-white. */
background: var(--glass-bg-strong) !important;
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
border: 1px solid var(--glass-border);
border-top-color: var(--glass-top);
box-shadow: var(--shadow-md) !important;
}
/* Centre zone holding the command-palette trigger */
.pt-topbar__center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding-inline: var(--sp-4); }
.pt-cmdk-trigger {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
inline-size: min(440px, 100%);
height: 38px;
padding: 0 var(--sp-3);
border-radius: var(--r-sm);
border: 1px solid var(--pt-border);
background: var(--pt-surface-2);
color: var(--pt-text-muted);
font-size: 0.85rem;
cursor: text;
transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pt-cmdk-trigger:hover { background: var(--pt-surface-hover); border-color: var(--pt-border-strong); }
.pt-cmdk-trigger > i { font-size: 0.85rem; opacity: 0.7; }
.pt-cmdk-trigger__placeholder { flex: 1 1 auto; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
font-family: var(--pt-font-mono);
font-size: 11px;
font-weight: 500;
color: var(--pt-text-muted);
background: var(--pt-surface);
border: 1px solid var(--pt-border-strong);
border-radius: 5px;
flex: 0 0 auto;
/* Bootstrap Reboot sets `direction: ltr; unicode-bidi: bidi-override` on code/kbd/samp,
which lays every glyph out left-to-right and renders Arabic chip labels backwards
("تشغيل" → "ليغشت"). These chips hold translated words, not code, so drop the
override and let the bidi algorithm order each run — Latin shortcuts (ESC, ↵) stay
LTR on their own. */
unicode-bidi: normal;
direction: inherit;
}
/* ---------------------------------------------------------------------
6c. FLUSH APP SHELL — sidebar + topbar flush to the viewport edges
---------------------------------------------------------------------
Argon FLOATS the sidebar (my-3 ms-2 + rounding + shadow) and the topbar
(mx-4 + rounding), leaving gaps around them. The prototype shell is flush:
a full-height sidebar with a right border + a full-width sticky topbar with
a bottom border. Override the utility-class margins/radius — CSS only.
--------------------------------------------------------------------- */
/* Sidebar → flush left, full height, right border (no float) */
.sidenav.pt-sidenav {
margin: 0 !important;
inset-block: 0 !important;
inset-inline-start: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
border: 0 !important;
border-inline-end: 1px solid var(--pt-border) !important;
box-shadow: none !important;
}
/* Topbar → flush, full width, sticky, bottom border (no float/rounding) */
.navbar-main.pt-topbar {
margin: 0 !important;
border-radius: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--glass-border) !important;
position: sticky !important;
top: 0 !important;
/* BS5 gives every .alert `position: relative`, so a page banner (e.g. the teams
"nobody can manage their roles and users" one) is a positioned element LATER in
the DOM than the topbar: with both at z-index auto it painted over an open
team/tab switcher menu. Raise the bar so its dropdowns stay on top. */
z-index: 1030 !important;
}
/* Remove the top gap above the topbar + the rounded content float */
.main-content { margin-top: 0 !important; padding-top: 0 !important; border-radius: 0 !important; }
.navbar-main.pt-topbar { box-shadow: none !important; }
/* Content sits flush against the sidebar (16rem) / icon rail (6rem).
margin-inline-END:0 is REQUIRED for RTL: Argon ships no RTL build, so its
physical `.fixed-start + .main-content{margin-left:17.125rem}` (argon-
dashboard.css) is NOT flipped under dir=rtl and would push the whole shell
right, leaving a blank strip on the left. margin-inline-end:0 → margin-left:0
in RTL kills it; harmless (margin-right:0) in LTR. */
@media (min-width: 768px) {
/* TriangleCMS sidebar width = 256px (16rem), matching the design (was 20rem).
Scoped to the EXPANDED state only (:not(.g-sidenav-hidden)) so the 6rem
collapsed rail keeps its width, and ≥768px so the <768px phone drawer is
untouched. High specificity (body + 4 classes) beats custom.css max-width:20rem. */
body.g-sidenav-show:not(.g-sidenav-hidden) .sidenav.navbar-vertical.navbar-expand-xs.pt-sidenav { max-width: 16rem !important; }
.g-sidenav-show .sidenav.fixed-start + .main-content { margin-inline-start: 16rem !important; margin-inline-end: 0 !important; }
.g-sidenav-show.g-sidenav-hidden .sidenav.fixed-start + .main-content,
.g-sidenav-hidden .navbar-vertical.fixed-start + .main-content,
.g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { margin-inline-start: 6rem !important; margin-inline-end: 0 !important; }
}
/* Tablet (768–1199px): keep the sidebar on-screen and use the desktop
expanded ⇄ icon-rail model instead of the phone drawer. Overrides Argon's
<1200px off-canvas translateX (argon-dashboard.css §sidenav) for BOTH the
expanded and the collapsed (g-sidenav-hidden) states. The phone drawer block
further down now starts at <768px. */
@media (min-width: 768px) and (max-width: 1199.98px) {
.g-sidenav-show .sidenav.navbar-vertical.navbar-expand-xs.pt-sidenav,
.g-sidenav-show.g-sidenav-pinned .sidenav.navbar-vertical.navbar-expand-xs.pt-sidenav { transform: none !important; }
/* Content margin — body-prefixed (specificity 0,4,1) to unambiguously beat
Argon's `.g-sidenav-show .sidenav.fixed-start + .main-content{margin-left:0!important}`
(0,4,0) that lives inside its own max-width:1199.98 block. RTL-safe
(logical margin only — never a physical margin-left). */
body.g-sidenav-show .sidenav.fixed-start + .main-content { margin-inline-start: 16rem !important; margin-inline-end: 0 !important; }
body.g-sidenav-show.g-sidenav-hidden .sidenav.fixed-start + .main-content,
body.g-sidenav-hidden .navbar-vertical.fixed-start + .main-content,
body.g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { margin-inline-start: 6rem !important; margin-inline-end: 0 !important; }
}
/* ---------------------------------------------------------------------
7. CARDS (Argon .card + content wrapper)
--------------------------------------------------------------------- */
.card {
background-color: var(--pt-surface) !important;
border: 1px solid var(--pt-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-md) !important;
color: var(--pt-text);
}
.card .card-header { background-color: transparent !important; border-bottom: 1px solid var(--pt-border); }
/* The layout's CRUD content wrapper (