/* ============================================
   SufiTheme Layout Styles
   ============================================
   
   These styles are for the SufiTheme layout components.
   They use CSS custom properties from SufiBlazor design tokens.
*/

/* Box-sizing reset for SufiTheme layout containers.
   Without this, padded full-width containers (e.g. .sufi-topbar) render at 100% + padding
   and overflow the viewport, causing a horizontal scrollbar. SufiBlazor ships no global reset. */
.sufi-app-shell,
.sufi-app-shell__body,
.sufi-app-shell__header,
.sufi-app-shell__main,
.sufi-app-shell__content,
.sufi-app-shell__content-wrapper,
.sufi-app-shell__sidebar,
.sufi-topbar,
.sufi-topbar__start,
.sufi-topbar__center,
.sufi-topbar__end,
.sufi-content-wrapper,
.sufi-content-body,
.sufi-footer {
    box-sizing: border-box;
}

/* ============================================
   RTL / Farsi fonts (Vazir FD – Farsi Digits) + 4 Free fonts for the editor
   ============================================
   When lang is fa/ar/he/ur, SufiBlazor applies font-family: var(--sb-font-family-farsi).
   We define local Vazir-FD and set the variable so the body uses these fonts.
   When switching back to LTR (e.g. en), lang changes and default Latin fonts apply again.
*/
@font-face {
    font-family: "Vazir FD";
    src: url("fonts/fa/Vazir-FD-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazir FD";
    src: url("fonts/fa/Vazir-FD-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Dirooz FD";
    src: url("fonts/fa/Dirooz-FD.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Samim FD";
    src: url("fonts/fa/Samim-FD.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gandom FD";
    src: url("fonts/fa/Gandom-FD.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sahel FD";
    src: url("fonts/fa/Sahel-FD.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Quill RTE font overrides – toolbar font dropdown applies these to selected content */
.ql-font-dirooz-fd { font-family: "Dirooz FD", sans-serif !important; }
.ql-font-samim-fd { font-family: "Samim FD", sans-serif !important; }
.ql-font-gandom-fd { font-family: "Gandom FD", sans-serif !important; }
.ql-font-sahel-fd { font-family: "Sahel FD", sans-serif !important; }

/* Use local Vazir FD for RTL languages so body gets Farsi Digits when lang=fa etc. */
:lang(fa),
:lang(ar),
:lang(he),
:lang(ur) {
    --sb-font-family-farsi: "Vazir FD", "Vazirmatn", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

/* ============================================
   Brand color override (Primary & Secondary)
   ============================================
   Override design tokens so the SufiTheme uses your brand colors.
   Replace the hex values below with your primary and secondary colors.
   Keep hover/active slightly darker and -50/-100/-light as light tints.
*/

:root,
.sb-theme-root {
    /*
       Light shell: retain the deep navy icon rail as a compact brand anchor,
       while the expanded navigation panel follows the light surface system.
    */
    --sufi-color-rail: #050712;
    --sufi-color-rail-text: #A8B2C7;
    --sufi-color-rail-hover: rgba(255, 255, 255, 0.06);
    --sufi-color-rail-active: rgb(124 58 237 / 22%);
    --sufi-color-rail-active-text: #F7F8FC;
    --sufi-color-panel: #FCFBFF;
    --sufi-color-panel-text: #172033;
    --sufi-color-panel-text-muted: #68758D;
    --sufi-color-panel-border: #E4E0EE;
    --sufi-color-panel-hover: rgb(124 58 237 / 6%);
    --sufi-color-panel-active: rgb(124 58 237 / 10%);
    --sufi-color-tooltip: #0B1020;

    /* Primary — violet brand accent */
    --sb-color-primary: #7C3AED;
    --sb-color-primary-hover: #6D28D9;
    --sb-color-primary-active: #5B21B6;
    --sb-color-primary-50: rgb(124 58 237 / 8%);
    --sb-color-primary-100: #EDE9FE;
    --sb-color-primary-light: #EDE9FE;
    --sb-color-on-primary: #FFFFFF;

    /* Secondary — indigo accent */
    --sb-color-secondary: #4F46E5;
    --sb-color-secondary-hover: #4338CA;
    --sb-color-secondary-active: #3730A3;
    --sb-color-secondary-50: rgb(79 70 229 / 8%);
    --sb-color-secondary-100: #E0E7FF;
    --sb-color-secondary-light: #E0E7FF;
    --sb-color-on-secondary: #FFFFFF;

    /* Focus accent for interactive elements */
    --sb-focus-ring-color: #0891B2;
}

/* Dark theme: landing palette surfaces with violet and cyan accents */
.sb-theme-dark {
    /* Primary — violet brand accent */
    --sb-color-primary: #7C3AED;
    --sb-color-primary-hover: #A78BFA;
    --sb-color-primary-active: #4F46E5;
    --sb-color-primary-50: rgb(124 58 237 / 8%);
    --sb-color-primary-100: rgb(124 58 237 / 22%);
    --sb-color-primary-light: rgb(124 58 237 / 22%);
    --sb-color-on-primary: #FFFFFF;

    /* Secondary — indigo accent */
    --sb-color-secondary: #4F46E5;
    --sb-color-secondary-hover: #6366F1;
    --sb-color-secondary-active: #3730A3;
    --sb-color-secondary-50: rgb(79 70 229 / 8%);
    --sb-color-secondary-100: rgb(79 70 229 / 22%);
    --sb-color-secondary-light: rgb(79 70 229 / 22%);
    --sb-color-on-secondary: #FFFFFF;

    /* Focus accent for interactive elements */
    --sb-focus-ring-color: #22D3EE;

    /* Outer page background gradient (surrounds the app shell) */
    --sb-color-page: linear-gradient(180deg, #050712 0%, #0B1020 50%, #11182A 100%);

    /* Dual-sidebar semantic surfaces — darkest rail over an elevated panel */
    --sufi-color-rail: #050712;
    --sufi-color-rail-text: var(--sb-color-text-muted);
    --sufi-color-rail-hover: rgba(255, 255, 255, 0.06);
    --sufi-color-rail-active: rgb(124 58 237 / 22%);
    --sufi-color-rail-active-text: #F7F8FC;
    --sufi-color-panel: #0B1020;
    --sufi-color-panel-text: var(--sb-color-text);
    --sufi-color-panel-text-muted: var(--sb-color-text-muted);
    --sufi-color-panel-border: var(--sb-color-border);
    --sufi-color-panel-hover: rgba(255, 255, 255, 0.06);
    --sufi-color-panel-active: rgb(124 58 237 / 22%);
    --sufi-color-tooltip: #0B1020;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-color-text-muted) transparent;
}

body {
    margin: 0;
    font-family: var(--sb-font-family-latin);
    font-size: var(--sb-font-size-md);
    line-height: var(--sb-line-height-normal);
    color: var(--sb-color-text);
    background-color: var(--sb-color-background);
}

.text-muted {
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-xs);
}
/* Dark theme: outer page gradient surrounds the app shell */
body.sb-theme-dark,
.sb-theme-dark body {
    background: var(--sb-color-page);
}
/* ============================================
   Focus visible – reduce outline on non-interactive elements
   ============================================
   Browser default :focus-visible can show an outline on headings/static
   text when they receive focus (e.g. after Blazor navigation). We remove
   it from non-interactive elements and keep it on inputs/buttons/links.
*/
.sufi-topbar-page-title:focus-visible,
.sufi-topbar-page-info:focus-visible,
.sufi-expand-panel__title:focus-visible {
    outline: none;
}

/* Headings and static text – no focus ring when they’re not links */
h1:focus-visible:not(a),
h2:focus-visible:not(a),
h3:focus-visible:not(a),
h4:focus-visible:not(a),
h5:focus-visible:not(a),
h6:focus-visible:not(a) {
    outline: none;
}

/* Keep focus-visible on interactive elements (inputs, buttons, links) –
   do not add outline: none to input, textarea, select, button, [role="button"], a[href]. */

/* ============================================
   SufiAppShell
   ============================================ */

.sufi-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--sb-color-surface);
}

.sufi-app-shell__header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: var(--sb-z-sticky, 100);
}

.sufi-app-shell__body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--sb-space-2);
}

.sufi-app-shell__sidebar {
    flex-shrink: 0;
    overflow-y: auto;
}

/* Content wrapper for dual sidebar - contains header + main */
.sufi-app-shell__content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.sufi-app-shell__content-wrapper .sufi-app-shell__header {
    position: relative;
    /* Not sticky within wrapper, but container is sticky-ish relative to content */
}

.sufi-app-shell__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--sb-color-background);
    border-radius: 0.5rem 0 0 0.5rem;
}

[dir="rtl"] .sufi-app-shell__content {
    border-radius: 0 0.5rem 0.5rem 0;
}

.sufi-app-shell__breadcrumb {
    padding: var(--sb-space-3) var(--sb-space-4);
    background-color: var(--sb-color-surface);
    border-bottom: 1px solid var(--sb-color-border);
}

.sufi-app-shell__main {
    flex: 1;
    overflow-y: auto;
    background-color: var(--sb-color-surface);
}

.sufi-app-shell__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--sb-color-border);
}

