/*
 * Peritum dashboard brand layer (P6).
 *
 * Source of truth: the current public frontend. This file intentionally loads after
 * the vendored theme and global.css; the large vendored files remain unchanged.
 */

@font-face {
    font-family: "Nexa";
    src: url("../fonts/peritum/Nexa-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Nexa";
    src: url("../fonts/peritum/Nexa-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: "Nexa";
    src: url("../fonts/peritum/Nexa-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/peritum/Cairo-Arabic.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
        U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/peritum/Cairo-Latin-Ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0100-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2020,
        U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/peritum/Cairo-Latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --peritum-primary: #033aac;
    --peritum-primary-dark: #051587;
    --peritum-primary-hover: #022b80;
    --peritum-secondary: #134ab4;
    --peritum-accent: #f08920;
    --peritum-accent-hover: #fa8130;
    --peritum-bg: #f5f8ff;
    --peritum-surface: #ffffff;
    --peritum-surface-soft: #f8fafc;
    --peritum-border: #e5e7eb;
    --peritum-border-soft: #eef0f3;
    --peritum-text: #121927;
    --peritum-text-strong: #11224d;
    --peritum-muted: #4b5563;
    --peritum-danger: #c02626;
    --peritum-success: #198754;
    --peritum-warning: #f08920;
    --peritum-radius-sm: 8px;
    --peritum-radius-md: 12px;
    --peritum-radius-lg: 20px;
    --peritum-radius-xl: 24px;
    --peritum-radius-pill: 999px;
    --peritum-shadow: 0 10px 30px rgba(3, 58, 172, 0.08);
    --peritum-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --peritum-sidebar-width: 18.5rem;
    --peritum-sidebar-rail: 5.25rem;
    --peritum-header-height: 4.75rem;

    /* Compatibility for project components that still consume the P1 aliases. */
    --cms-color-dark: var(--peritum-text);
    --cms-color-primary: var(--peritum-primary);
    --cms-color-primary-hover: var(--peritum-primary-hover);
    --cms-color-primary-readable: var(--peritum-primary);
    --cms-color-light: var(--peritum-surface-soft);
    --cms-primary: var(--peritum-primary);
    --primary: var(--peritum-primary);
}

html,
body.dashboard-page {
    background: var(--peritum-bg);
    color: var(--peritum-text);
    max-width: 100%;
    overflow-x: hidden;
}

body.dashboard-page,
body.dashboard-page button,
body.dashboard-page input,
body.dashboard-page select,
body.dashboard-page textarea,
body.dashboard-page .select2-container,
body.dashboard-page .swal2-popup {
    font-family: "Nexa", "Cairo", "Segoe UI", sans-serif !important;
}

/* global.css historically put Cairo directly on every element. The final brand
   layer restores the public site's language-aware type system while leaving the
   Feather icon font untouched. */
body.dashboard-page *:not(.fe) {
    font-family: "Nexa", "Cairo", "Segoe UI", sans-serif !important;
}

html[dir="rtl"] body.dashboard-page,
html[dir="rtl"] body.dashboard-page button,
html[dir="rtl"] body.dashboard-page input,
html[dir="rtl"] body.dashboard-page select,
html[dir="rtl"] body.dashboard-page textarea,
html[dir="rtl"] body.dashboard-page .select2-container,
html[dir="rtl"] body.dashboard-page .swal2-popup {
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

html[dir="rtl"] body.dashboard-page *:not(.fe),
body.dashboard-page [lang="ar"] *:not(.fe) {
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

body.dashboard-page [lang="en"] *:not(.fe) {
    font-family: "Nexa", "Segoe UI", Arial, sans-serif !important;
}

body.dashboard-page h1,
body.dashboard-page h2,
body.dashboard-page h3,
body.dashboard-page h4,
body.dashboard-page h5,
body.dashboard-page h6,
body.dashboard-page strong {
    color: var(--peritum-text-strong) !important;
}

body.dashboard-page a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--peritum-primary);
}

/* -------------------------------------------------------------- shell */

.vertical .cms-sidebar,
.vertical.hover .cms-sidebar,
.narrow.open .cms-sidebar {
    display: flex;
    flex-flow: column nowrap !important;
    align-items: stretch;
    width: var(--peritum-sidebar-width);
    min-width: var(--peritum-sidebar-width);
    overflow: hidden;
    padding: 0;
    background: var(--peritum-primary) !important;
    border: 0 !important;
    box-shadow: 8px 0 24px rgba(3, 58, 172, 0.08);
}

.cms-sidebar-brand {
    display: flex;
    flex: 0 0 7.25rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--peritum-primary);
    border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}

.cms-sidebar-brand:focus-visible {
    outline: 3px solid var(--peritum-accent);
    outline-offset: -4px;
}

.cms-sidebar-brand-image {
    display: block;
    width: auto;
    max-width: 10.5rem;
    height: auto;
    max-height: 4.75rem;
    object-fit: contain;
}

.cms-sidebar-brand-mark {
    display: none;
    width: 2.7rem;
    height: 3.25rem;
    background-image: url("../../uploads/branding/footer-logo.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 10.5rem auto;
}

.cms-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 0.75rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
}

.cms-sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.cms-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cms-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.34);
    border: 2px solid transparent;
    border-radius: var(--peritum-radius-pill);
    background-clip: padding-box;
}

