/* =========================================================
   تم سراسری سامانه
   ========================================================= */

:root {
    --theme-primary: #1B5E86;
    --theme-primary-dark: #123F5C;
    --theme-primary-soft: #E8F1F8;
    --theme-page-bg: #f4f6f8;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f8fafc;
    --theme-border: #e2e8f0;
    --theme-text: #263238;
    --theme-muted: #718096;
    --theme-sidebar: #101B2C;
    --theme-sidebar-deep: #0A121E;
    --theme-sidebar-text: #dbe5f3;
    --theme-sidebar-muted: #8fa2bd;
    --theme-focus: rgba(27, 94, 134, .20);
    --theme-danger: #c0392b;
    --theme-danger-soft: #fdecea;
    --theme-shadow: 0 10px 28px rgba(31, 49, 74, .08);

    /* هماهنگ‌سازی رنگ برند با کلاس‌های آماده‌ی بوت‌استرپ
       (btn-primary خام، spinner، text-primary/bg-primary/border-primary،
       چک‌باکس‌ها، لینک‌ها) که تا این‌جا رنگ آبی پیش‌فرض بوت‌استرپ را
       نشان می‌دادند و از سیستم رنگ داخلی پروژه پیروی نمی‌کردند. */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: 27, 94, 134;
    --bs-link-color: var(--theme-primary);
    --bs-link-color-rgb: 27, 94, 134;
    --bs-link-hover-color: var(--theme-primary-dark);
    --bs-link-hover-color-rgb: 18, 63, 92;
}

body[data-theme="green"] {
    --theme-primary: #1f8a70;
    --theme-primary-dark: #14634f;
    --theme-primary-soft: #e8f7f2;
    --theme-page-bg: #f1f7f4;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f6fbf9;
    --theme-border: #d8e9e2;
    --theme-text: #20352f;
    --theme-muted: #6d8179;
    --theme-sidebar: #12362f;
    --theme-sidebar-deep: #0c2621;
    --theme-sidebar-text: #def1eb;
    --theme-sidebar-muted: #8ab9aa;
    --theme-focus: rgba(31, 138, 112, .18);
    --theme-danger: #b33a3a;
    --theme-danger-soft: #fdeeee;
}

body[data-theme="purple"] {
    --theme-primary: #7652b8;
    --theme-primary-dark: #57378f;
    --theme-primary-soft: #f1ecfb;
    --theme-page-bg: #f6f4fa;
    --theme-surface: #ffffff;
    --theme-surface-soft: #faf9fd;
    --theme-border: #e4dff1;
    --theme-text: #302943;
    --theme-muted: #7a728c;
    --theme-sidebar: #2c2345;
    --theme-sidebar-deep: #1d1730;
    --theme-sidebar-text: #eee8fb;
    --theme-sidebar-muted: #b6a9d2;
    --theme-focus: rgba(118, 82, 184, .18);
    --theme-danger: #b54766;
    --theme-danger-soft: #fcecf1;
}

body[data-theme="slate"] {
    --theme-primary: #486581;
    --theme-primary-dark: #334e68;
    --theme-primary-soft: #eaf0f5;
    --theme-page-bg: #f3f6f8;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f7f9fb;
    --theme-border: #d9e2ec;
    --theme-text: #243b53;
    --theme-muted: #627d98;
    --theme-sidebar: #243b53;
    --theme-sidebar-deep: #102a43;
    --theme-sidebar-text: #f0f4f8;
    --theme-sidebar-muted: #9fb3c8;
    --theme-focus: rgba(72, 101, 129, .2);
    --theme-danger: #b83232;
    --theme-danger-soft: #fdecec;
}

body[data-theme="amber"] {
    --theme-primary: #b7791f;
    --theme-primary-dark: #8c5b14;
    --theme-primary-soft: #fff6df;
    --theme-page-bg: #faf8f3;
    --theme-surface: #ffffff;
    --theme-surface-soft: #fdfaf2;
    --theme-border: #eadfca;
    --theme-text: #433a2d;
    --theme-muted: #847565;
    --theme-sidebar: #43372a;
    --theme-sidebar-deep: #2d241b;
    --theme-sidebar-text: #fff8e8;
    --theme-sidebar-muted: #cfbea2;
    --theme-focus: rgba(183, 121, 31, .2);
    --theme-danger: #b33a3a;
    --theme-danger-soft: #fdeeee;
}

body[data-theme="rose"] {
    --theme-primary: #b64c6d;
    --theme-primary-dark: #8e3653;
    --theme-primary-soft: #fbeef2;
    --theme-page-bg: #faf5f7;
    --theme-surface: #ffffff;
    --theme-surface-soft: #fdf8fa;
    --theme-border: #ecdce2;
    --theme-text: #49323b;
    --theme-muted: #806b74;
    --theme-sidebar: #4a2935;
    --theme-sidebar-deep: #301b23;
    --theme-sidebar-text: #fff0f5;
    --theme-sidebar-muted: #d2a9b8;
    --theme-focus: rgba(182, 76, 109, .2);
    --theme-danger: #c03434;
    --theme-danger-soft: #fdecec;
}

body[data-theme="dark"] {
    --theme-primary: #62a8ed;
    --theme-primary-dark: #3f82c3;
    --theme-primary-soft: #203b58;
    --theme-page-bg: #101827;
    --theme-surface: #182235;
    --theme-surface-soft: #202d42;
    --theme-border: #35445b;
    --theme-text: #eaf1fa;
    --theme-muted: #a7b6ca;
    --theme-sidebar: #0d1524;
    --theme-sidebar-deep: #080e19;
    --theme-sidebar-text: #e4edf8;
    --theme-sidebar-muted: #94a9c2;
    --theme-focus: rgba(98, 168, 237, .25);
    --theme-danger: #ff8d8d;
    --theme-danger-soft: #482631;
    --theme-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: 98, 168, 237;
    --bs-link-color: var(--theme-primary);
    --bs-link-color-rgb: 98, 168, 237;
    --bs-link-hover-color: var(--theme-primary-dark);
    --bs-link-hover-color-rgb: 63, 130, 195;
}

html,
body {
    min-height: 100%;
    background: var(--theme-page-bg);
    color: var(--theme-text);
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    --app-sidebar-bg: var(--theme-sidebar);
    --app-sidebar-bg-deep: var(--theme-sidebar-deep);
    --app-sidebar-text: var(--theme-sidebar-text);
    --app-sidebar-muted: var(--theme-sidebar-muted);
    --app-sidebar-active: var(--theme-primary);
}

body,
body .app-shell,
body .app-content,
body .app-main,
body .app-layout {
    background-color: var(--theme-page-bg);
    color: var(--theme-text);
}

body .app-sidebar {
    color: var(--theme-sidebar-text);
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--theme-primary) 28%, transparent), transparent 33%),
        linear-gradient(180deg, var(--theme-sidebar) 0%, var(--theme-sidebar-deep) 100%);
}

body .app-sidebar-user {
    color: var(--theme-sidebar-text);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
}

body .app-brand-icon {
    background: linear-gradient(
        145deg,
        var(--theme-primary),
        var(--theme-primary-dark)
    );
}

body .app-nav-link.active {
    background: linear-gradient(
        270deg,
        color-mix(in srgb, var(--theme-primary) 96%, white),
        color-mix(in srgb, var(--theme-primary-dark) 92%, white)
    );
}

