/* ══════════════════════════════════════════════════════════
   Dark Mode + Custom Theme + Progress Widget Overrides
   Loaded AFTER the base direction CSS to ensure proper cascade
   ══════════════════════════════════════════════════════════ */

:root {
  --primary-color: #EE7222;
}

/* ══════════════════════════════════════════════════════════
   تذكرة #103 — Dark Mode احترافي
   replaces the old filter:invert(1) hack
   ══════════════════════════════════════════════════════════ */

/* ── Dark-mode CSS Variables ── */
[data-theme="dark"] {
  --dk-bg:        #1a1d23;
  --dk-card:      #22262d;
  --dk-input:     #2a2e36;
  --dk-border:    #30363d;
  --dk-text:      #e1e4e8;
  --dk-muted:     #8b949e;
  --dk-hover:     #2d323a;
  --dk-sidebar:   #161920;
  --dk-topbar:    #1e2228;
  --dk-accent:    #072a42;
  --dk-shadow:    0 2px 8px rgba(0,0,0,.35);
  --dk-radius:    8px;
}

/* ── Global ── */
[data-theme="dark"] body,
[data-theme="dark"] {
  background-color: var(--dk-bg) !important;
  color: var(--dk-text) !important;
  color-scheme: dark;
}

[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
  border-color: var(--dk-border) !important;
}