.cms-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.52);
    background-clip: padding-box;
}

.cms-sidebar .cms-nav-group {
    margin: 1.15rem 0 0.4rem;
}

.cms-sidebar .cms-nav-group:first-child {
    margin-top: 0;
}

.cms-sidebar .nav-heading {
    display: block;
    padding-inline: 0.8rem !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
}

html[dir="rtl"] .cms-sidebar .nav-heading {
    letter-spacing: 0;
}

.cms-sidebar .navbar-nav .nav-link {
    min-height: 2.9rem;
    margin: 0.15rem 0;
    padding: 0.68rem 0.85rem;
    gap: 0.75rem;
    border-radius: var(--peritum-radius-md);
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cms-sidebar .navbar-nav .nav-link i {
    flex: 0 0 1.35rem;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 1.06rem;
    text-align: center;
}

.cms-sidebar .navbar-nav .nav-link:hover,
.cms-sidebar .navbar-nav .nav-link:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transform: none;
}

.cms-sidebar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--peritum-accent);
    outline-offset: 1px;
}

.cms-sidebar .navbar-nav .nav-item.active > .nav-link,
.cms-sidebar .navbar-nav .nav-item.active > .nav-link:hover {
    color: var(--peritum-primary-dark) !important;
    background: #ffffff !important;
    border: 0;
    box-shadow: 0 6px 18px rgba(5, 21, 135, 0.18);
    font-weight: 700;
}

.cms-sidebar .navbar-nav .nav-item.active > .nav-link i {
    color: var(--peritum-primary) !important;
}

.cms-sidebar .navbar-nav .nav-item.active::after {
    display: none;
}

.vertical .cms-topnav,
.vertical.hover .cms-topnav,
.narrow.open .cms-topnav {
    min-height: var(--peritum-header-height);
    margin-left: var(--peritum-sidebar-width);
    padding: 0.75rem 2rem;
    background: var(--peritum-surface) !important;
    color: var(--peritum-text);
    border-block-end: 1px solid var(--peritum-border-soft);
    box-shadow: var(--peritum-shadow-soft);
}

.vertical .main-content,
.vertical.hover .main-content,
.narrow.open .main-content {
    margin-left: var(--peritum-sidebar-width);
    padding: 2rem;
    overflow: visible;
}

.cms-topnav .btn-link,
.cms-topnav .nav-link,
.cms-topnav .navbar-toggler {
    color: var(--peritum-text-strong) !important;
}

.cms-topnav #sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--peritum-radius-md);
    background: var(--peritum-surface-soft);
    border: 1px solid var(--peritum-border);
    font-size: 1.25rem;
}

.cms-topnav #sidebar-toggle:hover,
.cms-topnav #sidebar-toggle:focus-visible {
    background: #eef3ff;
    color: var(--peritum-primary) !important;
}

.cms-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: auto;
}

.cms-user-trigger {
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem !important;
    border-radius: var(--peritum-radius-md);
}

.cms-user-trigger:hover,
.cms-user-trigger:focus-visible {
    background: var(--peritum-surface-soft);
}

.cms-topnav .dropdown-menu {
    min-width: 15.5rem;
    margin-top: 0.65rem;
    border: 1px solid var(--peritum-border);
    border-radius: var(--peritum-radius-md);
    box-shadow: var(--peritum-shadow);
}

.cms-topnav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    color: var(--peritum-text);
}

.cms-topnav .dropdown-item:hover,
.cms-topnav .dropdown-item:focus {
    color: var(--peritum-primary);
    background: #f5f8ff;
}

/* ---------------------------------------------------- locale switcher */

.cms-locale-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    margin: 0;
    border: 1px solid rgba(5, 21, 135, 0.15);
    border-radius: var(--peritum-radius-pill);
    background: #ffffff;
}

