html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Global reset and basic styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #222;
}

/* Main content */
.main-content {
  padding: 2rem;
}

/* Footer */
.main-footer {
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  background-color: #222;
  color: #fff;
}

/* Button styling */
button {
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}
/* Full-width form group (for permissions block) */
.form-group.form-group--full {
  grid-column: 1 / -1;
}

/* Permissions list container */
.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
}

/* Single permission item */
.permission-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-size: 0.9rem;
}
/* Narrow card for forms */
.card.card--narrow {
  max-width: 1500px;
  margin: 0 auto 1.5rem auto;
}

/* Users form layout */
.form-grid--users {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-row--actions {
  justify-content: flex-end;
}

.form-group--half {
  flex: 1;
  min-width: 220px;
}

.form-group--full {
  flex: 1 0 100%;
}

/* Permissions list */
.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.permission-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-size: 0.85rem;
}

/* User preview box */
.user-preview p {
  margin-bottom: 0.25rem;
}
/* Body styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  color: #222;
}

/* Main content */
.main-content {
  padding: 0 2rem 2rem 2rem; /* no top padding, keep right/bottom/left */
}

/* Center content vertically a bit and limit width */
.page-wrapper {
  max-width: 1500px;
  margin: 0 auto 2rem auto; /* no top margin, keep bottom margin */
}

/* Wider layout on large screens */
@media (min-width: 1200px) {
  .page-wrapper {
    max-width: 1500px;
  }
}

/* Card layout */
.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