.sufi-app-shell--sidebar-collapsed .sufi-app-shell__sidebar {
    width: 60px;
}

/* App Shell Dual Sidebar variant – fixed sidebar, only main content scrolls */
.sufi-app-shell--dual-sidebar {
    --sufi-sidebar-width: 60px;
    --sufi-expand-panel-width: 260px;
    --sufi-sidebar-content-gap: var(--sb-space-6);
    height: 100vh;
    overflow: hidden;
}

/* Prevent document scroll so only the fixed main container scrolls (Metronic-style) */
body:has(.sufi-app-shell--dual-sidebar) {
    overflow: hidden;
    height: 100vh;
}

.sufi-app-shell--dual-sidebar .sufi-app-shell__body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Content wrapper starts after the fixed sidebar; slides right when panel opens */
.sufi-app-shell--dual-sidebar .sufi-app-shell__content-wrapper {
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Match main content inset: sidebar width + gap (body padding already offsets sidebar by --sb-space-2) */
    margin-left: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-sidebar-content-gap, var(--sb-space-6)) - var(--sb-space-2));
    overflow: hidden;
    transition: margin-left 0.25s ease;
}

/* When sidebar panel is expanded (hover or pinned), header + content slide right with it */
.sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper,
.sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper,
.sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper {
    margin-left: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-expand-panel-width, 260px) + var(--sufi-sidebar-content-gap, var(--sb-space-6)) - var(--sb-space-2));
}

.sufi-app-shell--dual-sidebar .sufi-app-shell__main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: var(--sb-space-6);
}

/* RTL: content wrapper margin on the inline-start side (right in RTL) */
[dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__content-wrapper {
    margin-left: 0;
    margin-right: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-sidebar-content-gap, var(--sb-space-6)) - var(--sb-space-2));
    transition: margin-right 0.25s ease;
}

