/* =========================================================================
   ARROW — Modern Logistics UI (2026)  ·  global override layer
   Loaded AFTER style.bundle.css + theme layout files. Re-skins Metronic v7
   components without touching vendor bundles, markup class hooks, or JS ids.
   Direction: dark-navy sidebar · light-gray canvas · Ultra-red accent.
   ========================================================================= */

:root {
  /* Brand / accent */
  --ar-red: #E4002B;
  --ar-red-rgb: 228, 0, 43; /* brand rgb, overridden per-install */
  --ar-red-600: #C10024;
  --ar-red-700: #A0001E;
  --ar-red-050: #FDECEE;
  --ar-red-100: #FBD9DE;

  /* Navy sidebar */
  --ar-navy-1: #0F1B2D;
  --ar-navy-2: #14243A;
  --ar-navy-3: #1E3149;
  --ar-navy-line: rgba(255, 255, 255, .08);
  --ar-navy-text: #AEB9CC;
  --ar-navy-text-dim: #7E8BA3;

  /* Surfaces / ink */
  --ar-bg: #F5F6F8;
  --ar-surface: #FFFFFF;
  --ar-ink: #1B2430;
  --ar-ink-2: #3A4657;
  --ar-muted: #6B7684;
  --ar-line: #E8EBF0;
  --ar-line-strong: #DCE0E7;

  /* Semantics */
  --ar-success: #17B26A;
  --ar-success-050: #E7F7EF;
  --ar-warning: #F79009;
  --ar-warning-050: #FEF3E4;
  --ar-info: #2E90FA;
  --ar-info-050: #E7F1FE;
  --ar-danger: #E4002B;      /* SEMANTIC error red — NOT the brand var */
  --ar-danger-050: #FDECEE;
  --ar-danger-700: #A0001E;

  /* Shape / depth */
  --ar-radius: 14px;
  --ar-radius-sm: 9px;
  --ar-radius-pill: 999px;
  --ar-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --ar-shadow: 0 2px 6px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --ar-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
  --ar-ring: 0 0 0 3px rgba(var(--ar-red-rgb), .14);

  --ar-aside-w: 266px;
}