.cms-locale-switcher form {
    margin: 0;
}

.cms-locale-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border: 0;
    border-radius: var(--peritum-radius-pill);
    background: transparent;
    color: var(--peritum-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cms-locale-option:hover,
.cms-locale-option:focus-visible {
    background: var(--peritum-surface-soft);
    color: var(--peritum-primary-dark);
}

.cms-locale-option[aria-current="true"] {
    background: var(--peritum-primary-dark);
    color: #ffffff;
}

.cms-locale-option:focus-visible {
    outline: 2px solid var(--peritum-accent);
    outline-offset: 1px;
}

/* ----------------------------------------------------- page content */

.cms-page-title {
    color: var(--peritum-text-strong);
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
}

.cms-page-subtitle {
    max-width: 54rem;
    color: var(--peritum-muted);
    line-height: 1.65;
}

.dashboard-page .card {
    border: 1px solid var(--peritum-border-soft) !important;
    border-radius: var(--peritum-radius-lg);
    box-shadow: var(--peritum-shadow);
    background: var(--peritum-surface);
}

.dashboard-page .card-header,
.cms-card-header {
    padding: 1rem 1.25rem;
    color: var(--peritum-text-strong);
    background: var(--peritum-surface) !important;
    border-block-end: 1px solid var(--peritum-border-soft);
    border-radius: var(--peritum-radius-lg) var(--peritum-radius-lg) 0 0 !important;
}

.dashboard-page .card-header strong,
.cms-card-header strong {
    color: var(--peritum-text-strong) !important;
}

.dashboard-page .card-body {
    padding: 1.35rem;
}

.cms-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 9.5rem;
}

.cms-stat-card::after {
    content: "";
    position: absolute;
    inset-block-start: -2.5rem;
    inset-inline-end: -2.5rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(3, 58, 172, 0.05);
}

.cms-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    background: #e5edfd;
    color: var(--peritum-primary);
    font-size: 1.15rem;
}