[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper,
[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper,
[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper {
    margin-left: 0;
    margin-right: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-expand-panel-width, 260px) + var(--sufi-sidebar-content-gap, var(--sb-space-6)) - var(--sb-space-2));
}

/* Fixed container: no scroll here so border-radius clips content and all 4 corners show */
[dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main {
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: calc(60px + var(--sb-space-2));
    left: var(--sb-space-6);
    /* gap between main and sidebar so right border-radius is visible */
    right: calc(var(--sufi-sidebar-width, 60px) + var(--sb-space-6));
    bottom: var(--sb-space-2);
    overflow: hidden;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    background-color: var(--sb-color-background);
}

/* Scroll lives inside the fixed box so scrollbar is inside the rounded container */
[dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.5rem;
}

/* Let content wrapper grow with content so footer flows to end; scroll is on parent above */
[dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content > .sufi-content-wrapper {
    flex: none;
    min-height: 100%;
    overflow: visible;
}

/* Content body must grow with page content so wrapper (and footer) extend with it */
[dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content > .sufi-content-wrapper > .sufi-content-body {
    min-height: min-content;
}

[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
[dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main {
    right: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-expand-panel-width, 260px) + var(--sb-space-6));
}

/* LTR dual-sidebar: same fixed container + scroll + footer behavior as RTL (sidebar on left) */
[dir="ltr"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main {
    padding-right: 0;
    padding-left: 0;
    position: fixed;
    top: calc(60px + var(--sb-space-2));
    /* gap between sidebar and main so left border-radius is visible */
    left: calc(var(--sufi-sidebar-width, 60px) + var(--sb-space-6));
    right: var(--sb-space-6);
    bottom: var(--sb-space-2);
    overflow: hidden;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    background-color: var(--sb-color-background);
}

[dir="ltr"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.5rem;
}

[dir="ltr"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content > .sufi-content-wrapper {
    flex: none;
    min-height: 100%;
    overflow: visible;
}

[dir="ltr"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main > .sufi-app-shell__content > .sufi-content-wrapper > .sufi-content-body {
    min-height: min-content;
}

[dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
[dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
[dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main {
    left: calc(var(--sufi-sidebar-width, 60px) + var(--sufi-expand-panel-width, 260px) + var(--sb-space-6));
}

/* ============================================
   Content Wrapper 
   ============================================ */

:root {
    --sufi-footer-height: 50px;
    --sufi-sidebar-width: 60px;
    --sufi-expand-panel-width: 260px;
}

.sufi-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sb-space-6, 1.5rem) var(--sb-space-6, 1.5rem) 0 var(--sb-space-6, 1.5rem);
    max-width: 100%;
    overflow-y: auto;
}

.sufi-content-body {
    flex: 1;
    min-height: 0;
}

/* Fixed Footer (legacy default) */
.sufi-footer {
    --sufi-footer-height: 50px;

    position: fixed;
    bottom: 0;
    left: var(--sufi-sidebar-width);
    right: 0;
    height: var(--sufi-footer-height);
    padding: var(--sb-space-3) var(--sb-space-6);
    text-align: center;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
    background-color: var(--sb-color-surface);
    border-top: 1px solid var(--sb-color-border);
    z-index: var(--sb-z-fixed, 50);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inline Footer - flows with content instead of fixed */
.sufi-footer--inline {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    margin-top: auto;
    border-radius: var(--sb-radius-md, 0.375rem);
    background-color: transparent;
    border-top: none;
}

.sufi-footer__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.sufi-footer__link:hover {
    opacity: 0.88;
}

/* Dual-sidebar: ensure inline footer stays at end of content inside the fixed container (no viewport fix) */
.sufi-app-shell--dual-sidebar .sufi-app-shell__main .sufi-footer.sufi-footer--inline {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
}

/* Adjust footer position when sidebar is expanded/pinned */
.sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned~.sufi-app-shell__main .sufi-footer:not(.sufi-footer--inline),
.sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover~.sufi-app-shell__main .sufi-footer:not(.sufi-footer--inline) {
    left: calc(var(--sufi-sidebar-width) + var(--sufi-expand-panel-width));
}

/* Footer variant for SideMenuLayout */
.sufi-footer--side-menu {
    left: 250px;
    /* Standard sidebar width */
}

/* Footer variant for TopMenuLayout */
.sufi-footer--top-menu {
    left: 0;
}

/* Footer variant for EmptyLayout — full width, no sidebar offset */
.sufi-footer--empty {
    left: 0;
}

/* ============================================
   SufiSidebar
   ============================================ */

.sufi-sidebar {
    display: flex;
    flex-direction: column;
    width: 250px;
    background-color: var(--sb-color-surface);
    border-inline-end: 1px solid var(--sb-color-border);
    transition: width var(--sb-duration-normal) var(--sb-easing-default);
}

.sufi-sidebar--collapsed {
    width: 60px;
}

.sufi-sidebar__header {
    padding: var(--sb-space-4);
    border-bottom: 1px solid var(--sb-color-border);
}

.sufi-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sb-space-2);
}

.sufi-sidebar__footer {
    padding: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

.sufi-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sb-space-2);
    border: none;
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
}

/* ============================================
   SufiTopBar 
   ============================================ */

.sufi-topbar {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: var(--sb-space-2) var(--sb-space-6, 1.5rem);
    background-color: var(--sb-color-surface);
}

.sufi-topbar__start,
.sufi-topbar__center,
.sufi-topbar__end {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
}

.sufi-topbar__start {
    flex: 1;
    min-width: 0;
}

.sufi-topbar__center {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}

.sufi-topbar__end {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-inline-start: auto;
}

.sufi-topbar__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: var(--sb-color-text-muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sufi-topbar__menu-btn:hover {
    color: var(--sb-color-text);
    background-color: var(--sb-color-surface-hover);
}

.sufi-topbar__title {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
}

/* Topbar Brand - Logo + App Name */
.sufi-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    text-decoration: none;
    color: var(--sb-color-text);
}

.sufi-topbar-brand:hover {
    text-decoration: none;
}

.sufi-topbar-brand__logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.sufi-topbar-brand__name {
    font-weight: var(--sb-font-weight-semibold);
    font-size: var(--sb-font-size-lg);
    color: var(--sb-color-text);
    white-space: nowrap;
}

/* When brand is a wrapper (logo link + app name), e.g. mobile header */
.sufi-topbar-brand--with-name {
    text-decoration: none;
}

.sufi-topbar-brand__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.sufi-topbar-brand__link:hover {
    text-decoration: none;
    color: inherit;
}

/* Topbar Toolbar - Action Items */
.sufi-topbar-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
}

.sufi-topbar-toolbar>* {
    display: flex;
    align-items: center;
}

/* Theme switch button (dark/light) — sized to match ghost icon buttons in the toolbar */
.theme-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.theme-switch-btn:hover {
    color: var(--sb-color-text);
    background-color: var(--sb-color-surface-hover);
}

.theme-switch-btn .theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* User avatar in the topbar (TopMenu/SideMenu) — shrink from the 40px icon-rail size to match the 32px toolbar cluster */
.sufi-topbar .sufi-sidebar-user-avatar__button {
    width: 32px;
    height: 32px;
}

.sufi-topbar .sufi-sidebar-user-avatar__initials {
    font-size: var(--sb-font-size-xs, 0.75rem);
}

/* TopMenuLayout: the burger button is mobile-only; the desktop horizontal nav is desktop-only.
   Scoped via the .sufi-topbar--top-menu modifier so other layouts (SideMenu/DualSidebar) are unaffected. */
.sufi-topbar--top-menu .sufi-topbar__menu-btn {
    display: none;
}

.sufi-topbar--top-menu .sufi-topbar__center {
    display: flex;
}

/* Keep toolbar widgets visible and consistently sized across layouts */
.sufi-topbar--top-menu .sufi-topbar__end {
    flex-shrink: 0;
}

.sufi-topbar--top-menu .sufi-topbar-toolbar .sb-button,
.sufi-topbar--top-menu .sufi-topbar-toolbar .theme-switch-btn {
    height: 32px;
    min-width: 32px;
}

@media (max-width: 768px) {
    /* Mobile: show burger, hide desktop horizontal nav */
    .sufi-topbar--top-menu .sufi-topbar__menu-btn {
        display: flex;
    }

    .sufi-topbar--top-menu .sufi-topbar__center {
        display: none;
    }
}

/* TopMenuLayout RTL: logo stays on the right; nav items flow from the right (next to logo);
   toolbar absorbs free space on the left. Without this, flex:1 on __start grows leftward and
   pushes the horizontal nav away from the logo toward the screen center. */
[dir="rtl"] .sufi-topbar--top-menu .sufi-topbar__start {
    flex: 0 0 auto;
}

[dir="rtl"] .sufi-topbar--top-menu .sufi-topbar__center {
    justify-content: flex-start;
}

[dir="rtl"] .sufi-topbar--top-menu .sufi-topbar__end {
    flex: 1;
    margin-inline-start: 0;
}

/* Topbar Page Info - Title + Breadcrumbs stacked vertically */
.sufi-topbar-page-info {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
}

/* Topbar Page Header - Title + Breadcrumbs side by side (legacy) */
.sufi-topbar-page-header {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--sb-space-4);
}

.sufi-topbar-page-title {
    font-size: var(--sb-font-size-md, 1rem);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    line-height: 1.2;
}

/* Topbar Page Actions */
.sufi-topbar-page-actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
}

.sufi-topbar-page-actions .sb-button {
    font-size: var(--sb-font-size-sm);
    height: 35px;
}

.sufi-topbar-page-actions .sb-icon-button {
    height: 35px;
    width: 35px;
}

/* Default/ghost chrome icons — match theme-switch / menu-btn (token-safe in light + dark) */
.sufi-topbar-page-actions .sb-icon-button--ghost:not(.sb-icon-button--primary):not(.sb-icon-button--secondary):not(.sb-icon-button--success):not(.sb-icon-button--warning):not(.sb-icon-button--danger):not(.sb-icon-button--info):not(.sb-icon-button--muted) {
    color: var(--sb-color-text-muted);
    background-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sufi-topbar-page-actions .sb-icon-button--ghost:not(.sb-icon-button--primary):not(.sb-icon-button--secondary):not(.sb-icon-button--success):not(.sb-icon-button--warning):not(.sb-icon-button--danger):not(.sb-icon-button--info):not(.sb-icon-button--muted):hover:not(:disabled) {
    color: var(--sb-color-text);
    background-color: var(--sb-color-surface-hover);
}

.sufi-topbar-page-actions .sb-menu-anchor {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Secondary Page Header Bar (for TopMenuLayout) */
.sufi-page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-space-3) var(--sb-space-6);
    background-color: var(--sb-color-background);
    border-bottom: 1px solid var(--sb-color-border);
}

.sufi-page-header-bar .sufi-topbar-page-actions {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* ============================================
   SufiIconRail - Icon-only navigation rail
   ============================================ */

.sufi-icon-rail {
    --sufi-icon-rail-width: 60px;
    --sufi-icon-rail-bg: transparent;             /* inherits the bounded __rail surface */
    --sufi-icon-rail-text: var(--sufi-color-rail-text);
    --sufi-icon-rail-hover: var(--sufi-color-rail-hover);
    --sufi-icon-rail-active: var(--sb-color-primary);

    border-radius: 0;
    display: flex;
    flex-direction: column;
    width: var(--sufi-icon-rail-width);
    height: 100%;
    background-color: var(--sufi-icon-rail-bg);
    color: var(--sufi-icon-rail-text);
    flex-shrink: 0;
    overflow: hidden;
}

.sufi-icon-rail--dark {
    /* No-op: the rail surface & text come from --sufi-color-rail* tokens above,
       defined per-theme in :root / .sb-theme-dark. Kept for markup compatibility. */
}

.sufi-icon-rail__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sufi-icon-rail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sb-space-4) var(--sb-space-2);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sufi-icon-rail__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-3) 0;
    overflow: hidden;
    min-height: 0;
}

.sufi-icon-rail__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* Icon Rail Toolbar - vertical stack of toolbar items at bottom */
.sufi-icon-rail__toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sb-space-1);
    width: 100%;
    overflow: hidden;
}

