/* =========================================================
   ITping Custom GLPI Shell
   Custom right sidebar + modern topbar
   ========================================================= */

@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/Vazirmatn-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --itp-sidebar-width: 292px;
    --itp-sidebar-gap: 18px;
    --itp-shell-content-offset: 310px;
    --itp-topbar-height: 72px;
    --itp-blue: #2563eb;
    --itp-indigo: #4f46e5;
    --itp-cyan: #06b6d4;
    --itp-dark-1: #0f172a;
    --itp-dark-2: #1e293b;
    --itp-bg: #eef3fb;
    --itp-text: #0f172a;
    --itp-muted: #64748b;
    --itp-border: #e2e8f0;
}

html,
body {
    direction: rtl !important;
}

body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.dropdown-menu,
.card,
.modal,
.table,
.btn {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

body {
    background: #eef3fb !important;
}

body.itp-sidebar-collapsed {
    --itp-shell-content-offset: 0px;
    --itp-sidebar-gap: 0px;
}

/* =========================================================
   Hide original GLPI menus AFTER custom shell loads
   ========================================================= */

body.itp-shell-ready header.navbar.topbar,
body.itp-shell-ready header.navbar.d-print-none.sticky-lg-top.shadow-sm.navbar-dark.navbar-expand-xl.topbar {
    display: none !important;
}

body.itp-shell-ready .navbar-vertical {
    display: none !important;
}

/* اگر منوی اصلی GLPI بالای صفحه باشد */
body.itp-shell-ready #navbar-menu,
body.itp-shell-ready #navbar-menu > .navbar-nav,
body.itp-shell-ready ul.navbar-nav[id^="menu_"] {
    display: none !important;
}

/* =========================================================
   Custom Sidebar
   ========================================================= */

#itp-shell-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: var(--itp-sidebar-width) !important;
    height: 100vh !important;
    z-index: 900000 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 16px 12px !important;

    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .30), transparent 30%),
        linear-gradient(180deg, var(--itp-dark-1), var(--itp-dark-2)) !important;

    border-left: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: -16px 0 42px rgba(15, 23, 42, .24) !important;

    direction: rtl !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

body.itp-sidebar-collapsed #itp-shell-sidebar {
    transform: translateX(100%) !important;
    box-shadow: none !important;
}

#itp-sidebar-toggle {
    position: fixed !important;
    top: 26px !important;
    right: calc(var(--itp-sidebar-width, 292px) - 52px) !important;
    z-index: 910000 !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.08) !important;
    color: #dbeafe !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: right .22s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

#itp-sidebar-toggle:hover {
    background: rgba(37, 99, 235, .92) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
}

.itp-sidebar-toggle-icon {
    font-size: 19px !important;
    line-height: 1 !important;
}

body.itp-sidebar-collapsed #itp-sidebar-toggle {
    top: 16px !important;
    right: auto !important;
    left: 16px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-color: rgba(148, 163, 184, .35) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14) !important;
}

body.itp-sidebar-collapsed #itp-shell-topbar {
    right: 0 !important;
    padding-left: 70px !important;
}

.itp-shell-brand {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 8px 18px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.itp-shell-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background-image: url("/pics/itping/logo.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: rgba(255,255,255,.10) !important;
    flex: 0 0 48px !important;
}

.itp-shell-brand-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.4 !important;
}

.itp-shell-brand-text strong {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.itp-shell-brand-text small {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.itp-shell-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding-bottom: 18px !important;
}

.itp-menu-link,
.itp-menu-button {
    width: 100% !important;
    min-height: 44px !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    color: #dbeafe !important;
    background: transparent !important;
    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    text-align: right !important;

    transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

.itp-menu-link:hover,
.itp-menu-button:hover {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
    transform: translateX(-2px) !important;
}

.itp-menu-link.active,
.itp-menu-group.active > .itp-menu-button,
.itp-menu-group.open > .itp-menu-button {
    background: linear-gradient(135deg, var(--itp-blue), var(--itp-cyan)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .34) !important;
}

.itp-menu-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.itp-menu-icon {
    width: 22px !important;
    min-width: 22px !important;
    text-align: center !important;
    color: inherit !important;
    font-size: 16px !important;
}

.itp-menu-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.itp-menu-chevron {
    color: rgba(255,255,255,.66) !important;
    font-size: 18px !important;
    transition: transform .18s ease !important;
}

.itp-menu-group.open .itp-menu-chevron {
    transform: rotate(-90deg) !important;
}

.itp-submenu {
    display: none !important;
    margin: 6px 10px 9px 0 !important;
    padding: 7px !important;
    border-radius: 15px !important;

    background: rgba(255,255,255,.065) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.itp-menu-group.open .itp-submenu {
    display: grid !important;
    gap: 3px !important;
}

.itp-submenu a {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    color: #cbd5e1 !important;
    text-decoration: none !important;

    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
}

.itp-submenu a:hover,
.itp-submenu a.active {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
}

.itp-shell-footer {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.itp-shell-footer a {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    background: rgba(255,255,255,.07) !important;
    color: #dbeafe !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.itp-shell-footer a:hover {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
}

/* =========================================================
   Custom Topbar
   ========================================================= */

#itp-shell-topbar {
    position: fixed !important;
    top: 0 !important;
    right: var(--itp-shell-content-offset, var(--itp-sidebar-width)) !important;
    left: 0 !important;
    height: var(--itp-topbar-height) !important;
    z-index: 850000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    padding: 0 22px !important;

    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    border-bottom: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;

    direction: rtl !important;
    transition: right .22s ease, width .22s ease !important;
}

.itp-topbar-right,
.itp-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.itp-topbar-center {
    flex: 0 1 540px !important;
    min-width: 260px !important;
    max-width: 540px !important;
}

#itp-topbar-date {
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 0 14px !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.05) !important;

    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

#itp-topbar-date::before {
    content: "";
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    box-shadow: 0 0 12px rgba(34,197,94,.85) !important;
    flex: 0 0 auto !important;
}

#itp-topbar-search {
    width: 100% !important;
    height: 44px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 0 12px !important;
    border-radius: 15px !important;

    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
}

#itp-topbar-search .itp-search-icon {
    color: #64748b !important;
    font-size: 18px !important;
}

#itp-topbar-search input {
    flex: 1 1 auto !important;
    height: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;

    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    direction: rtl !important;
    text-align: right !important;
}

#itp-topbar-search input::placeholder {
    color: #94a3b8 !important;
}

.itp-search-key {
    height: 26px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 850 !important;
    direction: ltr !important;
}

.itp-topbar-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    color: #0f172a !important;

    font-size: 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    position: relative !important;
}

.itp-topbar-icon:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
    transform: translateY(-1px);
}

.itp-topbar-icon.has-badge::after {
    content: "";
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #f97316 !important;
    position: absolute !important;
    top: 9px !important;
    left: 9px !important;
}

#itp-user-slot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#itp-user-slot .avatar,
#itp-user-slot img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 2px solid #e0e7ff !important;
    box-shadow: 0 6px 16px rgba(37,99,235,.12) !important;
}

#itp-user-slot .dropdown-menu {
    z-index: 999999 !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.16) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

/* =========================================================
   Content offset
   ========================================================= */

body.itp-shell-ready .page-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-top: var(--itp-topbar-height) !important;
    width: 100% !important;
}

body.itp-shell-ready .page-body {
    padding-top: 18px !important;
}

/* dropdown ها همیشه دیده شوند */
.dropdown-menu,
.navbar .dropdown-menu,
header .dropdown-menu {
    z-index: 999999 !important;
}

/* Mobile */
@media (max-width: 991px) {
    #itp-sidebar-toggle {
        right: 12px !important;
        top: 12px !important;
    }

    #itp-shell-sidebar {
        transform: translateX(100%) !important;
        transition: transform .2s ease !important;
    }

    body.itp-sidebar-open #itp-shell-sidebar {
        transform: translateX(0) !important;
    }

    #itp-shell-topbar {
        right: 0 !important;
        height: auto !important;
        min-height: var(--itp-topbar-height) !important;
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
    }

    .itp-topbar-center {
        order: 10 !important;
        flex: 1 1 100% !important;
        max-width: none !important;
    }

    body.itp-shell-ready .page-wrapper {
        margin-right: 0 !important;
        width: 100% !important;
        padding-top: 120px !important;
    }

    #itp-topbar-date {
        font-size: 11px !important;
        height: 34px !important;
    }
}