body .app-nav-link.active::before {
    background: var(--theme-primary);
}

body .app-topbar {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    border-bottom-color: var(--theme-border);
    box-shadow: 0 3px 16px rgba(31, 49, 74, .06);
}

body .app-topbar-title span,
body .app-account-link,
body .page-title,
body .page-header-title,
body .list-title,
body .section-title,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--theme-text);
}

body .app-topbar-title small,
body .page-subtitle,
body .text-muted,
body .muted,
body small.text-muted {
    color: var(--theme-muted) !important;
}

body .app-account-link:hover,
body .app-menu-button {
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
}

body .app-account-link i {
    color: var(--theme-primary);
}

body .app-topbar-logout-form {
    margin: 0;
}

body .app-topbar-logout {
    appearance: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

body .app-topbar-logout i {
    color: var(--theme-danger);
}

body .app-topbar-logout:hover {
    color: var(--theme-danger);
    background: var(--theme-danger-soft);
}

/* انتخاب تم */

body .app-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
}

body .app-theme-picker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 5px 8px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    direction: rtl;
    white-space: nowrap;
}

body .app-theme-picker-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 25px;
    margin: 0;
    padding-left: 8px;
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-left: 1px solid var(--theme-border);
}

body .app-theme-swatch {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--theme-surface);
    border-radius: 50%;
    cursor: pointer;
    outline: 1px solid var(--theme-border);
    outline-offset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body .app-theme-swatch:hover {
    transform: scale(1.13);
}

body .app-theme-swatch:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 3px;
}

body .app-theme-swatch[aria-pressed="true"] {
    border-color: var(--theme-surface);
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
}

.app-theme-swatch-blue {
    background: #1B5E86;
}

.app-theme-swatch-green {
    background: #1f8a70;
}

.app-theme-swatch-purple {
    background: #7652b8;
}

.app-theme-swatch-slate {
    background: #486581;
}

.app-theme-swatch-amber {
    background: #b7791f;
}

.app-theme-swatch-rose {
    background: #b64c6d;
}

.app-theme-swatch-dark {
    background: #101827;
}

/* سطوح مشترک صفحات */

body .page-header,
body .customer-card,
body .orders-card,
body .section-card,
body .formula-card,
body .info-card,
body .production-card,
body .production-batch-editor,
body .account-page-card,
body .account-manage-card,
body .admin-card,
body .search-card {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

body .page-header,
body .customer-card,
body .orders-card,
body .section-card,
body .formula-card,
body .info-card,
body .production-card,
body .production-batch-editor,
body .account-page-card,
body .account-manage-card,
body .admin-card,
body .search-card {
    border-radius: 14px;
}

body .customer-card-header,
body .orders-card-header,
body .orders-section-header,
body .section-header,
body .production-editor-section-title {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

body .section-header-primary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    color: #fff;
}

body .section-header-primary * {
    color: inherit;
}

body .form-label,
body .form-field > label,
body .production-label,
body .account-page-shell label,
body .admin-page label,
body .search-page label {
    color: var(--theme-text);
}

body .form-control,
body .form-select,
body textarea.form-control,
body input.form-control,
body select.form-select,
body .production-input,
body .production-select,
body .production-textarea {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

body .form-control::placeholder,
body .form-select::placeholder,
body .production-input::placeholder,
body .production-textarea::placeholder {
    color: var(--theme-muted);
}

body .form-control:focus,
body .form-select:focus,
body .production-input:focus,
body .production-select:focus,
body .production-textarea:focus {
    color: var(--theme-text);
    background-color: var(--theme-surface);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .2rem var(--theme-focus);
}

body .input-group-text {
    color: var(--theme-primary-dark);
  
    border:none ;
}

body .btn-primary,
body .btn-new-customer,
body .orders-new-button,
body .btn-primary-custom {
    color: #fff;
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

body .btn-primary:hover,
body .btn-new-customer:hover,
body .orders-new-button:hover,
body .btn-primary-custom:hover {
    color: #fff;
    background-color: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
}

body .btn-outline-primary {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

body .btn-outline-primary:hover {
    color: #fff;
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* دکمه‌ی خام btn-primary (بدون کلاس اختصاصی صفحه) در سراسر سایت
   زیاد استفاده شده (جستجو، فیلترها، دکمه‌های ثبت) و قبلاً آبی
   پیش‌فرض بوت‌استرپ را نشان می‌داد؛ این‌جا با رنگ برند هماهنگ می‌شود. */
body .btn-primary {
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: var(--theme-primary-dark);
    --bs-btn-hover-border-color: var(--theme-primary-dark);
    --bs-btn-active-bg: var(--theme-primary-dark);
    --bs-btn-active-border-color: var(--theme-primary-dark);
    --bs-btn-disabled-bg: var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

body .form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

body .form-check-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .25rem var(--theme-focus);
}

body .table,
body .table > :not(caption) > * > * {
    color: var(--theme-text);
    border-color: var(--theme-border);
}

body .table thead th,
body .customer-table thead th,
body .orders-table thead th,
body .formula-table thead th,
body .production-table thead th {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

body .table tbody tr:hover > *,
body .customer-table tbody tr:hover td,
body .orders-table tbody tr:hover td,
body .formula-table tbody tr:hover td,
body .production-table tbody tr:hover td {
    background-color: var(--theme-primary-soft);
}

body .border-top,
body .border-bottom {
    border-color: var(--theme-border) !important;
}

body .alert-info {
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border-color: var(--theme-border);
}

/* صفحات حساب کاربری و مدیریت حساب */

.account-page-shell {
    min-height: calc(100vh - var(--app-topbar-height));
    padding: 32px clamp(16px, 4vw, 48px);
    color: var(--theme-text);
}

.account-page-container {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.account-page-shell > h1,
.account-page-shell > h2,
.account-page-shell h1,
.account-page-shell h2 {
    margin-bottom: 22px;
    color: var(--theme-text);
    font-weight: 800;
}

.account-page-shell hr {
    border-color: var(--theme-border);
    opacity: 1;
}

.account-page-shell .account-manage-layout {
    padding: 24px;
}

.account-manage-nav {
    padding: 10px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.account-manage-nav .nav-link {
    margin-bottom: 4px;
    color: var(--theme-muted);
    border-radius: 9px;
    font-size: 13px;
}

.account-manage-nav .nav-link:hover,
.account-manage-nav .nav-link.active {
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
}

.account-manage-content {
    min-width: 0;
    padding: 24px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

body .account-page-shell .form-control,
body .account-page-shell .form-select {
    min-height: 42px;
}

.readonly-multiline {
    min-height: 80px;
    height: auto;
    white-space: pre-wrap;
}

.inline-account-form {
    display: inline-block;
}

body .progress-bar[data-progress] {
    width: 0;
}

/* جست‌وجوی قلم سفارش */

.search-page {
    color: var(--theme-text);
}

.search-card-header,
.search-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--theme-surface-soft);
    border-bottom: 1px solid var(--theme-border);
}

.search-card {
    overflow: hidden;
}

.search-card-header h5,
.search-result-header h5 {
    color: var(--theme-text);
    font-weight: 800;
}

.search-empty-state {
    padding: 54px 24px;
    text-align: center;
}

.search-empty-state > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 16px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 50%;
    font-size: 28px;
}

.search-empty-state h5 {
    color: var(--theme-text);
    font-weight: 800;
}

.search-results-summary,
.search-approved-note {
    padding: 12px 16px;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.search-result-card {
    overflow: hidden;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.search-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 12px;
    font-size: 21px;
}

.search-result-meta {
    color: var(--theme-muted);
    font-size: 12px;
}

.search-result-meta strong {
    color: var(--theme-primary-dark);
}

.search-summary-field,
.search-sample-value {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 64px;
    padding: 12px 14px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
}

.search-summary-field span,
.search-sample-value span {
    color: var(--theme-muted);
    font-size: 11px;
}

.search-summary-field strong,
.search-sample-value strong {
    color: var(--theme-text);
    font-size: 13px;
}

.search-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.search-detail-box,
.search-formulas-box {
    padding: 16px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
}

.search-detail-title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 13px;
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 800;
}

.search-detail-title > i {
    color: var(--theme-primary);
}

.search-lot-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.search-lot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 9px;
    text-decoration: none;
}

.search-lot-item:hover {
    color: var(--theme-primary-dark);
    border-color: var(--theme-primary);
    background: var(--theme-primary-soft);
}

.search-lot-item span:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-lot-item small {
    color: var(--theme-muted);
    font-size: 10px;
}

.search-sample-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.search-formulas-box {
    background: var(--theme-surface);
}

.search-formula-card {
    padding: 14px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
}

.search-formula-header,
.search-formula-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.search-formula-header {
    color: var(--theme-text);
    font-size: 13px;
}

.search-formula-info {
    margin-top: 10px;
    color: var(--theme-muted);
    font-size: 11px;
}

.search-formula-info strong {
    color: var(--theme-text);
}

.search-formula-table {
    background: var(--theme-surface);
}

/* =========================================================
   لیست درختی اقلام سفارش (سفارش ← قلم ← LOT/فرمول)
   ========================================================= */

.oi-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oi-tree-order {
    overflow: hidden;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.oi-tree-order-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    background: var(--theme-surface-soft);
    transition: background-color .15s ease;
}

.oi-tree-order-header:hover {
    background: var(--theme-primary-soft);
}

.oi-tree-caret {
    flex: 0 0 auto;
    color: var(--theme-muted);
    font-size: 13px;
}

.oi-tree-icon {
    flex: 0 0 auto;
    color: var(--theme-primary);
}

.oi-tree-order-number {
    font-weight: 800;
    color: var(--theme-text);
}

.oi-tree-order-customer,
.oi-tree-order-date {
    display: flex;
    align-items: center;
    color: var(--theme-muted);
    font-size: 12.5px;
}

.oi-tree-count {
    font-size: 11px;
    font-weight: 700;
}

.oi-tree-order-link {
    margin-inline-start: auto;
}

.oi-tree-items {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--theme-border);
}

.oi-tree-item {
    overflow: hidden;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 11px;
}

.oi-tree-item-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}

.oi-tree-item-header:hover {
    background: var(--theme-primary-soft);
}

.oi-tree-item-code {
    font-weight: 700;
    color: var(--theme-primary-dark);
    font-size: 12.5px;
}

.oi-tree-item-name {
    color: var(--theme-text);
    font-size: 13px;
}

.oi-tree-item-qty {
    margin-inline-start: auto;
    color: var(--theme-muted);
    font-size: 12px;
}

.oi-tree-lot-count {
    font-weight: 600;
    font-size: 10.5px;
}

.oi-tree-item-details {
    padding: 16px;
    background: var(--theme-surface);
    border-top: 1px dashed var(--theme-border);
}

/* پنل مدیریت */

.admin-page {
    color: var(--theme-text);
}

.admin-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 112px;
    padding: 20px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
}

.admin-stat-card small {
    display: block;
    margin-bottom: 7px;
    color: var(--theme-muted);
}

.admin-stat-card strong {
    color: var(--theme-text);
    font-size: 25px;
}

.admin-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 13px;
    font-size: 22px;
}

.admin-navigation-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 22px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    box-shadow: var(--theme-shadow);
    text-decoration: none;
}