.card.card--narrow {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

/* Card title */
.card-title {
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Form layout (users) */
.form-grid--users {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-row--actions {
  justify-content: flex-end;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 220px;
}

.form-group--half {
  flex: 1;
  min-width: 250px;
}

.form-group--full {
  flex-basis: 100%;
}

/* Labels and inputs */
.form-group label {
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.form-group input,
.form-group select {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  background-color: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Permissions list */
.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.permission-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-size: 0.85rem;
}

/* Button styling */
button {
  padding: 0.6rem 1.4rem;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

button:hover {
  background-color: #0056b3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

button:active {
  transform: translateY(1px);
}

/* Status text */
.status-text {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #333;
}

/* User preview */
.user-preview p {
  margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 1200px) {
  .page-wrapper {
    margin-top: 1rem;
  }

  .card {
    padding: 1.25rem 1.5rem;
  }
}

/* Generic data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.data-table th,
.data-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.data-table tr:hover {
  background-color: hwb(0 70% 0%);
}

/* Light background grouping for waybill lines */
.waybill-group-b {
  background-color: hwb(210 40% 9%);
}

.waybill-group-a {
  background-color: hsl(220, 14%, 96%);
}

/* Small action button */
.button-small {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
}

/* Icon buttons inside tables */
.icon-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background-color: #f0f0f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.icon-button:hover {
  background-color: #e2e2e2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.icon-button:active {
  transform: translateY(1px);
}

.icon-button--danger {
  background-color: #ff4d4d;
  color: #fff;
}

.icon-button--danger:hover {
  background-color: #cc0000;
}

.icon-button--toggle-active {
  background-color: #e6f7ff;
}

.icon-button--toggle-inactive {
  background-color: #ffe7ba;
}

.button-small:hover {
  background-color: #0056b3;
}

/* Badge for permissions */
.tag-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: #eef2ff;
  border: 1px solid #d0d7ff;
  font-size: 0.75rem;
  margin-right: 0.25rem;
}
/* Inline header inside card */
.card-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Primary and secondary buttons for actions */
.button-primary {
  padding: 0.45rem 1.1rem;
  background-color: #007bff;
  color: #fff;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.button-primary:hover {
  background-color: #0056b3;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
}

.button-primary:active {
  transform: translateY(1px);
}

.button-secondary {
  padding: 0.45rem 1rem;
  background-color: #e0e0e0;
  color: #222;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.15s ease;
}

.button-secondary:hover {
  background-color: #d0d0d0;
}

.button-danger {
  padding: 0.3rem 0.8rem;
  background-color: #ff4d4d;
  color: #fff;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.15s ease;
}

.button-danger:hover {
  background-color: #cc0000;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-overlay.hidden {
  display: none;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  /* Header and navbar layout */

  /* Main layout */
  .main-content {
    padding: 1rem;
  }

  .page-wrapper {
    margin-top: 1rem;
    max-width: 100%;
  }

  .card,
  .card.card--narrow {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  /* Forms stacked nicely */
  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }

  .form-group,
  .form-group--half,
  .form-group--full {
    min-width: 100%;
  }
}
/* Transform users table to cards on very small screens */
@media (max-width: 800px) {
  /* Wrap the table in a block and hide header */
  .data-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 0.4rem 0.7rem;
  }

  .data-table td {
    border: none;
    border-bottom: 1px solid #f1f1f1;
    padding: 0.25rem 0;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .data-table td:last-child {
    border-bottom: none;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
  }

  /* Actions buttons inside card */
  .data-table td[data-label="Actions"] {
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .button-small,
  .button-danger {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
  }
}
/* Overlay-based modal used for commodities page */
.modal-fx {
  position: fixed;
  inset: 0;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* When visible, JS will add this class */
.modal-fx.modal--visible {
  display: flex;
}

/* Packing section layout inside commodity modals */
.packing-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* One packing line: grid with fields + delete icon */
/* One packing line: 4 equal fields + small delete column */
.packing-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1.1fr 0.8fr min-content;
  /* name, weight, units, distribution mode, composition, active + delete */
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: flex-end;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Hide hidden ID input so it does not occupy a grid cell */
.packing-row > input[type="hidden"] {
  display: none;
}

/* Delete button in the same row, last small column */
.packing-row .icon-button {
  align-self: flex-end; /* bottom align with fields */
  justify-self: center; /* centered in its small column */
  margin-top: 0;
}

/* Hide hidden ID input so it does not occupy a grid cell */
.packing-row > input[type="hidden"] {
  display: none;
}

/* Each field inside packing row */
.packing-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.15rem;
}

.packing-field input,
.packing-field select {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
}

/* Delete button in the same row, aligned to the right */
.packing-row .icon-button {
  margin-top: 1.15rem;
  justify-self: flex-end;
}

/* Mobile: stack fields vertically */
@media (max-width: 768px) {
  .packing-row {
    grid-template-columns: 1fr;
  }

  .packing-row .icon-button {
    margin-top: 0.25rem;
    justify-self: flex-start;
  }
}

.form-group--third {
  flex: 0 0 32%;
}

@media (max-width: 768px) {
  .form-group--third {
    flex: 0 0 100%;
  }
}

/* Ensure the page content is not hidden behind the fixed navbar and footer */
body {
  margin: 0;
  padding-top: 64px; /* adjust if your navbar is taller/shorter */
  padding-bottom: 40px; /* space for the footer */
}

/* Slim fixed footer at the bottom of the page */
.main-footer {
  /* position: fixed; */
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-color: #0b1120;
  color: #9ca3af;
  font-size: 12px;
  z-index: 9999999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.main-footer-inner {
  max-width: 1500px;
  width: 100%;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Global layout */
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: #f3f4f6;
  color: #0b1120;
}

/* Main content area (account for fixed header and footer) */
.main-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 3rem 1.5rem 3.5rem; /* top padding for header, bottom for footer */
}

/* Fixed footer */
.main-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #0b1120;
  color: #9ca3af;
  font-size: 0.8rem;
}
/* Reset default body margin to avoid white strip on the left */
body {
  margin: 0;
}

/* Always reserve space for vertical scrollbar to avoid layout shift */
html {
  overflow-y: scroll;
}

/* The overlay container itself */
.modal-fx {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000; /* on top of the app */
  pointer-events: none; /* container does not capture clicks */
}

/* When visible */
.modal-fx.modal--visible {
  display: flex;
}

/* Container for the dynamic waybill lines */
.lines-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Make each waybill line look like a card */
.waybill-line-card {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #dde1ea;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Inside each card: 4 fields per row on desktop */
.waybill-line-card .form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Inline actions (delete button) aligned to bottom-right of row */
.form-group--inline-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Actions row at the bottom: Add left, Cancel/Save right */
.form-actions--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-actions__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .waybill-line-card .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions--between {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions__right {
    justify-content: flex-end;
  }
}

/* Top blue hero card on waybills page */
.waybills-hero-card {
  background: #ffffff;
  border: none;
  color: #ffffff;
}

.waybills-hero-card .card-title {
  font-size: 1.4rem;
  font-weight: 600;
}

/* Soft badges like screenshot */
.badge-soft-warning {
  background-color: rgba(255, 193, 7, 0.15);
  color: #856404;
}

.badge-soft-danger {
  background-color: rgba(220, 53, 69, 0.15);
  color: #842029;
}

.badge-soft-success {
  background-color: rgba(25, 135, 84, 0.15);
  color: #0f5132;
}

/* Optional: slight zebra/group effect already used before */
.waybill-group-a td {
  background-color: #ffffff;
}

.waybill-group-b td {
  background-color: #f8f9fb;
}

.waybills-page {
  max-width: 100%;
  padding-left: 0rem;
  padding-right: 0rem;
}

.sticky-filters {
  position: sticky;
  top: 4.5rem;
  z-index: 100;
}

/* Sticky page header between navbar and main cards (e.g. Transfer header) */
.sticky-page-header {
  position: sticky;
  top: 50px; /* 64px ارتفاع النافبار + 5px مسافة إضافية أسفل النافبار */
  z-index: 40;
  background-color: #f0f2f5; /* match body background */
  padding-top: 0; /* إزالة أي مسافة إضافية علوية */
  padding-bottom: 0.5rem;
}

/* إزالة الهوامش العلوية الافتراضية داخل الهيدر الـ Sticky حتى لا تظهر فراغات */
.sticky-page-header h1 {
  margin-top: 0.8rem;
}

.sticky-page-header p {
  margin-top: 0.15rem;
}

.waybills-hero-card-header {
  background: #0b1120;
  /* background: linear-gradient(135deg, #0b1120, #0f5fd0); */
  /* background: linear-gradient(135deg, #0b1120, #24365e); */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.9rem 1.25rem;
  color: #ffffff;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* صف الفلاتر يكون في سطر واحد مع سكرول أفقي بسيط لو الشاشة ضيقة */
.waybills-filters-row {
  white-space: nowrap;
}

.waybills-filters-row .form-label {
  font-size: 0.75rem;
  font-weight: 500;
}

.waybills-filters-row .form-control,
.waybills-filters-row .form-select {
  font-size: 0.8rem;
}

/* جدول دائماً في سطر واحد (بدون لف سطور) */
.waybills-table th,
.waybills-table td {
  white-space: nowrap;
  font-size: 0.82rem;
}

/* Soft badges like screenshot */
.badge-soft-warning {
  background-color: rgba(255, 193, 7, 0.15);
  color: #856404;
}

.badge-soft-danger {
  background-color: rgba(220, 53, 69, 0.15);
  color: #842029;
}

.badge-soft-success {
  background-color: rgba(25, 135, 84, 0.15);
  color: #0f5132;
}

/* Group zebra effect */
.waybill-group-a td {
  background-color: #ffffff;
}

.waybill-group-b td {
  background-color: #f8f9fb;
}

/* ✅ Pagination design مثل الصورة (كبسولة رمادية مع زر أزرق للصفحة المختارة) */
.custom-pagination {
  background-color: #f1f3f5;
  border-radius: 999px;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
}

.custom-pagination .page-item {
  margin: 0 1px;
}

.custom-pagination .page-link {
  border: none;
  background-color: transparent;
  min-width: 32px;
  height: 26px;
  padding: 2px 6px;
  font-size: 0.8rem;
  line-height: 1;
  text-align: center;
  color: #495057;
}

.custom-pagination .page-item.active .page-link {
  background-color: #0d6efd;
  color: #ffffff;
  border-radius: 6px;
}

.custom-pagination .page-item.disabled .page-link {
  color: #adb5bd;
}

.custom-pagination .page-link:focus,
.custom-pagination .page-link:hover {
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.02);
}

/* ---------- Modal header / body / actions (shared styling) ---------- */

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.modal-close:hover {
  color: #111827;
}

/* ---------- Custom full-screen modal system (.modal-fx) ---------- */

.modal-fx {
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1050; /* on top of the app */
  pointer-events: none; /* container does not capture clicks */
}

/* When visible (JS adds .modal--visible) */
.modal-fx.modal--visible {
  display: flex;
}

/* Dark backdrop layer for .modal-fx dialogs only */
.modal-fx .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1;
  pointer-events: auto; /* clickable */
}

/* White dialog card for .modal-fx dialogs only */
.modal-fx .modal-dialog {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  width: 100%;
  max-height: calc(100vh - 3rem); /* never taller than viewport */
  margin: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.3);
  pointer-events: auto;

  display: flex;
  flex-direction: column;
}

.fullwidth {
  padding: 0rem 0rem;
}

/* ============================
   Waybill timeline (modal)
   ============================ */

.timeline-track-card {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.timeline {
  position: relative;
  margin: 0;
  padding-left: 0;
}

.timeline-item {
  position: relative;
  display: flex;
  margin-bottom: 1rem;
}

.timeline-marker-wrap {
  position: relative;
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
  margin-top: 0.2rem;
}

.timeline-line {
  flex: 1 1 auto;
  width: 2px;
  background-color: #e5e7eb;
  margin-top: 0.25rem;
}

.timeline-content {
  margin-left: 0.5rem;
  padding-bottom: 0.25rem;
}

/* Colors for dots */
.timeline-dot.bg-primary {
  background-color: #0d6efd;
}
.timeline-dot.bg-success {
  background-color: #198754;
}
.timeline-dot.bg-info {
  background-color: #0dcaf0;
}
.timeline-dot.bg-warning {
  background-color: #ffc107;
}
.timeline-dot.bg-danger {
  background-color: #dc3545;
}
.timeline-dot.bg-secondary {
  background-color: #6c757d;
}

.wb-facility-col {
  transition: margin-top 0.25s ease;
}

.brand-link {
  color: inherit; /* inherit h1 color */
  text-decoration: none; /* remove underline */
  cursor: pointer; /* keep pointer to indicate click */
}

.brand-link:hover {
  text-decoration: none; /* prevent underline on hover */
  color: inherit; /* avoid color change */
}

/* Reset link style for the brand title completely */
.brand-title {
  margin: 0;
  padding: 0;
}

.brand-link {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  cursor: pointer;
}

/* Remove hover styles completely */
.brand-link:hover {
  color: inherit !important;
  background: none !important;
  text-decoration: none !important;
}

/* Container for tags */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Label wrapping the checkbox + badge */
.tag-checkbox {
  display: inline-flex;
  align-items: center;
}

/* Hide the raw checkbox, we use only the badge visual */
.tag-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Generic badge style (used already for pages) */
.tag-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: #e9ecef;
  color: #495057;
  line-height: 1.4;
  white-space: nowrap;
}

.tag-badge--single {
  background-color: #e7f1ff;
  color: #0b5ed7;
}

.tag-badge--kit-ready {
  background-color: #dcfce7;
  color: #166534;
}

.tag-badge--kit-missing {
  background-color: #fee2e2;
  color: #b91c1c;
}

.tag-badge--clickable {
  cursor: pointer;
}

.tag-badge--clickable:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

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

.kit-items-table .form-control,
.kit-items-table .form-select {
  width: 100%;
}

.kit-items-table .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.kit-items-table .icon-button:hover {
  background-color: #f8fafc;
  border-color: #cbd5f5;
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.kit-items-table .icon-button--danger {
  color: #b91c1c;
  border-color: #fecaca;
  background-color: #fef2f2;
}

.kit-items-table .icon-button--danger:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

/* Facilities specific badges in list + forms */
.tag-badge--facility {
  background-color: #e7f1ff;
  color: #0b5ed7;
}

/* When facility is selected in the form, make it solid */
.tag-checkbox input[type="checkbox"]:checked + .tag-badge--facility {
  background-color: #0b5ed7;
  color: #ffffff;
}

/* Waybills table header and cells */
.waybills-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.waybills-table tbody td {
  font-size: 0.85rem;
}

/* Status badges */
.badge-status {
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.badge-status-open {
  background-color: #dcfce7; /* soft green */
  color: #166534;
}

.badge-status-closed {
  background-color: #f3f4f6; /* soft gray */
  color: #374151;
}

.badge-status-semi {
  background-color: #fef3c7; /* soft amber */
  color: #92400e;
}

/* ===== Users page table layout ===== */

.users-table-wrapper {
  margin-top: 1rem;
}

/* Make table header a bit stronger */
.data-table thead th {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Basic cell typography */
.data-table tbody td {
  font-size: 0.9rem;
  vertical-align: middle;
}

/* Username / Role / Status alignment */
.data-table tbody td:nth-child(1),
.data-table tbody td:nth-child(3),
.data-table tbody td:nth-child(6),
.data-table tbody td:nth-child(7) {
  white-space: nowrap;
}

/* ===== Tags (Pages + Facilities) ===== */

/* Any cell تحتوي tags */
.tags-cell {
  max-width: 480px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem; /* بدل margin يدوي لكل tag */
}

/* الشكل العام لكل tag */
.tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.3;
  background-color: rgba(13, 110, 253, 0.08); /* أزرق خفيف */
  color: #0b5ed7;
  border: 1px solid rgba(13, 110, 253, 0.15);
  white-space: nowrap;
}

/* تمييز منشآت عن صفحات */
.tag-badge--facility {
  background-color: rgba(25, 135, 84, 0.08); /* أخضر خفيف */
  color: #198754;
  border-color: rgba(25, 135, 84, 0.18);
}

.tag-badge--page {
  background-color: rgba(25, 135, 84, 0.08); /* أخضر خفيف */
  color: #241987;
  border-color: rgba(25, 135, 84, 0.18);
}

/* لو فيه tags كثيرة جدًا، اجعل النص يُلفّ لكن يبقى شكل جميل */
.tags-cell .tag-badge {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ===== Icons (Actions) ===== */

.icon-button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
  padding: 0;
}

.icon-button + .icon-button {
  margin-left: 0.35rem;
}

.icon-button:hover {
  background-color: #f8f9fa;
  box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.25);
  transform: translateY(-1px);
}

/* حالة تفعيل/تعطيل */
.icon-button--toggle-active {
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.35);
}

.icon-button--toggle-inactive {
  box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.35);
}

/* Delete danger */
.icon-button--danger {
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.4);
}

/* على الشاشات الصغيرة، خلي كل صف يأخذ مساحة مريحة */
@media (max-width: 992px) {
  .data-table thead {
    display: none;
  }

  .data-table tbody tr {
    display: block;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  .data-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border: none;
  }

  .data-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 0.75rem;
    color: #6c757d;
  }

  .tags-cell {
    justify-content: flex-end;
  }
}