.cms-stat-value {
    margin-top: 1rem;
    color: var(--peritum-text-strong);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.cms-stat-label {
    margin-top: 0.5rem;
    color: var(--peritum-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

/* ---------------------------------------------------------- buttons */

.dashboard-page .btn {
    border-radius: var(--peritum-radius-pill);
    font-weight: 700;
    line-height: 1.35;
}

.dashboard-page .btn-primary,
.dashboard-page .badge-primary,
.dashboard-page .page-item.active .page-link,
.btn-login {
    color: #ffffff !important;
    background: var(--peritum-primary) !important;
    border-color: var(--peritum-primary) !important;
}

.dashboard-page .btn-primary:hover,
.dashboard-page .btn-primary:focus,
.dashboard-page .page-item.active .page-link:hover,
.btn-login:hover,
.btn-login:focus {
    color: #ffffff !important;
    background: var(--peritum-primary-hover) !important;
    border-color: var(--peritum-primary-hover) !important;
}

.dashboard-page .btn-outline-primary {
    color: var(--peritum-primary) !important;
    border-color: var(--peritum-primary) !important;
}

.dashboard-page .btn-outline-primary:hover,
.dashboard-page .btn-outline-primary:focus {
    color: #ffffff !important;
    background: var(--peritum-primary) !important;
}

.dashboard-page .btn-warning,
.dashboard-page .badge-warning {
    color: var(--peritum-text) !important;
    background: var(--peritum-accent) !important;
    border-color: var(--peritum-accent) !important;
}

.dashboard-page .btn-danger {
    color: #ffffff !important;
    background: var(--peritum-danger) !important;
    border-color: var(--peritum-danger) !important;
}

.dashboard-page .btn-success {
    color: #ffffff !important;
    background: var(--peritum-success) !important;
    border-color: var(--peritum-success) !important;
}

.dashboard-page .btn:focus-visible,
.dashboard-page a:focus-visible,
.dashboard-page input:focus-visible,
.dashboard-page select:focus-visible,
.dashboard-page textarea:focus-visible {
    outline: 3px solid rgba(240, 137, 32, 0.48);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ forms */

.dashboard-page .form-control,
.dashboard-page .custom-select,
.dashboard-page .custom-file-label,
.dashboard-page .select2-container--bootstrap4 .select2-selection {
    min-height: 2.85rem;
    color: var(--peritum-text);
    background: var(--peritum-surface);
    border: 1px solid #cbd5e1;
    border-radius: var(--peritum-radius-md);
}

.dashboard-page textarea.form-control {
    min-height: auto;
    border-radius: var(--peritum-radius-md);
}

.dashboard-page .form-control:focus,
.dashboard-page .custom-select:focus,
.dashboard-page .custom-file-input:focus ~ .custom-file-label,
.dashboard-page .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--peritum-primary) !important;
    box-shadow: 0 0 0 3px rgba(3, 58, 172, 0.12) !important;
}

.dashboard-page .form-control::placeholder {
    color: #8a94a6;
}

.dashboard-page label {
    color: var(--peritum-text-strong);
    font-weight: 700;
}

.dashboard-page .tox-tinymce {
    border: 1px solid #cbd5e1;
    border-radius: var(--peritum-radius-md);
    overflow: hidden;
}

.dashboard-page .nav-tabs {
    border-block-end: 1px solid var(--peritum-border);
}

.dashboard-page .nav-tabs .nav-link {
    margin: 0 0.3rem -1px !important;
    color: var(--peritum-muted);
    border-radius: var(--peritum-radius-sm) var(--peritum-radius-sm) 0 0;
}

.dashboard-page .nav-tabs .nav-link.active {
    color: var(--peritum-primary);
    border-color: var(--peritum-border) var(--peritum-border) #ffffff;
    font-weight: 700;
}

/* ------------------------------------------------------------ tables */

.dashboard-page .table-responsive {
    border-radius: var(--peritum-radius-md);
    scrollbar-width: thin;
    scrollbar-color: #a4b3d6 transparent;
}

.dashboard-page .table {
    margin-bottom: 0;
    color: var(--peritum-text);
}

.dashboard-page .table th,
.dashboard-page .table td {
    padding: 0.9rem 0.85rem;
    vertical-align: middle;
    border-color: var(--peritum-border-soft);
}

.dashboard-page .table thead th,
.cms-table-head,
.cms-table-head th {
    color: var(--peritum-text-strong) !important;
    background: #f5f8ff !important;
    border-block-end: 1px solid #dbe5f7 !important;
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

html[dir="rtl"] .dashboard-page .table thead th {
    letter-spacing: 0;
}

.dashboard-page .table tbody tr:hover {
    background: #fcfdff;
}

.dashboard-page .pagination {
    gap: 0.25rem;
}

.dashboard-page .page-link {
    min-width: 2.35rem;
    border-radius: var(--peritum-radius-sm) !important;
    color: var(--peritum-primary);
}

/* ------------------------------------------------------- alerts/auth */

.dashboard-page .alert {
    border-radius: var(--peritum-radius-md);
    border-width: 1px;
}

.cms-unread-alert {
    color: var(--peritum-primary-dark);
    background: #e5edfd;
    border-color: #cbdafa;
}

.cms-auth-shell {
    position: relative;
    background:
        radial-gradient(circle at 14% 12%, rgba(240, 137, 32, 0.12), transparent 24rem),
        linear-gradient(145deg, #f5f8ff 0%, #ffffff 58%, #e5edfd 100%);
}

.cms-auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(3, 58, 172, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 58, 172, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

.cms-auth-container {
    position: relative;
    width: min(100%, 29rem);
}

.cms-auth-language {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.85rem;
}

.cms-auth-logo {
    display: block;
    width: auto;
    max-width: 11.5rem;
    max-height: 5.5rem;
    margin: 0 auto 1rem;
    object-fit: contain;
}

.cms-auth-card {
    border-radius: var(--peritum-radius-xl) !important;
}

.cms-footer {
    margin-top: 2rem;
    padding: 1.25rem 0 0.35rem;
    border-block-start: 1px solid var(--peritum-border-soft);
}

.cms-footer-credit {
    margin-top: 0.35rem;
    color: var(--peritum-muted);
}

.cms-footer-credit a {
    color: var(--peritum-primary) !important;
    font-weight: 700;
    text-decoration: none;
}

.cms-footer-credit a:hover,
.cms-footer-credit a:focus-visible {
    color: var(--peritum-primary-hover) !important;
    text-decoration: underline;
}

/* -------------------------------------------------------------- RTL */

html[dir="rtl"] .vertical .cms-sidebar,
html[dir="rtl"] .vertical.hover .cms-sidebar,
html[dir="rtl"] .narrow.open .cms-sidebar {
    right: 0;
    left: auto;
    width: var(--peritum-sidebar-width);
    min-width: var(--peritum-sidebar-width);
    box-shadow: -8px 0 24px rgba(3, 58, 172, 0.08);
}

html[dir="rtl"] .vertical .cms-topnav,
html[dir="rtl"] .vertical.hover .cms-topnav,
html[dir="rtl"] .narrow.open .cms-topnav,
html[dir="rtl"] .vertical .main-content,
html[dir="rtl"] .vertical.hover .main-content,
html[dir="rtl"] .narrow.open .main-content {
    margin-right: var(--peritum-sidebar-width);
    margin-left: 0;
}

html[dir="rtl"] .cms-sidebar .navbar-nav .nav-link,
html[dir="rtl"] .cms-topnav .dropdown-item,
html[dir="rtl"] .cms-topnav .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .cms-topnav .dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] [dir="ltr"] {
    unicode-bidi: isolate;
}

html[dir="rtl"] input[dir="ltr"],
html[dir="rtl"] textarea[dir="ltr"] {
    text-align: left;
}

html[dir="rtl"] input[dir="rtl"],
html[dir="rtl"] textarea[dir="rtl"] {
    text-align: right;
}

html[dir="rtl"] .select2-container--bootstrap4 .select2-selection,
html[dir="rtl"] .select2-container--bootstrap4 .select2-results,
html[dir="rtl"] .dataTables_wrapper,
html[dir="rtl"] .swal2-popup {
    direction: rtl;
    text-align: right;
}

/* -------------------------------------------------------- collapsed */

@media (min-width: 992px) {
    .vertical.collapsed .cms-sidebar {
        width: var(--peritum-sidebar-rail);
        min-width: var(--peritum-sidebar-rail);
    }

    .vertical.collapsed .cms-sidebar-brand {
        flex-basis: 5.5rem;
        padding: 0.75rem;
    }

    .vertical.collapsed .cms-sidebar-brand-image {
        display: none;
    }

    .vertical.collapsed .cms-sidebar-brand-mark {
        display: block;
    }

    .vertical.collapsed .cms-sidebar-scroll {
        padding-inline: 0.55rem;
    }

    .vertical.collapsed .cms-sidebar .nav-link {
        justify-content: center;
        padding-inline: 0.5rem;
    }

    .vertical.collapsed .cms-sidebar .nav-link i {
        font-size: 1.15rem;
    }

    .vertical.collapsed .cms-topnav,
    .vertical.collapsed .main-content {
        margin-left: var(--peritum-sidebar-rail);
    }

    html[dir="rtl"] .vertical.collapsed .cms-topnav,
    html[dir="rtl"] .vertical.collapsed .main-content {
        margin-right: var(--peritum-sidebar-rail);
        margin-left: 0;
    }
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 991.98px) {
    .vertical .cms-sidebar,
    .vertical.hover .cms-sidebar,
    .vertical.narrow .cms-sidebar {
        width: 0;
        min-width: 0;
        transform: translateX(-100%);
        transition: width 0.25s ease, min-width 0.25s ease, transform 0.25s ease;
    }

    html[dir="rtl"] .vertical .cms-sidebar,
    html[dir="rtl"] .vertical.hover .cms-sidebar,
    html[dir="rtl"] .vertical.narrow .cms-sidebar {
        width: 0;
        min-width: 0;
        transform: translateX(100%);
    }

    .vertical.collapsed .cms-sidebar,
    html[dir="rtl"] .vertical.collapsed .cms-sidebar {
        width: min(var(--peritum-sidebar-width), calc(100vw - 3.5rem));
        min-width: min(var(--peritum-sidebar-width), calc(100vw - 3.5rem));
        transform: translateX(0);
    }

    .vertical .cms-topnav,
    .vertical .main-content,
    .vertical.collapsed .cms-topnav,
    .vertical.collapsed .main-content,
    html[dir="rtl"] .vertical .cms-topnav,
    html[dir="rtl"] .vertical .main-content,
    html[dir="rtl"] .vertical.collapsed .cms-topnav,
    html[dir="rtl"] .vertical.collapsed .main-content {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .vertical .cms-topnav {
        padding: 0.65rem 1rem;
    }

    .vertical .main-content {
        padding: 1.25rem 1rem;
    }

    body.dashboard-page.collapsed::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(5, 21, 135, 0.38);
        backdrop-filter: blur(1px);
    }

    body.dashboard-page.collapsed .cms-sidebar {
        z-index: 1040;
    }
}

@media (max-width: 575.98px) {
    :root {
        --peritum-header-height: 4.25rem;
    }

    .cms-header-actions {
        gap: 0.35rem;
    }

    .cms-user-trigger {
        padding-inline: 0.45rem !important;
    }

    .cms-locale-option {
        min-width: 2rem;
        padding-inline: 0.45rem;
    }

    .dashboard-page .card-body {
        padding: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-page *,
    .dashboard-page *::before,
    .dashboard-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}