/* Make toolbar items icon-only in the rail */
.sufi-icon-rail__toolbar>* {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide text in toolbar buttons, show only icons - using correct class .sb-button */
.sufi-icon-rail__toolbar .sb-button,
.sufi-icon-rail__toolbar button[class*="sb-button"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    justify-content: center;
    border-radius: var(--sb-radius-md);
    overflow: hidden;
    background-color: transparent !important;
    border: none !important;
    color: var(--sufi-icon-rail-text) !important;
}

/* Do not hide .sb-button__content – it wraps icon + text; we hide only text inside it */
.sufi-icon-rail__toolbar .sb-button > *:not(.sb-button__content):not([class*="icon"]):not(svg) {
    display: none !important;
}

/* Inside content wrapper: hide text, keep icon visible */
.sufi-icon-rail__toolbar .sb-button .sb-button__content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.sufi-icon-rail__toolbar .sb-button .sb-button__content > *:not([class*="icon"]):not(svg) {
    display: none !important;
}

/* Keep icons visible (anywhere under button) */
.sufi-icon-rail__toolbar .sb-button [class*="icon"],
.sufi-icon-rail__toolbar .sb-button svg,
.sufi-icon-rail__toolbar .sb-button .sb-icon {
    display: flex !important;
}

/* Style toolbar buttons like rail items on hover */
.sufi-icon-rail__toolbar .sb-button:hover {
    background-color: var(--sufi-icon-rail-hover) !important;
    color: var(--sb-color-white) !important;
}

/* Hide ALL text in toolbar buttons - use font-size: 0 trick */
.sufi-icon-rail__toolbar .sb-button {
    font-size: 0 !important;
    text-indent: -9999px;
}

/* Restore icon sizing */
.sufi-icon-rail__toolbar .sb-button [class*="icon"],
.sufi-icon-rail__toolbar .sb-button svg,
.sufi-icon-rail__toolbar .sb-button .sb-icon {
    font-size: 1rem !important;
    text-indent: 0;
}

/*
   Restore normal button styling inside dropdown panels (.sb-menu / .sb-popover).
   The icon-rail squashing rules above (40x40, hidden text) target the rail's
   icon-only ANCHOR buttons, but because they use a descendant selector they also
   hit buttons rendered inside an open menu/popover panel (e.g. the bell widget's
   "View All" footer button). These overrides undo the squashing for panel buttons
   only — higher specificity (3 classes) wins the !important cascade over the
   2-class anchor rules, so full-width text buttons work again inside panels.
*/
.sufi-icon-rail__toolbar .sb-menu .sb-button,
.sufi-icon-rail__toolbar .sb-popover .sb-button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: var(--sb-space-2) var(--sb-space-3) !important;
    font-size: var(--sb-font-size-sm) !important;
    text-indent: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--sb-color-text) !important;
}

/* Full-width panel buttons (e.g. bell "View All") should span their panel */
.sufi-icon-rail__toolbar .sb-menu .sb-button.sb-button--full-width,
.sufi-icon-rail__toolbar .sb-popover .sb-button.sb-button--full-width {
    width: 100% !important;
}

/* Show text inside panel button content (undo the icon-only hiding) */
.sufi-icon-rail__toolbar .sb-menu .sb-button .sb-button__content,
.sufi-icon-rail__toolbar .sb-popover .sb-button .sb-button__content {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--sb-space-2) !important;
}

.sufi-icon-rail__toolbar .sb-menu .sb-button .sb-button__content > *:not([class*="icon"]):not(svg),
.sufi-icon-rail__toolbar .sb-popover .sb-button .sb-button__content > *:not([class*="icon"]):not(svg) {
    display: inline-flex !important;
}

/* Restore icon font sizing inside panel buttons */
.sufi-icon-rail__toolbar .sb-menu .sb-button [class*="icon"],
.sufi-icon-rail__toolbar .sb-popover .sb-button [class*="icon"],
.sufi-icon-rail__toolbar .sb-menu .sb-button svg,
.sufi-icon-rail__toolbar .sb-popover .sb-button svg,
.sufi-icon-rail__toolbar .sb-menu .sb-button .sb-icon,
.sufi-icon-rail__toolbar .sb-popover .sb-button .sb-icon {
    font-size: 1rem !important;
    text-indent: 0 !important;
}