/* ============================ Base ==================================== */
html body {
  background-color: var(--ar-bg);
  color: var(--ar-ink);
  font-family: 'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}
.content { background-color: var(--ar-bg); }
a { color: var(--ar-red); }
a:hover { color: var(--ar-red-600); }
::selection { background: var(--ar-red-100); color: var(--ar-red-700); }

/* thin modern scrollbars */
* { scrollbar-width: thin; scrollbar-color: #C4CBD6 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C4CBD6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A9B2C0; background-clip: content-box; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--ar-ink); font-weight: 700; }
.text-muted { color: var(--ar-muted) !important; }
.font-weight-bold, .font-weight-bolder { letter-spacing: 0; }

/* =========================== Primary → Red ============================ */
.btn.btn-primary { background-color: var(--ar-red); border-color: var(--ar-red); color: #fff; box-shadow: 0 1px 2px rgba(var(--ar-red-rgb), .25); }
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle { background-color: var(--ar-red-600) !important; border-color: var(--ar-red-600) !important; color: #fff !important; }
.btn.btn-primary.disabled, .btn.btn-primary:disabled { background-color: var(--ar-red) !important; border-color: var(--ar-red) !important; opacity: .55; }
.btn.btn-light-primary { background-color: var(--ar-red-050); border-color: transparent; color: var(--ar-red); }
.btn.btn-light-primary:hover, .btn.btn-light-primary:focus, .btn.btn-light-primary:active { background-color: var(--ar-red) !important; color: #fff !important; }
.btn.btn-outline-primary { border-color: var(--ar-red); color: var(--ar-red); background: transparent; }
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active { background-color: var(--ar-red) !important; border-color: var(--ar-red) !important; color: #fff !important; }
.btn.btn-hover-primary:hover, .btn.btn-hover-light-primary:hover { background-color: var(--ar-red) !important; color: #fff !important; }
.btn.btn-text-primary, .btn.btn-link.text-primary { color: var(--ar-red); }

.text-primary { color: var(--ar-red) !important; }
.text-hover-primary:hover { color: var(--ar-red) !important; }
.bg-primary { background-color: var(--ar-red) !important; }
.bg-light-primary { background-color: var(--ar-red-050) !important; }
.border-primary { border-color: var(--ar-red) !important; }

.label.label-primary { background-color: var(--ar-red); color: #fff; }
.label.label-light-primary { background-color: var(--ar-red-050); color: var(--ar-red); }
.badge.badge-primary { background-color: var(--ar-red); color: #fff; }
.badge.badge-light-primary { background-color: var(--ar-red-050); color: var(--ar-red); }

.symbol.symbol-primary .symbol-label { background-color: var(--ar-red); color: #fff; }
.symbol.symbol-light-primary .symbol-label { background-color: var(--ar-red-050); color: var(--ar-red); }

.progress-bar { background-color: var(--ar-red); }
.spinner.spinner-primary:before { border-color: var(--ar-red); border-right-color: transparent; }
.svg-icon.svg-icon-primary svg [fill]:not([fill="none"]):not(.permanent) { fill: var(--ar-red) !important; }

/* ============================ Sidebar ================================= */
.aside { width: var(--ar-aside-w); box-shadow: none; }
#kt_aside, #kt_brand, #kt_aside_menu_wrapper, #kt_aside_menu {
  background: var(--ar-navy-1) !important;
}
.aside-menu { background: transparent !important; }

/* Brand */
/* Brand / logo header — larger, aligned, well-spaced */
.brand { height: 76px; border-bottom: 1px solid var(--ar-navy-line); padding: 0 16px 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; }
.brand .brand-logo { display: inline-flex; align-items: center; height: 100%; min-width: 0; overflow: hidden; }
.brand .brand-logo img {
  filter: brightness(0) invert(1); opacity: 1;
  height: 42px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center; display: block;
  image-rendering: -webkit-optimize-contrast; /* crisp downscale */
}
/* collapse toggle: a roomy, clean icon button — no longer cramped against the logo */
.brand .btn.brand-toggle {
  width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; transition: background-color .15s ease;
}
.brand .btn.brand-toggle:hover { background-color: rgba(255, 255, 255, .08); }
.brand .btn.brand-toggle .svg-icon { display: inline-flex; line-height: 0; }
.brand .btn.brand-toggle .svg-icon svg { width: 20px; height: 20px; }
.brand .btn.brand-toggle .svg-icon svg [fill]:not([fill="none"]) { fill: var(--ar-navy-text) !important; }
.brand .btn.brand-toggle:hover .svg-icon svg [fill]:not([fill="none"]) { fill: #fff !important; }
/* minimized rail: center the toggle, don't let the wordmark overflow */
.aside-minimize:not(.aside-minimize-hover) .brand { justify-content: center; padding: 0 12px; }
.aside-minimize:not(.aside-minimize-hover) .brand .brand-logo { display: none; }

/* Menu items */
.aside-menu .menu-nav { padding: 10px 14px; }
.aside-menu .menu-nav > .menu-item > .menu-link,
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  transition: background-color .15s ease, color .15s ease;
}
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
.aside-menu .menu-nav .menu-item > .menu-link .menu-text { color: var(--ar-navy-text); font-weight: 500; font-size: .93rem; }
.aside-menu .menu-nav .menu-item > .menu-link .menu-icon,
.aside-menu .menu-nav .menu-item > .menu-link .menu-icon i { color: var(--ar-navy-text-dim); font-size: 1.25rem; }
.aside-menu .menu-nav .menu-item > .menu-link .menu-icon.svg-icon svg [fill]:not([fill="none"]) { fill: var(--ar-navy-text-dim) !important; }
.aside-menu .menu-nav .menu-item > .menu-link .menu-bullet .menu-bullet-dot { background-color: var(--ar-navy-text-dim); }
.aside-menu .menu-nav .menu-item > .menu-link .menu-arrow { color: var(--ar-navy-text-dim); }
.aside-menu .menu-nav .menu-item > .menu-link .menu-arrow:after { color: var(--ar-navy-text-dim); }

/* Hover */
.aside-menu .menu-nav > .menu-item:not(.menu-item-active) > .menu-link:hover,
.aside-menu .menu-nav .menu-submenu .menu-item:not(.menu-item-active) > .menu-link:hover {
  background-color: rgba(255, 255, 255, .06);
}
.aside-menu .menu-nav .menu-item > .menu-link:hover .menu-text { color: #fff; }
.aside-menu .menu-nav .menu-item > .menu-link:hover .menu-icon,
.aside-menu .menu-nav .menu-item > .menu-link:hover .menu-icon i { color: #fff; }
.aside-menu .menu-nav .menu-item > .menu-link:hover .menu-icon.svg-icon svg [fill]:not([fill="none"]) { fill: #fff !important; }

/* Open (expanded submenu parent) */
.aside-menu .menu-nav .menu-item.menu-item-open > .menu-link { background-color: rgba(255, 255, 255, .05); }
.aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-text { color: #fff; }

/* Active */
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link,
.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link {
  background: linear-gradient(90deg, var(--ar-red) 0%, var(--ar-red-600) 100%);
  box-shadow: 0 6px 16px rgba(var(--ar-red-rgb), .35);
}
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-text { color: #fff; font-weight: 600; }
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon,
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon i { color: #fff; }
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon.svg-icon svg [fill]:not([fill="none"]) { fill: #fff !important; }
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-arrow { color: #fff; }
.aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-bullet .menu-bullet-dot { background-color: #fff; }

/* Submenu container + section titles */
.aside-menu .menu-nav .menu-submenu { padding-left: 6px; }
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link { padding-left: 42px; }
.aside-menu .menu-nav .menu-section .menu-text { color: var(--ar-navy-text-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; }
.aside-menu .menu-nav .menu-section .menu-icon.menu-icon i { color: var(--ar-navy-text-dim); }

/* ---- Menu polish: alignment, wrapping, hierarchy, badges ---- */
.aside-menu .menu-nav .menu-item > .menu-link { align-items: center; }
/* icons aligned in a consistent column so all labels line up */
.aside-menu .menu-nav .menu-item > .menu-link .menu-icon {
  width: 30px; min-width: 30px; flex: 0 0 30px; justify-content: flex-start; align-items: center; padding: 0;
}
.aside-menu .menu-nav .menu-item > .menu-link .menu-icon i { font-size: 1.2rem; line-height: 1; width: auto; }
/* long labels wrap cleanly instead of being clipped */
.aside-menu .menu-nav .menu-item > .menu-link .menu-text { white-space: normal; line-height: 1.25; padding: 1px 0; }
/* section titles: clear separation above each group */
.aside-menu .menu-nav .menu-section { margin: 16px 0 2px; height: auto; padding-left: 12px; }
.aside-menu .menu-nav .menu-section:first-child { margin-top: 4px; }
/* submenu hierarchy: tighter, lighter rows + smaller bullets */
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link { padding-top: 8px; padding-bottom: 8px; }
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link .menu-text { font-size: .9rem; }
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link .menu-bullet .menu-bullet-dot { width: 5px; height: 5px; border-radius: 50%; opacity: .85; }
.aside-menu .menu-nav .menu-submenu .menu-item:hover > .menu-link .menu-bullet .menu-bullet-dot,
.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link .menu-bullet .menu-bullet-dot { background-color: #fff; opacity: 1; }
/* in-label badges (Exclusivement / Secure / New) stay compact */
.aside-menu .menu-nav .menu-text .badge, .aside-menu .menu-nav .menu-text .label {
  font-size: .58rem; font-weight: 700; padding: 2px 6px; vertical-align: middle; margin-left: 4px; border-radius: 6px;
}

/* Minimized aside icons stay visible */
.aside-minimize .aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link { background: var(--ar-red); }

/* ============================ Header ================================== */
.header.header-fixed { background: var(--ar-surface); box-shadow: 0 1px 0 var(--ar-line), 0 2px 8px rgba(16, 24, 40, .03); }
.header .container-fluid { padding-left: 24px; padding-right: 24px; }
.header-mobile { background: var(--ar-navy-1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.header-mobile .brand-logo img { filter: brightness(0) invert(1); }
.header-mobile .burger-icon span, .header-mobile .burger-icon span:before, .header-mobile .burger-icon span:after { background: #fff; }

/* Header search */
.arrow-search { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; }
.arrow-search .arrow-search-ico { position: absolute; left: 14px; color: var(--ar-muted); display: flex; pointer-events: none; }
.arrow-search .arrow-search-ico svg { width: 18px; height: 18px; }
.arrow-search input.form-control {
  height: 42px; border-radius: var(--ar-radius-pill); border: 1px solid var(--ar-line);
  background: #F3F5F8; padding-left: 42px; font-size: .9rem; box-shadow: none;
}
.arrow-search input.form-control:focus { background: #fff; border-color: var(--ar-red); box-shadow: var(--ar-ring); }

/* Topbar user cluster */
.topbar .topbar-item { align-items: center; }
#kt_quick_user_toggle { border-radius: var(--ar-radius-pill); padding: 6px 8px 6px 14px !important; transition: background-color .15s ease; }
#kt_quick_user_toggle:hover { background: var(--ar-red-050); }
.topbar .symbol.symbol-35 > span, .topbar .symbol-light-success { background-color: var(--ar-red) !important; color: #fff !important; font-weight: 700; }
.topbar .symbol.symbol-35, .topbar .symbol.symbol-35 .symbol-label { width: 38px; height: 38px; border-radius: 50%; }
.arrow-header-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ar-ink-2); transition: background-color .15s ease, color .15s ease; }
.arrow-header-icon:hover { background: var(--ar-red-050); color: var(--ar-red); }

/* ============================ Subheader ============================== */
.subheader { background: transparent; box-shadow: none; }
.subheader .subheader-title, .subheader .breadcrumb .breadcrumb-item a { color: var(--ar-ink); }

/* ============================= Cards ================================= */
.card.card-custom, .card:not(.card-custom) {
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  box-shadow: var(--ar-shadow-sm);
  background: var(--ar-surface);
}
.card.card-custom > .card-header {
  min-height: 64px; border-bottom: 1px solid var(--ar-line); padding: 14px 22px;
}
.card.card-custom > .card-header .card-title { margin: 0; }
.card.card-custom > .card-header .card-title .card-label { font-size: 1.06rem; font-weight: 700; color: var(--ar-ink); }
.card.card-custom > .card-header .card-title .card-label small,
.card.card-custom > .card-header .card-title .text-muted { color: var(--ar-muted); font-weight: 500; }
.card.card-custom > .card-body { padding: 22px; }
.card.card-custom > .card-footer { border-top: 1px solid var(--ar-line); background: transparent; }
.card.card-custom.gutter-b { margin-bottom: 22px; }

/* ============================= KPI cards ============================= */
.card.card-custom.arrow-kpi {
  display: block; height: auto !important; background: var(--ar-surface) !important;
  border-radius: var(--ar-radius); border: 1px solid var(--ar-line); overflow: hidden;
  position: relative; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card.card-custom.arrow-kpi:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi, var(--ar-red)); }
.card.card-custom.arrow-kpi:hover { transform: translateY(-3px); box-shadow: var(--ar-shadow); border-color: var(--ar-line-strong); text-decoration: none; }
.arrow-kpi .arrow-kpi-body { padding: 20px 20px 18px 22px; }
.arrow-kpi .arrow-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.arrow-kpi .arrow-kpi-icon {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--kpi, var(--ar-red)); background: color-mix(in srgb, var(--kpi, var(--ar-red)) 12%, #fff);
}
.arrow-kpi .arrow-kpi-icon i { font-size: 1.35rem; color: var(--kpi, var(--ar-red)); }
.arrow-kpi .arrow-kpi-cod { background: var(--ar-bg); color: var(--ar-ink-2); font-weight: 700; font-size: .72rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ar-line); }
.arrow-kpi .arrow-kpi-num { font-size: 2.2rem; line-height: 1; font-weight: 800; color: var(--ar-ink); letter-spacing: -.5px; }
.arrow-kpi .arrow-kpi-num small { font-size: .9rem; font-weight: 600; color: var(--ar-muted); margin-left: 4px; letter-spacing: 0; }
.arrow-kpi .arrow-kpi-label { margin-top: 8px; color: var(--ar-muted); font-weight: 600; font-size: .92rem; }
.card.card-custom.arrow-kpi:hover .arrow-kpi-label { color: var(--ar-ink); }

/* ============================= Buttons =============================== */
.btn { border-radius: var(--ar-radius-sm); font-weight: 600; transition: all .15s ease; }
.btn.btn-secondary { background: #fff; border-color: var(--ar-line-strong); color: var(--ar-ink-2); }
.btn.btn-secondary:hover { background: var(--ar-bg); border-color: #C7CDD8; }
.btn.btn-success { background: var(--ar-success); border-color: var(--ar-success); }
.btn.btn-success:hover { background: #0F9457; border-color: #0F9457; }
.btn.btn-light, .btn.btn-light-dark { background: var(--ar-bg); border-color: transparent; color: var(--ar-ink-2); }
.btn.btn-light:hover { background: #EBEEF3; }
.btn.btn-icon.btn-sm, .btn-group-sm > .btn.btn-icon { border-radius: 8px; }
.btn.btn-clean:hover { background: var(--ar-red-050); color: var(--ar-red); }
.btn:focus, .btn.focus { box-shadow: var(--ar-ring); }
/* Action-button cluster in tables */
td .btn.btn-icon, td .btn-group .btn { width: 32px; height: 32px; }

/* ============================= Forms ================================= */
.form-control, .custom-select {
  border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius-sm);
  color: var(--ar-ink); background-color: #fff; min-height: calc(1.5em + 1rem + 2px);
}
.form-control:focus, .custom-select:focus { border-color: var(--ar-red); box-shadow: var(--ar-ring); background: #fff; }
.form-control::placeholder { color: #9AA4B2; }
.form-control.form-control-solid { background: #F3F5F8; border-color: transparent; }
.form-control.form-control-solid:focus { background: #fff; border-color: var(--ar-red); box-shadow: var(--ar-ring); }
.form-group label, .form-group > label { color: var(--ar-ink-2); font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
textarea.form-control { min-height: 92px; }
.input-group-text { background: #F3F5F8; border-color: var(--ar-line-strong); border-radius: var(--ar-radius-sm); color: var(--ar-muted); }

/* Metronic custom checkbox / radio / switch */
.checkbox > input:checked ~ span, .radio > input:checked ~ span { background-color: var(--ar-red); }
.checkbox > span, .radio > span { border-radius: 5px; }
.checkbox:hover > input:not(:checked) ~ span, .radio:hover > input:not(:checked) ~ span { border-color: var(--ar-red); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ar-red); border-color: var(--ar-red); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--ar-ring); }
.switch input:empty ~ span:before { background: #D9DEE7; }
.switch input:checked ~ span:before { background: var(--ar-red); }

/* Select2 */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ar-line-strong) !important; border-radius: var(--ar-radius-sm) !important; min-height: 42px;
}
.select2-container--default.select2-container--focus .select2-selection { border-color: var(--ar-red) !important; box-shadow: var(--ar-ring); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--ar-ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-dropdown { border-color: var(--ar-line-strong); border-radius: var(--ar-radius-sm); box-shadow: var(--ar-shadow); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ar-red); }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--ar-red-050); color: var(--ar-red); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--ar-red-050); border-color: var(--ar-red-100); color: var(--ar-red); border-radius: 6px; }

/* ============================= Tables ================================ */
.table { color: var(--ar-ink); }
.table thead th, .table.table-head-custom thead th {
  text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; font-weight: 700;
  color: var(--ar-muted); border-bottom: 1px solid var(--ar-line) !important; border-top: 0; padding: 12px 12px; background: #FBFCFD;
}
.table td, .table th { border-top: 1px solid var(--ar-line); vertical-align: middle; padding: 12px 12px; }
.table.table-hover tbody tr:hover, tr.odd:hover, tr.even:hover { background-color: #FAFBFD; }
.table.table-bordered { border-color: var(--ar-line); }
.table.table-bordered td, .table.table-bordered th { border-color: var(--ar-line); }

/* DataTables */
.dataTables_wrapper { padding: 4px 0; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius-sm); padding: 6px 12px; height: 38px; color: var(--ar-ink);
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--ar-red); box-shadow: var(--ar-ring); outline: none; }
.dataTables_wrapper .dataTables_info { color: var(--ar-muted); font-size: .85rem; padding-top: 14px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important; border: 1px solid transparent !important; margin: 0 2px; color: var(--ar-ink-2) !important; padding: 6px 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ar-red-050) !important; color: var(--ar-red) !important; border-color: transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ar-red) !important; border-color: var(--ar-red) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: #B7C0CD; }
.dataTables_processing { border-radius: var(--ar-radius-sm); box-shadow: var(--ar-shadow); border: 1px solid var(--ar-line); color: var(--ar-ink); font-weight: 600; }
/* active sort column: Metronic colors it blue -> brand red accent */
.dataTables_wrapper .dataTable th.sorting_asc, .dataTables_wrapper .dataTable td.sorting_asc,
.dataTables_wrapper .dataTable th.sorting_desc, .dataTables_wrapper .dataTable td.sorting_desc { color: var(--ar-red) !important; }
.dataTables_wrapper .dataTable th.sorting_asc:after, .dataTables_wrapper .dataTable th.sorting_desc:after { color: var(--ar-red) !important; opacity: 1; }
/* DataTables Bootstrap-4 pagination markup (.page-item/.page-link inside .dataTables_paginate) */
.dataTables_wrapper .dataTables_paginate .page-item .page-link { border-radius: 8px !important; border: 1px solid transparent; margin: 0 2px; color: var(--ar-ink-2); }
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { background: var(--ar-red-050); color: var(--ar-red); }
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--ar-red) !important; border-color: var(--ar-red) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(var(--ar-red-rgb),.28); }
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { opacity: .45; }
/* wide tables scroll instead of clipping */
.dataTables_wrapper { overflow-x: auto; }
.table-responsive { border-radius: var(--ar-radius-sm); }

/* ============ Info family (Metronic "info" = purple #8950FC) ========= */
/* Remap to a clean semantic blue so edit/info actions stop looking violet */
.btn.btn-info { background-color: var(--ar-info); border-color: var(--ar-info); color: #fff; }
.btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:active, .btn.btn-info.active,
.show > .btn.btn-info.dropdown-toggle { background-color: #175CD3 !important; border-color: #175CD3 !important; color: #fff !important; }
.btn.btn-light-info { background-color: var(--ar-info-050); border-color: transparent; color: var(--ar-info); }
.btn.btn-light-info:hover, .btn.btn-light-info:active { background-color: var(--ar-info) !important; color: #fff !important; }
.btn.btn-outline-info { border-color: var(--ar-info); color: var(--ar-info); }
.btn.btn-outline-info:hover { background: var(--ar-info) !important; color: #fff !important; }
.btn.btn-hover-info:hover { background-color: var(--ar-info) !important; color: #fff !important; }
.text-info { color: var(--ar-info) !important; }
.bg-info { background-color: var(--ar-info) !important; }
.bg-light-info { background-color: var(--ar-info-050) !important; }
.symbol.symbol-info .symbol-label { background: var(--ar-info); color: #fff; }
.symbol.symbol-light-info .symbol-label { background: var(--ar-info-050); color: var(--ar-info); }
.svg-icon.svg-icon-info svg [fill]:not([fill="none"]):not(.permanent) { fill: var(--ar-info) !important; }

/* ======================= Badges / statuses ========================== */
.badge, .label { font-weight: 700; letter-spacing: .01em; }
.badge { padding: .42em .7em; border-radius: var(--ar-radius-pill); }
.badge.badge-success, .label.label-success { background: var(--ar-success-050); color: #0F9457; }
.badge.badge-light-success, .label.label-light-success { background: var(--ar-success-050); color: #0F9457; }
.badge.badge-warning, .label.label-warning { background: var(--ar-warning-050); color: #B54708; }
.badge.badge-light-warning, .label.label-light-warning { background: var(--ar-warning-050); color: #B54708; }
.badge.badge-info, .label.label-info { background: var(--ar-info-050); color: #175CD3; }
.badge.badge-light-info, .label.label-light-info { background: var(--ar-info-050); color: #175CD3; }
.badge.badge-danger, .label.label-danger { background: var(--ar-danger); color: #fff; }
.badge.badge-light-danger, .label.label-light-danger { background: var(--ar-danger-050); color: var(--ar-danger); }
.badge.badge-secondary, .badge.badge-light { background: var(--ar-bg); color: var(--ar-ink-2); }

/* ============================= Alerts ================================ */
.alert { border: 1px solid var(--ar-line); border-radius: var(--ar-radius); border-left-width: 4px; box-shadow: var(--ar-shadow-sm); }
.alert.alert-success { background: var(--ar-success-050); border-left-color: var(--ar-success); color: #0B6B41; }
.alert.alert-warning { background: var(--ar-warning-050); border-left-color: var(--ar-warning); color: #93370D; }
.alert.alert-info, .alert.alert-primary { background: var(--ar-info-050); border-left-color: var(--ar-info); color: #175CD3; }
.alert.alert-danger { background: var(--ar-danger-050); border-left-color: var(--ar-danger); color: var(--ar-danger-700); }
.alert.alert-custom { border-radius: var(--ar-radius); }

/* ============================= Modals ================================ */
.modal-content { border: 0; border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--ar-line); padding: 18px 24px; }
.modal-header .modal-title { font-weight: 700; color: var(--ar-ink); }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--ar-line); padding: 16px 24px; }
.modal-backdrop.show { opacity: .5; background: #0F1B2D; }

/* ========================= Tabs / pagination ======================== */
.nav.nav-tabs { border-bottom: 1px solid var(--ar-line); }
.nav.nav-tabs .nav-link { border: 0; color: var(--ar-muted); font-weight: 600; padding: 12px 4px; margin-right: 22px; border-bottom: 2px solid transparent; }
.nav.nav-tabs .nav-link:hover { color: var(--ar-ink); border-bottom-color: var(--ar-line-strong); }
.nav.nav-tabs .nav-link.active { color: var(--ar-red); background: transparent; border-bottom-color: var(--ar-red); }
.nav.nav-pills .nav-link { border-radius: var(--ar-radius-pill); color: var(--ar-ink-2); font-weight: 600; }
.nav.nav-pills .nav-link.active { background: var(--ar-red); color: #fff; }
.pagination .page-link { border-radius: 8px !important; margin: 0 2px; border: 1px solid var(--ar-line); color: var(--ar-ink-2); }
.pagination .page-link:hover { background: var(--ar-red-050); color: var(--ar-red); border-color: transparent; }
.pagination .page-item.active .page-link { background: var(--ar-red); border-color: var(--ar-red); color: #fff; }

/* =========================== Dropdowns =============================== */
.dropdown-menu { border: 1px solid var(--ar-line); border-radius: var(--ar-radius-sm); box-shadow: var(--ar-shadow); padding: 8px; }
.dropdown-menu .dropdown-item { border-radius: 7px; padding: 8px 12px; font-weight: 500; color: var(--ar-ink-2); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--ar-red-050); color: var(--ar-red); }
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--ar-red); color: #fff; }
.navi .navi-item .navi-link:hover { background: var(--ar-red-050); }

/* ======================= Symbols / avatars ========================== */
.symbol.symbol-light-success .symbol-label { background: var(--ar-success-050); color: #0F9457; }

/* ========================== Empty / loading ========================= */
.arrow-empty { text-align: center; padding: 48px 20px; color: var(--ar-muted); }
.arrow-empty .arrow-empty-ico { width: 64px; height: 64px; border-radius: 16px; background: var(--ar-bg); display: inline-flex; align-items: center; justify-content: center; color: #AEB6C4; margin-bottom: 14px; }
.arrow-empty h4 { color: var(--ar-ink); font-weight: 700; margin-bottom: 4px; }
table.dataTable tbody td.dataTables_empty { padding: 40px; color: var(--ar-muted); font-weight: 500; }

.spinner-border.text-primary { color: var(--ar-red) !important; }
.overlay-block .overlay-layer, .overlay .overlay-layer { background: rgba(255, 255, 255, .7); }

/* ============================ Utilities ============================= */
.separator { border-color: var(--ar-line); }
.card.card-custom.card-stretch { height: calc(100% - 22px); }
.rounded-arrow { border-radius: var(--ar-radius) !important; }

/* ============================ Responsive ============================ */
@media (max-width: 991.98px) {
  .header .container-fluid { padding-left: 16px; padding-right: 16px; }
  .arrow-search { max-width: 100%; }
  .card.card-custom > .card-header { padding: 14px 16px; }
  .card.card-custom > .card-body { padding: 16px; }
  .aside { width: 270px; }
}
@media (max-width: 767.98px) {
  .card.card-custom > .card-header { flex-wrap: wrap; gap: 10px; }
  .arrow-kpi .arrow-kpi-num { font-size: 1.9rem; }
  .dataTables_wrapper .dataTables_filter input { min-width: 150px; }
}