.admin-navigation-card:hover {
    color: var(--theme-primary-dark);
    border-color: var(--theme-primary);
    transform: translateY(-2px);
}

.admin-navigation-card i {
    color: var(--theme-primary);
    font-size: 28px;
}

.admin-navigation-card strong {
    color: var(--theme-text);
    font-size: 15px;
}

.admin-navigation-card span {
    color: var(--theme-muted);
    font-size: 12px;
}

.admin-table td,
.admin-table th {
    vertical-align: middle;
}

.admin-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px;
    padding: 4px 8px;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    font-size: 10px;
}

.admin-permission-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--theme-border);
}

.admin-permission-row:last-child {
    border-bottom: 0;
}

.admin-permission-row p {
    margin: 4px 0 0;
    color: var(--theme-muted);
    font-size: 11px;
}

.admin-permission-row .form-check-input {
    width: 2.5em;
    height: 1.35em;
    float: none;
    margin: 0;
}

.admin-page .form-control,
.admin-page .form-select {
    min-height: 40px;
}

/* پیام‌رسان داخلی */

.messaging-page {
    color: var(--theme-text);
}

.messaging-shell {
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    min-height: 680px;
    overflow: hidden;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    box-shadow: var(--theme-shadow);
}

.messaging-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--theme-surface-soft);
    border-left: 1px solid var(--theme-border);
}

.messaging-sidebar-header {
    padding: 18px;
    border-bottom: 1px solid var(--theme-border);
}

.messaging-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: var(--theme-text);
    font-size: 15px;
}

.messaging-sidebar-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border-radius: 999px;
    font-size: 11px;
}

.messaging-user-search-box {
    display: flex;
    gap: 7px;
}

.messaging-user-search-box .form-control {
    min-width: 0;
}

.messaging-user-search-box .btn {
    flex: 0 0 42px;
}

.messaging-section-caption {
    padding: 13px 18px 7px;
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 800;
}

.messaging-user-results {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-border);
}

.messaging-user-result,
.messaging-conversation {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    color: var(--theme-text);
    background: transparent;
    border: 0;
    text-align: right;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.messaging-user-result:hover,
.messaging-conversation:hover,
.messaging-conversation.active {
    background: var(--theme-primary-soft);
}

.messaging-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border: 1px solid var(--theme-border);
    border-radius: 50%;
    font-size: 17px;
}

.messaging-avatar-large {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 20px;
}

.messaging-user-result-text,
.messaging-conversation-text {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.messaging-user-result-text strong,
.messaging-conversation-text strong {
    overflow: hidden;
    color: var(--theme-text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-user-result-text small,
.messaging-conversation-text small {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-user-result > i,
.messaging-conversation > i {
    color: var(--theme-muted);
    font-size: 12px;
}

.messaging-conversation-list {
    min-height: 0;
    overflow-y: auto;
}

.messaging-conversation {
    position: relative;
    min-height: 70px;
}

.messaging-conversation.active {
    box-shadow: inset -3px 0 0 var(--theme-primary);
}

.messaging-conversation-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.messaging-conversation-name b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    color: #fff;
    background: var(--theme-primary);
    border-radius: 999px;
    font-size: 10px;
}

.messaging-conversation time {
    align-self: flex-start;
    flex: 0 0 auto;
    color: var(--theme-muted);
    font-size: 9px;
}

.messaging-empty-list,
.messaging-empty-chat,
.messaging-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-muted);
    text-align: center;
}

.messaging-empty-list {
    min-height: 180px;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    font-size: 11px;
}

.messaging-empty-list i {
    color: var(--theme-primary);
    font-size: 30px;
}

.messaging-chat {
    display: flex;
    min-width: 0;
    min-height: 680px;
    flex-direction: column;
    background: var(--theme-surface);
}

.messaging-welcome {
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 40px;
}

.messaging-welcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 28px;
    font-size: 42px;
}