/* Allow wrapping for packings column */
td[data-label="Packings"] {
  white-space: normal !important;
  word-break: break-word;
  vertical-align: top;
}

/* Ensure tag-badge wraps nicely */
.tag-badge {
  display: inline-block;
  margin: 2px;
  white-space: normal !important;
  max-width: 100%;
}

/* Override badge colors for packing composition */
.tag-badge.tag-badge--single {
  background-color: #e7f1ff;
  color: #0b5ed7;
}

.tag-badge.tag-badge--kit-ready {
  background-color: #dcfce7;
  color: #166534;
}

.tag-badge.tag-badge--kit-missing {
  background-color: #fee2e2;
  color: #b91c1c;
}

.tag-badge.tag-badge--clickable:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.data-table {
  table-layout: fixed;
  width: 100%;
}

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

.tags-cell {
  white-space: normal;
}

/* Wider offcanvas specifically for Waybill details */
.offcanvas-details-wide {
  --bs-offcanvas-width: min(500px, 100vw);
}

@media (min-width: 1400px) {
  .offcanvas-details-wide {
    --bs-offcanvas-width: 600px;
  }
}

/* Force proper layout for Users table */
.users-table {
  table-layout: auto;
  width: 100%;
}

.users-table thead th,
.users-table tbody td {
  display: table-cell !important;
  vertical-align: middle;
  /* white-space: nowrap; */
}