/* ── Cards & Panels ── */
[data-theme="dark"] .card,
[data-theme="dark"] .card_custom,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body-custom,
[data-theme="dark"] .card_statistics_horizontal {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  box-shadow: var(--dk-shadow) !important;
}
[data-theme="dark"] .card_statistics_horizontal {
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card_custom .card_header {
  background-color: var(--dk-card) !important;
  border-bottom-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .card-footer {
  background-color: var(--dk-card) !important;
  border-top-color: var(--dk-border) !important;
}

/* ── Page Backgrounds ── */
[data-theme="dark"] .bg_light_color,
[data-theme="dark"] .bg_FDF_color,
[data-theme="dark"] .bg_FB_color,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .section-body {
  background-color: var(--dk-bg) !important;
}

/* ── Typography ── */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .fw-bold,
[data-theme="dark"] .title-section-page {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .text-muted,
[data-theme="dark"] .small.text-muted,
[data-theme="dark"] .custom_form_label {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] a:not(.btn):not(.badge):not(.dropdown-item) {
  color: #58a6ff !important;
}
[data-theme="dark"] a:not(.btn):hover {
  color: #79c0ff !important;
}

/* ── Forms ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-plaintext,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: var(--dk-muted) !important;
  opacity: 0.7;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #2f343c !important;
  border-color: #58a6ff !important;
  color: var(--dk-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(88,166,255,.15) !important;
}
[data-theme="dark"] .form-check-input {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: #072a42 !important;
  border-color: #072a42 !important;
}
[data-theme="dark"] .form-check-label {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .input-group-text {
  background-color: var(--dk-input) !important;
  color: var(--dk-muted) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
  background-color: #1a1d23 !important;
  color: var(--dk-muted) !important;
}

/* ── Buttons ── */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn_outline_grey,
[data-theme="dark"] .custom_btn.btn_outline_grey {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn_outline_grey:hover {
  background-color: var(--dk-hover) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .btn-white {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .btn-outline-primary {
  color: #58a6ff !important;
  border-color: #58a6ff !important;
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary.active,
[data-theme="dark"] .btn-outline-primary:active {
  background-color: #58a6ff !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-outline-danger {
  color: #f85149 !important;
  border-color: #f85149 !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #f85149 !important;
  color: #fff !important;
}

/* ── Tables ── */
[data-theme="dark"] .table,
[data-theme="dark"] .custom_data_table table {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .table > thead,
[data-theme="dark"] .custom_data_table table thead tr,
[data-theme="dark"] .custom_data_table table thead tr th {
  background-color: #252930 !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .custom_data_table table thead tr th::after {
  background-color: var(--dk-border) !important;
}
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .custom_data_table table tbody tr,
[data-theme="dark"] .custom_data_table table tbody tr td {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .custom_data_table table tbody tr td::after {
  background-color: var(--dk-border) !important;
}
[data-theme="dark"] .custom_data_table table tbody tr:hover {
  background-color: var(--dk-hover) !important;
}
[data-theme="dark"] .custom_data_table table.table_odd tbody tr:nth-of-type(odd) {
  background-color: #1e2228 !important;
}
[data-theme="dark"] .custom_data_table table.table_modal thead tr th {
  background-color: #252930 !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #1e2228 !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: var(--dk-hover) !important;
}
[data-theme="dark"] .table-light {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .table-active {
  background-color: rgba(88,166,255,.08) !important;
}
[data-theme="dark"] .table-warning {
  background-color: rgba(255,193,7,.08) !important;
}
[data-theme="dark"] .table-secondary {
  background-color: var(--dk-input) !important;
}
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .custom_data_table table thead tr .small_title {
  color: var(--dk-muted) !important;
}

/* ── Modal ── */
[data-theme="dark"] .modal-content {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .modal-header {
  background-color: var(--dk-card) !important;
  border-bottom-color: var(--dk-border) !important;
}
[data-theme="dark"] .modal-title {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .modal-footer {
  background-color: var(--dk-card) !important;
  border-top-color: var(--dk-border) !important;
}
[data-theme="dark"] .modal-body {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .modal .close,
[data-theme="dark"] .modal .btn-close {
  color: var(--dk-text) !important;
}

/* ── Dropdown ── */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
  box-shadow: var(--dk-shadow) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--dk-hover) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .dropdown-divider {
  border-color: var(--dk-border) !important;
}

/* ── Sidebar ── */
[data-theme="dark"] .vertical-menu {
  background-color: var(--dk-sidebar) !important;
}
[data-theme="dark"] .vertical-menu .navbar-brand-box,
[data-theme="dark"] .vertical-menu .navbar-brand-box::before {
  background-color: var(--dk-sidebar) !important;
}
[data-theme="dark"] #sidebar-menu ul li a {
  color: #8b949e !important;
}
[data-theme="dark"] #sidebar-menu ul li a svg {
  fill: #8b949e !important;
}
[data-theme="dark"] #sidebar-menu ul li a:hover {
  background-color: rgba(255,255,255,.04) !important;
  color: #e1e4e8 !important;
}
[data-theme="dark"] #sidebar-menu ul li a:hover svg {
  fill: #e1e4e8 !important;
}
[data-theme="dark"] #sidebar-menu ul li a.mm-active,
[data-theme="dark"] #sidebar-menu ul li .mm-active > a {
  background-color: rgba(7,42,66,.5) !important;
  color: #fff !important;
}
[data-theme="dark"] #sidebar-menu ul li a.mm-active svg,
[data-theme="dark"] #sidebar-menu ul li .mm-active > a svg {
  fill: #fff !important;
}
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu {
  background-color: var(--dk-sidebar) !important;
}
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu li a {
  color: #6e7681 !important;
}
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a,
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu li:hover > a {
  color: #58a6ff !important;
}
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a svg,
[data-theme="dark"] #sidebar-menu ul li ul.sub-menu li:hover > a svg {
  fill: #58a6ff !important;
}
[data-theme="dark"] .menu-title {
  color: #6e7681 !important;
}
[data-theme="dark"] .vertical-menu .navbar-brand-box .logo-img {
  filter: brightness(0) invert(1);
}

/* ── Topbar ── */
[data-theme="dark"] #page-topbar {
  background-color: var(--dk-topbar) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .navbar-header {
  background-color: var(--dk-topbar) !important;
}
[data-theme="dark"] .navbar-brand-box {
  background-color: var(--dk-topbar) !important;
}
[data-theme="dark"] .navbar-brand-box::before,
[data-theme="dark"] .navbar-brand-box::after {
  background-color: var(--dk-topbar) !important;
  filter: none !important;
}
[data-theme="dark"] #page-topbar .header-item {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #page-topbar .header-item:hover {
  color: #fff !important;
}
[data-theme="dark"] #page-topbar .app-search input {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] #page-topbar .app-search span img {
  filter: brightness(0) invert(0.7) !important;
}
[data-theme="dark"] #page-topbar .icon_header_item img {
  filter: brightness(0) invert(0.85) !important;
}
[data-theme="dark"] #page-topbar .btn-white {
  background-color: transparent !important;
  border-color: transparent !important;
}
[data-theme="dark"] .noti-icon i {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .navbar-header .dropdown .show.header-item {
  background-color: var(--dk-input) !important;
}

/* ── Breadcrumb ── */
[data-theme="dark"] .breadcrumb {
  background-color: transparent !important;
}
[data-theme="dark"] .breadcrumb-item a {
  color: #58a6ff !important;
}
[data-theme="dark"] .breadcrumb-item.active {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .custom_breadcrumb .breadcrumb-item a {
  color: #58a6ff !important;
}
[data-theme="dark"] .custom_breadcrumb .breadcrumb-item span {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .custom_breadcrumb .breadcrumb-item::before {
  filter: brightness(0) invert(0.6) !important;
}

/* ── Alerts ── */
[data-theme="dark"] .alert-warning {
  background-color: rgba(255,193,7,.1) !important;
  border-color: rgba(255,193,7,.25) !important;
  color: #ffc107 !important;
}
[data-theme="dark"] .alert-danger {
  background-color: rgba(220,53,69,.1) !important;
  border-color: rgba(220,53,69,.25) !important;
  color: #f85149 !important;
}
[data-theme="dark"] .alert-info {
  background-color: rgba(88,166,255,.1) !important;
  border-color: rgba(88,166,255,.25) !important;
  color: #58a6ff !important;
}
[data-theme="dark"] .alert-success {
  background-color: rgba(40,167,69,.1) !important;
  border-color: rgba(40,167,69,.25) !important;
  color: #3fb950 !important;
}
[data-theme="dark"] .alert-light {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

/* ── Badges ── */
[data-theme="dark"] .badge.bg-light {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .badge.bg-secondary {
  background-color: #30363d !important;
}

/* ── Pagination ── */
[data-theme="dark"] .page-link {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .page-link:hover {
  background-color: var(--dk-hover) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: #072a42 !important;
  border-color: #072a42 !important;
  color: #fff !important;
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--dk-input) !important;
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .custom_pagination_table .pagination_nav .pagination .page-item .page-link {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .custom_pagination_table .pagination_nav .pagination .page-item.active .page-link,
[data-theme="dark"] .custom_pagination_table .pagination_nav .pagination .page-item:hover .page-link {
  background-color: rgba(7,42,66,.3) !important;
  border-color: #58a6ff !important;
  color: #58a6ff !important;
}
[data-theme="dark"] .custom_pagination_table .pagination_nav .pagination .page-item .page-link-next svg,
[data-theme="dark"] .custom_pagination_table .pagination_nav .pagination .page-item .page-link-prev svg {
  fill: var(--dk-text) !important;
}
[data-theme="dark"] .custom_pagination_table .pagination_count {
  color: var(--dk-muted) !important;
}

/* ── Tabs ── */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--dk-border) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) var(--dk-border) var(--dk-card) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--dk-border) var(--dk-border) var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: #072a42 !important;
  color: #fff !important;
}

/* ── Accordion ── */
[data-theme="dark"] .accordion_item {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .accordion_item_header {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  border-bottom-color: var(--dk-border) !important;
}
[data-theme="dark"] .accordion_item_header h4 {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .accordion_item_body {
  background-color: var(--dk-card) !important;
}

/* ── Multiselect ── */
[data-theme="dark"] .multiselect {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .multiselect__single,
[data-theme="dark"] .multiselect__input {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .multiselect__input::placeholder {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .multiselect__content-wrapper {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .multiselect__option {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .multiselect__option--highlight {
  background-color: var(--dk-hover) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .multiselect__option--selected {
  background-color: rgba(7,42,66,.4) !important;
}
[data-theme="dark"] .multiselect__tags {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .custom_multiselect .multiselect__tags,
[data-theme="dark"] .input_group_underline .custom_multiselect .multiselect__tags,
[data-theme="dark"] .input_group_underline .custom_multiselect.input-group-multiselect .multiselect__tags {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .multiselect__tag {
  background-color: #072a42 !important;
  color: #fff !important;
}
[data-theme="dark"] .multiselect__spinner {
  background-color: var(--dk-input) !important;
}

/* ── SweetAlert / Toast ── */
[data-theme="dark"] .swal2-popup {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .swal2-title {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .swal2-html-container {
  color: var(--dk-muted) !important;
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.15) !important;
}

/* ── Section Toolbar ── */
[data-theme="dark"] .section-toolbar .title-section-page {
  color: var(--dk-text) !important;
}

/* ── Card Statistics ── */
[data-theme="dark"] .card_statistics,
[data-theme="dark"] .card_body {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .card_header p a {
  color: var(--dk-muted) !important;
}
[data-theme="dark"] .card_content_statistics p {
  color: var(--dk-text) !important;
}

/* ── Misc Overrides ── */
[data-theme="dark"] .border-primary { border-color: #072a42 !important; }
[data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom {
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .bg_FDF_color { background-color: var(--dk-card) !important; }
[data-theme="dark"] .bg_light_color { background-color: var(--dk-bg) !important; }
[data-theme="dark"] .bg-secondary { background-color: var(--dk-input) !important; }
[data-theme="dark"] .text-success { color: #3fb950 !important; }
[data-theme="dark"] .text-danger { color: #f85149 !important; }
[data-theme="dark"] .text-warning { color: #d29922 !important; }
[data-theme="dark"] .text-info { color: #58a6ff !important; }
[data-theme="dark"] .text-primary { color: #58a6ff !important; }
[data-theme="dark"] .text-secondary { color: var(--dk-muted) !important; }
[data-theme="dark"] .table-warning { background-color: rgba(210,153,34,.08) !important; }
[data-theme="dark"] .underline-input { border-bottom-color: var(--dk-border) !important; }

/* ── Bootstrap-Vue Modal Backdrop ── */
[data-theme="dark"] .modal-backdrop {
  background-color: rgba(0,0,0,.6) !important;
}

/* ── Right Sidebar ── */
[data-theme="dark"] .right-bar {
  background-color: var(--dk-card) !important;
}
[data-theme="dark"] .right-bar .tab-content {
  background-color: var(--dk-card) !important;
}

/* ── Tooltip / Popover ── */
[data-theme="dark"] .tooltip-inner {
  background-color: #30363d !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .tooltip .arrow::before {
  border-top-color: #30363d !important;
}

/* ── List Group ── */
[data-theme="dark"] .list-group-item {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .list-group-item:hover {
  background-color: var(--dk-hover) !important;
}

/* ── Custom btn_link_primary ── */
[data-theme="dark"] .btn_link_primary {
  color: #58a6ff !important;
}
[data-theme="dark"] .btn_link_primary:hover {
  color: #79c0ff !important;
}

/* ── Custom buttons ── */
[data-theme="dark"] .btn_danger {
  background-color: #da3637 !important;
  color: #fff !important;
}
[data-theme="dark"] .btn_green_28 {
  background-color: #238636 !important;
  color: #fff !important;
}
[data-theme="dark"] .btn_yellow_ffc {
  background-color: #9e6a03 !important;
  color: #fff !important;
}

/* ── Table sort indicator ── */
[data-theme="dark"] .sort-indicator {
  color: var(--dk-muted) !important;
}

/* ── Custom Data Table Pagination ── */
[data-theme="dark"] .custom_data_table .pagination li a {
  background-color: var(--dk-card) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .custom_data_table .pagination li.active a {
  background-color: #072a42 !important;
  color: #fff !important;
}

/* ── SweetAlert2 buttons ── */
[data-theme="dark"] .swal2-confirm {
  background-color: #238636 !important;
  border-color: #238636 !important;
}
[data-theme="dark"] .swal2-cancel {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
}

/* ── Vue Select ── */
[data-theme="dark"] .vs__dropdown-toggle {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .vs__dropdown-menu {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .vs__dropdown-option {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .vs__dropdown-option--highlight {
  background-color: var(--dk-hover) !important;
}
[data-theme="dark"] .vs__selected {
  color: var(--dk-text) !important;
}

/* ── Quill Editor ── */
[data-theme="dark"] .ql-toolbar {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .ql-container {
  background-color: var(--dk-input) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .ql-editor {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--dk-muted) !important;
}

/* ── Print area stays light ── */
@media print {
  [data-theme="dark"] body {
    background-color: #fff !important;
    color: #000 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Custom Dynamic Theme Overrides
   ══════════════════════════════════════════════════════════ */

:root {
  --primary-color: #FF6A00;
  --sidebar-bg: #0F172A;
  --sidebar-text: #F8FAFC;
  --topbar-bg: #FFFFFF;
  --topbar-text: #0F172A;
}

/* Primary Accents & Buttons */
.custom-theme-active .btn-primary, .custom-theme-active .btn_primary, .custom-theme-active .submit-btn button, .custom-theme-active .submit_order_btn, .custom-theme-active .btn-primary:hover, .custom-theme-active .btn-primary:focus {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.custom-theme-active .text-primary, .custom-theme-active .text_primary {
  color: var(--primary-color) !important;
}
.custom-theme-active .bg-primary {
  background-color: var(--primary-color) !important;
}
.custom-theme-active .custom_multiselect .multiselect__option--highlight {
  background: var(--primary-color) !important;
}
.custom-theme-active .custom_breadcrumb .breadcrumb-item a {
  color: var(--primary-color) !important;
}
.custom-theme-active .custom_data_table table thead tr th {
  background-color: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

/* Sidebar Custom Theme */
.custom-theme-active .vertical-menu {
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.custom-theme-active .vertical-menu .navbar-brand-box,
.custom-theme-active .vertical-menu .navbar-brand-box::before {
  background-color: var(--sidebar-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.custom-theme-active .vertical-menu .vertical-menu-title {
  color: var(--sidebar-text) !important;
  opacity: 0.9;
}
.custom-theme-active .vertical-menu .vertical-menu-btn,
.custom-theme-active .vertical-menu .vertical-menu-btn i,
.custom-theme-active .vertical-menu .header-item {
  color: var(--sidebar-text) !important;
}
.custom-theme-active #sidebar-menu ul li a {
  color: var(--sidebar-text) !important;
  opacity: 0.85;
}
.custom-theme-active #sidebar-menu ul li a i, .custom-theme-active #sidebar-menu ul li a svg {
  fill: var(--sidebar-text) !important;
  color: var(--sidebar-text) !important;
}
.custom-theme-active #sidebar-menu ul li a:hover, .custom-theme-active #sidebar-menu ul li a:hover i, .custom-theme-active #sidebar-menu ul li a:hover svg, .custom-theme-active #sidebar-menu ul li a.active, .custom-theme-active #sidebar-menu ul li a.active i, .custom-theme-active #sidebar-menu ul li a.active svg {
  color: var(--primary-color) !important;
  fill: var(--primary-color) !important;
  opacity: 1 !important;
}
.custom-theme-active .sub-menu, .custom-theme-active #sidebar-menu ul li ul.sub-menu {
  background-color: var(--sidebar-bg) !important;
}
.custom-theme-active #sidebar-menu ul li ul.sub-menu li a {
  color: var(--sidebar-text) !important;
  opacity: 0.75;
}
.custom-theme-active #sidebar-menu ul li ul.sub-menu li a:hover, .custom-theme-active #sidebar-menu ul li ul.sub-menu li a.active {
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

/* Topbar Custom Theme */
.custom-theme-active #page-topbar {
  background-color: var(--topbar-bg) !important;
  color: var(--topbar-text) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.custom-theme-active #page-topbar .navbar-header {
  background-color: var(--topbar-bg) !important;
}
.custom-theme-active #page-topbar .navbar-brand-box,
.custom-theme-active #page-topbar .navbar-brand-box::before {
  background-color: var(--topbar-bg) !important;
}
.custom-theme-active #page-topbar .header-item, .custom-theme-active #page-topbar .btn-white, .custom-theme-active #page-topbar .icon_header_item img {
  color: var(--topbar-text) !important;
}
.custom-theme-active #page-topbar .app-search input {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--topbar-text) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
.custom-theme-active #page-topbar .navbar-header .btns_group,
.custom-theme-active #page-topbar .navbar-header .dropdown,
.custom-theme-active #page-topbar .navbar-header .dropdown_container,
.custom-theme-active #page-topbar .navbar-header .action_header,
.custom-theme-active #page-topbar .navbar-header .header-item {
  border-left: none !important;
  border-right: none !important;
}
.custom-theme-active #page-topbar .icon_header_item img,
.custom-theme-active #page-topbar .app-search span img {
  filter: var(--topbar-icon-filter, none) !important;
}

/* ── Excel Import Live Progress Widget ── */
.excel_active_badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-inline-start: 6px;
  border-radius: 10px;
  background-color: var(--primary-color, #2962ff);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.btn_clear_completed {
  border: none;
  background: transparent;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
}
.btn_clear_completed:hover { color: #333; }
.excel_progress_item {
  flex-direction: column;
  align-items: stretch !important;
  gap: 4px;
  padding-block: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.excel_progress_item:last-child { border-bottom: none; }
.excel_file_name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.excel_progress_bar {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 4px;
}
.excel_progress_bar_fill {
  height: 100%;
  border-radius: 3px;
  background-color: var(--primary-color, #2962ff);
  transition: width 0.4s ease;
}
.excel_counters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: #555;
}
.excel_percent { font-weight: 700; color: var(--primary-color, #2962ff); }
.excel_added i { font-size: 10px; opacity: 0.7; margin-inline-end: 2px; }
.excel_status_done .excel_added { color: #1e8e3e; font-weight: 600; }
.excel_errors_badge {
  border: none;
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.excel_errors_list {
  max-height: 160px;
  overflow-y: auto;
  background-color: rgba(220, 53, 69, 0.05);
  border-inline-start: 3px solid #dc3545;
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 2px;
}
.excel_error_row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #7a2730;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(220, 53, 69, 0.15);
}
.excel_error_row:last-child { border-bottom: none; }
.excel_error_msg { flex: 1; word-break: break-word; }
.excel_error_ref { font-weight: 700; white-space: nowrap; }
.excel_empty_state {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 12px 0;
}

/* Global Expiry Warning Alert */
.global-package-alert {
  width: 100%;
  z-index: 10001;
  position: relative;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  direction: rtl;
}
.global-package-alert .btn-light {
  color: #dc3545 !important;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
.global-package-alert .btn-light:hover {
  background-color: #f8f9fa !important;
  transform: scale(1.05);
}

/* ── (طلب المستخدم 2026-09-04): حواف أنعم للأزرار المصمتة ──
   كان custom_btn يرسم إطاراً 1px بنفس لون الخلفية فوق الخلفية،
   فتظهر حافتان متداخلتان تبدوان مزغللتين (خاصة عند zoom غير 100%).
   الإطار الشفاف يُبقي الحجم كما هو ويترك حافة واحدة فقط. */
.custom_btn:not([class*="btn_outline"]):not([class*="btn_link"]) {
  border-color: transparent !important;
}

/* ── (طلب المستخدم 2026-09-04): إخفاء أسهم +/- من كل حقول input[type=number] ──
   الحقل يظل رقمياً (لوحة مفاتيح رقمية على الموبايل + التحقق)، فقط بلا أسهم. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ── (طلب المستخدم 2026-09-04): زر إغلاق المودال — X في منتصف الدائرة تماماً ──
   الرمز النصي × يعتمد على الخط ولا يتوسّط بدقة داخل دائرة 24px بإطار 2px.
   نخفي النص ونرسم الـ X بخطين مطلقين متمركزين، والدائرة 28px. */
.modal .modal-dialog .modal-content .modal-header .close,
.modal .modal-header button.close {
  position: absolute;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #a3a3a3;
  border-radius: 50% !important;
  background: transparent;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.modal .modal-header button.close::before,
.modal .modal-header button.close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background-color: #a3a3a3;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal .modal-header button.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal .modal-header button.close:hover {
  border-color: #072a42;
  background-color: rgba(7, 42, 66, 0.06);
}
.modal .modal-header button.close:hover::before,
.modal .modal-header button.close:hover::after {
  background-color: #072a42;
}
[data-theme="dark"] .modal .modal-header button.close { border-color: #6e7681; }
[data-theme="dark"] .modal .modal-header button.close::before,
[data-theme="dark"] .modal .modal-header button.close::after { background-color: #8b949e; }

/* ── (طلب المستخدم 2026-09-04): مسافة موحّدة بين الـ label والحقل ──
   كثير من الفورمات تستخدم col-form-label / form-check-label / label بلا كلاس
   بدل custom_form_label فلا تأخذ هامش 8px. هنا نوحّدها في الفورمات الرأسية فقط
   (الحاوية ليست .row والـ label ليس عموداً) حتى لا نمس الفورمات الأفقية. */
.custom_form_group:not(.row) > label:not(.custom_form_label):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
.form-group:not(.row) > label:not(.form-check-label):not(.custom-control-label):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
.custom_form_group:not(.row) > .col-form-label:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
.form-group:not(.row) > .col-form-label:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) {
  display: block;
  margin-bottom: 8px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.4;
}

/* ── (طلب المستخدم 2026-09-04): توحيد أزرار الإجراءات في الجداول (تعديل/حذف/تعطيل) ──
   كان btn-primary يأخذ خلفية من الثيم المخصص (!important) بينما بقية الأزرار شفافة.
   هنا: شريحة موحّدة 32×32 بحواف 8px وخلفية محايدة خفيفة، الأيقونة ملوّنة،
   والـ hover يأخذ لون الإجراء. يشمل كل .btn_actions في المشروع (170+ جدول). */
.btn_actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn_actions .btn,
.btn_actions .custom_btn,
.btn_actions button,
.btn_actions a.btn,
.custom-theme-active .btn_actions .btn,
.custom-theme-active .btn_actions .btn-primary,
.custom-theme-active .btn_actions .btn_primary {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border: 1px solid rgba(7, 42, 66, 0.08) !important;
  background-color: rgba(7, 42, 66, 0.04) !important;
  color: #656969 !important;
  box-shadow: none !important;
  line-height: 1;
  opacity: 1;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn_actions .btn img,
.btn_actions .custom_btn img,
.btn_actions button img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: block;
}
.btn_actions .btn i,
.btn_actions button i {
  font-size: 15px;
  line-height: 1;
  margin: 0;
}
/* hover بلون الإجراء */
.btn_actions .btn:hover,
.btn_actions button:hover,
.custom-theme-active .btn_actions .btn:hover {
  background-color: rgba(7, 42, 66, 0.10) !important;
  border-color: rgba(7, 42, 66, 0.18) !important;
  transform: translateY(-1px);
}
.btn_actions .btn-primary:hover,
.btn_actions .btn-success:hover,
.custom-theme-active .btn_actions .btn-primary:hover,
.custom-theme-active .btn_actions .btn-primary:focus {
  background-color: rgba(238, 114, 34, 0.12) !important;
  border-color: rgba(238, 114, 34, 0.40) !important;
}
.btn_actions .btn-danger:hover,
.custom-theme-active .btn_actions .btn-danger:hover {
  background-color: rgba(223, 39, 39, 0.12) !important;
  border-color: rgba(223, 39, 39, 0.40) !important;
}
.btn_actions .btn-warning:hover {
  background-color: rgba(255, 193, 7, 0.16) !important;
  border-color: rgba(255, 193, 7, 0.50) !important;
}
.btn_actions .btn-secondary:hover {
  background-color: rgba(163, 151, 143, 0.18) !important;
  border-color: rgba(163, 151, 143, 0.50) !important;
}
.btn_actions .btn:active { transform: translateY(0); }
.btn_actions .btn:disabled,
.btn_actions button:disabled { opacity: .45; }

[data-theme="dark"] .btn_actions .btn,
[data-theme="dark"] .btn_actions button {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── (طلب المستخدم 2026-09-04): حركة hover لبطاقات الإحصائيات الأفقية ──
   نفس حركة بطاقات إحصائيات الصندوق (box-stat-card): ظل خفيف يزداد ورفعة 2px.
   تُطبَّق فقط على البطاقات القابلة للنقر (داخل رابط) حتى لا توحي بطاقة ثابتة بأنها زر. */
.card_statistics_horizontal {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
a .card_statistics_horizontal,
a.card_statistics_horizontal,
[role="button"] .card_statistics_horizontal {
  cursor: pointer;
}
a .card_statistics_horizontal:hover,
a.card_statistics_horizontal:hover,
[role="button"] .card_statistics_horizontal:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
  border-color: #dcd8d5;
}
a .card_statistics_horizontal:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] a .card_statistics_horizontal:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ── (طلب المستخدم 2026-09-04): قائمة الحالة في شريط الأدوات بنفس ارتفاع الأزرار ──
   custom_btn = 1rem + 1.5rem + 1rem + 2px حد = 3.5rem + 2px (المشروع كله بالـ rem،
   وأداة تكبير الخط تغيّر حجم الجذر، لذلك لا نستخدم بكسلات ثابتة). */
.section-toolbar .side-left {
  align-items: center;
}
.section-toolbar .side-left .custom_form_group {
  margin-bottom: 0 !important;
}
.section-toolbar .side-left .custom_form_group .multiselect {
  min-height: calc(3.5rem + 2px);
}
.section-toolbar .side-left .custom_form_group .multiselect__tags {
  box-sizing: border-box;
  min-height: calc(3.5rem + 2px);
  /* (3.5rem - 1.3125rem سطر) / 2 */
  padding-top: 1.09375rem !important;
  padding-bottom: 1.09375rem !important;
}
.section-toolbar .side-left .custom_form_group .multiselect__placeholder,
.section-toolbar .side-left .custom_form_group .multiselect__single,
.section-toolbar .side-left .custom_form_group .multiselect__input {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 1.3125rem;
  line-height: 1.3125rem !important;
}
/* السهم في منتصف الارتفاع */
.section-toolbar .side-left .custom_form_group .multiselect__select {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  /* (2026-09-10) نفس مقاس السهم الموحّد بدل 24px الخاصة بهذا الشريط */
  width: var(--select-arrow-size) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.section-toolbar .side-left .custom_form_group .multiselect__select::before {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
}
.section-toolbar .side-left .sort_input::after {
  top: 50% !important;
  transform: translateY(-50%);
}
/* حقول select/input عادية في نفس الشريط */
.section-toolbar .side-left .custom_form_group .form-select,
.section-toolbar .side-left .custom_form_group .form-control {
  height: calc(3.5rem + 2px);
}

/* ══════════════════════════════════════════════════════════
   (طلب المستخدم 2026-09-04): متغيرات ألوان الواجهة — بديل الألوان
   المكتوبة inline في القوالب. القيم تحافظ على الشكل الحالي، وتُبدَّل في
   الدارك مود حتى تتكيف الأسطح الفاتحة تلقائياً.
   ══════════════════════════════════════════════════════════ */
:root {
  --c-primary: #FF6A00;   --c-lime: #F59E0B;      --c-navy: #0F172A;
  --c-white: #ffffff;     --c-light: #f8f9fa;     --c-border: #dddddd;   --c-muted: #6c757d;
  --c-sky: #fff7ed;       --c-sky-border: #fed7aa;
  --c-danger: #dc3545;    --c-danger-dark: #c62828; --c-danger-soft: #fef2f2; --c-danger-border: #fecaca;
  --c-success: #28a745;   --c-success-dark: #2e7d32; --c-success-soft: #ecfdf5; --c-success-border: #bbf7d0;
  --c-info: #FF6A00;      --c-info-dark: #C2410C;  --c-info-soft: #fff7ed;  --c-info-border: #ffedd5;
  --c-indigo-soft: #fff7ed; --c-purple-soft: #fef3c7;
  --c-warning: #ffaa00;   --c-warning-soft: #fffbeb; --c-orange: #ff6a00;
}
[data-theme="dark"] {
  /* --c-white يبقى أبيض دائماً: يُستخدم كنص/نقاط على خلفيات داكنة (صفحة الدخول مثلاً) */
  --c-light: var(--dk-input);       --c-border: var(--dk-border);
  --c-muted: var(--dk-muted);       --c-sky: rgba(238, 114, 34, 0.08); --c-sky-border: rgba(238, 114, 34, 0.25);
  --c-danger-soft: rgba(220, 53, 69, 0.12);  --c-danger-border: rgba(220, 53, 69, 0.35); --c-danger-dark: #ff6b6b;
  --c-success-soft: rgba(40, 167, 69, 0.12); --c-success-border: rgba(40, 167, 69, 0.35); --c-success-dark: #6fdc8c;
  --c-info-soft: rgba(13, 110, 253, 0.12);   --c-info-border: rgba(13, 110, 253, 0.35);   --c-info-dark: #7fb3ff;
  --c-indigo-soft: rgba(99, 102, 241, 0.14); --c-purple-soft: rgba(168, 85, 247, 0.14);  --c-warning-soft: rgba(255, 170, 0, 0.12);
}

/* (طلب المستخدم 2026-09-04): عناوين التبويبات كانت مخفية على الموبايل (d-none d-sm-block)
   فتظهر تبويبات فارغة؛ أُزيل الإخفاء من القوالب، وهنا تصغير الخط والحشو ليتسع العنوان */
@media (max-width: 575.98px) {
  .nav-tabs .nav-link,
  .nav_tabs_custom .nav-tabs .nav-item .nav-link {
    font-size: 12px;
    padding: 6px 8px;
    white-space: nowrap;
  }
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
}

/* ‏.not-collapsed كانت من bootstrap-vue؛ Bootstrap 5 لا يضيفها أبداً — يزيل
   ‏.collapsed فقط عند الفتح. لذا في الحالة المفتوحة لم تُطابق أي قاعدة
   ‏فظهر سهما «للأعلى» و«للأسفل» معاً فوق كل بطاقة قابلة للطي. */
.card_collapse .card_header:not(.collapsed) .icon_down { display: none; }
.card_collapse .card_header:not(.collapsed) .icon_up { display: block; }

/* ——— تباعد أيقونات الهيدر ———
   (طلب المستخدم 2026-09-10): المسافات بين الأيقونات ما زالت غير متساوية، لأن
   التباعد كان يأتي من ثلاثة مصادر مختلفة في آن واحد: فجوة داخل المجموعة
   (‏gap: 1.75rem)، وحشو على حواف كل مجموعة (‏padding-inline: 1.35rem) فيتضاعف
   عند حدّ كل مجموعتين متجاورتين، وهامش مستقل للعناصر خارج المجموعات
   (‏margin-inline: .8rem). فصارت الفجوة ٢٨px داخل المجموعة و٤٣px بين
   مجموعتين و٢٦px حول العناصر المفردة.

   الحل: مصدر واحد للتباعد — صفّ الأيقونات كله حاوية مرنة بفجوة واحدة، وكل
   مجموعة بداخله بنفس الفجوة وبلا حشو، وتصفير كل الهوامش الفردية. فتتساوى
   المسافة بين أي أيقونتين متجاورتين مهما كان تجميعهما. */
#page-topbar .navbar-header > .d-flex.align-items-center {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
#page-topbar .btns_group {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-inline: 0;
  margin-inline: 0;
}
#page-topbar .navbar-header > .d-flex.align-items-center > *,
#page-topbar .navbar-header > .d-flex.align-items-center > .header-item,
#page-topbar .navbar-header > .d-flex.align-items-center > .btn-group > .header-item,
#page-topbar .btns_group > *,
#page-topbar .btns_group > .btn,
#page-topbar .btns_group .dropdown-toggle {
  margin-inline: 0 !important;
}

/* ——— صندوق اللوجو واسم الشركة ———
   (طلب المستخدم 2026-09-10): المساحة كانت تكبر وتتعدى حدودها في الشاشات
   الكبيرة، لأن الصندوق مرن (‏display:flex) بلا حد أقصى ولا اقتطاع، واسم
   الشركة سطر واحد لا ينكمش — فيدفع عرض الصندوق خارج عرض القائمة الجانبية.
   الحل: سقف بعرض الحاوية مع إخفاء الفائض، والاسم ينكمش وينتهي بثلاث نقاط.
   التخصيص أعلى من نسق القالب لأن ملف النسق يُحقن وقت التشغيل بعد هذا الملف. */
body .vertical-menu .navbar-brand-box,
body #page-topbar .navbar-brand-box {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
body .vertical-menu .navbar-brand-box .vertical-menu-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .vertical-menu .navbar-brand-box .logo,
body #page-topbar .navbar-brand-box .logo {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
}
body .vertical-menu .navbar-brand-box .vertical-menu-btn {
  flex: 0 0 auto;
}


/* (طلب المستخدم 2026-09-09): مربعات الاختيار داخل الجداول — وأهمها «تحديد الكل»
   في رأس الجدول — كانت تظهر بمؤشر السهم فلا يبدو أنها قابلة للضغط.
   القاعدة تشمل كل مربعات الاختيار وأزرار الاختيار وتسمياتها، مع استثناء
   المعطّلة منها لأن مؤشرها يجب أن يقول إنها غير قابلة للضغط. */
input[type="checkbox"],
input[type="radio"],
.form-check-input,
.custom_data_table table th input[type="checkbox"],
.custom_data_table table td input[type="checkbox"],
#check-all,
label.form-check-label,
.form-check label {
  cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
.form-check-input:disabled,
input[type="checkbox"][readonly],
.form-check-input:disabled ~ .form-check-label {
  cursor: not-allowed;
}

/* (طلب المستخدم 2026-09-10): مؤشر اليد على عناصر القوائم المنسدلة في الهيدر —
   زر الفتح وخيارات القائمة — فالسهم كان يوحي أنها غير قابلة للضغط. */
#page-topbar .dropdown-toggle,
#page-topbar .dropdown-item,
#page-topbar .header-item,
#page-topbar .custom-branch-dropdown .dropdown-item {
  cursor: pointer;
}
#page-topbar .dropdown-toggle:disabled,
#page-topbar .header-item:disabled {
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════
   (طلب المستخدم 2026-09-10) قواعد الطباعة العامة — لكل الشاشات
   ══════════════════════════════════════════════════════════
   المشكلة: عند الطباعة كانت تظهر عناصر الشاشة التفاعلية داخل الورقة:
   الأزرار العائمة أسفل الصفحة (الدعم · اعتماد الشاشة · حجم الخط)، وحقل
   البحث داخل الجدول، وأشرطة الأدوات والترقيم، والقائمة الجانبية والهيدر —
   وكان النص يلتصق بحواف الكارت لأن الحشو يُلغى في الطباعة.
   الحل هنا عام لأن كل شاشات النظام تطبع بـ window.print() على الصفحة نفسها. */
@media print {
  /* ما لا يُطبع: الأزرار العائمة والنوافذ والتنبيهات */
  .support-fab,
  .acceptance-fab,
  .font-size-container,
  .app_progress_operations,
  .modal,
  .modal-backdrop,
  .offcanvas,
  .offcanvas-backdrop,
  .toast,
  .toasted-container,
  .swal2-container,
  .dropdown-menu,
  .tooltip,
  .popover {
    display: none !important;
  }

  /* هيكل الصفحة: القائمة الجانبية والهيدر والتذييل والمسار */
  .vertical-menu,
  #page-topbar,
  .navbar-header,
  .right-bar,
  .rightbar-overlay,
  footer,
  .footer,
  .breadcrumb,
  .custom_breadcrumb {
    display: none !important;
  }

  /* أدوات التحكم: الأزرار وحقول البحث والتصفية والترقيم */
  .section-toolbar .side-left,
  .table_search_bar,
  .app-search,
  .btn,
  .custom_btn,
  .b-pagination,
  .pagination,
  .per-page-select,
  .filter-columns,
  input[type="search"],
  .input_group_underline,
  .form-select {
    display: none !important;
  }

  /* المحتوى يملأ الورقة بلا هوامش القائمة الجانبية */
  body,
  .main-content,
  .page-content,
  .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* حشو داخلي للكروت حتى لا يلتصق النص بالحواف */
  .card_custom,
  .card_body,
  .card_content,
  .custom_data_table,
  .card {
    padding: 10px 12px !important;
    margin: 0 0 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* الجداول: رأس يتكرر في كل ورقة وصفوف لا تنقسم */
  .table-responsive { overflow: visible !important; }
  table { width: 100% !important; border-collapse: collapse !important; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img { break-inside: avoid; page-break-inside: avoid; }
  th, td { padding: 4px 6px !important; }

  /* ألوان الشارات والخلفيات تُطبع كما تظهر */
  .badge, .card_body, .statement_section, .net_profit_block {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ══════════════════════════════════════════════════════════
   (طلب المستخدم 2026-09-10) قائمة التنبيهات — ضبط الشكل
   ══════════════════════════════════════════════════════════
   كان: مبدّل التبويبات بخلفية inline لا تُرى على الداكن ولونه النشط رمادي
   باهت، والوقت في سطر منفصل بـ<br> فيتباعد بلا انتظام، وتذييل «تحميل المزيد»
   شفافاً فيظهر خلفه آخر تنبيه مقصوص، وبطاقات التنبيهات بلا فراغ سفلي. */
#tour-topbar-notifications .dropdown-menu {
  min-width: 340px;
  padding-bottom: 0;
  overflow: hidden;
}
/* مبدّل التبويبات */
.noti-tabs-wrap {
  padding: 10px 14px 12px;
}
.noti-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(127, 140, 155, 0.12);
  border: 1px solid rgba(127, 140, 155, 0.18);
}
.noti-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.noti-tab:hover { opacity: 1; }
.noti-tab.is-active {
  background: var(--primary-color, #0d9488);
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.noti-tab-count {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
}
.noti-tab:not(.is-active) .noti-tab-count {
  background: #dc3545;
  color: #fff;
}
/* بطاقة التنبيه: النص والوقت في عمود واحد بتباعد منتظم */
#tour-topbar-notifications .notification-item { align-items: flex-start; cursor: pointer; }
#tour-topbar-notifications .notification_item_body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#tour-topbar-notifications .notification_item_body h6 { line-height: 1.45; white-space: normal; }
#tour-topbar-notifications .noti-time {
  font-size: 0.75rem;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#tour-topbar-notifications .noti-time i { color: var(--primary-color, #0d9488); }
/* منطقة التمرير: فراغ سفلي حتى لا يُقصّ آخر تنبيه تحت التذييل */
#tour-topbar-notifications .simplebar-content { padding-bottom: 6px; }
/* التذييل: معتم وبحد علوي فلا يظهر خلفه محتوى مقصوص */
#tour-topbar-notifications .dropdown_footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(127, 140, 155, 0.25);
  background: inherit;
  position: relative;
  z-index: 2;
}
/* الوضع الداكن: ألوان البطاقات والحدود من لوحة الوضع الداكن */
[data-theme="dark"] #tour-topbar-notifications .notification-item {
  background-color: var(--dk-card) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] #tour-topbar-notifications .notification-item:hover {
  background-color: #2b313a !important;
}
[data-theme="dark"] #tour-topbar-notifications .dropdown_footer {
  background-color: var(--dk-bg) !important;
  border-top-color: var(--dk-border) !important;
}
[data-theme="dark"] .noti-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* زر «المزيد» / الانتقال لواجهة الإشعارات في ذيل قائمة إشعارات الشريط العلوي:
   توسيط الزر، وإلغاء الهوامش الجانبية لمنع اقتطاع الكلمة، ودعم السهم والوضع الداكن */
#tour-topbar-notifications .dropdown_footer {
  padding: 8px 12px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#tour-topbar-notifications .dropdown_footer .custom_btn {
  color: var(--primary-color, #0d9488) !important;
  font-weight: 600;
  gap: 8px;
  padding: 6px 14px !important;
  margin: 0 !important;
  width: 100% !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#tour-topbar-notifications .dropdown_footer .custom_btn:hover {
  background-color: rgba(13, 148, 136, 0.08) !important;
}
[dir="rtl"] #tour-topbar-notifications .dropdown_footer .custom_btn .icon_right {
  transform: scaleX(-1);
}
[data-theme="dark"] #tour-topbar-notifications .dropdown_footer .custom_btn {
  color: #EE7222 !important;
}
[data-theme="dark"] #tour-topbar-notifications .dropdown_footer .custom_btn:hover {
  background-color: rgba(238, 114, 34, 0.12) !important;
}

/* ══════════════════════════════════════════════════════════
   (طلب المستخدم 2026-09-10): توحيد القوائم المنسدلة في المشروع

   المشكلة: للمشروع ثلاثة أنواع من القوائم المنسدلة بتنسيقات مختلفة:
     1) vue-multiselect (مكوّن SelectInput) في 148 شاشة — سهمه من قالب النظام
        بحجم 24px ومثبّت على مسافة 12px من الحافة وبمحاذاة علوية لا وسطية،
        فيبدو لاصقاً بطرف الحقل وغير متسق مع بقية الحقول.
     2) ‎.form-select‎ في 261 موضع — سهم بوتستراب 16×12 على مسافة أخرى.
     3) ‎<select class="form-control">‎ في 97 موضعاً و‎.custom-select‎ في 36 —
        بلا سهم مخصص أصلاً، فيظهر سهم نظام التشغيل بشكل مختلف كلياً.

   المعالجة: مقاسات واحدة لكل القوائم — نفس السهم، ونفس البُعد عن الحافة
   (وهو نفس الحشو الأفقي لحقول الفورم)، ومحاذاة وسطية رأسياً، ومساحة محجوزة
   للنص لا يمر تحتها. تتبع الاتجاه (RTL/LTR) والوضع الليلي، ولا تمس ارتفاع
   الحقول ولا حدودها ولا ألوانها حتى يبقى الشكل العام كما هو.
   ══════════════════════════════════════════════════════════ */
:root {
  /* بُعد السهم عن الحافة: أوسع قليلاً من الحشو الأفقي للحقل (0.6667rem) حتى لا
     يبدو ملتصقاً بالطرف كما كان، ومتساوٍ في كل القوائم */
  --select-arrow-inset: 0.8889rem;
  --select-arrow-size: 1rem;
  /* المساحة المحجوزة للنص: البُعد + السهم + فاصل */
  --select-arrow-space: 2.4444rem;
  --select-arrow-img: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2016.8C11.3%2016.8%2010.6%2016.53%2010.07%2016L3.55002%209.48001C3.26002%209.19001%203.26002%208.71001%203.55002%208.42001C3.84002%208.13001%204.32002%208.13001%204.61002%208.42001L11.13%2014.94C11.61%2015.42%2012.39%2015.42%2012.87%2014.94L19.39%208.42001C19.68%208.13001%2020.16%208.13001%2020.45%208.42001C20.74%208.71001%2020.74%209.19001%2020.45%209.48001L13.93%2016C13.4%2016.53%2012.7%2016.8%2012%2016.8Z%22%20fill%3D%22%23080707%22%2F%3E%3C%2Fsvg%3E");
}
[data-theme="dark"] {
  --select-arrow-img: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2016.8C11.3%2016.8%2010.6%2016.53%2010.07%2016L3.55002%209.48001C3.26002%209.19001%203.26002%208.71001%203.55002%208.42001C3.84002%208.13001%204.32002%208.13001%204.61002%208.42001L11.13%2014.94C11.61%2015.42%2012.39%2015.42%2012.87%2014.94L19.39%208.42001C19.68%208.13001%2020.16%208.13001%2020.45%208.42001C20.74%208.71001%2020.74%209.19001%2020.45%209.48001L13.93%2016C13.4%2016.53%2012.7%2016.8%2012%2016.8Z%22%20fill%3D%22%23e5e7eb%22%2F%3E%3C%2Fsvg%3E");
}

/* ── 1) القوائم الأصلية: form-select و custom-select و select.form-control ── */
.form-select,
.custom-select,
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-arrow-img) !important;
  background-repeat: no-repeat !important;
  background-size: var(--select-arrow-size) var(--select-arrow-size) !important;
}
[dir="rtl"] .form-select,
[dir="rtl"] .custom-select,
[dir="rtl"] select.form-control {
  background-position: left var(--select-arrow-inset) center !important;
  padding-left: var(--select-arrow-space) !important;
}
[dir="ltr"] .form-select,
[dir="ltr"] .custom-select,
[dir="ltr"] select.form-control {
  background-position: right var(--select-arrow-inset) center !important;
  padding-right: var(--select-arrow-space) !important;
}
/* القوائم متعددة الاختيار تُعرض كصندوق أسطر — لا سهم لها ولا مساحة محجوزة */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none !important;
  padding-left: 0.6667rem !important;
  padding-right: 0.6667rem !important;
}

/* ── 2) vue-multiselect (مكوّن SelectInput) ── */
.multiselect .multiselect__select {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: var(--select-arrow-size) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
[dir="rtl"] .multiselect .multiselect__select {
  left: var(--select-arrow-inset) !important;
  right: auto !important;
}
[dir="ltr"] .multiselect .multiselect__select {
  right: var(--select-arrow-inset) !important;
  left: auto !important;
}
.multiselect .multiselect__select::before {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  border: none !important;
  width: var(--select-arrow-size) !important;
  height: var(--select-arrow-size) !important;
  background-image: var(--select-arrow-img) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
/* ملف القالب يُحقن في الصفحة بعد هذا الملف، فيلزم رفع الأولوية على
   ‎.custom_multiselect .multiselect__tags‎ التي تحجز مساحة السهم القديمة */
[dir="rtl"] .multiselect .multiselect__tags {
  padding-left: var(--select-arrow-space) !important;
}
[dir="ltr"] .multiselect .multiselect__tags {
  padding-right: var(--select-arrow-space) !important;
}
/* دوّارة التحميل تحل محل السهم في مكانه نفسه بدل الطرف المقابل في العربية */
.multiselect .multiselect__spinner {
  top: 1px !important;
  bottom: 1px !important;
  height: auto !important;
  width: var(--select-arrow-space) !important;
}
[dir="rtl"] .multiselect .multiselect__spinner {
  left: 1px !important;
  right: auto !important;
}
[dir="ltr"] .multiselect .multiselect__spinner {
  right: 1px !important;
  left: auto !important;
}
.multiselect--disabled .multiselect__select {
  background: transparent !important;
  opacity: 0.5;
}

/* ── 3) vue-select (v-select) في شاشات الأستاذ والدفاتر المساعدة ──
   مكتبة ثالثة بتنسيق مختلف كلياً (حد رمادي شفاف، زوايا 4px، سهم صغير باهت).
   تُلبَس نفس هيئة حقول الفورم: نفس الحد والزوايا والخلفية والخط، ونفس السهم
   على نفس البُعد — حتى لا يختلف شكل القائمة باختلاف الشاشة. */
.v-select .vs__dropdown-toggle {
  border: 1px solid var(--grey-ED);
  border-radius: 0.4444rem;
  background-color: var(--grey-F7);
  padding: 0.75rem 0.6667rem;
  padding-inline-end: var(--select-arrow-inset);
}
.v-select.vs--open .vs__dropdown-toggle {
  border-color: #072a42;
}
.v-select .vs__selected-options {
  padding: 0;
}
.v-select .vs__search,
.v-select .vs__search:focus,
.v-select .vs__selected {
  margin: 0;
  padding: 0;
  font-size: 0.7778rem;
  line-height: 1.1667rem;
  color: var(--black-08);
}
.v-select .vs__actions {
  padding: 0;
  gap: 0.25rem;
}
.v-select .vs__open-indicator {
  width: var(--select-arrow-size);
  height: var(--select-arrow-size);
  fill: var(--black-08);
}
.v-select .vs__clear {
  fill: var(--grey-62);
}
[data-theme="dark"] .v-select .vs__open-indicator {
  fill: #e5e7eb;
}

/* ══════════════════════════════════════════════════════════
   (طلب المستخدم 2026-09-10): ضبط مربعات الاختيار وأزرار الاختيار

   القالب يبني الصف بأسلوب bootstrap القديم: حشو جانبي للحاوية ‎1.5em‎ والمربع
   يطفو (float) داخل هذا الحشو بهامش سالب. يعطي ذلك فجوة ثابتة بمقدار نصف em
   بين المربع والتسمية تتغير بتغير حجم الخط، ويجعل المربع محاذياً لأعلى السطر
   لا لوسطه، وأي تسمية طويلة تلتف تحت المربع لا بجانبه.

   المعالجة: الحاوية تصير صفاً مرناً (flex) بفجوة واحدة معلومة، بلا طفو ولا
   هوامش سالبة ولا حشو جانبي — يتبع اتجاه الصفحة تلقائياً في العربية
   والإنجليزية، ويتوسط المربع مع سطر التسمية، وتبقى التسمية الطويلة بجانبه.
   ومقاس موحّد لمربعات الاختيار وأزرار الاختيار، عدا مفاتيح التبديل
   (form-switch) فلها مقاسها الخاص.

   الأولوية مرفوعة عمداً (‎.form-check.form-check‎) لأن ملف القالب يُحقن في
   الصفحة بعد هذا الملف، فالتساوي في الأولوية يرجّحه.
   ══════════════════════════════════════════════════════════ */
.form-check.form-check {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-left: 0;
  padding-right: 0;
  min-height: auto;
}
.form-check.form-check-inline {
  display: inline-flex;
}
[dir="rtl"] .form-check-inline {
  margin-left: 1rem;
  margin-right: 0;
}
[dir="ltr"] .form-check-inline {
  margin-right: 1rem;
  margin-left: 0;
}
.form-check.form-check > .form-check-input,
.filed_checkbox_custom .form-check-input {
  float: none;
  /* الهوامش السالبة للقالب تُصفّر صراحةً لا بالمختصر وحده */
  margin: 0;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
  flex: 0 0 auto;
  /* مفاتيح التبديل بالمقاسين lg/md كانت تُزاح بـ left سالبة لتعويض تخطيط الطفو
     القديم — لم تعد لازمة داخل الصف المرن وتُخرج المفتاح عن محاذاته */
  position: static;
  left: auto;
  right: auto;
}
.form-check.form-check > .form-check-label,
.filed_checkbox_custom .form-check-label {
  margin-bottom: 0;
  /* التسمية تأخذ باقي السطر فلا ينزلق نصها تحت المربع عند الالتفاف */
  flex: 1 1 auto;
}

/* مقاس موحّد: مربع الاختيار وزر الاختيار — عدا مفاتيح التبديل */
.form-check.form-check:not(.form-switch) > .form-check-input[type="checkbox"],
.form-check.form-check:not(.form-switch) > .form-check-input[type="radio"] {
  width: 1.1111rem;
  height: 1.1111rem;
  margin-top: 0;
  border-width: 2px;
}
.form-check.form-check:not(.form-switch) > .form-check-input[type="checkbox"] {
  border-radius: 0.3333rem;
}
.form-check.form-check:not(.form-switch) > .form-check-input[type="radio"] {
  border-radius: 50%;
}

/* الحاوية المرنة تلغي حاجة الهوامش اليدوية التي أضافتها بعض الشاشات للفصل */
.form-check.form-check > .form-check-label.ms-1,
.form-check.form-check > .form-check-label.me-1 {
  margin-inline-start: 0;
  margin-inline-end: 0;
}


/* ——— صندوق اللوجو داخل القائمة الجانبية على الموبايل ———
   (طلب المستخدم 2026-09-10): «اخفي المكان كله .. شيل اللوجو والمساحة اللي
   حواليه، عايز ال side menu فقط». نسق القالب يخفي الصندوق أصلاً تحت 992px،
   لكن قاعدة لاحقة في الملف نفسه تعيد ‏display:flex بنفس الأولوية فتفوز عليها
   ويظهر الصندوق طافياً فوق المحتوى. نخفيه بأولوية أعلى ونعيد شريط القائمة
   إلى أعلى اللوحة لأن ارتفاعه محسوب بطرح ارتفاع الصندوق.
   التخصيص أعلى من نسق القالب لأن ملف النسق يُحقن وقت التشغيل بعد هذا الملف. */
@media (max-width: 991.98px) {
  body .vertical-menu .navbar-brand-box,
  body .vertical-menu .vertical-menu-btn {
    display: none !important;
  }
  body .vertical-menu .sidebar-menu-scroll {
    height: 100% !important;
    margin-top: 0 !important;
  }
  body .vertical-menu #sidebar-menu {
    margin-top: 12px;
  }
}


/* ——— تباين صفوف الجداول عند مرور الماوس ———
   (تذكرة 397): «الصف يتحول إلى خلفية بيضاء والنص يبقى فاتحاً فلا يُقرأ». بوتستراب
   يضبط عند التمرير متغيّرين: خلفية الصف ولون نصه. النسق يعيد تعريف الخلفية وحدها،
   فيبقى لون النص من الحالة السابقة — فاتحٌ على أبيض. نجعل لون النص يرث لون الصف
   نفسه فلا يتغير عند التمرير أصلاً، ونستبدل الأبيض الصريح بطبقة خفيفة شفافة
   تعمل فوق أي خلفية، فاتحة كانت أو داكنة. */
.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:hover > * > a {
  --bs-table-hover-bg: rgba(238, 114, 34, 0.05);
  --bs-table-hover-color: inherit;
  color: inherit !important;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: var(--dk-hover) !important;
  color: var(--dk-text) !important;
}

/* ——— إصلاح مجموعات الأزرار وحقول الإدخال في بيئة RTL ———
   في واجهات RTL، الترتيب البصري يبدأ من اليمين، لكن بوتستراب 5 يطبق القواعد الافتراضية لـ LTR،
   فيلغي استدارة الحواف اليمنى للعنصر الأول ويستدير الحواف اليسرى للعنصر الأخير بشكل معكوس،
   مع استخدام margin-left السالب بدلاً من margin-right. هذا القسم يعيد ضبطها بالكامل. */
[dir="rtl"] .btn-group,
html[dir="rtl"] .btn-group,
[dir="rtl"] .input-group,
html[dir="rtl"] .input-group {
  direction: rtl;
}

[dir="rtl"] .btn-group > :not(:first-child),
html[dir="rtl"] .btn-group > :not(:first-child),
[dir="rtl"] .input-group > :not(:first-child),
html[dir="rtl"] .input-group > :not(:first-child) {
  margin-right: -1px !important;
  margin-left: 0 !important;
}

/* العنصر الأول في اليمين: حواف يمنى مستديرة، حواف يسرى مستقيمة */
[dir="rtl"] .btn-group > :first-child:not(:last-child),
[dir="rtl"] .btn-group > .btn:first-child:not(:last-child),
html[dir="rtl"] .btn-group > :first-child:not(:last-child),
html[dir="rtl"] .btn-group > .btn:first-child:not(:last-child),
[dir="rtl"] .input-group > :first-child:not(:last-child),
html[dir="rtl"] .input-group > :first-child:not(:last-child) {
  border-top-right-radius: var(--bs-border-radius, 0.25rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.25rem) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* العنصر الأخير في اليسار: حواف يسرى مستديرة، حواف يمنى مستقيمة */
[dir="rtl"] .btn-group > :last-child:not(:first-child),
[dir="rtl"] .btn-group > .btn:last-child:not(:first-child),
html[dir="rtl"] .btn-group > :last-child:not(:first-child),
html[dir="rtl"] .btn-group > .btn:last-child:not(:first-child),
[dir="rtl"] .input-group > :last-child:not(:first-child),
html[dir="rtl"] .input-group > :last-child:not(:first-child) {
  border-top-left-radius: var(--bs-border-radius, 0.25rem) !important;
  border-bottom-left-radius: var(--bs-border-radius, 0.25rem) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* العناصر في المنتصف: حواف مستقيمة من كلا الجانبين */
[dir="rtl"] .btn-group > :not(:first-child):not(:last-child),
[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child),
html[dir="rtl"] .btn-group > :not(:first-child):not(:last-child),
html[dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child),
[dir="rtl"] .input-group > :not(:first-child):not(:last-child),
html[dir="rtl"] .input-group > :not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* المقاسات الصغيرة btn-group-sm و input-group-sm */
[dir="rtl"] .btn-group-sm > :first-child:not(:last-child),
[dir="rtl"] .btn-group-sm > .btn:first-child:not(:last-child),
html[dir="rtl"] .btn-group-sm > :first-child:not(:last-child),
html[dir="rtl"] .btn-group-sm > .btn:first-child:not(:last-child),
[dir="rtl"] .input-group-sm > :first-child:not(:last-child),
html[dir="rtl"] .input-group-sm > :first-child:not(:last-child) {
  border-top-right-radius: var(--bs-border-radius-sm, 0.2rem) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm, 0.2rem) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .btn-group-sm > :last-child:not(:first-child),
[dir="rtl"] .btn-group-sm > .btn:last-child:not(:first-child),
html[dir="rtl"] .btn-group-sm > :last-child:not(:first-child),
html[dir="rtl"] .btn-group-sm > .btn:last-child:not(:first-child),
[dir="rtl"] .input-group-sm > :last-child:not(:first-child),
html[dir="rtl"] .input-group-sm > :last-child:not(:first-child) {
  border-top-left-radius: var(--bs-border-radius-sm, 0.2rem) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm, 0.2rem) !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Stepper progress & fee rows dark mode (JOOD-113 & JOOD-114) ── */
[data-theme="dark"] .stepper_progress_custom .item_content {
  background: var(--dk-card, #22262d) !important;
  border: 1px solid var(--dk-border, #30363d) !important;
  border-inline-start: 3px solid rgba(255, 102, 0, 0.4) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .stepper_progress_custom .item_content:hover {
  background: var(--dk-hover, #2d323a) !important;
  border-inline-start-color: #ff6600 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .stepper_progress_custom .item_title {
  color: var(--dk-muted, #94a3b8) !important;
}
[data-theme="dark"] .stepper_progress_custom .item_desc {
  color: var(--dk-text, #f1f5f9) !important;
}
[data-theme="dark"] .stepper_progress_custom .item_date {
  color: var(--dk-muted, #94a3b8) !important;
}
[data-theme="dark"] .fee-item-row {
  background: var(--dk-input, #2a2e36) !important;
  border-color: var(--dk-border, #30363d) !important;
  color: var(--dk-text, #e1e4e8) !important;
}


/* (بلاغ المالك 2026-09-19 — فلتر «من فرع» في الطلبات المعلّقة): قائمة الاختيار المفتوحة في
   صف أدوات الجدول كانت تُرسم خلف رأس الجدول الثابت (sticky-top z-index 1020 مقابل
   multiselect--active z-index 50) فتظهر مقطوعة. يسري على كل صف أدوات فوق جدول. */
.custom_data_table .table_header .multiselect--active {
  z-index: 1030;
}
.custom_data_table .table_header .slide-left,
.custom_data_table .table_header .slide-right,
.custom_data_table .table_header .custom_form_group,
.custom_data_table .table_header .input-group {
  overflow: visible;
}

/* ══════════════════════════════════════════════════════════
   Cashbox Global Identity & Color Theme
   ══════════════════════════════════════════════════════════ */
.btn-primary,
.btn_primary,
.submit-btn button,
.submit_order_btn,
.btn-theme,
.btn_theme {
  background: #EE7222 !important;
  border-color: #EE7222 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(238, 114, 34, 0.22) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn_primary:hover,
.btn-theme:hover,
.btn_theme:hover {
  background: #d86216 !important;
  border-color: #d86216 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(238, 114, 34, 0.30) !important;
}

.btn-outline-primary,
.btn_outline_primary {
  border-color: #EE7222 !important;
  color: #EE7222 !important;
}

.btn-outline-primary:hover,
.btn_outline_primary:hover {
  background: #EE7222 !important;
  border-color: #EE7222 !important;
  color: #ffffff !important;
}

.text-primary,
.text_primary,
.btn_link_primary {
  color: #EE7222 !important;
}

.bg-primary {
  background-color: #EE7222 !important;
}

.border-primary {
  border-color: #EE7222 !important;
}

/* ══════════════════════════════════════════════════════════
   Cashbox Modern Sidebar Structure & Soft Warm Orange Theme
   ══════════════════════════════════════════════════════════ */
.vertical-menu {
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.12) !important;
}

.vertical-menu .navbar-brand-box {
  height: 70px !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

.vertical-menu .navbar-brand-box .vertical-menu-title {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-inline-end: 8px !important;
}

#sidebar-menu ul li.menu-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 16px 20px 8px !important;
  opacity: 0.55;
}

#sidebar-menu ul li a {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  border-radius: 12px !important;
  margin: 3px 12px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#sidebar-menu ul li a:hover {
  background: rgba(238, 114, 34, 0.08) !important;
  color: #EE7222 !important;
  transform: translateX(-3px);
}

#sidebar-menu ul li a:hover svg,
#sidebar-menu ul li a:hover i {
  color: #EE7222 !important;
  fill: #EE7222 !important;
}

[dir="ltr"] #sidebar-menu ul li a:hover {
  transform: translateX(3px);
}

/* Active Menu Item with Soft Warm Orange */
#side-menu > li > a.active,
#side-menu > li.mm-active > a {
  font-weight: 800 !important;
  border-radius: 12px !important;
  color: #EE7222 !important;
  background: rgba(238, 114, 34, 0.12) !important;
  border: 1px solid rgba(238, 114, 34, 0.25) !important;
  box-shadow: 0 4px 14px rgba(238, 114, 34, 0.12) !important;
}

#side-menu > li.mm-active > a svg,
#side-menu > li.mm-active > a i,
#side-menu > li > a.active svg,
#side-menu > li > a.active i {
  color: #EE7222 !important;
  fill: #EE7222 !important;
}

#sidebar-menu ul li ul.sub-menu {
  border-radius: 12px !important;
  margin: 4px 12px !important;
  padding: 6px 0 !important;
  border-inline-start: 2px solid rgba(238, 114, 34, 0.3) !important;
}

#sidebar-menu ul li ul.sub-menu li a {
  margin: 2px 8px !important;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
  background: rgba(238, 114, 34, 0.08) !important;
  color: #EE7222 !important;
}

#sidebar-menu ul li ul.sub-menu li a.active,
#sidebar-menu ul li ul.sub-menu li a.nuxt-link-exact-active,
#sidebar-menu ul li ul.sub-menu li a.router-link-exact-active {
  background: rgba(238, 114, 34, 0.14) !important;
  color: #EE7222 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Custom Data Table headers and active pagination */
.custom_data_table table thead tr th {
  background-color: rgba(238, 114, 34, 0.07) !important;
  border-bottom: 2px solid rgba(238, 114, 34, 0.18) !important;
}
.custom_data_table table tbody tr:hover {
  background-color: rgba(238, 114, 34, 0.035) !important;
}
.custom_data_table .pagination li.active a,
.pagination .page-item.active .page-link {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
  color: #ffffff !important;
}
/* ==========================================================================
   Modern Checkbox System (Strictly excludes toggle switches)
   ========================================================================== */
.form-check:not(.form-switch) > .form-check-input:not([role="switch"]),
.filed_checkbox_custom .form-check-input:not([role="switch"]),
.custom_data_table .form-check-input:not([role="switch"]),
.custom_data_table input[type="checkbox"]:not([role="switch"]),
table input[type="checkbox"]:not([role="switch"]),
.table input[type="checkbox"]:not([role="switch"]),
#check-all,
input[type="checkbox"]:not([role="switch"]):not(.form-switch *):not([class*="switch"]):not([class*="toggle"]) {
  width: 1.2rem !important;
  height: 1.2rem !important;
  min-width: 1.2rem !important;
  min-height: 1.2rem !important;
  border-radius: 5px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 65% 65% !important;
  margin: 0 !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: none !important;
}

.form-check:not(.form-switch) > .form-check-input:not([role="switch"]):hover,
.filed_checkbox_custom .form-check-input:not([role="switch"]):hover,
.custom_data_table input[type="checkbox"]:not([role="switch"]):hover,
table input[type="checkbox"]:not([role="switch"]):hover,
#check-all:hover,
input[type="checkbox"]:not([role="switch"]):not(.form-switch *):not([class*="switch"]):not([class*="toggle"]):hover {
  border-color: #EE7222 !important;
}

.form-check:not(.form-switch) > .form-check-input:not([role="switch"]):checked,
.filed_checkbox_custom .form-check-input:not([role="switch"]):checked,
.custom_data_table .form-check-input:not([role="switch"]):checked,
.custom_data_table input[type="checkbox"]:not([role="switch"]):checked,
table input[type="checkbox"]:not([role="switch"]):checked,
.table input[type="checkbox"]:not([role="switch"]):checked,
#check-all:checked,
input[type="checkbox"]:not([role="switch"]):not(.form-switch *):not([class*="switch"]):not([class*="toggle"]):checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8' d='M5 10.5l3.5 3.5L15 6'/%3e%3c/svg%3e") !important;
}

.form-check:not(.form-switch) > .form-check-input:not([role="switch"]):focus,
.filed_checkbox_custom .form-check-input:not([role="switch"]):focus,
.custom_data_table input[type="checkbox"]:not([role="switch"]):focus,
table input[type="checkbox"]:not([role="switch"]):focus,
#check-all:focus,
input[type="checkbox"]:not([role="switch"]):not(.form-switch *):not([class*="switch"]):not([class*="toggle"]):focus {
  border-color: #EE7222 !important;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.18) !important;
  outline: none !important;
}

/* Modern Radio Buttons System */
.form-check:not(.form-switch) > .form-check-input[type="radio"],
.form-check-input[type="radio"],
input[type="radio"] {
  width: 1.2rem !important;
  height: 1.2rem !important;
  min-width: 1.2rem !important;
  min-height: 1.2rem !important;
  border-radius: 50% !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin: 0 !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: none !important;
}

.form-check:not(.form-switch) > .form-check-input[type="radio"]:hover,
.form-check-input[type="radio"]:hover,
input[type="radio"]:hover {
  border-color: #EE7222 !important;
}

.form-check:not(.form-switch) > .form-check-input[type="radio"]:checked,
.form-check-input[type="radio"]:checked,
input[type="radio"]:checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.form-check:not(.form-switch) > .form-check-input[type="radio"]:focus,
.form-check-input[type="radio"]:focus,
input[type="radio"]:focus {
  border-color: #EE7222 !important;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.18) !important;
  outline: none !important;
}

/* Flex layout for custom checkbox groups */
.filed_checkbox_custom {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.filed_checkbox_custom .form-check-input {
  flex-shrink: 0 !important;
}

.filed_checkbox_custom .form-check-label {
  margin: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   Modern Toggle Switch System (.form-switch, role="switch", .switch_row)
   ========================================================================== */
.form-switch {
  padding: 0 !important;
}

.form-check.form-switch {
  display: flex !important;
  align-items: center !important;
  min-height: 1.6rem !important;
}

.form-switch .form-check-input,
.form-check-input[role="switch"],
.form-check.form-switch > .form-check-input {
  width: 2.85rem !important;
  height: 1.55rem !important;
  min-width: 2.85rem !important;
  min-height: 1.55rem !important;
  border-radius: 2rem !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #e2e8f0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  transition: background-color 0.22s ease, border-color 0.22s ease, background-position 0.22s ease !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* RTL Knob slider */
[dir="rtl"] .form-switch .form-check-input,
[dir="rtl"] .form-check-input[role="switch"],
[dir="rtl"] .form-check.form-switch > .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='10' fill='%23ffffff' filter='drop-shadow(0 1px 2px rgba(0,0,0,0.22))'/%3e%3c/svg%3e") !important;
  background-position: right 3px center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem 1.25rem !important;
}

[dir="rtl"] .form-switch .form-check-input:checked,
[dir="rtl"] .form-check-input[role="switch"]:checked,
[dir="rtl"] .form-check.form-switch > .form-check-input:checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
  background-position: left 3px center !important;
}

/* LTR Knob slider */
[dir="ltr"] .form-switch .form-check-input,
[dir="ltr"] .form-check-input[role="switch"],
[dir="ltr"] .form-check.form-switch > .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='10' fill='%23ffffff' filter='drop-shadow(0 1px 2px rgba(0,0,0,0.22))'/%3e%3c/svg%3e") !important;
  background-position: left 3px center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem 1.25rem !important;
}

[dir="ltr"] .form-switch .form-check-input:checked,
[dir="ltr"] .form-check-input[role="switch"]:checked,
[dir="ltr"] .form-check.form-switch > .form-check-input:checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
  background-position: right 3px center !important;
}

.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus {
  border-color: #EE7222 !important;
  box-shadow: 0 0 0 3px rgba(238, 114, 34, 0.18) !important;
}

/* Switch Row Cards (used in /site/messages_settings, create-shipment, etc.) */
.switch_row,
.filed_switch_custom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  margin-bottom: 12px !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
}

.switch_row:hover,
.filed_switch_custom:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.switch_row .form-check-label,
.filed_switch_custom .form-check-label {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex: 1 1 auto !important;
}

.switch_row .form-check-input,
.filed_switch_custom .form-check-input {
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Dark mode for switches */
[data-theme="dark"] .switch_row,
[data-theme="dark"] .filed_switch_custom {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .switch_row:hover,
[data-theme="dark"] .filed_switch_custom:hover {
  background: #24334a !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .switch_row .form-check-label,
[data-theme="dark"] .filed_switch_custom .form-check-label {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .form-switch .form-check-input,
[data-theme="dark"] .form-check-input[role="switch"] {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .form-switch .form-check-input:checked,
[data-theme="dark"] .form-check-input[role="switch"]:checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
}

/* ==========================================================================
   Modern Modal System
   ========================================================================== */
.modal-dialog {
  transition: transform 0.2s ease-out !important;
}

.modal-content {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
  background: #ffffff;
}

.modal-header {
  padding: 18px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.modal-header .modal-title img,
.modal-header .modal-title svg {
  width: 22px;
  height: 22px;
}

/* Close button modern circle */
.modal-header .btn-close,
.modal-header .close {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: #f1f5f9 !important;
  opacity: 0.8 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease-in-out !important;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
  background-color: #fee2e2 !important;
  color: #ef4444 !important;
  opacity: 1 !important;
  transform: scale(1.05);
}

.modal-body {
  padding: 22px 24px !important;
  color: #334155;
  font-size: 0.95rem;
}

.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.modal-footer .btn,
.modal-footer .custom_btn {
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  transition: all 0.15s ease-in-out !important;
}

/* Confirm modal specific */
.confirm-modal-card {
  border-radius: 18px !important;
}

.confirm-badge-icon.danger {
  font-size: 1.25rem;
  line-height: 1;
}

/* Navigation tabs active state */
.nav-pills .nav-link.active,
.nav_tabs_custom .nav-tabs .nav-link.active {
  background-color: #EE7222 !important;
  color: #ffffff !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .form-check-input,
[data-theme="dark"] .form-check-input[type="checkbox"] {
  background-color: #1e293b;
  border-color: #475569 !important;
}

[data-theme="dark"] .form-check-input:checked,
[data-theme="dark"] .form-check-input[type="checkbox"]:checked {
  background-color: #EE7222 !important;
  border-color: #EE7222 !important;
}

[data-theme="dark"] .filed_checkbox_custom .form-check-label {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .modal-content {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .modal-header {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .modal-header .modal-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .modal-header .close {
  background-color: #334155 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .modal-body {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .modal-footer {
  background: #0f172a !important;
  border-top-color: #334155 !important;
}