/* Also handle the SbMenu wrapper */
.sufi-icon-rail__toolbar .sb-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Allow menu dropdowns to overflow the icon rail */
.sufi-icon-rail__toolbar .sb-menu-anchor {
    position: static;
}

.sufi-icon-rail__toolbar .sb-menu {
    position: fixed;
    bottom: 80px;
    left: 70px;
    top: auto;
    right: auto;
    margin: 0;
    z-index: var(--sb-z-dropdown, 1400);
}

[dir="rtl"] .sufi-icon-rail__toolbar .sb-menu {
    left: auto;
    right: 70px;
}

.sufi-icon-rail__toolbar .theme-switch-btn {
    width: 40px;
    height: 40px;
    color: var(--sufi-icon-rail-text);
}

.sufi-icon-rail__toolbar .theme-switch-btn:hover {
    background-color: var(--sufi-icon-rail-hover);
    color: var(--sb-color-white);
}

/* Language Switcher Menu – vertical list, smooth styling */
.language-menu.sb-menu {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 200px;
    padding: var(--sb-space-2);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg), 0 4px 24px rgba(0, 0, 0, 0.08);
    animation: language-menu-in 0.2s ease-out;
}

@keyframes language-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.language-menu .sb-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border-radius: var(--sb-radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ensure text + check row is flex so the check aligns vertically with the label */
.language-menu .sb-menu-item .sb-menu-item__text {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    flex: 1;
    min-width: 0;
}

.language-menu .sb-menu-item:hover:not(.sb-menu-item--disabled) {
    background-color: var(--sb-color-surface-hover);
}

.language-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 20px;
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-secondary);
    border-radius: var(--sb-radius-sm);
    letter-spacing: 0.5px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.language-name {
    flex: 1;
    font-size: var(--sb-font-size-sm);
    text-align: start;
}

.language-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-color-primary);
    margin-inline-start: auto;
    transition: transform 0.15s ease;
}

.language-item--active {
    background-color: var(--sb-color-primary-50);
}

.language-item--active:hover {
    background-color: var(--sb-color-primary-100);
}

.language-item--active .language-code {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-white);
}

/* Icon Rail Nav Item */
.sufi-icon-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sb-radius-md);
    color: var(--sufi-icon-rail-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.sufi-icon-rail-item .sb-icon--md {
    width: 18px;
    height: 18px;
}

.sufi-icon-rail-item:hover {
    background-color: var(--sufi-icon-rail-hover);
    color: var(--sb-color-white);
}

.sufi-icon-rail-item--active,
.sufi-icon-rail-item.active {
    background-color: var(--sufi-color-rail-active);
    color: var(--sufi-color-rail-active-text);
}

/* Icon Rail Tooltip */
.sufi-icon-rail-item__tooltip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sufi-color-tooltip);
    color: var(--sb-color-white);
    border-radius: var(--sb-radius-md);
    font-size: var(--sb-font-size-sm);
    white-space: nowrap;
    z-index: var(--sb-z-tooltip);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.sufi-icon-rail-item__tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--sufi-color-tooltip) transparent transparent;
}

[dir="rtl"] .sufi-icon-rail-item__tooltip {
    left: auto;
    right: calc(100% + 12px);
}

[dir="rtl"] .sufi-icon-rail-item__tooltip::before {
    left: auto;
    right: -6px;
    border-color: transparent transparent transparent var(--sufi-color-tooltip);
}

.sufi-icon-rail-item:hover .sufi-icon-rail-item__tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   SufiDualSidebar - Icon rail + expandable panel
   ============================================ */

.sufi-dual-sidebar {
    --sufi-expand-panel-width: 260px;
    --sufi-sidebar-width: 60px;
    position: fixed;
    left: var(--sb-space-2);
    top: var(--sb-space-2);
    bottom: var(--sb-space-2);
    display: flex;
    gap: 0;
    flex-shrink: 0;
    /* No fixed width: container spans rail + panel so hover stays active when moving to panel */
    z-index: var(--sb-z-sticky, 100);
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--sufi-color-panel-border);
}

/* RTL: sidebar sticks to the right edge; with dir=rtl flex start is right, so rail (first child) stays far right, panel (second) opens to its left */
[dir="rtl"] .sufi-dual-sidebar {
    left: auto;
    right: var(--sb-space-2);
}

.sufi-dual-sidebar__rail {
    /* Icon rail — flush against expand panel (no gap) */
    background-color: var(--sufi-color-rail);
    border: none;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
}

.sufi-dual-sidebar__panel {
    width: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--sufi-color-panel);
    border: none;
    transition: width 0.25s ease;
    z-index: 1;
}

.sufi-dual-sidebar__panel--visible {
    width: var(--sufi-expand-panel-width);
}

.sufi-dual-sidebar--pinned .sufi-dual-sidebar__panel {
    width: var(--sufi-expand-panel-width);
}

/* Hover expand behavior */
.sufi-dual-sidebar:hover .sufi-dual-sidebar__panel {
    width: var(--sufi-expand-panel-width);
}

.sufi-dual-sidebar:not(:hover) .sufi-dual-sidebar__panel:not(.sufi-dual-sidebar__panel--visible) {
    width: 0;
}

/* ============================================
   SufiExpandPanel - Secondary sidebar panel
   ============================================ */

.sufi-expand-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sufi-expand-panel__header {
    flex-shrink: 0;
    padding: var(--sb-space-3) var(--sb-space-3) 0 var(--sb-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
}

.sufi-expand-panel__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    flex: 1;
    min-width: 0;
}

.sufi-expand-panel__header .sb-button--primary {
    color: var(--sufi-color-panel-text-muted);
}

.sufi-expand-panel__header .sb-button--ghost.sb-button--primary:hover:not(:disabled) {
    background-color: var(--sufi-color-panel-hover);
    color: var(--sufi-color-panel-text);
}

.sufi-expand-panel__title {
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sufi-color-panel-text);
    font-size: var(--sb-font-size-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sufi-expand-panel__nav {
    flex: 1;
    overflow-y: auto;
    padding-top: var(--sb-space-3);
}

.sufi-expand-panel__footer {
    flex-shrink: 0;
    padding: var(--sb-space-4);
    border-top: 1px solid var(--sufi-color-panel-border);
}

/* Nav Group in Expand Panel */
.sufi-nav-group {
    margin-bottom: var(--sb-space-4);
}

.sufi-nav-group__label {
    display: block;
    padding: var(--sb-space-2) var(--sb-space-3);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sufi-color-panel-text-muted);
}

.sufi-dual-sidebar__panel .sb-nav-menu {
    padding: 0;
}