.messaging-welcome h2 {
    margin: 5px 0 0;
    color: var(--theme-text);
    font-size: 21px;
}

.messaging-welcome p {
    max-width: 430px;
    margin: 0;
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 2;
}

.messaging-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--theme-border);
}

.messaging-chat-header strong,
.messaging-chat-header small {
    display: block;
}

.messaging-chat-header strong {
    color: var(--theme-text);
    font-size: 14px;
}

.messaging-chat-header small {
    margin-top: 4px;
    color: var(--theme-muted);
    font-size: 10px;
}

.messaging-messages {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 22px clamp(14px, 3vw, 34px);
    background:
        radial-gradient(circle at 100% 0%, var(--theme-primary-soft), transparent 32%),
        var(--theme-page-bg);
}

.messaging-message {
    position: relative;
    max-width: min(76%, 640px);
    padding: 11px 14px 9px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 15px 15px 15px 4px;
    box-shadow: 0 4px 12px rgba(31, 49, 74, .05);
}

.messaging-message.mine {
    align-self: flex-start;
    color: var(--theme-text);
    background: var(--theme-primary-soft);
    border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-border));
    border-radius: 15px 15px 4px 15px;
}

.messaging-message.theirs {
    align-self: flex-end;
}

.messaging-message-author {
    margin-bottom: 5px;
    color: var(--theme-primary-dark);
    font-size: 10px;
    font-weight: 800;
}

.messaging-message-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.messaging-message-time {
    display: block;
    margin-top: 7px;
    color: var(--theme-muted);
    font-size: 9px;
    text-align: left;
}

.messaging-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.messaging-image-attachment,
.messaging-file-attachment {
    display: flex;
    overflow: hidden;
    color: var(--theme-text);
    background: color-mix(in srgb, var(--theme-surface) 80%, var(--theme-primary-soft));
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    text-decoration: none;
}

.messaging-image-attachment {
    position: relative;
    min-height: 100px;
    flex-direction: column;
}

.messaging-image-attachment img {
    width: 100%;
    height: 105px;
    object-fit: cover;
}

.messaging-image-attachment span {
    overflow: hidden;
    padding: 6px 8px;
    color: var(--theme-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-file-attachment {
    align-items: center;
    gap: 8px;
    padding: 9px;
}

.messaging-file-attachment > i:first-child {
    color: var(--theme-primary);
    font-size: 22px;
}

.messaging-file-attachment > i:last-child {
    margin-right: auto;
    color: var(--theme-muted);
}

.messaging-file-attachment span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.messaging-file-attachment strong,
.messaging-file-attachment small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-file-attachment strong {
    font-size: 10px;
}

.messaging-file-attachment small {
    color: var(--theme-muted);
    font-size: 9px;
}

/* =========================================================
   نامه اداری (اتوماسیون: امضا / تایید / رد)
   ========================================================= */

.messaging-letter {
    align-self: stretch;
    max-width: min(92%, 720px);
    padding: 16px 18px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-top: 3px solid var(--theme-muted);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(31, 49, 74, .06);
}

.messaging-letter.mine {
    align-self: flex-start;
}

.messaging-letter.theirs {
    align-self: flex-end;
}

.messaging-letter.status-pending {
    border-top-color: #d9a441;
}

.messaging-letter.status-approved {
    border-top-color: #2f9e63;
}

.messaging-letter.status-rejected {
    border-top-color: #d9534f;
}

.messaging-letter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.messaging-letter-header > i {
    color: var(--theme-primary);
}

.messaging-letter-title {
    font-weight: 800;
    font-size: 11px;
    color: var(--theme-muted);
}

.messaging-letter-header .badge {
    margin-inline-start: auto;
}

.messaging-letter-subject {
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 800;
}

.messaging-letter-body {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.messaging-letter-meta {
    display: flex;
    justify-content: space-between;
    color: var(--theme-muted);
    font-size: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--theme-border);
}

.messaging-letter-decision {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 11.5px;
}

.messaging-letter-decision.approved {
    color: #1e6b45;
    background: rgba(47, 158, 99, .12);
}

.messaging-letter-decision.rejected {
    color: #a83a37;
    background: rgba(217, 83, 79, .12);
}

.messaging-letter-signature,
.messaging-letter-reason {
    margin-top: 4px;
}

.messaging-letter-waiting {
    margin-top: 10px;
    color: var(--theme-muted);
    font-size: 11px;
}

.messaging-letter-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.messaging-letter-decision-form {
    margin-top: 12px;
    padding: 12px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 9px;
}

.messaging-letter-decision-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--theme-muted);
}

.messaging-compose-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.messaging-compose-mode-toggle button {
    flex: 1 1 0;
    padding: 7px 10px;
    color: var(--theme-muted);
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    transition: all .15s ease;
}

.messaging-compose-mode-toggle button.active {
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-border));
}

.messaging-letter-subject-input {
    margin-bottom: 8px;
}

.messaging-composer {
    padding: 14px 18px 16px;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
}

.messaging-message-input {
    resize: vertical;
    min-height: 78px;
}

.messaging-selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.messaging-selected-file {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    padding: 6px 9px;
    background: var(--theme-surface-soft);
    border: 1px solid var(--theme-border);
    border-radius: 9px;
}

.messaging-selected-file > i {
    color: var(--theme-primary);
}

.messaging-selected-file span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.messaging-selected-file strong,
.messaging-selected-file small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messaging-selected-file strong {
    font-size: 10px;
}

.messaging-selected-file small {
    color: var(--theme-muted);
    font-size: 9px;
}

.messaging-composer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
}

.messaging-file-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 10px;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-soft);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.messaging-file-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.messaging-composer-actions > small {
    color: var(--theme-muted);
    font-size: 9px;
}

.messaging-send-button {
    margin-right: auto;
}

body[data-theme="dark"] .messaging-message {
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

/* حالت تاریک: کنترل‌ها و پیام‌های Bootstrap */

body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .list-group-item,
body[data-theme="dark"] .card,
body[data-theme="dark"] .bg-white {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border);
}