/* =========================================================
   ITping UX hardening v50
   Responsive data cards, compact mobile shell and accessible controls.
   This block intentionally stays last so legacy overrides cannot win.
   ========================================================= */

@media (max-width: 991px) {
    :root {
        --itp-topbar-height: 104px;
    }

    body.itp-shell-ready #itp-shell-topbar,
    body.itp-shell-ready.itp-sidebar-collapsed #itp-shell-topbar {
        min-height: 104px !important;
        height: 104px !important;
        grid-template-rows: 40px 40px !important;
        gap: 6px 8px !important;
        padding-block: 6px !important;
    }

    body.itp-shell-ready #itp-topbar-date,
    body.itp-shell-ready .itp-topbar-icon,
    body.itp-shell-ready #itp-user-slot :is(a, button, .dropdown-toggle) {
        height: 40px !important;
        min-height: 40px !important;
    }

    body.itp-shell-ready #itp-topbar-search,
    body.itp-shell-ready #itp-topbar-search input {
        height: 40px !important;
        min-height: 40px !important;
    }

    body.itp-shell-ready.horizontal-layout .secondary-bar,
    body.horizontal-layout.itp-shell-ready .secondary-bar {
        top: 104px !important;
        min-height: 48px !important;
        max-height: 56px !important;
        padding: 0 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.itp-shell-ready .secondary-bar::-webkit-scrollbar {
        display: none !important;
    }

    body.itp-shell-ready .secondary-bar > .container-fluid {
        width: max-content !important;
        min-width: 100% !important;
        min-height: 48px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    body.itp-shell-ready .secondary-bar .breadcrumb {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    body.itp-shell-ready .secondary-bar .breadcrumb-item:not(:last-child) {
        display: none !important;
    }

    body.itp-shell-ready.horizontal-layout .page-wrapper {
        padding-top: 152px !important;
    }

    body.itp-shell-ready .page-body.container-fluid {
        padding-top: 10px !important;
    }

    /* Tabs: horizontal swipe with a clear, stable active item. */
    body.itp-shell-ready #tabspanel,
    body.itp-shell-ready .nav-tabs,
    body.itp-shell-ready [role="tablist"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: thin !important;
        overscroll-behavior-inline: contain !important;
    }

    body.itp-shell-ready #tabspanel :is(li, a, button),
    body.itp-shell-ready .nav-tabs :is(li, a, button),
    body.itp-shell-ready [role="tablist"] :is(li, a, button) {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
    }

    /* Search result tables become readable cards instead of clipped grids. */
    body.itp-shell-ready .table-responsive:has(table.itp-responsive-cards),
    body.itp-shell-ready .itp-table-wrap:has(table.itp-responsive-cards) {
        overflow: visible !important;
    }

    body.itp-shell-ready table.itp-responsive-cards,
    body.itp-shell-ready table.itp-responsive-cards tbody,
    body.itp-shell-ready table.itp-responsive-cards tr,
    body.itp-shell-ready table.itp-responsive-cards td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready table.itp-responsive-cards {
        border: 0 !important;
        background: transparent !important;
    }

    body.itp-shell-ready table.itp-responsive-cards thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody tr {
        position: relative !important;
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .05) !important;
        overflow: hidden !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody tr:nth-child(even) {
        background: #f8fafc !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td {
        min-height: 44px !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        display: grid !important;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.75 !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td:last-child {
        border-bottom: 0 !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td::before {
        content: attr(data-itp-label) !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1.8 !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td[data-itp-label=""] {
        min-height: 36px !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding-block: 4px !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td[data-itp-label=""]::before {
        display: none !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td :is(a, button, .btn) {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    body.itp-shell-ready table.itp-responsive-cards tbody td :is(input[type="checkbox"], input[type="radio"]) {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    /* Compact and readable search/list toolbars. */
    body.itp-shell-ready .search_page .card-header,
    body.itp-shell-ready .search_page .card-body,
    body.itp-shell-ready .list-group-header {
        padding-inline: 10px !important;
    }

    body.itp-shell-ready :is(.search-toolbar, .search-actions, .list-actions, .card-header) .btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Dashboard widgets use document flow on phones; no giant empty grid. */
    body.itp-shell-ready .dashboard .grid-stack {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    body.itp-shell-ready .dashboard .grid-stack > .grid-stack-item {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.itp-shell-ready .dashboard .grid-stack > .grid-stack-item > .grid-stack-item-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.itp-shell-ready .dashboard .card.multiple-numbers {
        height: auto !important;
        min-height: 0 !important;
        max-height: 360px !important;
        overflow: hidden !important;
    }

    body.itp-shell-ready .dashboard .card.multiple-numbers .scrollable {
        height: auto !important;
        min-height: 0 !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }

    body.itp-shell-ready .dashboard .card.multiple-numbers .line {
        min-height: 54px !important;
    }

    body.itp-shell-ready .dashboard .g-chart {
        min-height: 280px !important;
    }

    /* Fixed ITIL actions stay available without hiding the conversation. */
    body.itp-shell-ready:has(#itil-footer) .page-body {
        padding-bottom: 82px !important;
    }

    body.itp-shell-ready #itil-footer {
        min-height: 62px !important;
        max-height: 68px !important;
        padding: 6px 8px !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .10) !important;
    }

    body.itp-shell-ready #itil-footer .buttons-bar {
        min-height: 50px !important;
    }

    /* General touch targets for interactive controls, without inflating text links. */
    body.itp-shell-ready .page :is(button, .btn, .dropdown-toggle, .page-link, [role="button"]),
    body.itp-shell-ready .secondary-bar :is(a, button) {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    body.itp-shell-ready .pagination {
        justify-content: center !important;
    }

    #itp-notification-button .itp-notif-badge {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        box-shadow: none !important;
    }
}

@media (min-width: 992px) {
    body.itp-shell-ready table.search-results td,
    body.itp-shell-ready table.search-results th {
        padding-block: 9px !important;
        line-height: 1.65 !important;
    }

    body.itp-shell-ready table.search-results tbody tr:hover {
        background: #eff6ff !important;
    }
}

/* =========================================================
   ITping user dropdown - full Persian RTL fix
   ========================================================= */

#itp-user-slot {
    position: relative !important;
    direction: rtl !important;
}

/* خود دکمه کاربر */
#itp-user-slot .dropdown,
#itp-user-slot .nav-item,
#itp-user-slot > * {
    position: relative !important;
    direction: rtl !important;
}

#itp-user-slot .dropdown-toggle,
#itp-user-slot .nav-link,
#itp-user-slot a {
    min-height: 42px !important;
    border-radius: 16px !important;
    direction: rtl !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* حذف فلش بدقواره bootstrap اگر باعث بهم‌ریختگی شود */
#itp-user-slot .dropdown-toggle::after {
    margin-right: 8px !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
}

/* باکس اصلی dropdown */
#itp-user-slot .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: auto !important;
    left: 0 !important;
    transform: none !important;

    min-width: 260px !important;
    max-width: 320px !important;

    padding: 10px !important;
    margin: 0 !important;

    direction: rtl !important;
    text-align: right !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;

    z-index: 9999999 !important;
    overflow: hidden !important;
}

/* وقتی bootstrap با popper استایل inline می‌دهد */
#itp-user-slot .dropdown-menu[data-bs-popper],
#itp-user-slot .dropdown-menu.show {
    right: auto !important;
    left: 0 !important;
    top: calc(100% + 12px) !important;
    transform: none !important;
}

/* آیتم‌ها */
#itp-user-slot .dropdown-item {
    width: 100% !important;
    min-height: 40px !important;

    padding: 9px 12px !important;
    border-radius: 12px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    direction: rtl !important;
    text-align: right !important;

    color: #334155 !important;
    background: transparent !important;

    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
}

/* آیکون داخل آیتم */
#itp-user-slot .dropdown-item i,
#itp-user-slot .dropdown-item svg,
#itp-user-slot .dropdown-item .ti,
#itp-user-slot .dropdown-item [class^="ti-"],
#itp-user-slot .dropdown-item [class*=" ti-"],
#itp-user-slot .dropdown-item [class^="fa-"],
#itp-user-slot .dropdown-item [class*=" fa-"] {
    width: 20px !important;
    min-width: 20px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 16px !important;
}

/* hover */
#itp-user-slot .dropdown-item:hover,
#itp-user-slot .dropdown-item:focus {
    background: #eef4ff !important;
    color: #2563eb !important;
}

