/* ==========================================================================
   سامانه جامع تجارت و عملیات صنعت فولاد - هسته مشترک تایپوگرافی و RTL
   Steel ERP - Typography, RTL Core & Modern Layout Foundation
   ========================================================================== */

@font-face {
    font-family: 'IRANSans';
    src: url('/fonts/persian/IRANSans.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BYekan';
    src: url('/fonts/persian/BYekan.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* فونت‌های پیش‌فرض و ریشه‌ای */
:root {
    --erp-font-family: 'IRANSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition-speed: 0.22s;
}

html[data-erp-font="byekan"],
html.font-byekan {
    --erp-font-family: 'BYekan', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-erp-font="iransans"],
html.font-iransans {
    --erp-font-family: 'IRANSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,
*::before,
*::after,
html,
body,
button,
input,
optgroup,
select,
textarea,
.fi-body,
.fi-main,
.fi-header,
.fi-header-heading,
.fi-header-subheading,
.fi-btn,
.fi-input,
.fi-select-input,
.fi-ta-text,
.fi-ta-header,
.fi-sidebar-item-label,
.fi-sidebar-group-label,
.fi-topbar,
.fi-dropdown,
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat-description,
.fi-ta-header-heading {
    font-family: var(--erp-font-family) !important;
    letter-spacing: normal !important;
}

/* ارقام فارسی در جدول‌ها و کارت‌های آماری */
.fi-wi-stats-overview-stat-value,
.fi-header-heading,
.fi-ta-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
    font-feature-settings: "ss01", "ss02", "numr";
}

/* ==========================================================================
   پایه‌های بهینه‌سازی RTL برای تمامی صفحات و فرم‌ها
   ========================================================================== */
html[dir="rtl"] {
    text-align: right;
}

html[dir="rtl"] .fi-sidebar {
    border-left-width: 1px;
    border-right-width: 0px;
}

/* هم‌ترازی ورودی‌ها و انتخابگرها در RTL */
html[dir="rtl"] .fi-input,
html[dir="rtl"] .fi-select-input,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"] {
    text-align: right;
    direction: rtl;
}

/* آیکون‌های جستجو و فیلتر */
html[dir="rtl"] .fi-global-search-field input {
    padding-right: 2.5rem;
    padding-left: 1rem;
}

/* جدول‌ها در RTL */
html[dir="rtl"] table {
    text-align: right;
    direction: rtl;
}

/* ==========================================================================
   انیمیشن و تعاملی بودن کارت‌های آماری و ویجت‌ها
   ========================================================================== */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    opacity: 0.88;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* کانتینر چارت‌های اسپارک‌لاین زیر کارت‌های آماری */
.fi-wi-stats-overview-stat-chart {
    margin-top: 0.75rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* ویجت‌های نمودار در داشبورد */
.fi-wi-chart {
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.fi-wi-chart:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* دکمه‌های کنش و فیلتر در جدول */
.fi-ta-header-actions,
.fi-ta-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* پلاک‌ها و بج‌های وضعیت */
.fi-badge {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 9999px !important;
}

/* اسکرول‌بار مدرن و باریک */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* ==========================================================================
   صفحه لاگین مدرن سامانه فولاد (Ultra-Modern Steel Login Page)
   ========================================================================== */
.fi-simple-layout {
    position: relative;
    background: radial-gradient(circle at 10% 20%, #1e293b 0%, #0f172a 45%, #020617 100%) !important;
    min-height: 100vh;
    overflow: hidden;
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(32, 107, 196, 0.22) 0%, rgba(32, 107, 196, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
}

.fi-simple-layout::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
}

.fi-simple-main-ctn {
    position: relative;
    z-index: 10;
}

.fi-simple-main {
    background: rgba(30, 41, 59, 0.8) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7) !important;
    padding: 2.5rem !important;
}

.fi-simple-header-heading {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem !important;
}

.fi-simple-header-subheading {
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
    margin-top: 0.25rem !important;
}

.fi-simple-main label {
    color: #e2e8f0 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.fi-simple-main input[type="email"],
.fi-simple-main input[type="password"],
.fi-simple-main input[type="text"] {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease !important;
}

.fi-simple-main input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}

/* ==========================================================================
   استایل فوق‌پیشرفته و زیبا برای بردکرامب (Breadcrumbs)
   ========================================================================== */
.fi-breadcrumbs {
    margin-bottom: 0.85rem !important;
    font-family: 'IRANSans', system-ui, sans-serif !important;
}

.fi-breadcrumbs-list {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    padding: 0.35rem 0.85rem !important;
    background: rgba(241, 245, 249, 0.75) !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}

.dark .fi-breadcrumbs-list {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(51, 65, 85, 0.65) !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25) !important;
}

.fi-breadcrumbs-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    color: #64748b !important;
}

.dark .fi-breadcrumbs-item {
    color: #94a3b8 !important;
}

.fi-breadcrumbs-item a.fi-breadcrumbs-item-label {
    color: #475569 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.dark .fi-breadcrumbs-item a.fi-breadcrumbs-item-label {
    color: #cbd5e1 !important;
}

.fi-breadcrumbs-item a.fi-breadcrumbs-item-label:hover {
    color: var(--primary-600, #d97706) !important;
    background: rgba(var(--primary-500, 245, 158, 11), 0.12) !important;
}

.fi-breadcrumbs-item-separator {
    width: 0.875rem !important;
    height: 0.875rem !important;
    opacity: 0.45 !important;
    color: #94a3b8 !important;
}

/* Active current page item */
.fi-breadcrumbs-item .fi-breadcrumbs-item-label[aria-current="page"] {
    color: var(--primary-700, #b45309) !important;
    font-weight: 700 !important;
    background: rgba(var(--primary-500, 245, 158, 11), 0.14) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(var(--primary-500, 245, 158, 11), 0.28) !important;
}

.dark .fi-breadcrumbs-item .fi-breadcrumbs-item-label[aria-current="page"] {
    color: var(--primary-300, #fcd34d) !important;
    background: rgba(var(--primary-500, 245, 158, 11), 0.2) !important;
    border-color: rgba(var(--primary-500, 245, 158, 11), 0.38) !important;
}

/* ==========================================================================
   زیباسازی پیشرفته کارت‌های نمودار (Chart Widgets)
   ========================================================================== */
.fi-wi-chart {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.fi-wi-chart:hover {
    transform: translateY(-2px) !important;
}

.fi-wi-chart .fi-section {
    border-radius: 1.15rem !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

.dark .fi-wi-chart .fi-section {
    border-color: rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3) !important;
}

/* نوار گرادینت بالای کارت نمودار */
.fi-wi-chart .fi-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #3b82f6, #10b981, #8b5cf6);
    z-index: 10;
}

/* کانتینر کنواس نمودار */
.fi-wi-chart canvas {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.04));
    transition: filter 0.25s ease;
}

.dark .fi-wi-chart canvas {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   استایل دکمه و نشانگر راهنمای صفحه
   ========================================================================== */
.page-guide-trigger-btn {
    height: 32px !important;
    padding: 0 0.65rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.15s ease-in-out !important;
}

.page-guide-trigger-btn:hover {
    background: #ffffff !important;
    border-color: var(--primary-500, #f59e0b) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important;
}

.dark .page-guide-trigger-btn {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(51, 65, 85, 0.85) !important;
}

.dark .page-guide-trigger-btn:hover {
    background: rgba(30, 41, 59, 1) !important;
    border-color: var(--primary-400, #fbbf24) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   پنجره مودال راهنمای صفحه (Page Guide Modal Popup - UI/UX Enhanced)
   ========================================================================== */

/* مخفی‌سازی پیش‌فرض تا لود کامل آلپاین */
[x-cloak] {
    display: none !important;
}

/* کانتینر اصلی تمام صفحه (Fixed Fullscreen Overlay) */
.page-guide-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.page-guide-modal-overlay:not(.is-open) {
    display: none !important;
}

.page-guide-modal-overlay.is-open {
    display: flex !important;
    animation: pageGuideModalFadeIn 0.2s ease-out !important;
}

/* پرده تاریک‌کننده پس‌زمینه با افکت شیشه‌ای مات (Backdrop) */
.page-guide-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 1 !important;
    cursor: pointer !important;
    animation: pageGuideModalFadeIn 0.2s ease-out !important;
}

/* پنجره پاپ‌آپ مرکزی با گوشه‌های گرد و سایه چندلایه مدرن */
.page-guide-modal-dialog {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 54rem !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: 1.15rem !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
    animation: pageGuideModalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: var(--erp-font-family, 'IRANSans', system-ui, sans-serif) !important;
}

.dark .page-guide-modal-dialog,
[data-theme="dark"] .page-guide-modal-dialog,
html.dark .page-guide-modal-dialog {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* سربرگ مودال */
.page-guide-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.35rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    flex-shrink: 0 !important;
}

.dark .page-guide-modal-header,
[data-theme="dark"] .page-guide-modal-header,
html.dark .page-guide-modal-header {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom-color: #334155 !important;
}

.page-guide-header-icon-wrap {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.25)) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.dark .page-guide-header-icon-wrap {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35)) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.page-guide-badge-module {
    padding: 0.15rem 0.55rem !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border-radius: 0.35rem !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.dark .page-guide-badge-module {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.page-guide-badge-action {
    padding: 0.15rem 0.5rem !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    border-radius: 0.35rem !important;
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.dark .page-guide-badge-action {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.page-guide-modal-title {
    margin: 0.25rem 0 0 0 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}

.dark .page-guide-modal-title {
    color: #ffffff !important;
}

.page-guide-close-icon-btn {
    width: 2.1rem !important;
    height: 2.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.55rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.page-guide-close-icon-btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.dark .page-guide-close-icon-btn:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* بنر خلاصه و شاخص‌های صفحه */
.page-guide-modal-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding: 0.85rem 1.35rem !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.dark .page-guide-modal-summary,
[data-theme="dark"] .page-guide-modal-summary,
html.dark .page-guide-modal-summary {
    background-color: #0b1120 !important;
    border-bottom-color: #1e293b !important;
}

.page-guide-summary-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
}

.page-guide-summary-icon {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.page-guide-summary-text {
    margin: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

.dark .page-guide-summary-text {
    color: #cbd5e1 !important;
}

.page-guide-summary-stats {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.page-guide-stat-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

.dark .page-guide-stat-chip {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.page-guide-stat-dot {
    width: 0.45rem !important;
    height: 0.45rem !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}

/* تب‌بار بالای بدنه (Segmented Tabs) */
.page-guide-modal-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.65rem 1.35rem !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.dark .page-guide-modal-tabs,
[data-theme="dark"] .page-guide-modal-tabs,
html.dark .page-guide-modal-tabs {
    background-color: #0f172a !important;
    border-bottom-color: #1e293b !important;
}

.page-guide-tabs-pill {
    display: inline-flex !important;
    background-color: #f1f5f9 !important;
    padding: 0.25rem !important;
    border-radius: 0.75rem !important;
    gap: 0.25rem !important;
    width: 100% !important;
    max-width: fit-content !important;
}

.dark .page-guide-tabs-pill,
[data-theme="dark"] .page-guide-tabs-pill,
html.dark .page-guide-tabs-pill {
    background-color: #1e293b !important;
}

.page-guide-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    padding: 0.4rem 0.95rem !important;
    border-radius: 0.55rem !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.page-guide-tab-btn:hover {
    color: #0f172a !important;
}

.page-guide-tab-btn.is-active {
    background-color: #ffffff !important;
    color: var(--erp-primary, #d97706) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

.dark .page-guide-tab-btn {
    color: #94a3b8 !important;
}

.dark .page-guide-tab-btn:hover {
    color: #f8fafc !important;
}

.dark .page-guide-tab-btn.is-active {
    background-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.page-guide-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.3rem !important;
    height: 1.15rem !important;
    padding: 0 0.35rem !important;
    border-radius: 9999px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    background-color: #e2e8f0 !important;
    color: #475569 !important;
}

.dark .page-guide-tab-count {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
}

.page-guide-tab-btn.is-active .page-guide-tab-count {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.dark .page-guide-tab-btn.is-active .page-guide-tab-count {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
}

/* بدنه اسکرول‌خور مودال */
.page-guide-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 1.15rem 1.35rem !important;
    box-sizing: border-box !important;
}

/* نوار جستجو و فیلترها */
.page-guide-controls-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1rem !important;
}

.page-guide-search-wrap {
    position: relative !important;
    flex: 1 1 240px !important;
}

.page-guide-search-icon {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
    color: #94a3b8 !important;
}

.page-guide-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.55rem 2.25rem 0.55rem 2rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.65rem !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    direction: rtl !important;
    text-align: right !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

.page-guide-search-input:focus {
    border-color: var(--erp-primary, #f59e0b) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.dark .page-guide-search-input {
    background-color: #0b1120 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark .page-guide-search-input:focus {
    background-color: #1e293b !important;
    border-color: var(--primary-400, #fbbf24) !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
}

.page-guide-search-clear {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

.page-guide-filters-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.page-guide-filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.page-guide-filter-chip:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.page-guide-filter-chip.is-active {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

.dark .page-guide-filter-chip {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.dark .page-guide-filter-chip:hover {
    color: #f8fafc !important;
}

.dark .page-guide-filter-chip.is-active {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

.page-guide-filter-dot {
    width: 0.4rem !important;
    height: 0.4rem !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}

/* گرید کارت‌های فیلد */
.page-guide-fields-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    gap: 0.75rem !important;
}

.page-guide-field-card {
    padding: 0.85rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.page-guide-field-card.is-required {
    border-inline-start: 3px solid #f43f5e !important;
}

.page-guide-field-card.is-optional {
    border-inline-start: 3px solid #94a3b8 !important;
}

.page-guide-field-card:hover {
    border-color: var(--erp-primary, #f59e0b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.dark .page-guide-field-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .page-guide-field-card.is-required {
    border-inline-start-color: #f43f5e !important;
}

.dark .page-guide-field-card.is-optional {
    border-inline-start-color: #64748b !important;
}

.dark .page-guide-field-card:hover {
    border-color: var(--primary-400, #fbbf24) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.page-guide-field-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
}

.page-guide-field-name-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.page-guide-field-dot {
    width: 0.45rem !important;
    height: 0.45rem !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}

.page-guide-field-dot.req {
    background-color: #f43f5e !important;
}

.page-guide-field-dot.opt {
    background-color: #94a3b8 !important;
}

.page-guide-field-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dark .page-guide-field-title {
    color: #f8fafc !important;
}

.page-guide-badge-req {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.12rem 0.45rem !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border-radius: 0.35rem !important;
    background-color: #ffe4e6 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

.dark .page-guide-badge-req {
    background-color: rgba(225, 29, 72, 0.2) !important;
    color: #fda4af !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
}

.page-guide-req-star {
    font-weight: 900 !important;
}

.page-guide-badge-opt {
    display: inline-flex !important;
    padding: 0.12rem 0.45rem !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    border-radius: 0.35rem !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

.dark .page-guide-badge-opt {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

.page-guide-field-desc {
    font-size: 0.76rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: #475569 !important;
}

.dark .page-guide-field-desc {
    color: #94a3b8 !important;
}

/* جعبه نمونه مقدار با دکمه کپی */
.page-guide-example-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    padding: 0.35rem 0.55rem !important;
    background-color: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 0.5rem !important;
    margin-top: 0.25rem !important;
}

.dark .page-guide-example-box {
    background-color: #0b1120 !important;
    border-color: #1e293b !important;
}

.page-guide-example-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.page-guide-example-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--erp-primary, #d97706) !important;
    flex-shrink: 0 !important;
}

.dark .page-guide-example-label {
    color: #fbbf24 !important;
}

.page-guide-example-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.72rem !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    direction: ltr !important;
    text-align: left !important;
}

.dark .page-guide-example-val {
    color: #e2e8f0 !important;
}

.page-guide-copy-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.2rem 0.35rem !important;
    border-radius: 0.35rem !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.page-guide-copy-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.dark .page-guide-copy-btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.dark .page-guide-copy-btn:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* حالت خالی (Empty State) */
.page-guide-empty-state {
    text-align: center !important;
    padding: 2.5rem 1rem !important;
    background-color: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 0.85rem !important;
    margin: 1rem 0 !important;
}

.dark .page-guide-empty-state {
    background-color: #0b1120 !important;
    border-color: #334155 !important;
}

.page-guide-empty-icon {
    font-size: 2rem !important;
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
}

.page-guide-empty-title {
    margin: 0.25rem 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dark .page-guide-empty-title {
    color: #f8fafc !important;
}

.page-guide-empty-desc {
    margin: 0 0 1rem 0 !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
}

.page-guide-empty-btn {
    padding: 0.4rem 1rem !important;
    border-radius: 0.55rem !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    background-color: var(--erp-primary, #f59e0b) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

/* بنر و خط زمانی مراحل گردش کار */
.page-guide-workflow-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    margin-bottom: 1.15rem !important;
}

.page-guide-timeline {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.page-guide-timeline-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.95rem !important;
    position: relative !important;
}

.page-guide-timeline-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 2rem !important;
}

.page-guide-timeline-circle {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
    z-index: 2 !important;
}

.page-guide-timeline-line {
    width: 2px !important;
    flex-grow: 1 !important;
    min-height: 2.2rem !important;
    background: linear-gradient(180deg, #3b82f6 0%, #cbd5e1 100%) !important;
    margin: 0.25rem 0 !important;
}

.dark .page-guide-timeline-line {
    background: linear-gradient(180deg, #3b82f6 0%, #334155 100%) !important;
}

.page-guide-timeline-card {
    flex: 1 1 auto !important;
    padding: 0.85rem 1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.page-guide-timeline-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-1px) !important;
}

.dark .page-guide-timeline-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .page-guide-timeline-card:hover {
    border-color: #60a5fa !important;
}

.page-guide-timeline-step-tag {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    margin-bottom: 0.35rem !important;
}

.dark .page-guide-timeline-step-tag {
    color: #60a5fa !important;
}

.page-guide-timeline-step-text {
    font-size: 0.8rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    color: #334155 !important;
}

.dark .page-guide-timeline-step-text {
    color: #e2e8f0 !important;
}

/* بنر و کارت‌های نکات بازار آهن و استانداردها */
.page-guide-tips-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    margin-bottom: 1.15rem !important;
}

.page-guide-tips-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.page-guide-tip-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    padding: 0.95rem 1.1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-inline-start: 4px solid var(--erp-primary, #f59e0b) !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.page-guide-tip-card:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1) !important;
    transform: translateY(-1px) !important;
}

.dark .page-guide-tip-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    border-inline-start-color: var(--primary-400, #fbbf24) !important;
}

.page-guide-tip-icon-wrap {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    padding-top: 0.15rem !important;
}

.page-guide-tip-content {
    flex: 1 1 auto !important;
}

.page-guide-tip-text {
    font-size: 0.8rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

.dark .page-guide-tip-text {
    color: #e2e8f0 !important;
}

/* پاورقی مودال */
.page-guide-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1.35rem !important;
    border-top: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    flex-shrink: 0 !important;
}

.dark .page-guide-modal-footer,
[data-theme="dark"] .page-guide-modal-footer,
html.dark .page-guide-modal-footer {
    background-color: #1e293b !important;
    border-top-color: #334155 !important;
}

.page-guide-ai-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.95rem !important;
    border-radius: 0.6rem !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.page-guide-ai-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4) !important;
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
}

.page-guide-kbd {
    display: inline-block !important;
    padding: 0.1rem 0.35rem !important;
    font-size: 0.68rem !important;
    font-family: monospace !important;
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.25rem !important;
    color: #475569 !important;
}

.dark .page-guide-kbd {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

.page-guide-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 1rem !important;
    border-radius: 0.6rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.page-guide-close-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.dark .page-guide-close-btn {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

.dark .page-guide-close-btn:hover {
    background-color: #475569 !important;
}

/* انیمیشن‌ها */
@keyframes pageGuideModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pageGuideModalPopIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================================================
   Order Items Repeater - Alternating Row Colors (رنگ‌بندی ردیف‌های فرد و زوج)
   ========================================================================== */

/* تمام ردیف‌های ریپیتر اقلام سفارش */
.order-items-repeater .fi-fo-repeater-item {
    transition: all 0.2s ease-in-out !important;
    border-radius: 0.85rem !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

/* ردیف‌های فرد (Odd Items: ۱، ۳، ۵...) - تم سرمه‌ای و آبی متالیک فولادی */
.order-items-repeater .fi-fo-repeater-items > *:nth-child(odd),
.order-items-repeater .fi-fo-repeater-item:nth-of-type(odd) {
    border-inline-start: 6px solid #0284c7 !important;
    border-color: rgba(2, 132, 199, 0.45) !important;
    background-color: #f0f7ff !important;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.08) !important;
}

.order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) > .fi-fo-repeater-item-header,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(odd) > .fi-fo-repeater-item-header {
    background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.25) !important;
    padding: 0.75rem 1rem !important;
}

.order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) .fi-fo-repeater-item-header-label,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(odd) .fi-fo-repeater-item-header-label {
    color: #0369a1 !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
}

/* ردیف‌های زوج (Even Items: ۲، ۴، ۶...) - تم زمردی و نعنایی شاداب */
.order-items-repeater .fi-fo-repeater-items > *:nth-child(even),
.order-items-repeater .fi-fo-repeater-item:nth-of-type(even) {
    border-inline-start: 6px solid #10b981 !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    background-color: #f2fbf7 !important;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.08) !important;
}

.order-items-repeater .fi-fo-repeater-items > *:nth-child(even) > .fi-fo-repeater-item-header,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(even) > .fi-fo-repeater-item-header {
    background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.25) !important;
    padding: 0.75rem 1rem !important;
}

.order-items-repeater .fi-fo-repeater-items > *:nth-child(even) .fi-fo-repeater-item-header-label,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(even) .fi-fo-repeater-item-header-label {
    color: #047857 !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
}

/* هاور روی ردیف‌ها برای تعامل بهتر چشمی */
.order-items-repeater .fi-fo-repeater-items > *:nth-child(odd):hover,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(odd):hover {
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.16) !important;
}

.order-items-repeater .fi-fo-repeater-items > *:nth-child(even):hover,
.order-items-repeater .fi-fo-repeater-item:nth-of-type(even):hover {
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.16) !important;
}

/* ==========================================================================
   حالت تاریک (Dark Mode) - کنتراست عالی و رنگ‌های نرم بدون خستگی چشم
   ========================================================================== */

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(odd),
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(odd),
[data-theme="dark"] .order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) {
    border-inline-start: 6px solid #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    background-color: rgba(12, 30, 53, 0.8) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) > .fi-fo-repeater-item-header,
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(odd) > .fi-fo-repeater-item-header,
[data-theme="dark"] .order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) > .fi-fo-repeater-item-header {
    background: linear-gradient(90deg, rgba(3, 105, 161, 0.4) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(odd) .fi-fo-repeater-item-header-label,
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(odd) .fi-fo-repeater-item-header-label {
    color: #7dd3fc !important;
}

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(even),
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(even),
[data-theme="dark"] .order-items-repeater .fi-fo-repeater-items > *:nth-child(even) {
    border-inline-start: 6px solid #34d399 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    background-color: rgba(6, 40, 30, 0.8) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(even) > .fi-fo-repeater-item-header,
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(even) > .fi-fo-repeater-item-header,
[data-theme="dark"] .order-items-repeater .fi-fo-repeater-items > *:nth-child(even) > .fi-fo-repeater-item-header {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.4) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
    border-bottom: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.dark .order-items-repeater .fi-fo-repeater-items > *:nth-child(even) .fi-fo-repeater-item-header-label,
.dark .order-items-repeater .fi-fo-repeater-item:nth-of-type(even) .fi-fo-repeater-item-header-label {
    color: #6ee7b7 !important;
}

/* ==========================================================================
   کادرهای درونی هر ردیف (Internal Sub-Sections of each Item)
   ========================================================================== */

/* کادر ۱: مشخصات کالا و مقادیر */
.order-item-spec-box {
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 0.75rem !important;
    background: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 0.85rem !important;
}

.dark .order-item-spec-box {
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

/* کادر ۲: قیمت‌گذاری و محاسبات ریالی */
.order-item-pricing-box {
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 0.75rem !important;
    background: rgba(240, 253, 244, 0.8) !important;
    margin-bottom: 0.85rem !important;
}

.dark .order-item-pricing-box {
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
    background: rgba(6, 44, 30, 0.45) !important;
}

/* کادر ۳: اطلاعات باسکول و تحویل قطعی (هشدار/کهربایی) */
.order-item-weighbridge-box {
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 0.75rem !important;
    background: rgba(254, 243, 199, 0.55) !important;
    margin-bottom: 0.85rem !important;
}

.dark .order-item-weighbridge-box {
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    background: rgba(45, 28, 6, 0.45) !important;
}

/* ==========================================================================
   تفکیک رنگی ردیف‌های فرد و زوج در جدول‌ها و لیست‌ها (Zebra Striping)
   جهت تفکیک دیداری، افزایش خوانایی و جلوگیری از خستگی چشم کاربران
   ========================================================================== */

/* ردیف‌های فرد و زوج در جدول‌های فیلامنت (Users, Orders, Parties, Weighbridge و ...) */
html:not(.dark) .fi-ta-row.fi-striped,
html:not(.dark) .fi-ta-table tbody tr.fi-striped {
    background-color: rgba(241, 245, 249, 0.72) !important;
}

html.dark .fi-ta-row.fi-striped,
html.dark .fi-ta-table tbody tr.fi-striped {
    background-color: rgba(255, 255, 255, 0.038) !important;
}

/* هاور روی ردیف‌ها (عادی و راه‌راه) برای تعامل چشمی واضح و روان */
html:not(.dark) .fi-ta-row:hover,
html:not(.dark) .fi-ta-row.fi-striped:hover,
html:not(.dark) .fi-ta-table tbody tr:hover {
    background-color: #eef2f6 !important;
}

html.dark .fi-ta-row:hover,
html.dark .fi-ta-row.fi-striped:hover,
html.dark .fi-ta-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* سایر جدول‌های داده‌ای سامانه (Custom Tables) */
.steel-table tbody tr:nth-child(even),
.erp-striped-table tbody tr:nth-child(even) {
    background-color: rgba(241, 245, 249, 0.65) !important;
}

html.dark .steel-table tbody tr:nth-child(even),
html.dark .erp-striped-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

/* ==========================================================================
   مدیریت و اصلاح ناوبری، سایدبار، نوار افقی زیر هدر (Sub-Navbar) و کنترل‌ها
   ========================================================================== */

/* ۱. تمیز کردن هدر دسکتاپ: حذف دکمه‌های اضافه برگر منو کنار لوگو */
@media (min-width: 64rem) {
    .fi-topbar-collapse-sidebar-btn-ctn {
        display: none !important;
    }
}

/* اصلاح کلی آیکون‌های SVG سایدبار و کنترل‌ها */
.fi-sidebar-bottom-controls svg,
.fi-sidebar-group-collapse-btn svg {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ۲. انتقال منوی افقی به ردیف مجزا و اختصاصی زیر هدر (Horizontal Sub-Navbar) */
.fi-body-has-top-navigation .fi-topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding-inline: 1.25rem !important;
    padding-block: 0 !important;
    min-height: auto !important;
}

.fi-body-has-top-navigation .fi-topbar-start {
    order: 1 !important;
    flex: 1 1 auto !important;
    height: var(--topbar-height, 4rem) !important;
    display: flex !important;
    align-items: center !important;
}

.fi-body-has-top-navigation .fi-topbar-end {
    order: 2 !important;
    flex: 0 0 auto !important;
    height: var(--topbar-height, 4rem) !important;
    display: flex !important;
    align-items: center !important;
}

.fi-body-has-top-navigation .fi-topbar-nav-groups {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    background: rgba(248, 250, 252, 0.96) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
}

.dark .fi-body-has-top-navigation .fi-topbar-nav-groups,
html.dark .fi-body-has-top-navigation .fi-topbar-nav-groups {
    border-top-color: rgba(51, 65, 85, 0.7) !important;
    background: rgba(15, 23, 42, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ۳. دکمه‌های کنترل پایین سایدبار (Sidebar Footer Controls - فقط ۲ آیکون متوازن بدون متن) */
.fi-sidebar-bottom-controls {
    margin-top: auto !important;
    padding: 0.5rem 0.5rem !important;
    border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.dark .fi-sidebar-bottom-controls,
html.dark .fi-sidebar-bottom-controls {
    border-top-color: rgba(51, 65, 85, 0.45) !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

.fi-sidebar-bottom-controls-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.fi-sidebar-bottom-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.fi-sidebar-bottom-btn:hover {
    background: #ffffff !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.18) !important;
    transform: translateY(-1px) !important;
}

.dark .fi-sidebar-bottom-btn,
html.dark .fi-sidebar-bottom-btn {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(51, 65, 85, 0.65) !important;
    color: #cbd5e1 !important;
}

.dark .fi-sidebar-bottom-btn:hover,
html.dark .fi-sidebar-bottom-btn:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* فلش آکاردئونی گروه‌های منو در سایدبار */
.fi-sidebar-group-collapse-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-sidebar-group-collapse-btn svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
}

.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   Deployment Assistant & Support Brain (دستیار هوشمند استقرار)
   ========================================================================== */
.assistant-page-container,
.deployment-widget-wrapper {
    direction: rtl !important;
    text-align: right !important;
    font-family: var(--erp-font-family, 'IRANSans', system-ui, sans-serif) !important;
}

.assistant-page-container svg,
.deployment-widget-wrapper svg,
.fi-floating-widgets-dock svg {
    max-width: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Tab Bar */
.assistant-tab-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 1.25rem !important;
}
html.dark .assistant-tab-bar,
body.dark .assistant-tab-bar,
.dark .assistant-tab-bar {
    border-bottom-color: #334155 !important;
}

.assistant-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.55rem 1rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
}
.assistant-tab-btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}
html.dark .assistant-tab-btn,
body.dark .assistant-tab-btn,
.dark .assistant-tab-btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
.assistant-tab-btn:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}
html.dark .assistant-tab-btn:hover,
body.dark .assistant-tab-btn:hover,
.dark .assistant-tab-btn:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}
.assistant-tab-btn.is-active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}
.assistant-tab-btn.is-active svg {
    color: #ffffff !important;
}

/* Layout */
.assistant-grid-layout {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
}
@media (max-width: 992px) {
    .assistant-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Cards */
.assistant-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 1rem !important;
}
html.dark .assistant-card,
body.dark .assistant-card,
.dark .assistant-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Typography Helpers (Dark/Light Safe) */
.assistant-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}
html.dark .assistant-title,
body.dark .assistant-title,
.dark .assistant-title {
    color: #f8fafc !important;
}

.assistant-text {
    color: #334155 !important;
    font-size: 0.8rem !important;
    line-height: 1.75 !important;
}
html.dark .assistant-text,
body.dark .assistant-text,
.dark .assistant-text {
    color: #cbd5e1 !important;
}

.assistant-text-muted {
    color: #64748b !important;
    font-size: 0.74rem !important;
    line-height: 1.6 !important;
}
html.dark .assistant-text-muted,
body.dark .assistant-text-muted,
.dark .assistant-text-muted {
    color: #94a3b8 !important;
}

.assistant-label {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 0.35rem !important;
}
html.dark .assistant-label,
body.dark .assistant-label,
.dark .assistant-label {
    color: #cbd5e1 !important;
}

/* Form Controls */
.assistant-input-textarea,
.assistant-form-input,
.assistant-form-select {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0.65rem !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.8rem !important;
    font-family: inherit !important;
    outline: none !important;
    padding: 0.6rem 0.85rem !important;
    line-height: 1.6 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
html.dark .assistant-input-textarea,
html.dark .assistant-form-input,
html.dark .assistant-form-select,
body.dark .assistant-input-textarea,
body.dark .assistant-form-input,
body.dark .assistant-form-select,
.dark .assistant-input-textarea,
.dark .assistant-form-input,
.dark .assistant-form-select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
.assistant-input-textarea:focus,
.assistant-form-input:focus,
.assistant-form-select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

/* Buttons */
.assistant-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 0.65rem !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
    font-family: inherit !important;
}
.assistant-submit-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35) !important;
}
.assistant-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Chips & Badges */
.assistant-quick-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}
html.dark .assistant-quick-chip,
body.dark .assistant-quick-chip,
.dark .assistant-quick-chip {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
.assistant-quick-chip:hover {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fcd34d !important;
}

.assistant-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 0.4rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
.assistant-badge-amber {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
html.dark .assistant-badge-amber,
body.dark .assistant-badge-amber,
.dark .assistant-badge-amber {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
.assistant-badge-emerald {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}
html.dark .assistant-badge-emerald,
body.dark .assistant-badge-emerald,
.dark .assistant-badge-emerald {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

/* Floating Launcher & Dock Integration */
.deployment-trigger-btn {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.deployment-trigger-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.6) !important;
}
.deployment-trigger-btn svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

/* ==========================================================================
   Floating Widgets Dock (داک شناور یکپارچه: ویپ، چت سازمانی، دستیار استقرار)
   ========================================================================== */
.fi-floating-widgets-dock {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    z-index: 9990 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    pointer-events: none !important;
    direction: ltr !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 48px !important;
    max-width: 48px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
}

.fi-floating-widget-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.fi-floating-widget-item > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 1. VoIP Phone Trigger Button */
.voip-trigger-btn {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.voip-trigger-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.6) !important;
}

/* 2. Internal Chat Trigger Button & Window */
.internal-chat-widget-root {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    direction: rtl !important;
    font-family: var(--erp-font-family, 'IRANSans', system-ui, sans-serif) !important;
    box-sizing: border-box !important;
}

.internal-chat-trigger-btn {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(199, 210, 254, 0.6) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.internal-chat-trigger-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.6) !important;
}

.internal-chat-trigger-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    display: block !important;
}

.internal-chat-window-card {
    position: fixed !important;
    bottom: 24px !important;
    left: 84px !important;
    z-index: 9995 !important;
    width: 440px !important;
    max-width: calc(100vw - 96px) !important;
    height: 590px !important;
    max-height: calc(85vh - 2rem) !important;
    border-radius: 1.25rem !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
    display: flex;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    direction: rtl !important;
}
html.dark .internal-chat-window-card,
body.dark .internal-chat-window-card,
.dark .internal-chat-window-card {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
@media (max-width: 639px) {
    .internal-chat-window-card {
        left: 12px !important;
        right: 12px !important;
        bottom: 84px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }
}
.chat-window-header {
    padding: 0.75rem 1rem !important;
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.chat-header-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer !important;
    padding: 0.3rem !important;
    border-radius: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}
.chat-header-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.chat-body-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background-color: #f8fafc !important;
}
html.dark .chat-body-container,
body.dark .chat-body-container,
.dark .chat-body-container {
    background-color: #0b1120 !important;
}
.chat-messages-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}
.chat-msg-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.chat-msg-row.is-mine {
    align-items: flex-start !important;
}
.chat-msg-row.is-other {
    align-items: flex-end !important;
}
.chat-msg-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-bottom: 0.25rem !important;
    padding: 0 0.25rem !important;
    font-size: 0.68rem !important;
}
.chat-bubble-mine {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: 1rem 0.2rem 1rem 1rem !important;
    font-size: 0.78rem !important;
    line-height: 1.65 !important;
    max-width: 85% !important;
    word-break: break-word !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
}
.chat-bubble-other {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: 0.2rem 1rem 1rem 1rem !important;
    font-size: 0.78rem !important;
    line-height: 1.65 !important;
    max-width: 85% !important;
    word-break: break-word !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.dark .chat-bubble-other,
body.dark .chat-bubble-other,
.dark .chat-bubble-other {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.chat-composer-bar {
    padding: 0.65rem 0.85rem !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
html.dark .chat-composer-bar,
body.dark .chat-composer-bar,
.dark .chat-composer-bar {
    background-color: #0f172a !important;
    border-top-color: #1e293b !important;
}
.chat-input-field {
    flex: 1 1 auto !important;
    font-size: 0.78rem !important;
    border-radius: 0.65rem !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    padding: 0.5rem 0.75rem !important;
    color: #0f172a !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}
html.dark .chat-input-field,
body.dark .chat-input-field,
.dark .chat-input-field {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
.chat-input-field:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
.chat-send-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 0.65rem !important;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: opacity 0.15s ease !important;
}
.chat-send-btn:hover {
    opacity: 0.95 !important;
}
.chat-send-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
.chat-search-bar {
    padding: 0.65rem 0.85rem !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
html.dark .chat-search-bar,
body.dark .chat-search-bar,
.dark .chat-search-bar {
    background-color: #0f172a !important;
    border-bottom-color: #1e293b !important;
}
.chat-roster-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0.65rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
.chat-section-header {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #64748b !important;
    padding: 0.25rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    letter-spacing: 0.02em !important;
}
html.dark .chat-section-header,
body.dark .chat-section-header,
.dark .chat-section-header {
    color: #94a3b8 !important;
}
.chat-room-item-btn {
    width: 100% !important;
    text-align: right !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 0.65rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    color: #334155 !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}
html.dark .chat-room-item-btn,
body.dark .chat-room-item-btn,
.dark .chat-room-item-btn {
    color: #cbd5e1 !important;
}
.chat-room-item-btn:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html.dark .chat-room-item-btn:hover,
body.dark .chat-room-item-btn:hover,
.dark .chat-room-item-btn:hover {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
.chat-room-item-btn.is-active {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
    font-weight: 700 !important;
}
html.dark .chat-room-item-btn.is-active,
body.dark .chat-room-item-btn.is-active,
.dark .chat-room-item-btn.is-active {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    color: #ffffff !important;
}
.chat-unread-pill {
    padding: 0.15rem 0.45rem !important;
    border-radius: 9999px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}
.chat-start-direct-btn {
    padding: 0.3rem 0.65rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    flex-shrink: 0 !important;
}
html.dark .chat-start-direct-btn,
body.dark .chat-start-direct-btn,
.dark .chat-start-direct-btn {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #c7d2fe !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}
.chat-start-direct-btn:hover {
    background: #4f46e5 !important;
    color: #ffffff !important;
}