.users-table tbody td:nth-child(4),
.users-table tbody td:nth-child(5),
.users-table tbody td:nth-child(6),
.users-table tbody td:nth-child(7) {
  visibility: visible !important;
}

.modal-dialog-slideout {
  position: fixed;
  margin: 0;
  right: 0;
  top: 0;
  height: 100%;
  max-width: 50%;
}

.modal-dialog-slideout .modal-content {
  height: 100%;
  border-radius: 0;
}

@media (max-width: 991.98px) {
  .modal-dialog-slideout {
    max-width: 100%;
  }
}

/* Transactions pagination - flat, connected style */
#transactionsPagination {
  /* optional: keep it compact */
  margin-bottom: 0;
}

#transactionsPagination .page-link {
  border-radius: 0 !important; /* no rounded corners */
  padding: 0.25rem 0.9rem; /* similar spacing to the screenshot */
  background-color: transparent; /* flat background */
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.15); /* light border for dark theme */
  color: #0d6efd; /* bootstrap primary blue */
  font-weight: 400;
}

/* Connect the borders between items */
#transactionsPagination .page-item + .page-item .page-link {
  margin-left: -1px;
}

/* Active page */
#transactionsPagination .page-item.active .page-link {
  background-color: #0d6efd; /* blue background */
  color: #ffffff; /* white text */
  border-color: #0d6efd;
}