body[data-theme="dark"] .btn-light,
body[data-theme="dark"] .btn-outline-secondary {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

body[data-theme="dark"] .btn-light:hover,
body[data-theme="dark"] .btn-outline-secondary:hover {
    color: var(--theme-text);
    background-color: var(--theme-border);
}

body[data-theme="dark"] .text-dark {
    color: var(--theme-text) !important;
}

@media (max-width: 767.98px) {
    body .app-topbar {
        gap: 8px;
    }

    body .app-topbar-start {
        min-width: 0;
        flex: 1 1 auto;
    }

    body .app-topbar-title {
        min-width: 0;
    }

    body .app-topbar-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body .app-topbar-actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    body .app-theme-picker {
        gap: 6px;
        min-height: 38px;
        padding-inline: 6px;
    }

    body .app-theme-picker-label {
        display: none;
    }

    body .app-theme-swatch {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }

    .account-page-shell {
        padding: 20px 12px;
    }

    .account-manage-content,
    .account-page-shell .account-manage-layout {
        padding: 16px;
    }

    .search-card-header,
    .search-result-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-detail-grid,
    .search-sample-grid {
        grid-template-columns: 1fr;
    }

    .messaging-shell {
        grid-template-columns: 1fr;
    }

    .messaging-sidebar {
        max-height: 390px;
        border-left: 0;
        border-bottom: 1px solid var(--theme-border);
    }

    .messaging-chat,
    .messaging-shell {
        min-height: 0;
    }

    .messaging-chat {
        min-height: 620px;
    }

    .messaging-message {
        max-width: 88%;
    }

    .messaging-composer-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .messaging-send-button {
        width: 100%;
        margin-right: 0;
    }
}

/* =========================================================
   پوشش کامل سطوح در تم تاریک
   این بخش بعد از CSS اختصاصی صفحات قرار دارد تا رنگ‌های ثابت
   فایل‌های قدیمی صفحات، تم انتخاب‌شده را خنثی نکنند.
   ========================================================= */

body[data-theme="dark"] {
    color-scheme: dark;
}

body[data-theme="dark"] .app-main,
body[data-theme="dark"] .formulas-page,
body[data-theme="dark"] .formula-create-page,
body[data-theme="dark"] .formula-details-page,
body[data-theme="dark"] .formula-edit-page,
body[data-theme="dark"] .customer-page,
body[data-theme="dark"] .customer-create-page,
body[data-theme="dark"] .orders-page,
body[data-theme="dark"] .order-create-page,
body[data-theme="dark"] .order-edit-page,
body[data-theme="dark"] .production-page,
body[data-theme="dark"] .search-page,
body[data-theme="dark"] .admin-page {
    color: var(--theme-text);
    background-color: var(--theme-page-bg);
}

/* کارت‌ها و پنل‌های اصلی */

body[data-theme="dark"] .app-main .card,
body[data-theme="dark"] .page-header,
body[data-theme="dark"] .filter-card,
body[data-theme="dark"] .results-bar,
body[data-theme="dark"] .section-card,
body[data-theme="dark"] .action-panel,
body[data-theme="dark"] .formula-card,
body[data-theme="dark"] .customer-card,
body[data-theme="dark"] .orders-card,
body[data-theme="dark"] .order-detail-stat,
body[data-theme="dark"] .order-stat-card,
body[data-theme="dark"] .production-card,
body[data-theme="dark"] .production-stat-card,
body[data-theme="dark"] .production-batch-editor,
body[data-theme="dark"] .production-editor-section,
body[data-theme="dark"] .materials-card,
body[data-theme="dark"] .order-item-card,
body[data-theme="dark"] .production-material-card,
body[data-theme="dark"] .production-delete-card,
body[data-theme="dark"] .customer-delete-info,
body[data-theme="dark"] .delete-info-item,
body[data-theme="dark"] .orders-details-loading,
body[data-theme="dark"] .search-card,
body[data-theme="dark"] .search-result-card,
body[data-theme="dark"] .admin-card,
body[data-theme="dark"] .admin-navigation-card {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow);
}