#itp-user-slot .dropdown-item:hover i,
#itp-user-slot .dropdown-item:focus i {
    color: #2563eb !important;
}

/* خط جداکننده */
#itp-user-slot .dropdown-divider {
    margin: 8px 4px !important;
    border-top: 1px solid #e5e7eb !important;
}

/* هدر یا نام کاربر داخل dropdown */
#itp-user-slot .dropdown-header {
    padding: 10px 12px 8px !important;
    color: #64748b !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* آیتم خروج */
#itp-user-slot .dropdown-item[href*="logout"],
#itp-user-slot .dropdown-item[href*="Logout"],
#itp-user-slot .dropdown-item.text-danger {
    color: #dc2626 !important;
}

#itp-user-slot .dropdown-item[href*="logout"]:hover,
#itp-user-slot .dropdown-item[href*="Logout"]:hover,
#itp-user-slot .dropdown-item.text-danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* جلوگیری از بریده‌شدن منو */
#itp-shell-topbar,
.itp-topbar-left,
#itp-user-slot,
#itp-user-slot .dropdown {
    overflow: visible !important;
}

/* موبایل */
@media (max-width: 991px) {
    #itp-user-slot .dropdown-menu {
        left: 0 !important;
        right: auto !important;
        min-width: 240px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* ITping secondary bar position fix */


/* =========================================================
   ITping live search results
   ========================================================= */

#itp-topbar-search {
    position: relative !important;
    overflow: visible !important;
}

#itp-live-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: 0 !important;

    display: none !important;
    max-height: 430px !important;
    overflow-y: auto !important;

    padding: 8px !important;
    border-radius: 18px !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;

    direction: rtl !important;
    text-align: right !important;
    z-index: 9999999 !important;
}

#itp-live-search-results.show {
    display: block !important;
}

.itp-live-item {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: #0f172a !important;
    text-decoration: none !important;
    direction: rtl !important;
}

.itp-live-item:hover,
.itp-live-item.active {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.itp-live-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    font-size: 16px !important;
    flex: 0 0 36px !important;
}

.itp-live-body {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.itp-live-body strong {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.5 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.itp-live-body small {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.itp-live-empty {
    padding: 18px 12px !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

/* ITping remove search from secondary bar */
.secondary-bar form[role="search"],
.secondary-bar .search,
.secondary-bar .search-form,
.secondary-bar .global-search,
.secondary-bar .navbar-search,
.secondary-bar input[type="search"],
.secondary-bar input[name="globalsearch"],
.secondary-bar input[name="criteria"],
.secondary-bar .input-group:has(input[type="search"]),
.secondary-bar .input-group:has(input[name="globalsearch"]),
.secondary-bar .input-group:has(input[name="criteria"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ITping: never show custom shell on login page */
html.itp-login-page #itp-shell-sidebar,
html.itp-login-page #itp-shell-topbar,
html.itp-login-page #itp-live-search-results {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.itp-login-page body,
html.itp-login-page .page-wrapper {
    margin-right: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
}

/* ITping flattened sidebar menu items */
.itp-flattened-menu-link {
    background: rgba(255,255,255,.035) !important;
}

.itp-flattened-menu-link:hover {
    background: rgba(255,255,255,.10) !important;
}

/* ITping secondary bar fixed under custom topbar - no horizontal overflow */
body.itp-shell-ready.horizontal-layout .secondary-bar,
body.horizontal-layout.itp-shell-ready .secondary-bar {
    position: fixed !important;
    top: var(--itp-topbar-height, 72px) !important;
    right: var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) !important;
    left: 0 !important;

    width: calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px))) !important;
    max-width: calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px))) !important;

    margin: 0 !important;
    transform: none !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;

    z-index: 840000 !important;
}

/* Prevent secondary-bar children from forcing horizontal scroll */
body.itp-shell-ready.horizontal-layout .secondary-bar *,
body.horizontal-layout.itp-shell-ready .secondary-bar * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Extra safety: page should not horizontally scroll because of custom shell */
html,
body {
    overflow-x: clip !important;
}

/* ITping secondary bar fixed under custom topbar - no horizontal overflow */
body.itp-shell-ready.horizontal-layout .secondary-bar,
body.horizontal-layout.itp-shell-ready .secondary-bar {
    position: fixed !important;
    top: var(--itp-topbar-height, 72px) !important;
    right: var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) !important;
    left: 0 !important;

    width: calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px))) !important;
    max-width: calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px))) !important;

    margin: 0 !important;
    transform: none !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;

    z-index: 840000 !important;
}

/* Prevent secondary-bar children from forcing horizontal scroll */
body.itp-shell-ready.horizontal-layout .secondary-bar *,
body.horizontal-layout.itp-shell-ready .secondary-bar * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Extra safety: page should not horizontally scroll because of custom shell */
html,
body {
    overflow-x: clip !important;
}

/* ITping page body spacing under secondary bar */
body.itp-shell-ready .page-body {
    padding-top: 50px !important;
}

/* ITping icon font hard reset */
i.ti,
i[class^="ti-"],
i[class*=" ti-"],
span.ti,
span[class^="ti-"],
span[class*=" ti-"] {
    font-family: "tabler-icons" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

i.fa,
i.fas,
i.far,
i.fal,
i.fad,
i.fab,
i[class^="fa-"],
i[class*=" fa-"],
span.fa,
span.fas,
span.far,
span.fal,
span.fad,
span.fab,
span[class^="fa-"],
span[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    line-height: 1 !important;
    display: inline-block !important;
}

i.fa,
i.fas,
i[class^="fa-"],
i[class*=" fa-"],
span.fa,
span.fas,
span[class^="fa-"],
span[class*=" fa-"] {
    font-weight: 900 !important;
}

i.fab,
span.fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* ITping dashboard multiple numbers card: scroll after 500px */
.dashboard .card.multiple-numbers,
.card.multiple-numbers {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

.dashboard .card.multiple-numbers .scrollable,
.card.multiple-numbers .scrollable {
    height: calc(500px - 70px) !important;
    min-height: 0 !important;
    max-height: calc(500px - 70px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.dashboard .card.multiple-numbers .table,
.card.multiple-numbers .table {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.dashboard .card.multiple-numbers .line,
.card.multiple-numbers .line {
    min-height: 64px !important;
}

/* =========================================================
   ITping FINAL dashboard multiple-numbers scroll fix
   Show content up to 500px, then scroll inside card
   ========================================================= */

.dashboard .card.multiple-numbers,
.card.multiple-numbers {
    height: auto !important;
    min-height: 500px !important;
    max-height: none !important;
    overflow: visible !important;
}

.dashboard .card.multiple-numbers .scrollable,
.card.multiple-numbers .scrollable {
    height: auto !important;
    min-height: 0 !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
}

.dashboard .card.multiple-numbers .table,
.card.multiple-numbers .table {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
}

.dashboard .card.multiple-numbers .line,
.card.multiple-numbers .line {
    min-height: 56px !important;
}

/* =========================================================
   ITping FINAL global icon font fix
   Do not let Vazirmatn override icon fonts
   ========================================================= */

/* Tabler Icons */
.ti,
i.ti,
span.ti,
[class~="ti"],
[class^="ti-"],
[class*=" ti-"] {
    font-family: "tabler-icons" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    speak: never !important;
}

/* FontAwesome */
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
i.fa,
i.fas,
i.far,
i.fal,
i.fad,
i.fab,
span.fa,
span.fas,
span.far,
span.fal,
span.fad,
span.fab,
[class~="fa"],
[class~="fas"],
[class~="far"],
[class~="fal"],
[class~="fab"],
[class^="fa-"],
[class*=" fa-"] {
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* FontAwesome solid/default */
.fa,
.fas,
i.fa,
i.fas,
span.fa,
span.fas,
[class~="fa"],
[class~="fas"],
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* FontAwesome brands */
.fab,
i.fab,
span.fab,
[class~="fab"] {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* GLPI dashboard icon class */
.main-icon.ti,
.main-icon[class*=" ti-"],
.page-body .ti,
.page-body [class*=" ti-"] {
    font-family: "tabler-icons" !important;
}

/* =========================================================
   ITping topbar calendar popup
   ========================================================= */

#itp-topbar-date {
    cursor: pointer !important;
    user-select: none !important;
}

#itp-topbar-date:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

#itp-calendar-panel {
    position: fixed !important;
    top: calc(var(--itp-topbar-height, 72px) + 14px) !important;
    left: 22px !important;
    right: calc(var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) + 22px) !important;

    height: calc(100vh - var(--itp-topbar-height, 72px) - 34px) !important;
    max-height: 760px !important;

    display: none !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24) !important;

    overflow: hidden !important;
    direction: rtl !important;
    z-index: 9999998 !important;
}

#itp-calendar-panel.show {
    display: flex !important;
}

.itp-calendar-panel-head {
    min-height: 68px !important;
    padding: 12px 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.itp-calendar-title {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.itp-calendar-title strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.itp-calendar-title small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.itp-calendar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.itp-calendar-open {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #eef4ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;

    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

#itp-calendar-close {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 12px !important;

    background: #f1f5f9 !important;
    color: #0f172a !important;

    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#itp-calendar-close:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

#itp-calendar-frame {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 991px) {
    #itp-calendar-panel {
        top: 86px !important;
        right: 12px !important;
        left: 12px !important;
        height: calc(100vh - 110px) !important;
        max-height: none !important;
        border-radius: 18px !important;
    }
}

/* ITping calendar popup final visibility fix */
#itp-topbar-date,
#itping-top-date,
.itp-calendar-trigger {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

#itp-calendar-panel {
    position: fixed !important;
    top: 86px !important;
    right: calc(var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) + 22px) !important;
    left: 22px !important;
    height: calc(100vh - 110px) !important;

    display: none !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28) !important;

    overflow: hidden !important;
    direction: rtl !important;
    z-index: 99999999 !important;
}

#itp-calendar-panel.show {
    display: flex !important;
}