/* Disabled (Previous/Next at edges) */
#transactionsPagination .page-item.disabled .page-link {
  background-color: transparent;
  color: #6c757d; /* muted grey */
  border-color: rgba(255, 255, 255, 0.12);
  cursor: default;
}

/* Force hiding Pages column everywhere */
.hidden-column-pages {
  display: none !important;
}

/* Force hiding Pages column (header + cells) */
.users-table .hidden-pages-col {
  display: none !important;
}

/* Facilities column: allow wrapping on multiple lines */
.users-table td.facilities-cell {
  white-space: normal !important;
  word-break: break-word;
}

/* .card-header {
  background-color: transparent !important;
  border-bottom: none !important;
}
 */

/* Ensure modal is always above the navbar */
.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

.badge-status {
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

/* ===== LEDGER PAGE SPECIFIC STYLES ===== */

.ledger-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Filters card */
.sticky-filters {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Secondary sticky card (e.g., Transfer lines) should appear above primary sticky header */
.sticky-filters-lines {
  z-index: 30;
}

.fullwidth {
  width: 100%;
}

.ledger-summary-card .card-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ledger-kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.ledger-kpi-value {
  font-size: 1.25rem;
  font-weight: 600;
}

.ledger-kpi-sub {
  font-size: 0.75rem;
  color: #9ca3af;
}

.ledger-kpi-good {
  color: #15803d;
}

.ledger-kpi-damage {
  color: #b45309;
}

.ledger-kpi-loss {
  color: #b91c1c;
}

/* Make large modals wider (80% of viewport width) */
.modal-dialog.modal-80w {
  max-width: 80% !important;
  width: 80% !important;
}

/* ===== Generic sticky table layout (reusable) ===== */

/* Wrapper card that contains:
   - sticky toolbar
   - table with sticky thead
*/
.sticky-table-card {
  position: relative;
}

/* Toolbar area (title + filters + actions + optional message)
   This will stick under the main header/navbar. */
.sticky-table-toolbar {
  position: sticky;
  z-index: 900; /* above table rows but below navbar & modals */
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Sticky table head */
.sticky-table-thead {
  position: sticky;
  z-index: 800;
  background-color: #f8fafc; /* cover rows scrolling behind */
}

/* Slight border for header cells to visually separate them */
.sticky-table-thead th {
  border-bottom: 1px solid #e5e7eb;
}

/* Ledger table: make header row sticky under navbar (similar to sticky page header) */
.ledger-table-thead th {
  position: sticky;
  top: 50px; /* نفس قيمة sticky-page-header ليبقى الهيدر تحت النافبار مباشرة عند السكروول */
  z-index: 50;
  background-color: #f8fafc; /* يغطي الصفوف أثناء التمرير */
}

/* Optional: small visual tuning on small screens */
@media (max-width: 768px) {
  .sticky-table-toolbar {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  }
}

.loss-report-table-wrapper {
  max-height: 70vh;
  overflow-y: auto;
}

.loss-report-table-wrapper table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f8f9fa; /* same as .table-light */
}

/* Project setup wizard */
.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.wizard-step {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: #495057;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wizard-step.is-active {
  background: #0d6efd;
  color: #fff;
}

.wizard-step.is-complete {
  background: #198754;
  color: #fff;
}

.wizard-step:hover {
  background: #e2e8f0;
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.wizard-list {
  display: grid;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #e4e7ea;
  border-radius: 0.5rem;
  background: #fafbfc;
}

.wizard-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e9ecef;
}

.wizard-checkbox input {
  margin: 0;
}

.wizard-review__section {
  margin-bottom: 1.25rem;
}

.wizard-review__title {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.wizard-review__list {
  padding-left: 1.2rem;
  margin-bottom: 0.25rem;
}

.wizard-review__more summary {
  cursor: pointer;
  color: #0d6efd;
}

/* Project setup actions + shared action icons */
.project-actions,
.action-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.project-actions .icon-button,
.action-icons .icon-button,
.packing-row .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.project-actions .icon-button:hover,
.action-icons .icon-button:hover,
.packing-row .icon-button:hover {
  background-color: #f8fafc;
  border-color: #cbd5f5;
  color: #1f2937;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.project-actions .icon-button:active,
.action-icons .icon-button:active,
.packing-row .icon-button:active {
  transform: translateY(0);
}

.project-actions .icon-button--view,
.action-icons .icon-button--view,
.packing-row .icon-button--view {
  color: #2563eb;
}

.project-actions .icon-button--edit,
.action-icons .icon-button--edit,
.packing-row .icon-button--edit {
  color: #7c3aed;
}

.project-actions .icon-button--toggle-active,
.action-icons .icon-button--toggle-active,
.packing-row .icon-button--toggle-active {
  color: #0f766e;
  border-color: #99f6e4;
  background-color: #f0fdfa;
}

.project-actions .icon-button--toggle-inactive,
.action-icons .icon-button--toggle-inactive,
.packing-row .icon-button--toggle-inactive {
  color: #b45309;
  border-color: #fde68a;
  background-color: #fffbeb;
}

.project-actions .icon-button--danger,
.action-icons .icon-button--danger,
.packing-row .icon-button--danger {
  color: #b91c1c;
  border-color: #fecaca;
  background-color: #fef2f2;
}

.project-actions .icon-button--danger:hover,
.action-icons .icon-button--danger:hover,
.packing-row .icon-button--danger:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.icon-svg {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

/* ===== Project Details modal (project_setup.php) – scoped to avoid affecting other pages ===== */
#viewProjectModal .modal-content {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

#viewProjectModal .modal-header {
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
}

#viewProjectModal .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
}

#viewProjectModal .modal-body {
  padding: 1.5rem 2rem;
  background-color: #fafbfc;
}

#viewProjectModal .modal-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
}

.project-view-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.project-view-header h4 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.project-view-header .text-muted {
  font-size: 0.9rem;
  color: #64748b;
}

.project-view-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.project-view-meta .project-view-card {
  background-color: #f8fafc;
}

.project-view-card {
  background-color: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.project-view-block {
  margin-bottom: 1rem;
}

.project-view-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.project-view-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  margin-top: 0.25rem;
  word-break: break-word;
}

.project-view-sections {
  display: grid;
  gap: 1rem;
}

.project-view-section {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.25rem;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.project-view-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.project-view-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

.project-view-section__subtitle {
  font-size: 0.8rem;
  color: #64748b;
}

.project-view-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.project-view-cards--members {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .project-view-cards--members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .project-view-cards--members {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-view-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  background-color: #f8fafc;
}

.project-view-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.project-view-item-sub {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.project-view-lines {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

/* Key/value grid: fixed label column, flexible value column; long values wrap */
.project-view-line {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.85rem;
  color: #334155;
}

.project-view-line span:first-child {
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}

.project-view-line span:last-child {
  word-break: break-word;
  min-width: 0;
}

@media (max-width: 576px) {
  .project-view-line {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .project-view-line span:first-child {
    font-size: 0.8rem;
  }
}

.project-view-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.project-view-badge--active {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid rgba(22, 101, 52, 0.2);
}

.project-view-badge--inactive {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.project-view-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: #e2e8f0;
  color: #334155;
}

.project-view-list {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: #334155;
}

.project-view-list li {
  margin-bottom: 0.3rem;
}

.project-view-sublist {
  margin: 0.35rem 0 0.35rem 1rem;
  padding-left: 0.75rem;
  font-size: 0.8rem;
  color: #475569;
  list-style: disc;
}

.project-view-sublist li {
  margin-bottom: 0.25rem;
}

.project-view-muted {
  color: #94a3b8;
  font-size: 0.85rem;
}

.project-view-modal {
  max-width: 1400px;
  width: calc(100vw - 2rem);
}

/* Classic tabs - no pills/brackets, system style */
.nav-tabs-classic .nav-link {
  border-radius: 0;
  border: 1px solid transparent;
  border-bottom-color: #dee2e6;
}
.nav-tabs-classic .nav-link:hover {
  border-color: transparent;
  border-bottom-color: #dee2e6;
}
.nav-tabs-classic .nav-link.active {
  border-color: #dee2e6;
  border-bottom-color: #fff;
  background-color: #fff;
}

/* Report Excel View tabs - white background, no outer border */
.report-excel-tabs-wrapper {
  background-color: #fff;
  padding: 0.25rem 0 0 0;
}
.report-excel-tabs {
  margin-bottom: 0;
}
.report-excel-tabs .nav-item {
  margin-bottom: -1px;
}
.report-excel-tabs .nav-link {
  border: none;
  border-radius: 6px 6px 0 0;
  background-color: transparent;
  color: #0d6efd;
  padding: 0.5rem 1rem;
  margin-right: 0.25rem;
}
.report-excel-tabs .nav-link:hover {
  background-color: rgba(13, 110, 253, 0.08);
  color: #0a58ca;
}
.report-excel-tabs .nav-link.active {
  background-color: #fff;
  color: #212529;
  border: 1px solid #dee2e6;
  border-bottom-color: #fff;
}
.report-excel-tabs .nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

/* Reconditioning damage form - 70/30 split */
.recond-form-split .recond-form-left {
  flex: 0 0 70%;
  max-width: 70%;
}
.recond-form-split .recond-form-right {
  flex: 0 0 30%;
  max-width: 30%;
}
@media (max-width: 767px) {
  .recond-form-split .recond-form-left,
  .recond-form-split .recond-form-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Transaction review: يستخدم tx-review-grid في الصفحة - تخطيط ثابت */