body[data-theme="dark"] .app-main .card-body,
body[data-theme="dark"] .app-main .card-footer,
body[data-theme="dark"] .customer-card-footer,
body[data-theme="dark"] .orders-card-footer {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .app-main .card-header,
body[data-theme="dark"] .customer-card-header,
body[data-theme="dark"] .orders-card-header,
body[data-theme="dark"] .orders-section-header,
body[data-theme="dark"] .production-editor-section-title,
body[data-theme="dark"] .search-card-header,
body[data-theme="dark"] .search-result-header {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

/* فرم‌های فرمول: هماهنگی کنترل‌های اختصاصی با تم تاریک */
body[data-theme="dark"] .formula-create-page .form-field,
body[data-theme="dark"] .formula-edit-page .form-field,
body[data-theme="dark"] .formula-create-page .section-body,
body[data-theme="dark"] .formula-edit-page .section-body,
body[data-theme="dark"] .formula-create-page .formula-info,
body[data-theme="dark"] .formula-edit-page .formula-info {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-create-page .form-control,
body[data-theme="dark"] .formula-edit-page .form-control,
body[data-theme="dark"] .formula-create-page .weight-unit-select,
body[data-theme="dark"] .formula-edit-page .weight-unit-select,
body[data-theme="dark"] .formula-create-page textarea,
body[data-theme="dark"] .formula-edit-page textarea {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-create-page .formula-table,
body[data-theme="dark"] .formula-edit-page .formula-table,
body[data-theme="dark"] .formula-create-page .formula-table th,
body[data-theme="dark"] .formula-edit-page .formula-table th,
body[data-theme="dark"] .formula-create-page .formula-table td,
body[data-theme="dark"] .formula-edit-page .formula-table td {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-create-page .formula-table th,
body[data-theme="dark"] .formula-edit-page .formula-table th {
    background-color: var(--theme-surface-soft) !important;
}

body[data-theme="dark"] .page-header h1,
body[data-theme="dark"] .page-header h2,
body[data-theme="dark"] .page-header h3,
body[data-theme="dark"] .page-header h4,
body[data-theme="dark"] .page-title,
body[data-theme="dark"] .list-title,
body[data-theme="dark"] .section-title,
body[data-theme="dark"] .action-panel-title,
body[data-theme="dark"] .stat-title,
body[data-theme="dark"] .order-product-summary,
body[data-theme="dark"] .order-item-product-name,
body[data-theme="dark"] .production-product-name,
body[data-theme="dark"] .admin-navigation-card strong {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .page-subtitle,
body[data-theme="dark"] .list-count,
body[data-theme="dark"] .stat-title,
body[data-theme="dark"] .stat-card small,
body[data-theme="dark"] .order-detail-stat-label,
body[data-theme="dark"] .production-stat-label,
body[data-theme="dark"] .production-muted-caption,
body[data-theme="dark"] .order-id-caption,
body[data-theme="dark"] .order-field span,
body[data-theme="dark"] .order-item-detail span,
body[data-theme="dark"] .admin-navigation-card span {
    color: var(--theme-muted) !important;
}

/* کنترل‌ها */

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .production-input,
body[data-theme="dark"] .production-select,
body[data-theme="dark"] .production-textarea,
body[data-theme="dark"] .compact-input,
body[data-theme="dark"] .compact-select,
body[data-theme="dark"] .customer-search,
body[data-theme="dark"] .readonly-field,
body[data-theme="dark"] .weight-unit-select,
body[data-theme="dark"] .orders-search-box input,
body[data-theme="dark"] .customer-page .search-box input {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .form-control::placeholder,
body[data-theme="dark"] .production-input::placeholder,
body[data-theme="dark"] .production-textarea::placeholder,
body[data-theme="dark"] .customer-search::placeholder,
body[data-theme="dark"] .customer-page .search-box input::placeholder {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus,
body[data-theme="dark"] .production-input:focus,
body[data-theme="dark"] .production-select:focus,
body[data-theme="dark"] .production-textarea:focus,
body[data-theme="dark"] .weight-unit-select:focus {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem var(--theme-focus) !important;
}

body[data-theme="dark"] .customer-search:focus {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem var(--theme-focus) !important;
}

body[data-theme="dark"] .customer-clear {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .customer-clear:hover {
    color: var(--theme-danger) !important;
}

.orders-page .orders-card,
.orders-page .orders-card-header,
.orders-page .orders-card-header .row {
    overflow: visible;
}

.orders-page .orders-card-header {
    position: relative;
    z-index: 30;
}

.orders-customer-filter .customer-search {
    min-height: 38px;
    padding-left: 34px;
}

.orders-customer-filter .customer-list {
    z-index: 1400;
    max-height: 280px;
}

body[data-theme="dark"] .form-label,
body[data-theme="dark"] .form-field label,
body[data-theme="dark"] .production-label,
body[data-theme="dark"] .field-hint,
body[data-theme="dark"] .form-text {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .input-group-text {
    color: var(--theme-text) !important;
    background-color: var(--theme-primary-soft) !important;
    border-color: var(--theme-border) !important;
}

/* فرمول‌ها: کارت، جدول و پنجرهٔ جزئیات */

body[data-theme="dark"] .formula-header,
body[data-theme="dark"] .formula-modal-header {
    color: #fff !important;
    background: linear-gradient(
        135deg,
        var(--theme-sidebar),
        var(--theme-sidebar-deep)
    ) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-header .formula-code,
body[data-theme="dark"] .formula-header .formula-color,
body[data-theme="dark"] .formula-header .formula-label,
body[data-theme="dark"] .formula-modal-header .formula-modal-title,
body[data-theme="dark"] .formula-modal-header .formula-modal-subtitle {
    color: #fff !important;
}

body[data-theme="dark"] .formula-header .formula-label,
body[data-theme="dark"] .formula-modal-header .formula-modal-subtitle {
    color: var(--theme-sidebar-text) !important;
}

body[data-theme="dark"] .formula-info,
body[data-theme="dark"] .formula-body,
body[data-theme="dark"] .formula-footer,
body[data-theme="dark"] .formula-material,
body[data-theme="dark"] .formula-title-box,
body[data-theme="dark"] .production-display,
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .formula-info-item,
body[data-theme="dark"] .audit-item,
body[data-theme="dark"] .order-field,
body[data-theme="dark"] .order-description,
body[data-theme="dark"] .order-item-card-header,
body[data-theme="dark"] .order-item-card-body,
body[data-theme="dark"] .order-item-detail,
body[data-theme="dark"] .order-formulas-box,
body[data-theme="dark"] .order-production-batches,
body[data-theme="dark"] .order-production-batch-row,
body[data-theme="dark"] .edit-order-items-note,
body[data-theme="dark"] .production-delete-summary > div,
body[data-theme="dark"] .production-empty-materials {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-info-row span,
body[data-theme="dark"] .formula-info-row strong,
body[data-theme="dark"] .materials-title,
body[data-theme="dark"] .material-name,
body[data-theme="dark"] .info-box strong,
body[data-theme="dark"] .formula-info-item > strong,
body[data-theme="dark"] .audit-item strong,
body[data-theme="dark"] .order-field a,
body[data-theme="dark"] .order-item-detail strong,
body[data-theme="dark"] .production-material-card-title {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .formula-info-row span,
body[data-theme="dark"] .formula-info-row i,
body[data-theme="dark"] .formula-info-row strong,
body[data-theme="dark"] .formula-info-item > span,
body[data-theme="dark"] .formula-info-item small,
body[data-theme="dark"] .audit-item span,
body[data-theme="dark"] .info-box small,
body[data-theme="dark"] .order-description-title,
body[data-theme="dark"] .weight-unit,
body[data-theme="dark"] .empty-value {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .formula-info-item.highlight,
body[data-theme="dark"] .primary-field,
body[data-theme="dark"] .percentage-readonly,
body[data-theme="dark"] .order-number-badge,
body[data-theme="dark"] .order-item-number,
body[data-theme="dark"] .production-lot-badge,
body[data-theme="dark"] .customer-code {
    color: var(--theme-primary) !important;
    background-color: var(--theme-primary-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-modal,
body[data-theme="dark"] .formula-modal-body,
body[data-theme="dark"] .formula-modal-footer,
body[data-theme="dark"] .modal-info-item,
body[data-theme="dark"] .modal-label-box,
body[data-theme="dark"] .modal-material-row,
body[data-theme="dark"] .modal-description-text,
body[data-theme="dark"] .modal-empty-material {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-modal-backdrop {
    background: rgba(0, 0, 0, .78) !important;
}

body[data-theme="dark"] .formula-modal-close {
    color: var(--theme-sidebar-text) !important;
}

body[data-theme="dark"] .modal-section-title,
body[data-theme="dark"] .modal-section-title > span,
body[data-theme="dark"] .modal-info-item span,
body[data-theme="dark"] .modal-info-item strong,
body[data-theme="dark"] .modal-description-text,
body[data-theme="dark"] .modal-material-row {
    color: var(--theme-text) !important;
}

/* جدول‌ها و ردیف‌های داخلی */

body[data-theme="dark"] .table,
body[data-theme="dark"] .formula-table,
body[data-theme="dark"] .materials-table,
body[data-theme="dark"] .orders-table,
body[data-theme="dark"] .order-item-table,
body[data-theme="dark"] .order-formulas-table,
body[data-theme="dark"] .production-table,
body[data-theme="dark"] .production-material-details-table,
body[data-theme="dark"] .search-formula-table {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .table > :not(caption) > * > *,
body[data-theme="dark"] .formula-table th,
body[data-theme="dark"] .formula-table td,
body[data-theme="dark"] .materials-table th,
body[data-theme="dark"] .materials-table td,
body[data-theme="dark"] .orders-table th,
body[data-theme="dark"] .orders-table td,
body[data-theme="dark"] .order-item-table th,
body[data-theme="dark"] .order-item-table td,
body[data-theme="dark"] .order-formulas-table th,
body[data-theme="dark"] .order-formulas-table td,
body[data-theme="dark"] .production-table th,
body[data-theme="dark"] .production-table td,
body[data-theme="dark"] .production-material-details-table th,
body[data-theme="dark"] .production-material-details-table td,
body[data-theme="dark"] .search-formula-table th,
body[data-theme="dark"] .search-formula-table td {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .table thead th,
body[data-theme="dark"] .formula-table thead th,
body[data-theme="dark"] .materials-table thead th,
body[data-theme="dark"] .orders-table thead th,
body[data-theme="dark"] .order-item-table thead th,
body[data-theme="dark"] .order-formulas-table thead th,
body[data-theme="dark"] .production-table thead th,
body[data-theme="dark"] .production-material-details-table thead th,
body[data-theme="dark"] .search-formula-table thead th,
body[data-theme="dark"] .formula-table tfoot th,
body[data-theme="dark"] .materials-table tfoot th {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
}

body[data-theme="dark"] .table tbody tr:hover > *,
body[data-theme="dark"] .formula-table tbody tr:hover td,
body[data-theme="dark"] .materials-table tbody tr:hover td,
body[data-theme="dark"] .orders-table tbody tr:hover td,
body[data-theme="dark"] .production-table tbody tr:hover td {
    background-color: var(--theme-primary-soft) !important;
}

body[data-theme="dark"] .order-progress,
body[data-theme="dark"] .progress {
    background-color: var(--theme-border) !important;
}

/* مشتریان، سفارش‌ها و تولید */

body[data-theme="dark"] .customer-page .page-header,
body[data-theme="dark"] .orders-page .page-header,
body[data-theme="dark"] .production-page .page-header {
    background: linear-gradient(
        135deg,
        var(--theme-surface),
        var(--theme-surface-soft)
    ) !important;
}

body[data-theme="dark"] .customer-page .customer-table thead th,
body[data-theme="dark"] .orders-page .orders-table thead th,
body[data-theme="dark"] .production-page .production-table thead th,
body[data-theme="dark"] .production-page .production-material-details-table thead th {
    color: var(--theme-muted) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .customer-page .customer-table tbody td,
body[data-theme="dark"] .orders-page .orders-table tbody td,
body[data-theme="dark"] .production-page .production-table tbody td,
body[data-theme="dark"] .production-page .production-material-details-table tbody td {
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .customer-page .customer-table tbody tr:hover,
body[data-theme="dark"] .orders-page .orders-table tbody tr:hover,
body[data-theme="dark"] .production-page .production-table tbody tr:hover {
    background-color: var(--theme-primary-soft) !important;
}

body[data-theme="dark"] .action-btn,
body[data-theme="dark"] .orders-action-button,
body[data-theme="dark"] .production-action-button,
body[data-theme="dark"] .move-btn {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .action-btn:hover,
body[data-theme="dark"] .orders-action-button:hover,
body[data-theme="dark"] .production-action-button:hover,
body[data-theme="dark"] .move-btn:hover:not(:disabled) {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

body[data-theme="dark"] .order-items-panel,
body[data-theme="dark"] .order-items-panel .order-item-card,
body[data-theme="dark"] .order-items-panel .order-item-card-body {
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .production-select,
body[data-theme="dark"] .production-batch-editor .persian-date-picker .shamsi-input {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .production-batch-editor .persian-date-picker .calendar-button {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

/* تقویم‌های شمسی و پنجره‌های انتخاب تاریخ */

body[data-theme="dark"] .persian-calendar,
body[data-theme="dark"] .calendar-popup,
body[data-theme="dark"] .date-picker-container,
body[data-theme="dark"] .calendar-header,
body[data-theme="dark"] .calendar-footer,
body[data-theme="dark"] .calendar-days,
body[data-theme="dark"] .calendar-weekdays {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .calendar-title,
body[data-theme="dark"] .calendar-weekday,
body[data-theme="dark"] .calendar-weekdays span {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .calendar-day,
body[data-theme="dark"] .calendar-nav-button,
body[data-theme="dark"] .calendar-today-button,
body[data-theme="dark"] .today-button {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .calendar-day:hover,
body[data-theme="dark"] .calendar-nav-button:hover,
body[data-theme="dark"] .calendar-today-button:hover,
body[data-theme="dark"] .today-button:hover,
body[data-theme="dark"] .calendar-day.selected,
body[data-theme="dark"] .calendar-day.today {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* وضعیت‌ها، پیام‌ها و حالت‌های خالی */

body[data-theme="dark"] .empty-box,
body[data-theme="dark"] .empty-materials,
body[data-theme="dark"] .not-found-box,
body[data-theme="dark"] .loading-box,
body[data-theme="dark"] .orders-empty-state,
body[data-theme="dark"] .orders-loading-state,
body[data-theme="dark"] .production-empty-state,
body[data-theme="dark"] .customer-page .empty-state {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .empty-box p,
body[data-theme="dark"] .empty-text,
body[data-theme="dark"] .loading-text,
body[data-theme="dark"] .not-found-box p,
body[data-theme="dark"] .orders-empty-state p {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .alert,
body[data-theme="dark"] .message-box,
body[data-theme="dark"] .validation-errors {
    color: var(--theme-text);
    background-color: var(--theme-surface-soft);
    border-color: var(--theme-border);
}

body[data-theme="dark"] .alert-danger,
body[data-theme="dark"] .error-box,
body[data-theme="dark"] .message-error,
body[data-theme="dark"] .validation-errors,
body[data-theme="dark"] .percentage-danger {
    color: #ffc1c1 !important;
    background-color: #482631 !important;
    border-color: #85404c !important;
}

body[data-theme="dark"] .alert-warning,
body[data-theme="dark"] .locked-box,
body[data-theme="dark"] .percentage-warning {
    color: #ffe4a3 !important;
    background-color: #493a1c !important;
    border-color: #806328 !important;
}

body[data-theme="dark"] .alert-success,
body[data-theme="dark"] .percentage-success,
body[data-theme="dark"] .message-success,
body[data-theme="dark"] .status-approved,
body[data-theme="dark"] .order-status-completed,
body[data-theme="dark"] .production-status.completed {
    color: #a8ebc8 !important;
    background-color: #173b30 !important;
    border-color: #2d7258 !important;
}

body[data-theme="dark"] .status-submitted,
body[data-theme="dark"] .order-status-confirmed,
body[data-theme="dark"] .production-status.created {
    color: #b9d9ff !important;
    background-color: #203b58 !important;
    border-color: #376b9d !important;
}

body[data-theme="dark"] .status-rejected,
body[data-theme="dark"] .order-status-cancelled,
body[data-theme="dark"] .production-status.cancelled {
    color: #ffc1c1 !important;
    background-color: #482631 !important;
    border-color: #85404c !important;
}

body[data-theme="dark"] .status-draft,
body[data-theme="dark"] .order-status-draft,
body[data-theme="dark"] .order-status-unknown,
body[data-theme="dark"] .production-status.unknown {
    color: var(--theme-muted) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

/* ابزارهای Bootstrap که در صفحات قدیمی استفاده شده‌اند */

body[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-white {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
}

body[data-theme="dark"] .text-dark {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .text-muted {
    color: var(--theme-muted) !important;
}

/* سطوحی که در فرم‌های قدیمی با نام اختصاصی تعریف شده‌اند */

body[data-theme="dark"] .formula-code-box,
body[data-theme="dark"] .page-header-code,
body[data-theme="dark"] .page-size-box,
body[data-theme="dark"] .pagination-container,
body[data-theme="dark"] .product-card,
body[data-theme="dark"] .order-header,
body[data-theme="dark"] .order-section,
body[data-theme="dark"] .section-header-light,
body[data-theme="dark"] .customer-list,
body[data-theme="dark"] .customer-item,
body[data-theme="dark"] .customer-empty {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formula-code-box span,
body[data-theme="dark"] .page-header-code span,
body[data-theme="dark"] .formula-name-area span,
body[data-theme="dark"] .production-display span,
body[data-theme="dark"] .customer-details {
    color: var(--theme-muted) !important;
}

body[data-theme="dark"] .formula-code-box strong,
body[data-theme="dark"] .page-header-code strong,
body[data-theme="dark"] .formula-name-area strong,
body[data-theme="dark"] .production-display strong,
body[data-theme="dark"] .customer-name,
body[data-theme="dark"] .product-card-title {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .section-header-light {
    color: var(--theme-text) !important;
}

body[data-theme="dark"] .customer-item {
    border-bottom-color: var(--theme-border) !important;
}

body[data-theme="dark"] .customer-item:hover {
    color: var(--theme-text) !important;
    background-color: var(--theme-primary-soft) !important;
}

body[data-theme="dark"] .pagination-button {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .pagination-button:hover:not(:disabled),
body[data-theme="dark"] .pagination-button.active {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* تقویم مشترک: کلاس‌های آن در صفحات مختلف متفاوت است */

body[data-theme="dark"] .calendar-nav,
body[data-theme="dark"] .calendar-days button,
body[data-theme="dark"] .calendar-days button.empty {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface-soft) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .calendar-nav:hover,
body[data-theme="dark"] .calendar-days button:hover,
body[data-theme="dark"] .calendar-days button.today,
body[data-theme="dark"] .calendar-days button.selected {
    color: #fff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* کنترل‌های انتخابی و دکمه‌های معنایی */

body[data-theme="dark"] .form-check-input {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

body[data-theme="dark"] .customer-page .action-btn.view:hover,
body[data-theme="dark"] .orders-page .orders-action-button.view:hover,
body[data-theme="dark"] .production-page .production-action-button.view:hover {
    color: #b9f3ff !important;
    background-color: #123f4a !important;
    border-color: #287b8b !important;
}

body[data-theme="dark"] .customer-page .action-btn.edit:hover,
body[data-theme="dark"] .orders-page .orders-action-button.edit:hover,
body[data-theme="dark"] .production-page .production-action-button.edit:hover {
    color: #ffe0a3 !important;
    background-color: #493a1c !important;
    border-color: #806328 !important;
}

body[data-theme="dark"] .customer-page .action-btn.delete:hover,
body[data-theme="dark"] .orders-page .orders-action-button.delete:hover,
body[data-theme="dark"] .production-page .production-action-button.delete:hover {
    color: #ffc1c1 !important;
    background-color: #482631 !important;
    border-color: #85404c !important;
}

body[data-theme="dark"] .order-status-sample,
body[data-theme="dark"] .order-status-sample-sent,
body[data-theme="dark"] .order-status-production,
body[data-theme="dark"] .order-status-depot,
body[data-theme="dark"] .production-status.mixing,
body[data-theme="dark"] .production-status.extrusion {
    color: #b9e9ff !important;
    background-color: #173a4a !important;
    border-color: #2c6d83 !important;
}

body[data-theme="dark"] .order-status-waiting {
    color: #ffe4a3 !important;
    background-color: #493a1c !important;
    border-color: #806328 !important;
}

/* لایه‌های داخلی کارت فرمول در تم تاریک */
body[data-theme="dark"] .formulas-page .formula-body {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formulas-page .materials-list {
    padding: 6px;
    background-color: var(--theme-surface-soft) !important;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
}

body[data-theme="dark"] .formulas-page .formula-material {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

body[data-theme="dark"] .formulas-page .no-material {
    color: var(--theme-muted) !important;
    background-color: var(--theme-surface-soft) !important;
    border: 1px dashed var(--theme-border);
    border-radius: 10px;
}

body[data-theme="dark"] .formulas-page .formula-footer {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    border-top-color: var(--theme-border) !important;
}

/* پنل نقش‌ها و صفحهٔ خروج */
.admin-role-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-role-overview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 13px;
    box-shadow: var(--theme-shadow);
}

.admin-role-overview-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.admin-role-overview-card strong {
    color: var(--theme-text);
    font-size: 13px;
}

.admin-role-overview-card > div > span {
    color: var(--theme-muted);
    font-size: 11px;
}

.admin-role-overview-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 11px;
    font-size: 18px;
}

.admin-role-overview-manager .admin-role-overview-icon {
    color: #138a72;
    background: #e8f7f2;
}

.admin-help-text {
    color: var(--theme-muted);
    font-size: 11px;
    line-height: 1.9;
}

.admin-role-code {
    margin-top: 3px;
    color: var(--theme-muted);
    font-size: 10px;
    direction: ltr;
    text-align: right;
}

.admin-role-description {
    margin-top: 3px;
    color: var(--theme-muted);
    font-size: 10px;
}

.admin-role-badge .admin-role-code {
    margin: 0;
    color: inherit;
    opacity: .72;
    font-size: 9px;
}

.account-action-card {
    width: min(560px, 100%);
    margin: clamp(20px, 7vh, 72px) auto;
    padding: clamp(28px, 5vw, 48px);
    color: var(--theme-text);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    box-shadow: var(--theme-shadow);
    text-align: center;
}

.account-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    color: var(--theme-primary);
    background: var(--theme-primary-soft);
    border-radius: 20px;
    font-size: 32px;
}

.account-action-icon-danger {
    color: var(--theme-danger);
    background: var(--theme-danger-soft);
}

.account-action-card h1 {
    margin-bottom: 12px;
    color: var(--theme-text);
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
}

.account-action-card p {
    margin-bottom: 6px;
    color: var(--theme-text);
    font-size: 14px;
}

.account-action-card > small {
    display: block;
    color: var(--theme-muted);
    font-size: 11px;
}

.account-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.account-action-buttons form {
    margin: 0;
}

body[data-theme="dark"] .admin-role-overview-manager .admin-role-overview-icon {
    color: #9ae8d2;
    background: #173d35;
}

@media (max-width: 575.98px) {
    .admin-role-overview {
        grid-template-columns: 1fr;
    }

    .account-action-buttons,
    .account-action-buttons form,
    .account-action-buttons .btn {
        width: 100%;
    }
}
@media print {
    .app-topbar,
    .app-sidebar,
    .app-sidebar-backdrop,
    .app-sidebar-toggle {
        display: none !important;
    }

    .app-shell {
        display: block !important;
        min-height: 0 !important;
    }

    .app-content {
        margin: 0 !important;
        min-height: 0 !important;
    }
}

@media screen {
    body .app-sidebar {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--theme-primary) 60%, transparent) transparent;
    }

    body .app-nav-link,
    body .app-footer-link,
    body .app-nav-caption,
    body .app-sidebar-user strong,
    body .app-sidebar-user small,
    body .btn,
    body button,
    body .badge,
    body th,
    body .form-label,
    body .form-field > label {
        white-space: nowrap;
    }

    body .app-nav-link > span,
    body .app-footer-link > span,
    body .app-sidebar-user > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body .app-main,
    body .page-container,
    body .container,
    body .container-fluid {
        min-width: 0;
    }

    body .table-responsive,
    body .responsive-table,
    body .materials-list,
    body .formula-materials,
    body .order-items-table {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body table {
        width: 100%;
    }

    body table th,
    body table td {
        vertical-align: middle;
    }

    body .formula-card,
    body .orders-card,
    body .customer-card,
    body .production-card,
    body .section-card {
        min-width: 0;
        overflow: hidden;
    }

    body input,
    body select,
    body textarea,
    body .form-control,
    body .form-select {
        min-width: 0;
        max-width: 100%;
    }

    body .page-header,
    body .section-header,
    body .card-header {
        gap: 10px;
    }
}

@media (max-width: 575.98px) {
    body .app-theme-picker {
        max-width: min(184px, 52vw);
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    body .app-theme-picker::-webkit-scrollbar {
        display: none;
    }

    body .app-topbar {
        padding-inline: 10px;
    }

    body .app-main {
        overflow-x: hidden;
    }
}