.itp-calendar-panel-head {
    min-height: 68px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.itp-calendar-title {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.itp-calendar-title strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.itp-calendar-title small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.itp-calendar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.itp-calendar-open {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef4ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

#itp-calendar-close {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#itp-calendar-frame {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 991px) {
    #itp-calendar-panel {
        top: 86px !important;
        right: 12px !important;
        left: 12px !important;
        height: calc(100vh - 110px) !important;
        border-radius: 18px !important;
    }
}

/* =========================================================
   ITping lite calendar final
   ========================================================= */

#itp-calendar-panel,
#itp-calendar-frame {
    display: none !important;
}

#itp-topbar-date,
#itping-top-date,
.itp-calendar-trigger {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

#itp-lite-calendar {
    position: fixed !important;
    top: 86px !important;
    right: calc(var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) + 22px) !important;
    left: 22px !important;
    height: calc(100vh - 110px) !important;
    max-height: 820px !important;

    display: none !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28) !important;

    overflow: hidden !important;
    direction: rtl !important;
    z-index: 99999999 !important;
}

#itp-lite-calendar.show {
    display: flex !important;
}

.itp-lite-cal-head {
    min-height: 68px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.itp-lite-cal-title {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.itp-lite-cal-title strong {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.itp-lite-cal-title small {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.itp-lite-cal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.itp-lite-cal-actions button {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}

#itp-lite-cal-close {
    width: 36px !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

.itp-lite-cal-month {
    padding: 14px 18px 8px !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}

.itp-lite-cal-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
    padding: 0 16px 8px !important;
}

.itp-lite-cal-weekdays span {
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.itp-lite-cal-grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: minmax(92px, 1fr) !important;
    gap: 8px !important;
    padding: 0 16px 16px !important;
    overflow-y: auto !important;
}

.itp-lite-cal-day {
    min-width: 0 !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    padding: 8px !important;
    overflow: hidden !important;
}

.itp-lite-cal-day.muted {
    opacity: .45 !important;
    background: #f8fafc !important;
}

.itp-lite-cal-day.today {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.12) inset !important;
}

.itp-lite-cal-daynum {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
}

.itp-lite-cal-day.today .itp-lite-cal-daynum {
    background: #2563eb !important;
    color: #ffffff !important;
}

.itp-lite-cal-events {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.itp-cal-event {
    min-height: 22px !important;
    padding: 3px 7px !important;
    border-radius: 8px !important;
    display: block !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.itp-cal-event.ticket_task {
    background: #eef4ff !important;
    color: #2563eb !important;
}

.itp-cal-event.project_task {
    background: #ecfeff !important;
    color: #0891b2 !important;
}

.itp-cal-event.reminder {
    background: #fff7ed !important;
    color: #ea580c !important;
}

.itp-cal-event.external {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.itp-cal-more {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
}

.itp-lite-cal-loading {
    position: absolute !important;
    left: 24px !important;
    bottom: 22px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: rgba(15,23,42,.86) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: none;
}

/* =========================================================
   ITping global layer fix
   Keep modals, dropdowns, tooltips, calendars above custom sidebar/topbar
   ========================================================= */

:root {
    --itp-sidebar-z: 900000;
    --itp-topbar-z: 850000;
    --itp-floating-z: 9999999;
    --itp-modal-z: 10000000;
}

/* Custom shell layers */
#itp-shell-sidebar {
    z-index: var(--itp-sidebar-z) !important;
}

#itp-shell-topbar {
    z-index: var(--itp-topbar-z) !important;
}

/* Bootstrap modal must be above sidebar/topbar */
.modal {
    z-index: var(--itp-modal-z) !important;
}

.modal-backdrop {
    z-index: calc(var(--itp-modal-z) - 10) !important;
}

/* Modal should be centered in available content area, not under sidebar/topbar */
body.itp-shell-ready .modal {
    padding-right: var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) !important;
    padding-top: var(--itp-topbar-height, 72px) !important;
    box-sizing: border-box !important;
}

body.itp-shell-ready .modal-dialog {
    position: relative !important;
    width: auto !important;
    margin: 1.75rem auto !important;
    pointer-events: none !important;
    top: 0 !important;
    max-width: min(900px, calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) - 48px)) !important;
}

body.itp-shell-ready .modal-content {
    pointer-events: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* Large modals */
body.itp-shell-ready .modal-lg,
body.itp-shell-ready .modal-xl {
    max-width: min(1180px, calc(100vw - var(--itp-shell-content-offset, var(--itp-sidebar-width, 292px)) - 48px)) !important;
}

/* Dropdowns, Select2, autocomplete, datepicker, popover, tooltip */
.dropdown-menu,
.select2-container,
.select2-dropdown,
.select2-container--open,
.ui-autocomplete,
.flatpickr-calendar,
.datepicker,
.daterangepicker,
.popover,
.tooltip,
.toast,
.toast-container,
.swal2-container,
.jstree-contextmenu,
.context-menu-list,
.qtip,
.tippy-box {
    z-index: var(--itp-floating-z) !important;
}

/* GLPI ajax/modal/helpers */
.ajax_box,
.ajax-modal,
#ajax_loader,
#loadingindicator,
.debugpanel,
.timeline-item .dropdown-menu {
    z-index: var(--itp-floating-z) !important;
}

/* Prevent parent containers from clipping dropdown/modal helpers */
.page,
.page-wrapper,
.page-body,
.container,
.container-fluid,
.container-xl,
.card,
.card-body,
.tab-content,
.secondary-bar,
.itp-topbar-left,
#itp-user-slot {
    overflow: visible !important;
}

.page {
width: 100% !important;
    max-width: 100% !important;
}

/* But tables can keep their own scroll behavior */
.table-responsive,
.scrollable,
.list-group-scroll {
    overflow: auto;
}

/* Mobile: no sidebar offset for modals */
@media (max-width: 991px) {
    body.itp-shell-ready .modal {
        padding-right: 0 !important;
        padding-top: var(--itp-topbar-height, 72px) !important;
    }

    body.itp-shell-ready .modal-dialog,
    body.itp-shell-ready .modal-lg,
    body.itp-shell-ready .modal-xl {
        max-width: calc(100vw - 24px) !important;
        margin: 1rem auto !important;
    }
}

/* ITping override old modal top offset */
body.itp-shell-ready .modal-dialog {
    top: 0 !important;
}



/* مهم: هیچ موقعیت‌دهی دستی مخرب برای Select2 نده */
.select2-container .select2-dropdown {
    inset-inline-start: auto;
    inset-inline-end: auto;
}