/* Align sibling rows: .sufi-menu-item--row = same-level row (Data Grid expandable + Table/Pagination/Stat Card leaf) use same padding */
.sufi-dual-sidebar__panel .sufi-menu-item--row > .sufi-menu-item__header,
.sufi-dual-sidebar__panel .sufi-menu-item--row > .sb-nav-item {
    padding-left: calc(var(--sb-space-3) + var(--menu-indent, 0));
    padding-right: var(--sb-space-3);
    padding-top: var(--sb-space-2);
    padding-bottom: var(--sb-space-2);
}

[dir="rtl"] .sufi-dual-sidebar__panel .sufi-menu-item--row > .sufi-menu-item__header,
[dir="rtl"] .sufi-dual-sidebar__panel .sufi-menu-item--row > .sb-nav-item {
    padding-left: var(--sb-space-3);
    padding-right: calc(var(--sb-space-3) + var(--menu-indent, 0));
}

.sufi-dual-sidebar__panel .sb-nav-item {
    color: var(--sufi-color-panel-text);
    padding: var(--sb-space-2) var(--sb-space-3);
    gap: var(--sb-space-2);
}

.sufi-dual-sidebar__panel .sb-nav-item .sb-nav-item__icon {
    color: var(--sufi-color-panel-text-muted);
}

.sufi-dual-sidebar__panel .sb-nav-item--active {
    background-color: var(--sufi-color-panel-active);
}

.sufi-dual-sidebar__panel .sb-nav-item--active .sb-nav-item__icon {
    color: var(--sufi-color-panel-text);
}

.sufi-dual-sidebar__panel .sb-nav-item:hover:not(.sb-nav-item--disabled) {
    background-color: var(--sufi-color-panel-hover);
    color: var(--sufi-color-panel-text);
}


/* ============================================
   Sidebar User Components
   ============================================ */
/* Sidebar User Avatar - Compact version for icon rail */
.sufi-sidebar-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sufi-sidebar-user-avatar__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sb-radius-full);
    background-color: var(--sb-color-secondary);
    color: var(--sb-color-on-primary);
    border: none;
    cursor: pointer;
    position: relative;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    transition: background-color 0.15s ease;
}

.sufi-sidebar-user-avatar__button:hover {
    background-color: var(--sb-color-primary-hover);
}

.sufi-sidebar-user-avatar--guest .sufi-sidebar-user-avatar__button {
    background-color: var(--sb-color-secondary);
}

.sufi-sidebar-user-avatar__initials {
    text-transform: uppercase;
}

.sufi-sidebar-user-avatar__status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: var(--sb-radius-full);
    background-color: var(--sb-color-success);
    border: 2px solid var(--sufi-icon-rail-bg);
}

/* User avatar menu (icon rail) - escape icon rail overflow, position above avatar */
.sufi-icon-rail .sufi-sidebar-user-avatar .sb-menu-anchor {
    position: static;
}

.sufi-icon-rail .sufi-sidebar-user-avatar__menu.sb-menu {
    position: fixed;
    bottom: 80px;
    left: 70px;
    top: auto;
    right: auto;
    margin: 0;
    z-index: var(--sb-z-dropdown, 1400);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg), 0 4px 24px rgba(0, 0, 0, 0.08);
    animation: language-menu-in 0.2s ease-out;
}

[dir="rtl"] .sufi-icon-rail .sufi-sidebar-user-avatar__menu.sb-menu {
    left: auto;
    right: 70px;
}

.sufi-sidebar-user-avatar__menu .sb-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border-radius: var(--sb-radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sufi-sidebar-user-avatar__menu .sb-menu-item:hover:not(.sb-menu-item--disabled) {
    background-color: var(--sb-color-surface-hover);
}

/* Profile header inside user menu */
.sufi-sidebar-user-menu__header {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: var(--sb-space-2) var(--sb-space-3);
    min-width: 0;
}

.sufi-sidebar-user-menu__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sb-radius-full);
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.sufi-sidebar-user-menu__info {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
    flex: 1;
}

.sufi-sidebar-user-menu__name {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sufi-sidebar-user-menu__email {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sufi-sidebar-user-avatar__menu .sb-divider {
    margin: var(--sb-space-1) 0;
}

/* Sidebar User Profile - Full version for expand panel */
.sufi-sidebar-user-profile {
    display: flex;
    align-items: center;
    padding: var(--sb-space-2);
    border-radius: var(--sb-radius-md);
}

.sufi-sidebar-user-profile__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sb-radius-full);
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.sufi-sidebar-user-profile__name {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sufi-sidebar-user-profile__email {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Page Header 
   ============================================ */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sb-space-4);
    margin-bottom: var(--sb-space-6, 1.5rem);
    padding-bottom: var(--sb-space-4);
    border-bottom: 1px solid var(--sb-color-border);
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    min-width: 0;
    flex: 1;
}

.page-header-title {
    margin: 0;
    font-size: var(--sb-font-size-2xl, 1.5rem);
    font-weight: var(--sb-font-weight-bold, 700);
    color: var(--sb-color-text);
    line-height: 1.3;
}

.page-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2);
    flex-shrink: 0;
}

.page-header-toolbar .toolbar-item {
    display: flex;
    align-items: center;
}

/* Breadcrumb Styling */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--sb-font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    padding: 0 var(--sb-space-2);
    color: var(--sb-color-text-muted);
    opacity: 0.5;
}

.breadcrumb-item a {
    color: var(--sb-color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--sb-color-primary);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--sb-color-text);
    font-weight: var(--sb-font-weight-medium, 500);
}

/* ============================================
   Theme Switch Button
   ============================================ */

.theme-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sb-space-2);
    background: transparent;
    border: none;
    border-radius: var(--sb-radius-md);
    cursor: pointer;
    color: var(--sb-color-text-muted);
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.theme-switch-btn:hover {
    opacity: 1;
    color: var(--sb-color-text);
    background-color: var(--sb-color-surface-hover);
}

.theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 768px) {
    .sufi-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: var(--sb-z-fixed);
        transform: translateX(-100%);
        transition: transform var(--sb-duration-normal) var(--sb-easing-default);
    }

    .sufi-sidebar--open {
        transform: translateX(0);
    }

    /* Sliding sidebar: stop 60px above bottom so it isn’t covered by the fixed bottom menu */
    .sufi-dual-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 60px;
        z-index: var(--sb-z-fixed);
        transform: translateX(-100%);
        transition: transform var(--sb-duration-normal) var(--sb-easing-default);
    }

    .sufi-dual-sidebar--open {
        transform: translateX(0);
    }

    /* On mobile RTL: sidebar drawer slides from right */
    [dir="rtl"] .sufi-dual-sidebar {
        left: auto;
        right: 0;
        bottom: 60px;
        transform: translateX(100%);
    }

    [dir="rtl"] .sufi-dual-sidebar--open {
        transform: translateX(0);
    }

    /* On mobile, sidebar is a drawer – content (and header) never shift; drawer slides over them */
    .sufi-app-shell--dual-sidebar .sufi-app-shell__content-wrapper {
        margin-left: 0;
    }

    [dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__content-wrapper {
        margin-right: 0;
    }

    /* Override desktop hover/expanded/pinned margin so header stays fixed when menu is open or interacted with */
    .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper,
    .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper,
    .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper,
    .sufi-dual-sidebar--open ~ .sufi-app-shell__content-wrapper {
        margin-left: 0;
    }

    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper,
    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper,
    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper,
    [dir="rtl"] .sufi-dual-sidebar--open ~ .sufi-app-shell__content-wrapper {
        margin-right: 0;
    }

    /* On mobile, main content fills viewport (no sidebar offset); top clears single-row header, bottom clears bottom menu */
    [dir="ltr"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main,
    [dir="rtl"] .sufi-app-shell--dual-sidebar .sufi-app-shell__main {
        padding: 0;
        left: var(--sb-space-4);
        right: var(--sb-space-4);
        top: 56px;
        bottom: calc(60px + var(--sb-space-2));
    }

    /* Keep main full width on mobile when sidebar is expanded/pinned (drawer open) – don’t apply desktop left/right */
    [dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
    [dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
    [dir="ltr"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled):hover ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--expanded ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main,
    [dir="rtl"] .sufi-dual-sidebar:not(.sufi-dual-sidebar--disabled).sufi-dual-sidebar--pinned ~ .sufi-app-shell__content-wrapper .sufi-app-shell__main {
        left: var(--sb-space-4);
        right: var(--sb-space-4);
    }

    /* Backdrop when mobile sidebar is open (Metronic-style) */
    .sufi-dual-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--sb-z-fixed, 100) - 1);
        background-color: rgba(0, 0, 0, 0.4);
        animation: sufi-backdrop-in 0.2s ease-out;
    }

    @keyframes sufi-backdrop-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Mobile topbar: column layout so start (hamburger + logo + page info) is not squeezed by end (page actions) */
    .sufi-app-shell--dual-sidebar .sufi-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sb-space-2);
    }

    .sufi-app-shell--dual-sidebar .sufi-topbar__start {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        flex-wrap: nowrap;
        gap: var(--sb-space-2);
    }

    .sufi-app-shell--dual-sidebar .sufi-topbar__end {
        flex: 0 0 auto;
        width: 100%;
        justify-content: flex-end;
    }

    .sufi-app-shell--dual-sidebar .sufi-topbar-page-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .sufi-app-shell--dual-sidebar .sufi-topbar-page-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .sufi-app-shell--dual-sidebar .sufi-topbar-page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile header: two rows – row1 = logo + Page Actions button, row2 = title + breadcrumbs */
    .sufi-mobile-header {
        display: flex;
        flex-direction: column;
        gap: var(--sb-space-2);
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .sufi-mobile-header__row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sb-space-2);
        flex: 0 0 auto;
        min-width: 0;
    }

    .sufi-mobile-header__logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .sufi-mobile-header__logo .sufi-topbar-brand {
        display: flex;
        align-items: center;
        padding: var(--sb-space-1) 0;
    }

    .sufi-mobile-header__actions-btn {
        flex-shrink: 0;
    }

    .sufi-mobile-header__row2 {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .sufi-mobile-header__row2 .sufi-topbar-page-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .sufi-mobile-header__row2 .sufi-topbar-page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile: page title + breadcrumbs in scrollable content (first in content wrapper) */
    .sufi-content-wrapper__mobile-page-header {
        padding: 0 0 var(--sb-space-2);
        min-width: 0;
    }

    .sufi-content-wrapper__mobile-page-title {
        font-size: var(--sb-font-size-xl);
        font-weight: var(--sb-font-weight-semibold);
        color: var(--sb-color-text);
        margin: 0 0 var(--sb-space-1);
        line-height: 1.25;
    }

    /* Mobile top drawer: size to content (no fixed height), avoid empty space */
    .sufi-mobile-actions-drawer.sb-drawer--top {
        height: max-content;
        max-height: 90vh;
        overflow: visible;
    }

    .sufi-mobile-actions-drawer .sb-drawer__container {
        height: max-content;
        overflow: visible;
    }

    /* Mobile top drawer: page actions – row layout, wrap when overflow, content at top */
    .sufi-mobile-actions-drawer .sb-drawer__body {
        padding: var(--sb-space-4);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sb-space-2);
        align-items: center;
        align-content: flex-start;
        min-height: 0;
        overflow: visible;
    }

    /* Let SbSimpleSelect dropdowns escape the compact drawer body (search + options list). */
    .sufi-mobile-actions-drawer .sb-select-anchor {
        width: min(100%, 20rem);
        min-width: 10rem;
        position: relative;
        z-index: 1;
    }

    .sufi-mobile-actions-drawer .sufi-calendar-scheduler__calendar-select {
        width: min(100%, 20rem);
        min-width: 10rem;
    }

    /* Direct children (buttons or SbStack) stay side-by-side and wrap; no full-width stretch */
    .sufi-mobile-actions-drawer .sb-drawer__body > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* If toolbar uses SbStack, let the stack’s row of buttons sit inline and wrap */
    .sufi-mobile-actions-drawer .sb-drawer__body > .sb-stack {
        flex: 0 0 auto;
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--sb-space-2);
    }

    /* Mobile bottom menu – fixed bar with center "open menu" button and shortcut slots */
    .sufi-mobile-bottom-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--sb-z-fixed, 100);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sb-space-2);
        padding: var(--sb-space-3) var(--sb-space-4);
        padding-bottom: max(var(--sb-space-3), env(safe-area-inset-bottom));
        background-color: var(--sb-color-surface);
        border-top: 1px solid var(--sb-color-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
        height: 60px;
        overflow: visible;
    }

    .sufi-mobile-bottom-menu__side {
        display: flex;
        align-items: center;
        gap: var(--sb-space-2);
        flex: 1;
        min-width: 0;
    }

    .sufi-mobile-bottom-menu__side--left {
        justify-content: flex-start;
    }

    .sufi-mobile-bottom-menu__side--right {
        justify-content: flex-end;
    }

    .sufi-mobile-bottom-menu__center {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Center button: half above the bar (floating), bar stays 60px */
    .sufi-mobile-bottom-menu__menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: var(--sb-radius-full);
        border: none;
        background-color: var(--sb-color-primary);
        color: var(--sb-color-on-primary);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        transform: translateY(-20px);
    }

    .sufi-mobile-bottom-menu__menu-btn:hover {
        transform: translateY(-30px) scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .sufi-mobile-bottom-menu__menu-btn:active {
        transform: translateY(-30px) scale(0.98);
    }

    .sufi-mobile-bottom-menu__shortcut {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--sb-radius-full);
        color: var(--sb-color-text-muted);
        text-decoration: none;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .sufi-mobile-bottom-menu__shortcut:hover {
        color: var(--sb-color-primary);
        background-color: var(--sb-color-surface-hover);
    }

    /* Reserve space above the fixed bottom menu so content is not hidden */
    .sufi-content-wrapper {
        padding: var(--sb-space-4, 1rem) var(--sb-space-4, 1rem);
    }

    .sufi-content-wrapper--mobile-bottom-menu {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .sufi-app-shell__sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: var(--sb-z-fixed);
        transform: translateX(-100%);
        transition: transform var(--sb-duration-normal) var(--sb-easing-default);
    }

    .sufi-app-shell__sidebar--open {
        transform: translateX(0);
    }
}