.select2-container--open {
    z-index: 10000000 !important;
}

/* ITping Select2 RTL visual cleanup */
.select2-container,
.select2-container *,
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-results__option,
.select2-search__field {
    direction: rtl !important;
    text-align: right !important;
}

.select2-container--open {
    z-index: 10000000 !important;
}

.select2-dropdown {
    z-index: 10000000 !important;
    border-color: #d9dbde !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    overflow: hidden !important;
}

.select2-results__option {
    padding: 8px 12px !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background: #e0f2fe !important;
    color: #0f172a !important;
}

.select2-search--dropdown {
    padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
    border-radius: 10px !important;
    border: 1px solid #d9dbde !important;
    padding: 7px 10px !important;
    outline: none !important;
}

/* ITping Select2 anti-flicker while positioning */
body.itp-select2-positioning .select2-container--open .select2-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.itp-select2-positioned .select2-container--open .select2-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ITping Select2 focused width fix - scoped */
.secondary-bar .select2-container.select2-container--focus .select2-selection,
.filters .select2-container.select2-container--focus .select2-selection {
    width: 220px !important;
}

/* ITping dashboard filters toolbar RTL order */
.dashboard .filters_toolbar {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

.dashboard .filters_toolbar .filters fieldset.filter .flatpickr{
    position: relative;
    width: 100%;
    overflow: visible;
    margin-left: -25px !important;
}

.dashboard .filters_toolbar .filters fieldset.filter input{
    margin-right: 20px !important;
}

/* ITping Select2 single selected text RTL padding */
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 22px !important;
    padding-left: 34px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* ITping filters Select2 RTL padding */
.dashboard .filters_toolbar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.secondary-bar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.filter-criteria .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.search-form .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
form .filter .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 22px !important;
    padding-left: 34px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Multi select filters */
.dashboard .filters_toolbar .select2-container[dir="rtl"] .select2-selection--multiple,
.secondary-bar .select2-container[dir="rtl"] .select2-selection--multiple,
.filter-criteria .select2-container[dir="rtl"] .select2-selection--multiple,
.search-form .select2-container[dir="rtl"] .select2-selection--multiple,
form .filter .select2-container[dir="rtl"] .select2-selection--multiple {
    padding-right: 22px !important;
    padding-left: 34px !important;
    direction: rtl !important;
    text-align: right !important;
}

/* =========================================================
   ITping dashboard filters RTL/select2 label spacing fix
   ========================================================= */

.dashboard .filters_toolbar .select2-container,
.secondary-bar .select2-container,
.filter-criteria .select2-container,
.search-form .select2-container {
    min-width: 180px !important;
}

.dashboard .filters_toolbar .select2-container[dir="rtl"] .select2-selection--single,
.secondary-bar .select2-container[dir="rtl"] .select2-selection--single,
.filter-criteria .select2-container[dir="rtl"] .select2-selection--single,
.search-form .select2-container[dir="rtl"] .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    direction: rtl !important;
    text-align: right !important;
    overflow: hidden !important;
}

.dashboard .filters_toolbar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.secondary-bar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.filter-criteria .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered,
.search-form .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 34px !important;
    padding-left: 34px !important;
    line-height: 32px !important;
    direction: rtl !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dashboard .filters_toolbar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow,
.secondary-bar .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow,
.filter-criteria .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow,
.search-form .select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    right: 8px !important;
    left: auto !important;
    width: 22px !important;
}

.dashboard .filters_toolbar .select2-selection__clear,
.secondary-bar .select2-selection__clear,
.filter-criteria .select2-selection__clear,
.search-form .select2-selection__clear {
    left: 8px !important;
    right: auto !important;
}



/* ITping Flatpickr RTL visual only - safe */
.flatpickr-calendar {
    direction: rtl !important;
    text-align: right !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    z-index: 10000000 !important;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-days,
.flatpickr-rContainer,
.dayContainer {
    direction: rtl !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-day,
span.flatpickr-weekday {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    direction: rtl !important;
    text-align: center !important;
}

/* ITping created date Jalali display input */
input[data-itp-jalali="1"] {
    direction: rtl !important;
    text-align: right !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    padding-right: 38px !important;
    padding-left: 34px !important;
}

/* ITping dashboard Jalali visible date input */
.dashboard input[data-itp-jalali="1"] {
    direction: rtl !important;
    text-align: right !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    padding-right: 38px !important;
    padding-left: 34px !important;
}

/* ITping Jalali picker for dashboard created date */
#itp-jalali-date-picker {
    width: 292px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22) !important;
    padding: 12px !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    direction: rtl !important;
    color: #0f172a !important;
}

#itp-jalali-date-picker .itp-jdp-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

#itp-jalali-date-picker .itp-jdp-title {
    font-size: 14px !important;
    font-weight: 800 !important;
}

#itp-jalali-date-picker button {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}

#itp-jalali-date-picker .itp-jdp-head button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

#itp-jalali-date-picker .itp-jdp-week,
#itp-jalali-date-picker .itp-jdp-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
}

#itp-jalali-date-picker .itp-jdp-week {
    margin-bottom: 6px !important;
}

#itp-jalali-date-picker .itp-jdp-week span {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
}

#itp-jalali-date-picker .itp-jdp-day,
#itp-jalali-date-picker .empty {
    height: 34px !important;
    border-radius: 10px !important;
    text-align: center !important;
}

#itp-jalali-date-picker .itp-jdp-day {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#itp-jalali-date-picker .itp-jdp-day:hover {
    background: #e0f2fe !important;
}

#itp-jalali-date-picker .itp-jdp-day.selected {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

#itp-jalali-date-picker .itp-jdp-actions {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

#itp-jalali-date-picker .itp-jdp-actions button {
    flex: 1 !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.dashboard input[data-itp-jalali-picker="1"],
.dashboard input[data-itp-jalali="1"] {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 0px !important;
    padding-left: 34px !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
}

/* =========================================================
   ITping Jalali picker layout hard reset
   ========================================================= */

#itp-jalali-date-picker,
#itp-jalali-date-picker * {
    box-sizing: border-box !important;
}

#itp-jalali-date-picker {
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22) !important;
    padding: 12px !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    direction: rtl !important;
    color: #0f172a !important;
    overflow: hidden !important;
    z-index: 10000000 !important;
}

#itp-jalali-date-picker .itp-jdp-head {
    display: grid !important;
    grid-template-columns: 34px 1fr 34px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
}

#itp-jalali-date-picker .itp-jdp-title {
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 34px !important;
    white-space: nowrap !important;
}

#itp-jalali-date-picker .itp-jdp-head button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#itp-jalali-date-picker .itp-jdp-week,
#itp-jalali-date-picker .itp-jdp-days {
    display: grid !important;
    grid-template-columns: repeat(7, 30px) !important;
    grid-auto-rows: 30px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
}

#itp-jalali-date-picker .itp-jdp-week {
    margin-bottom: 8px !important;
}

#itp-jalali-date-picker .itp-jdp-week span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    line-height: 1 !important;
}

#itp-jalali-date-picker .itp-jdp-days .empty {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#itp-jalali-date-picker .itp-jdp-day {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    float: none !important;
    position: static !important;
    transform: none !important;
}

#itp-jalali-date-picker .itp-jdp-day:hover {
    background: #e0f2fe !important;
}

#itp-jalali-date-picker .itp-jdp-day.selected {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

#itp-jalali-date-picker .itp-jdp-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 12px !important;
}

#itp-jalali-date-picker .itp-jdp-actions button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* ITping tabs panel RTL spacing */
#tabspanel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    border-radius: 90px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

#tabspanel li a {
    padding-right: 14px !important;
}

/* ITping tabs panel RTL spacing */
#tabspanel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    border-radius: 90px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

#tabspanel li a {
    padding-right: 14px !important;
}

/* ITping force vertical card tabs */
.d-flex.card-tabs.flex-column.flex-md-row.vertical {
    display: flex !important;
    flex-direction: column !important;
}

/* =========================================================
   ITping final RTL conflict guard
   Keeps older theme CSS from disturbing the custom shell.
   ========================================================= */

body.itp-shell-ready #navbar-menu,
body.itp-shell-ready #navbar-menu > .navbar-nav,
body.itp-shell-ready ul.navbar-nav[id^="menu_"],
body.itp-shell-ready header.navbar {
    display: none !important;
}

body.itp-shell-ready #itp-shell-sidebar,
body.itp-shell-ready #itp-shell-topbar,
body.itp-shell-ready #itp-shell-sidebar *,
body.itp-shell-ready #itp-shell-topbar * {
    direction: rtl !important;
    letter-spacing: 0 !important;
}

body.itp-shell-ready #itp-shell-sidebar i,
body.itp-shell-ready #itp-shell-sidebar svg,
body.itp-shell-ready #itp-shell-topbar i,
body.itp-shell-ready #itp-shell-topbar svg {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

body.itp-shell-ready .page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

body.itp-shell-ready .page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-top: 100px !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

body.itp-shell-ready .page-body.container-fluid,
body.itp-shell-ready .page-body > .container,
body.itp-shell-ready .page-body > .container-sm,
body.itp-shell-ready .page-body > .container-md,
body.itp-shell-ready .page-body > .container-lg,
body.itp-shell-ready .page-body > .container-xl,
body.itp-shell-ready .page-body > .container-xxl,
body.itp-shell-ready .page-body > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline-start: calc(24px + var(--itp-shell-content-offset, 0px)) !important;
    padding-inline-end: 24px !important;
    box-sizing: border-box !important;
}

body.itp-shell-ready.itp-sidebar-collapsed .page,
body.itp-shell-ready.itp-sidebar-collapsed .page-wrapper,
body.itp-shell-ready.itp-sidebar-collapsed .page-body,
body.itp-shell-ready.itp-sidebar-collapsed main#page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

body.itp-shell-ready.itp-sidebar-collapsed .page-body.container-fluid {
    padding-inline-start: 16px !important;
    padding-inline-end: 16px !important;
}

body.itp-shell-ready #page,
body.itp-shell-ready main#page,
body.itp-shell-ready .dashboard,
body.itp-shell-ready .dashboard .grid-stack {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    body.itp-shell-ready .page {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline-end: 0 !important;
    }

    body.itp-shell-ready .page-body > .container,
    body.itp-shell-ready .page-body > .container-sm,
    body.itp-shell-ready .page-body > .container-md,
    body.itp-shell-ready .page-body > .container-lg,
    body.itp-shell-ready .page-body > .container-xl,
    body.itp-shell-ready .page-body > .container-xxl,
    body.itp-shell-ready .page-body > .container-fluid {
        padding-inline-start: 12px !important;
        padding-inline-end: 12px !important;
    }

    body.itp-shell-ready .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline-end: 0 !important;
    }
}

/* =========================================================
   ITping UI layout consolidation
   One final source of truth for sidebar/content spacing.
   ========================================================= */

html {
    --itp-content-pad: 24px;
}

body.itp-shell-ready {
    background: #eef3fb !important;
}

body.itp-shell-ready .page,
body.itp-shell-ready .page-wrapper,
body.itp-shell-ready .page-body,
body.itp-shell-ready main#page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
}

body.itp-shell-ready .page-wrapper {
    padding-top: 100px !important;
}

body.itp-shell-ready .page-body.container-fluid {
    margin-top:25px !important;
    padding-block-start: 22px !important;
    padding-block-end: 28px !important;
    padding-inline-start: calc(var(--itp-content-pad) + var(--itp-shell-content-offset, 0px)) !important;
    padding-inline-end: var(--itp-content-pad) !important;
}

body.itp-shell-ready.itp-sidebar-collapsed .page-body.container-fluid {
    padding-inline-start: var(--itp-content-pad) !important;
}

#itp-shell-topbar {
    right: var(--itp-shell-content-offset, 0px) !important;
    padding-inline: 24px !important;
}

body.itp-sidebar-collapsed #itp-shell-topbar {
    right: 0 !important;
    padding-left: 76px !important;
}

body.itp-shell-ready.horizontal-layout .secondary-bar,
body.horizontal-layout.itp-shell-ready .secondary-bar {
    right: var(--itp-shell-content-offset, 0px) !important;
    width: calc(100vw - var(--itp-shell-content-offset, 0px)) !important;
    max-width: calc(100vw - var(--itp-shell-content-offset, 0px)) !important;
    min-height: 42px !important;
    padding-inline: 24px !important;
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid rgba(203, 213, 225, .72) !important;
}

body.itp-sidebar-collapsed.horizontal-layout .secondary-bar,
body.horizontal-layout.itp-sidebar-collapsed .secondary-bar {
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

body.itp-shell-ready .secondary-bar .container-fluid {
    padding-inline: 0 !important;
}

body.itp-shell-ready .breadcrumb,
body.itp-shell-ready .breadcrumb * {
    font-size: 13px !important;
    color: #64748b !important;
}

body.itp-shell-ready #itp-sidebar-toggle {
    top: 18px !important;
    right: calc(var(--itp-sidebar-width, 292px) - 58px) !important;
}

body.itp-sidebar-collapsed #itp-sidebar-toggle {
    top: 16px !important;
    right: auto !important;
    left: 16px !important;
}

body.itp-shell-ready .card-tabs {
    gap: 0 !important;
    border: 0 !important;
}

body.itp-shell-ready #tabspanel {
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

body.itp-shell-ready #tabspanel .nav-link {
    min-height: 34px !important;
    padding: 7px 13px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

body.itp-shell-ready #tabspanel .nav-link.active {
    color: #0f172a !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

body.itp-shell-ready .tab-content.card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.itp-shell-ready .dashboard {
    direction: rtl !important;
    padding: 14px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

body.itp-shell-ready .dashboard .toolbar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    margin: 0 0 12px 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
}

body.itp-shell-ready .dashboard .toolbar i.btn,
body.itp-shell-ready .dashboard .fs-toggle,
body.itp-shell-ready .dashboard .auto-refresh,
body.itp-shell-ready .dashboard .night-mode {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 17px !important;
}

body.itp-shell-ready .dashboard .toolbar i.btn:hover,
body.itp-shell-ready .dashboard .fs-toggle:hover,
body.itp-shell-ready .dashboard .auto-refresh:hover,
body.itp-shell-ready .dashboard .night-mode:hover {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

body.itp-shell-ready .dashboard .filters_toolbar {
    clear: both !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 45px 0 14px !important;
    padding: 0px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}


.dashboard .filters_toolbar .filters-control {
    margin: 7px !important;
}

body.itp-shell-ready .dashboard .filters_toolbar .filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body.itp-shell-ready .dashboard .filter {
    width: 33%;
    display: flex;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.itp-shell-ready .dashboard .filters-control .plus-sign {
    min-width: 132px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 1px dashed #94a3b8 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

body.itp-shell-ready .dashboard .grid-stack {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.itp-shell-ready .grid-stack > .grid-stack-item > .grid-stack-item-content {
    overflow: hidden !important;
    border-radius: 8px !important;
}

body.itp-shell-ready .dashboard .card.big-number {
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05) !important;
}

body.itp-shell-ready .dashboard .big-number .main-icon {
    inset-inline-start: auto !important;
    inset-inline-end: 12px !important;
    top: 12px !important;
    opacity: .82 !important;
}

body.itp-shell-ready .dashboard .big-number .label,
body.itp-shell-ready .dashboard .big-number .main-label {
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
}

body.itp-shell-ready .dashboard .card.multiple-numbers {
    border-radius: 8px !important;
}

body.itp-shell-ready .dashboard .g-chart,
body.itp-shell-ready .dashboard .card {
    border-radius: 8px !important;
}

@media (max-width: 991px) {
    html {
        --itp-content-pad: 12px;
    }

    body.itp-shell-ready .page-body.container-fluid {
        padding-inline-start: var(--itp-content-pad) !important;
        padding-inline-end: var(--itp-content-pad) !important;
    }

    #itp-shell-topbar {
        right: 0 !important;
        padding-inline: 56px 12px !important;
    }

    body.itp-shell-ready.horizontal-layout .secondary-bar,
    body.horizontal-layout.itp-shell-ready .secondary-bar {
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-inline: 12px !important;
    }
}

/* =========================================================
   ITping professional topbar notifications
   ========================================================= */

#itp-notification-button {
    position: relative !important;
    overflow: visible !important;
}

#itp-notification-button .itp-notif-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#itp-notification-button .itp-notif-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
    z-index: 3 !important;
}