/* ============================================
   Sidebar Dropdown Menu (MenuItemRenderer)
   ============================================ */

.sufi-menu-item {
    --menu-indent: calc(var(--menu-level, 0) * var(--sb-space-3));
    position: relative;
}

/* Leaf item wrapper: same indent as expandable header so siblings align (e.g. Table/Pagination next to Data Grid) */
.sufi-menu-item--leaf .sb-nav-item {
    padding-left: calc(var(--sb-space-3) + var(--menu-indent));
    padding-right: var(--sb-space-3);
    padding-top: var(--sb-space-2);
    padding-bottom: var(--sb-space-2);
}

[dir="rtl"] .sufi-menu-item--leaf .sb-nav-item {
    padding-left: var(--sb-space-3);
    padding-right: calc(var(--sb-space-3) + var(--menu-indent));
}

.sufi-menu-item__header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    padding-left: calc(var(--sb-space-3) + var(--menu-indent));
    background: transparent;
    border: none;
    border-radius: var(--sb-radius-md);
    color: var(--sufi-color-panel-text);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    gap: var(--sb-space-2);
}

[dir="rtl"] .sufi-menu-item__header {
    padding-left: var(--sb-space-3);
    padding-right: calc(var(--sb-space-3) + var(--menu-indent));
    text-align: right;
}

.sufi-menu-item__header:hover {
    background-color: var(--sufi-color-panel-hover);
    color: var(--sufi-color-panel-text);
}

.sufi-menu-item--expanded > .sufi-menu-item__header {
    color: var(--sufi-color-panel-text);
}

.sufi-menu-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--sufi-color-panel-text-muted);
}

/* Placeholder bullet when menu has no icon - reserves space so siblings align */
.sufi-menu-item__icon--placeholder {
    font-size: 0.35em;
    opacity: 0.75;
}

/* Custom SVG/content (CustomContent) - size to icon area and inherit color */
.sufi-menu-item__icon-custom {
    width: 100%;
    height: 100%;
}
.sufi-menu-item__icon-custom svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Smaller bullet for leaf items (Overview, Basic, Table, etc.) - same reserved space, smaller circle */
.sufi-dual-sidebar__panel .sb-nav-item__icon .sufi-menu-item__leaf-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.4em;
    opacity: 0.75;
}

.sufi-dual-sidebar__panel .sb-nav-item__icon .sufi-menu-item__leaf-icon-placeholder .sb-icon--sm,
.sufi-menu-item__icon.sufi-menu-item__icon--placeholder .sb-icon--sm {
    width: 10px;
    height: 10px;
}

.sufi-menu-item__header:hover .sufi-menu-item__icon,
.sufi-menu-item--expanded > .sufi-menu-item__header .sufi-menu-item__icon {
    color: var(--sufi-color-panel-text-muted);
}

.sufi-menu-item__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sufi-menu-item__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--sufi-color-panel-text-muted);
    transition: transform 0.25s ease;
}

.sufi-menu-item--expanded > .sufi-menu-item__header .sufi-menu-item__chevron {
    transform: rotate(180deg);
    color: var(--sufi-color-panel-text);
}

.sufi-menu-item__submenu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.25s ease;
}

.sufi-menu-item--expanded > .sufi-menu-item__submenu {
    grid-template-rows: 1fr;
    /* Override stale inline height from older sufi-theme.js builds */
    height: auto !important;
    max-height: none !important;
}

.sufi-menu-item__submenu-content {
    overflow: hidden;
    min-height: 0;
    /* Padding only when expanded — otherwise collapsed 0fr rows still leak ~8px */
    padding: 0;
    visibility: hidden;
}

.sufi-menu-item--expanded > .sufi-menu-item__submenu > .sufi-menu-item__submenu-content {
    padding: var(--sb-space-1) 0;
    visibility: visible;
}

/* Nested menu items styling */
.sufi-menu-item .sufi-menu-item .sufi-menu-item__header {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-normal);
    padding-left: calc(var(--sb-space-2) + var(--menu-indent) + var(--sb-space-2));
}

/* Active indicator line for nested items */
.sufi-menu-item .sufi-menu-item__header::before {
    content: '';
    position: absolute;
    left: calc(var(--sb-space-3) + var(--menu-indent) - var(--sb-space-2));
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: var(--sb-radius-full);
    background-color: transparent;
    transition: background-color 0.15s ease;
}

/* Nested SbNavItem styling within menu */
.sufi-menu-item__submenu-content .sb-nav-item {
    padding-left: calc(var(--sb-space-2) + var(--menu-indent) + var(--sb-space-2));
}

.sufi-menu-item__submenu-content > .sb-nav-item {
    --menu-level: 1;
    padding-left: calc(var(--sb-space-3) + var(--sb-space-3));
}

[dir="rtl"] .sufi-menu-item__submenu-content .sb-nav-item {
    padding-left: var(--sb-space-3);
    padding-right: calc(var(--sb-space-2) + var(--menu-indent) + var(--sb-space-2));
}

[dir="rtl"] .sufi-menu-item__submenu-content > .sb-nav-item {
    padding-left: var(--sb-space-3);
    padding-right: calc(var(--sb-space-3) + var(--sb-space-3));
}

/* ============================================
   SufiErrorPage – formal HTTP error pages (404, 403, 500)
   ============================================
   Centered card with icon, title, message, actions.
   Uses same design language as error modal.
*/
.sufi-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: var(--sb-space-8, 2rem);
}

.sufi-error-page__card {
    max-width: 28rem;
    width: 100%;
    padding: var(--sb-space-8, 2rem) var(--sb-space-10, 2.5rem);
    background: var(--sb-color-surface);
    border-radius: var(--sb-radius-xl, 1rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sufi-error-page__icon {
    margin-bottom: var(--sb-space-4, 1rem);
    display: flex;
    justify-content: center;
}

.sufi-error-page__title {
    font-size: var(--sb-font-size-xl, 1.25rem);
    font-weight: 600;
    color: var(--sb-color-text);
    margin: 0 0 var(--sb-space-2, 0.5rem) 0;
}

.sufi-error-page__message {
    font-size: var(--sb-font-size-sm, 0.875rem);
    color: var(--sb-color-text-muted);
    margin: 0 0 var(--sb-space-6, 1.5rem) 0;
    line-height: 1.5;
}

.sufi-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sb-space-3, 0.75rem);
}