#itp-notification-button.itp-has-unread {
    background: #eff6ff !important;
    color: #0f172a !important;
}

#itp-notification-panel {
    width: 390px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.26) !important;
    overflow: hidden !important;
    direction: rtl !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.98) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}

#itp-notification-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

#itp-notification-panel .itp-notif-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, #f8fafc, #eef6ff) !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#itp-notification-panel .itp-notif-head strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    color: #0f172a !important;
}

#itp-notification-panel .itp-notif-head span {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

#itp-notification-panel #itp-notif-close {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

#itp-notification-panel .itp-notif-list {
    max-height: 430px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
}

#itp-notification-panel .itp-notif-item {
    margin-top: 5px !important;
    position: relative !important;
    display: flex !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: #0f172a !important;
    background: #ffffff !important;
    transition: background .14s ease, transform .14s ease !important;
}

#itp-notification-panel .itp-notif-item:hover {
    background: #f8fafc !important;
    transform: translateX(-2px) !important;
}

#itp-notification-panel .itp-notif-item.unread {
    background: #eff6ff !important;
}

#itp-notification-panel .itp-notif-dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    margin-top: 7px !important;
}

#itp-notification-panel .itp-notif-item.unread .itp-notif-dot {
    background: #0ea5e9 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.13) !important;
}

#itp-notification-panel .itp-notif-body {
    display: block !important;
    min-width: 0 !important;
    flex: 1 !important;
}

#itp-notification-panel .itp-notif-body strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#itp-notification-panel .itp-notif-body small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#itp-notification-panel .itp-notif-body em {
    display: block !important;
    margin-top: 4px !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
}

#itp-notification-panel .itp-notif-empty,
#itp-notification-panel .itp-notif-loading {
    padding: 30px 16px !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#itp-notification-panel .itp-notif-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #f8fafc !important;
}

#itp-notification-panel .itp-notif-foot button,
#itp-notification-panel .itp-notif-foot a {
    height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* ITping notification type badge */
#itp-notification-panel .itp-notif-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#itp-notification-panel .itp-notif-title-row strong {
    flex: 1 !important;
    min-width: 0 !important;
}

#itp-notification-panel .itp-notif-type {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    min-width: 46px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-family: Vazirmatn, Tahoma, Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
}

#itp-notification-panel .itp-notif-type.type-ticket {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

#itp-notification-panel .itp-notif-type.type-followup {
    background: #dcfce7 !important;
    color: #166534 !important;
}

#itp-notification-panel .itp-notif-type.type-task {
    background: #fef3c7 !important;
    color: #92400e !important;
}

#itp-notification-panel .itp-notif-type.type-user {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

#itp-notification-panel .itp-notif-type.type-asset,
#itp-notification-panel .itp-notif-type.type-computer {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

#itp-notification-panel .itp-notif-type.type-problem {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

#itp-notification-panel .itp-notif-type.type-change {
    background: #ffedd5 !important;
    color: #9a3412 !important;
}

#itp-notification-panel .itp-notif-type.type-project {
    background: #ccfbf1 !important;
    color: #115e59 !important;
}

/* =========================================================
   ITping final responsive layer — keep this block last
   ========================================================= */
#itp-sidebar-overlay {
    display: none;
}

body.itp-shell-ready :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .42) !important;
    outline-offset: 2px !important;
}

.table-responsive,
.itp-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {
    :root {
        --itp-sidebar-width: min(86vw, 320px);
        --itp-sidebar-gap: 0px;
        --itp-shell-content-offset: 0px;
        --itp-topbar-height: 116px;
    }

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.itp-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    #itp-shell-sidebar {
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        transform: translateX(105%) !important;
        visibility: hidden !important;
        transition: transform .22s ease, visibility 0s linear .22s !important;
        z-index: 900003 !important;
    }

    body.itp-sidebar-open #itp-shell-sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        transition-delay: 0s !important;
    }

    #itp-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(15, 23, 42, .56) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility 0s linear .2s !important;
        z-index: 900002 !important;
    }

    body.itp-sidebar-open #itp-sidebar-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition-delay: 0s !important;
    }

    #itp-sidebar-toggle {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        z-index: 900004 !important;
    }

    #itp-shell-topbar,
    body.itp-sidebar-collapsed #itp-shell-topbar {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 116px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "date actions" "search search" !important;
        gap: 8px 10px !important;
        padding: 10px 12px 10px 64px !important;
        box-sizing: border-box !important;
    }

    .itp-topbar-right {
        grid-area: date !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #itp-topbar-date {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    .itp-topbar-left {
        grid-area: actions !important;
        gap: 4px !important;
    }

    .itp-topbar-center {
        grid-area: search !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #itp-topbar-search {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #itp-topbar-search input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .itp-search-key {
        display: none !important;
    }

    .itp-topbar-icon,
    #itp-user-slot :is(a, button, .dropdown-toggle),
    #itp-shell-sidebar :is(a, button) {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    body.itp-shell-ready .page,
    body.itp-shell-ready .page-wrapper,
    body.itp-shell-ready .page-body,
    body.itp-shell-ready main#page,
    body.itp-shell-ready #page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready .page-wrapper {
        padding-top: 124px !important;
    }

    body.itp-shell-ready.horizontal-layout .page-wrapper {
        padding-top: 168px !important;
    }

    body.itp-shell-ready .page-body {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .secondary-bar {
        top: 116px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs,
    [role="tablist"] {
        flex-wrap: nowrap !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link,
    [role="tablist"] :is(a, button) {
        min-height: 44px !important;
        white-space: nowrap !important;
    }

    :is(.form-control, .form-select, select, textarea, input:not([type="checkbox"]):not([type="radio"])),
    .btn {
        min-height: 44px;
    }

    :is(input, select, textarea) {
        font-size: 16px !important;
    }

    .btn-group,
    .input-group,
    .form-row,
    .search-form .row {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .modal {
        padding: 0 !important;
    }

    .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: auto !important;
    }

    #itp-notification-panel,
    #itp-live-search-results {
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 82px) !important;
        max-height: calc(100dvh - 82px) !important;
        overflow-y: auto !important;
    }

    #itp-notification-panel {
        top: 62px !important;
    }

    #itp-live-search-results {
        top: 112px !important;
    }

    .fc,
    .fc-view-harness,
    .calendar-main {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .fc-header-toolbar {
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .fc-toolbar-chunk {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

@media (max-width: 575px) {
    #itp-shell-topbar,
    body.itp-sidebar-collapsed #itp-shell-topbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding-right: 64px !important;
    }

    #itp-topbar-date {
        font-size: 10.5px !important;
    }

    #itp-user-slot .dropdown-menu {
        position: fixed !important;
        top: 58px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
    }

    .card,
    .modal-content {
        border-radius: 14px !important;
    }

    .card-body,
    .modal-body {
        padding: 12px !important;
    }

    .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

@media (max-height: 520px) and (max-width: 991px) {
    .itp-shell-brand {
        min-height: 54px !important;
        padding-block: 6px !important;
    }

    .itp-shell-footer {
        display: none !important;
    }
}

@media (hover: none) {
    body.itp-shell-ready :is(a, button, .card):hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.itp-shell-ready *,
    body.itp-shell-ready *::before,
    body.itp-shell-ready *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   ITping mobile conflict cleanup
   Higher specificity intentionally neutralizes legacy rules above.
   ========================================================= */
@media (max-width: 991px) {
    body.itp-shell-ready #itp-sidebar-toggle,
    body.itp-shell-ready.itp-sidebar-collapsed #itp-sidebar-toggle {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 0 !important;
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 8px 22px rgba(37, 99, 235, .28) !important;
    }

    body.itp-shell-ready.itp-sidebar-open #itp-sidebar-toggle {
        right: auto !important;
        left: 12px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .28) !important;
    }

    body.itp-shell-ready #itp-shell-topbar,
    body.itp-shell-ready.itp-sidebar-collapsed #itp-shell-topbar {
        padding: 10px 64px 10px 12px !important;
    }

    body.itp-shell-ready .page-body.container-fluid {
        margin-top: 0 !important;
        padding-top: 12px !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    body.itp-shell-ready .dashboard {
        padding: 0 !important;
        overflow: visible !important;
    }

    body.itp-shell-ready .dashboard .toolbar {
        float: none !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    body.itp-shell-ready .dashboard .toolbar > * {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar .filters {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    body.itp-shell-ready .dashboard .filter {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    body.itp-shell-ready .dashboard .alert {
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 12px !important;
        overflow-wrap: anywhere !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    body.itp-shell-ready #tabspanel {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        scroll-padding-inline: 8px;
    }

    body.itp-shell-ready #tabspanel > li {
        flex: 0 0 auto !important;
    }

    body.itp-shell-ready #itil-footer {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready #itil-footer .buttons-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    body.itp-shell-ready #itil-footer :is(.timeline-buttons, .form-buttons) {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        flex-wrap: wrap !important;
    }

    body.itp-shell-ready #itil-footer :is(a, button, .btn) {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 420px) {
    body.itp-shell-ready #itp-topbar-date {
        max-width: 145px !important;
    }

    body.itp-shell-ready .itp-topbar-left {
        gap: 2px !important;
    }

    body.itp-shell-ready #itil-footer :is(.timeline-buttons, .form-buttons) {
        justify-content: space-between !important;
    }
}

/* =========================================================
   ITping stacking architecture
   Page widgets must never paint over the fixed application shell.
   ========================================================= */
body.itp-shell-ready > .page {
    position: relative !important;
    isolation: isolate !important;
    z-index: 0 !important;
}

body.itp-shell-ready > #itp-shell-topbar {
    z-index: 850000 !important;
}

body.itp-shell-ready > #itp-shell-sidebar {
    z-index: 900003 !important;
}

body.itp-shell-ready > #itp-sidebar-overlay {
    z-index: 900002 !important;
}

body.itp-shell-ready > #itp-sidebar-toggle {
    z-index: 900004 !important;
}

/* A closed field is regular page content, never a floating layer. */
body.itp-shell-ready .page .select2-container:not(.select2-container--open) {
    z-index: 1 !important;
}

/* Open page dropdowns may cover content/secondary navigation, not the topbar. */
body.itp-shell-ready:not(.modal-open) > .select2-container--open,
body.itp-shell-ready:not(.modal-open) > .select2-dropdown,
body.itp-shell-ready:not(.modal-open) .page .select2-container--open,
body.itp-shell-ready:not(.modal-open) .page .select2-dropdown {
    z-index: 849000 !important;
}

/* Dropdowns created for a modal must remain above the modal content. */
body.itp-shell-ready.modal-open > .select2-container--open,
body.itp-shell-ready.modal-open > .select2-dropdown {
    z-index: 10000010 !important;
}

@media (max-width: 991px) {
    body.itp-shell-ready.horizontal-layout .secondary-bar,
    body.horizontal-layout.itp-shell-ready .secondary-bar {
        top: 119px !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.itp-shell-ready #tabspanel {
        position: relative !important;
        z-index: 1 !important;
    }

    body.itp-shell-ready .page :is(input, select, textarea, .form-control, .form-select, .select2-container) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready .page .select2-container {
        vertical-align: top !important;
    }

    body.itp-shell-ready .page .select2-selection {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready .page .card,
    body.itp-shell-ready .page .card-body,
    body.itp-shell-ready .page form {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.itp-shell-ready .page .dropdown-menu.show {
        max-width: calc(100vw - 24px) !important;
    }

    body.itp-shell-ready #itil-footer {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    body.itp-shell-ready #itil-footer .buttons-bar,
    body.itp-shell-ready #itil-footer :is(.timeline-buttons, .form-buttons) {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body.itp-shell-ready #itil-footer .buttons-bar {
        min-width: max-content !important;
        min-height: 52px !important;
        gap: 4px !important;
    }

    body.itp-shell-ready #itil-footer .timeline-buttons {
        width: auto !important;
        flex: 0 0 auto !important;
        gap: 4px !important;
    }

    body.itp-shell-ready #itil-footer .filter-timeline {
        width: 44px !important;
        min-width: 44px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        flex: 0 0 44px !important;
    }

    body.itp-shell-ready #itil-footer :is(.open-timeline-filter-popover, .view-timeline-todo-list) {
        width: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.itp-shell-ready #itil-footer .form-buttons {
        width: auto !important;
        flex: 0 0 auto !important;
        gap: 2px !important;
    }

    body.itp-shell-ready #itil-footer .form-buttons :is(button, .btn) {
        width: 44px !important;
        min-width: 44px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.itp-shell-ready #planning_container {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    body.itp-shell-ready #planning_filter,
    body.itp-shell-ready #planning_filter_content {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.itp-shell-ready #planning_filter_content {
        max-height: 300px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 10px !important;
        background: #ffffff !important;
    }

    body.itp-shell-ready #planning {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* v50 final cascade guard */
.itp-tabs-scroll-hint {
    display: none;
}

/* Closed Select2 widgets are page content, never floating UI. */
body.itp-shell-ready .select2-container:not(.select2-container--open) {
    position: relative !important;
    z-index: 1 !important;
}

body.itp-shell-ready:not(.modal-open) > .select2-container--open,
body.itp-shell-ready:not(.modal-open) > .select2-dropdown {
    z-index: 849000 !important;
}

body.itp-shell-ready.modal-open > .select2-container--open,
body.itp-shell-ready.modal-open > .select2-dropdown {
    z-index: 10000010 !important;
}

@media (max-width: 991px) {
    body.itp-shell-ready .secondary-bar .breadcrumb-item::before {
        display: none !important;
        content: none !important;
    }

    body.itp-shell-ready .search-card > .search-header {
        min-height: 60px !important;
        max-height: 64px !important;
        padding: 6px 8px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.itp-shell-ready .search-card > .search-header::-webkit-scrollbar {
        display: none !important;
    }

    body.itp-shell-ready .search-card > .search-header .search-controls,
    body.itp-shell-ready .search-card > .search-header .d-inline-flex {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body.itp-shell-ready .search-card > .search-header :is(.btn, button, label.form-check) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-block: 0 !important;
    }

    body.itp-shell-ready .dashboard .toolbar {
        min-height: 52px !important;
        padding: 4px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    body.itp-shell-ready .dashboard .toolbar::-webkit-scrollbar {
        display: none !important;
    }

    body.itp-shell-ready .itp-tabs-scroll-hint {
        display: block !important;
        margin: 4px 8px 6px !important;
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        transition: opacity .2s ease !important;
    }

    body.itp-shell-ready .itp-tabs-scroll-hint.is-hidden {
        opacity: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.itp-shell-ready > .select2-container--open:has(.select2-dropdown) {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready > .select2-container--open:has(.select2-dropdown) .select2-dropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard owns three legacy floating toolbars. Put them back into
       document flow so they never overlap or clip at 390px. */
    body.itp-shell-ready .dashboard > .toolbar.left-toolbar,
    body.itp-shell-ready .dashboard .toolbar.left-toolbar {
        display: none !important;
    }

    body.itp-shell-ready .dashboard > .toolbar:not(.left-toolbar),
    body.itp-shell-ready .dashboard .toolbar:not(.left-toolbar) {
        position: relative !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
        margin: 0 0 8px !important;
        padding: 4px 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.itp-shell-ready .dashboard .toolbar:not(.left-toolbar) > * {
        flex: 0 1 44px !important;
        width: 42px !important;
        min-width: 40px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar {
        position: relative !important;
        inset: auto !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar .filters:empty {
        display: none !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar .filters-control {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar .plus-sign {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px dashed #94a3b8 !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        color: #475569 !important;
    }

    body.itp-shell-ready .dashboard .filters_toolbar .add-filter-lbl {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    /* GLPI stacks search switches vertically below their icons on xs screens.
       Keep the full label as the 44px touch target and visually hide only the
       native checkbox, preventing it from overflowing the 60px toolbar. */
    body.itp-shell-ready .search-card > .search-header .search-controls label.form-switch {
        position: relative !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.itp-shell-ready .search-card > .search-header .search-controls label.form-switch > .form-check-input {
        position: absolute !important;
        width: 1px !important;
        min-width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.itp-shell-ready .search-card > .search-header .search-controls label.form-switch > .form-check-label {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    body.itp-shell-ready .search-card > .search-header .search-controls label.form-switch::after {
        content: "" !important;
        position: absolute !important;
        right: 5px !important;
        bottom: 5px !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 999px !important;
        background: currentColor !important;
        opacity: .55 !important;
    }
}