/* Search Results Table Optimization */
.search-results-table {
  table-layout: auto;
  font-size: 0.875rem;
  width: 100%;
}

.search-results-table th,
.search-results-table td {
  padding: 0.5rem 0.25rem;
  vertical-align: middle;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
}

/* Email search results: semantic column classes (optional sold/stock/available may be absent) */
.search-results-table th.sr-col-expand,
.search-results-table td.sr-col-expand {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  padding: 0.5rem 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}

.search-results-table td.sr-col-expand {
  background-color: transparent;
  border-right: none;
}

.search-results-table th.sr-col-select,
.search-results-table td.sr-col-select {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
}

.search-results-table th.sr-col-idx,
.search-results-table td.sr-col-idx {
  width: 3%;
  min-width: 30px;
  white-space: nowrap;
}

.search-results-table th.sr-col-code,
.search-results-table td.sr-col-code {
  width: 15%;
  min-width: 80px;
}

/* Product name absorbs remaining width when optional columns are hidden */
.search-results-table th.sr-col-name,
.search-results-table td.sr-col-name {
  width: 100%;
  min-width: 120px;
  white-space: normal;
  word-wrap: break-word;
}

.search-results-table th.sr-col-sold,
.search-results-table td.sr-col-sold,
.search-results-table th.sr-col-stock,
.search-results-table td.sr-col-stock,
.search-results-table th.sr-col-available,
.search-results-table td.sr-col-available {
  width: 1%;
  min-width: 3.25rem;
  max-width: 12rem;
  overflow: visible;
  white-space: nowrap;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.search-results-table th.sr-col-stock,
.search-results-table td.sr-col-stock {
  padding-right: 0.55rem;
}

.search-results-table th.sr-col-available,
.search-results-table td.sr-col-available {
  padding-left: 0.45rem;
}

.search-results-table th.sr-col-qty,
.search-results-table td.sr-col-qty {
  width: 8%;
  min-width: 60px;
  text-align: center;
  overflow: visible;
  white-space: nowrap;
}

.search-results-table th.sr-col-unit,
.search-results-table td.sr-col-unit {
  width: 10%;
  min-width: 80px;
  text-align: center;
}

.search-results-table th.sr-col-comment,
.search-results-table td.sr-col-comment {
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  text-align: center;
}

.search-results-table th.sr-col-actions,
.search-results-table td.sr-col-actions {
  width: 25px;
  min-width: 25px;
  max-width: 25px;
  text-align: right;
}

/* Line that got no product matches from the search */
.search-results-table tr.sr-row-empty {
  --bs-table-bg: #fbe8b0;
  --bs-table-color: #6b5600;
  --bs-table-hover-bg: #f7dc93;
  --bs-table-hover-color: #6b5600;
}

.search-results-table tr.sr-row-empty > td {
  font-weight: 500;
}

.search-results-table tr.sr-row-empty > td:first-child {
  box-shadow: inset 3px 0 0 0 #d39e00;
}

.sr-icon-no-match {
  color: #212529;
}

/* Responsive: tighten code; name stays flexible */
@media (max-width: 1200px) {
  .search-results-table th.sr-col-code,
  .search-results-table td.sr-col-code {
    width: 12%;
    min-width: 70px;
  }
  .search-results-table th.sr-col-name,
  .search-results-table td.sr-col-name {
    min-width: 100px;
  }
  .search-results-table th.sr-col-qty,
  .search-results-table td.sr-col-qty {
    width: 9%;
    min-width: 60px;
  }
  .search-results-table th.sr-col-unit,
  .search-results-table td.sr-col-unit {
    width: 11%;
    min-width: 70px;
  }
}

@media (max-width: 992px) {
  .search-results-table th.sr-col-code,
  .search-results-table td.sr-col-code {
    width: 10%;
    min-width: 60px;
  }
  .search-results-table th.sr-col-name,
  .search-results-table td.sr-col-name {
    min-width: 80px;
  }
  .search-results-table th.sr-col-sold,
  .search-results-table td.sr-col-sold,
  .search-results-table th.sr-col-stock,
  .search-results-table td.sr-col-stock,
  .search-results-table th.sr-col-available,
  .search-results-table td.sr-col-available {
    min-width: 3rem;
  }
  .search-results-table th.sr-col-qty,
  .search-results-table td.sr-col-qty {
    width: 10%;
    min-width: 60px;
  }
  .search-results-table th.sr-col-unit,
  .search-results-table td.sr-col-unit {
    width: 12%;
    min-width: 60px;
  }
}

@media (max-width: 768px) {
  .search-results-table {
    font-size: 0.75rem;
  }
  .search-results-table th.sr-col-expand,
  .search-results-table td.sr-col-expand {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }
  .search-results-table th.sr-col-code,
  .search-results-table td.sr-col-code {
    width: 8%;
    min-width: 50px;
  }
  .search-results-table th.sr-col-name,
  .search-results-table td.sr-col-name {
    min-width: 60px;
  }
  .search-results-table th.sr-col-qty,
  .search-results-table td.sr-col-qty {
    width: 11%;
    min-width: 60px;
  }
  .search-results-table th.sr-col-unit,
  .search-results-table td.sr-col-unit {
    width: 13%;
    min-width: 50px;
  }
}

@media (max-width: 576px) {
  .search-results-table th.sr-col-expand,
  .search-results-table td.sr-col-expand {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }
}

/* Ensure Qty and Unit columns stay visible */
.search-results-table th.sr-col-qty,
.search-results-table td.sr-col-qty,
.search-results-table th.sr-col-unit,
.search-results-table td.sr-col-unit {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Compact form controls */
.search-results-table .form-control-sm,
.search-results-table .form-select-sm {
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  height: auto;
  min-height: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Optimize Qty input field for single-digit numbers - show full values */
.search-results-table th.sr-col-qty .form-control-sm,
.search-results-table td.sr-col-qty .form-control-sm {
  text-align: center;
  min-width: 50px;
  width: 100%;
  margin: 0 auto;
}

/* Ensure Qty column shows full numeric values */
.search-results-table th.sr-col-qty,
.search-results-table td.sr-col-qty {
  overflow: visible;
  white-space: nowrap;
  min-width: 60px;
}

/* Bar-length quantity adjustment toggle (Elme-only feature) */
.search-results-table td.sr-col-qty .sr-length-adjust {
  font-size: 0.7rem;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  margin-bottom: 0;
}
.search-results-table td.sr-col-qty .sr-length-adjust .form-check-input {
  width: 0.85em;
  height: 0.85em;
  cursor: pointer;
}
.search-results-table td.sr-col-qty .sr-length-adjust-text {
  white-space: nowrap;
}

/* Ensure select dropdowns are fully visible */
.search-results-table .form-select-sm {
  padding-right: 1.5rem; /* Space for dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.375rem center;
  background-size: 0.75rem;
}

/* Compact buttons */
.search-results-table .btn-sm {
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  line-height: 1.2;
}


/* Numeric columns alignment */
.search-results-table .text-end {
  text-align: right;
  font-size: 0.8rem;
}

/* Ensure checkboxes are always visible */
.search-results-table input[type="checkbox"] {
  width: auto !important;
  min-width: 16px;
  margin: 0;
}

.sr-inventory-trigger {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  cursor: help;
  text-decoration: underline dotted rgba(0, 0, 0, 0.25);
  text-underline-offset: 2px;
}

.inventory-detail-popover,
.reservation-popover {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  line-height: 1.4;
  z-index: 2100;
  min-width: 320px;
  overflow: hidden;
}

.inventory-detail-popover-header,
.reservation-popover-header {
  padding: 0.75rem 0.875rem 0.625rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  background: #fafbfc;
}

.inventory-detail-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #212529;
  margin-bottom: 0.5rem;
}

.inventory-detail-title-icon {
  color: #6c757d;
  font-size: 0.8rem;
}

.inventory-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 0.5rem;
}

.inventory-detail-stats--single {
  grid-template-columns: 1fr;
}

.inventory-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.inventory-detail-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #868e96;
}

.inventory-detail-stat-value {
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: #212529;
  line-height: 1.2;
}

.inventory-detail-stat-value--available {
  color: #198754;
}

.inventory-detail-stat-value--reserved {
  color: #e67e22;
}

.inventory-detail-popover-body,
.reservation-popover-body {
  padding: 0.5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.inventory-detail-popover-footer,
.reservation-popover-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #868e96;
  background: #fafbfc;
}

.inventory-detail-popover-footer .fa {
  font-size: 0.65rem;
  opacity: 0.85;
}

.inventory-detail-empty,
.inventory-detail-empty-state {
  padding: 0.5rem 0.875rem;
  color: #6c757d;
  font-size: 0.8125rem;
}

.inventory-detail-all-available {
  margin: 0 0 0.75rem;
  color: #198754;
  font-size: 0.8125rem;
}

.inventory-detail-all-available .fa {
  margin-right: 0.25rem;
}

.inventory-detail-section-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.875rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #868e96;
}

.inventory-detail-section-head--split {
  justify-content: space-between;
}

.inventory-detail-section-icon {
  font-size: 0.65rem;
  opacity: 0.9;
}

.inventory-detail-warehouse-list.list-unstyled {
  padding: 0 0 0.25rem;
  margin-bottom: 0;
}

.inventory-detail-warehouse-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0.875rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.inventory-detail-warehouse-row:last-child {
  border-bottom: none;
}

.inventory-detail-warehouse-name {
  flex: 1;
  min-width: 0;
  color: #495057;
}

.inventory-detail-customer {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.inventory-detail-customer:last-child {
  border-bottom: none;
}

.inventory-detail-customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.875rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.inventory-detail-customer-head:hover {
  background: #f4f6f8;
}

.inventory-detail-customer-name {
  font-weight: 600;
  color: #212529;
  flex: 1;
  min-width: 0;
}

.inventory-detail-customer-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  color: #868e96;
  font-size: 0.75rem;
}

.inventory-detail-customer-body {
  padding: 0 0.875rem 0.5rem;
  background: #fafbfc;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.inventory-detail-rep-block {
  padding-top: 0.5rem;
}

.inventory-detail-rep-block + .inventory-detail-rep-block {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.inventory-detail-rep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.inventory-detail-rep-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #868e96;
}

.inventory-detail-rep-label .fa {
  font-size: 0.65rem;
}

.inventory-detail-rep-orders {
  font-size: 0.6875rem;
  color: #adb5bd;
  white-space: nowrap;
}

.inventory-detail-order {
  padding: 0.35rem 0 0.45rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.inventory-detail-order:first-of-type {
  border-top: none;
  padding-top: 0;
}

.inventory-detail-order-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.inventory-detail-order-title {
  font-weight: 600;
  color: #212529;
  flex: 1;
  min-width: 0;
}

.inventory-detail-order-icon {
  margin-right: 0.25rem;
  color: #868e96;
  font-size: 0.75rem;
}

.inventory-detail-order-meta {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #868e96;
  line-height: 1.35;
}

.inventory-detail-qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  color: #212529;
}


/* AI Parsing Result Table */
.ai-parsing-table {
  table-layout: fixed;
  font-size: 0.875rem;
}

.ai-parsing-table th,
.ai-parsing-table td {
  padding: 0.5rem 0.25rem;
  vertical-align: middle;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
}

/* AI parsing table - column classes */
.ai-parsing-table .col-num { width: 5%; min-width: 40px; }
.ai-parsing-table .col-product-name { width: 32%; }
.ai-parsing-table .col-qty { width: 9%; min-width: 80px; }
.ai-parsing-table .col-unit { width: 7%; }
.ai-parsing-table .col-attributes-icon { width: 4%; min-width: 40px; }
.ai-parsing-table .col-qty-corrected { width: 9%; min-width: 80px; }
.ai-parsing-table .col-unit-corrected { width: 7%; }
.ai-parsing-table .col-changes { width: 4%; min-width: 40px; }
.ai-parsing-table .col-actions { width: 19%; min-width: 150px; }

/* Numeric columns alignment for AI table */
.ai-parsing-table .text-end {
  text-align: right;
  font-family: monospace;
  font-size: 0.8rem;
}

/* Icon columns centered */
.ai-parsing-table th:nth-child(3),
.ai-parsing-table td:nth-child(3),
.ai-parsing-table th:nth-child(6),
.ai-parsing-table td:nth-child(6),
.ai-parsing-table th:nth-child(7),
.ai-parsing-table td:nth-child(7) {
  text-align: center;
}

/* Icon styling */
.ai-parsing-table .fa {
  font-size: 0.875rem;
  cursor: help;
}

/* Action buttons styling */
.ai-parsing-table .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.ai-parsing-table .btn-sm i {
  font-size: 0.75rem;
}

/* Deleted row styling */
.ai-parsing-table .row-deleted {
  opacity: 0.6;
  background-color: #f8f9fa;
}

.ai-parsing-table .row-deleted td {
  color: #6c757d;
}

/* Drag and drop styling */
.ai-parsing-table tbody tr[draggable="true"] {
  cursor: move;
}

.ai-parsing-table tbody tr.drag-over {
  border-top: 2px solid #0d6efd;
  background-color: #f0f8ff;
}

.ai-parsing-table .col-num {
  font-weight: bold;
  color: #6c757d;
}

/* Optimize main email list table rendering */
.email-registry-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1200px; /* Ensure minimum width to prevent column compression */
}

.email-registry-table th,
.email-registry-table td {
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
}

/* Email Registry List Table - column widths by class (column count varies by grouping mode) */
.email-registry-table .col-check { width: 3%; }
.email-registry-table .col-received { width: 9%; }
.email-registry-table .col-from { width: 17%; }
.email-registry-table .col-receivers { width: 14%; }
.email-registry-table .col-subject { width: 21%; }
.email-registry-table .col-mailbox { width: 8%; }
.email-registry-table .col-category { width: 8%; }
.email-registry-table .col-language { width: 5%; }

/* Compact grey tag used in Mailbox / Language cells and in the detail header */
.email-cell-tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f1f3f5;
  color: #495057;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Status holds the message status plus the search/reply state chips, so it needs
   room for a few wrapped badges */
.email-registry-table .col-status { width: 13%; }

/* Message status on the first line, derived sub-states (search / reply) on their
   own line below so a thread with several statuses stays readable */
.email-registry-table .email-status-cell .email-status-main,
.email-registry-table .email-status-cell .email-status-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.email-registry-table .email-status-cell .email-status-sub {
  margin-top: 3px;
  row-gap: 2px;
}
.email-registry-table .email-status-subchip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: #f1f3f5;
  color: #6c757d;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
/* Confidence rides inside the Searched chip, so it only gets colour and weight -
   Bootstrap's text-warning is unreadable on the chip's light grey */
.email-registry-table .email-status-conf {
  margin-left: 4px;
  font-weight: 700;
}
.email-registry-table .email-status-conf--high { color: #198754; }
.email-registry-table .email-status-conf--medium { color: #a16207; }
.email-registry-table .email-status-conf--low { color: #dc3545; }
/* Attachment column only holds the paperclip badge, so keep it as narrow as the badge */
.email-registry-table .col-attach {
  width: 52px;
  padding-left: 4px;
  padding-right: 4px;
  vertical-align: middle;
}
.email-registry-table .col-result { width: 6%; }
.email-registry-table .col-actions { width: 3%; }

/* Clickable paperclip badge: opens the attachments modal straight from the list */
.email-registry-table .email-attach-badge {
  padding: 2px 5px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.email-registry-table .email-attach-badge:hover,
.email-registry-table .email-attach-badge:focus-visible {
  background-color: #e9ecef !important;
}
/* At least one file failed to extract or hit a processing limit */
.email-registry-table .email-attach-badge--issue {
  background-color: #f8d7da !important;
  border-color: #f1aeb5 !important;
}
.email-registry-table .email-attach-badge--issue:hover,
.email-registry-table .email-attach-badge--issue:focus-visible {
  background-color: #f1aeb5 !important;
}

/* Customer shown under the sender name (Customer column was merged into From) */
.email-from-customer {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6c757d;
  line-height: 1.2;
}

/* Receivers column (EMAIL_LIST_SHOW_RECEIVERS): wrap badges, never bleed into Subject */
.email-registry-table td.email-receivers-cell {
  overflow: hidden;
  vertical-align: middle;
}
.email-receivers-cell .email-receivers-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.email-receivers-cell .badge {
  white-space: normal;
  word-break: break-word;
  text-align: left;
  max-width: 100%;
  font-weight: 500;
}

/* Container for email registry table to handle overflow */
.email-registry-container {
  /* overflow must stay visible so the table's sticky <thead> can pin to the viewport;
     the wide table (min-width) scrolls horizontally at the page level instead. */
  overflow-x: visible;
  width: 100%;
}

/* Row action dropdown: Popper uses strategy fixed (see EmailListTable); keep above table/pager */
.email-registry-container .dropdown-menu {
  z-index: 1056;
}

.email-registry-table .email-thread-member-row > td {
  background: #f7f9fb;
  border-top-color: #e1e7ed;
}

.email-registry-table .email-thread-member-row:hover > td {
  background: #eef3f7;
}

.email-registry-table .email-thread-member-latest > td {
  background: #f0f6fb;
}

/* Close the thread block so the next top-level email is clearly separate */
.email-registry-table .email-thread-member-last > td {
  border-bottom: 2px solid #9aafc2;
}

.email-thread-rail {
  position: relative;
}

/* Vertical thread line; runs the full height of every member row */
.email-thread-rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 3px solid #9aafc2;
}

.email-thread-node {
  position: absolute;
  top: 50%;
  left: -0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid #6f879d;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.email-thread-branch {
  color: #6f879d;
  font-weight: 700;
  margin-right: 0.35rem;
}

/* Table headers with ellipsis */
.email-registry-table th,
.search-results-table th,
.ai-parsing-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results-table th.sr-col-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Allow text truncation with tooltips */
.text-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Optimize form controls */
.form-select-sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Loading states */
.opacity-50 {
  opacity: 0.5;
  pointer-events: none;
}

/* Sortable column indicators */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Responsive table improvements */
@media (max-width: 768px) {
  .table-responsive {
    font-size: 0.875rem;
  }

  .table th:nth-child(5), .table td:nth-child(5) { display: none; } /* Hide To column on mobile */
  .table th:nth-child(7), .table td:nth-child(7) { display: none; } /* Hide Language column on mobile */
}

/* Root and variables */
:root {
  --primary-color: #0066cc;
  --primary-hover: #005bb5;
  --bg-color: #f5f7fa;
  --white: #ffffff;
  --border-color: #dde2e6;
  --text-color: #333333;
  --label-color: #555555;
  --input-bg: #ffffff;
  /* Runtime-measured height of the sticky list toolbar; used to offset sticky table headers. */
  --list-sticky-top: 0px;
}

/* Keep the navbar (and its dropdown menus) above sticky list toolbars/table headers. */
.navbar {
  position: relative;
  z-index: 1040;
}

/* =====================================================================
   Dropdown menus - Bootstrap fills the pressed item with the primary
   colour, which clashes with coloured item text (e.g. red destructive
   actions) and stays visible while a confirm dialog blocks the page.
   The selector is nested because Bootstrap is loaded after this file.
   ===================================================================== */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:active:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* =====================================================================
   Main navigation (NavBar.js)
   Taller white bar that separates itself from the page background, with
   hover-opened submenus (no Bootstrap dropdown JS, so no caret markup).
   ===================================================================== */
.app-navbar {
  min-height: 60px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  background-color: var(--white);
  border-bottom: 1px solid #d3dae3;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.app-navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1.5rem;
}
.app-navbar .dropdown-toggle::after {
  display: none;
}
.app-navbar-nav {
  column-gap: 0.15rem;
}
.app-navbar-nav > .nav-item > .nav-link {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  color: var(--text-color);
  transition: background-color 0.12s ease-in-out, color 0.12s ease-in-out;
}
.app-navbar-nav > .nav-item > .nav-link:hover,
.app-navbar-nav > .nav-item > .nav-link:focus-visible,
.app-navbar-nav > .nav-item.show > .nav-link {
  background-color: #eef4fb;
  color: var(--primary-color);
}
/* Exact match only: to="/" would otherwise stay active on every route. */
.app-navbar-nav > .nav-item > .nav-link.router-link-exact-active {
  background-color: #e3edfa;
  color: var(--primary-color);
  font-weight: 600;
}

/* Hairline separators keep the top-level entries readable as distinct items.
   Only from lg up: below that the nav stacks vertically (Bootstrap collapse). */
@media (min-width: 992px) {
  .app-navbar-nav {
    align-items: center;
  }
  .app-navbar-nav > .nav-item + .nav-item {
    position: relative;
    margin-left: 0.35rem;
    padding-left: 0.35rem;
  }
  .app-navbar-nav > .nav-item + .nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.1rem;
    border-left: 1px solid var(--border-color);
    transform: translateY(-50%);
  }
}

/* Submenus are toggled by the `show` class only (Popper is not used), so the
   Bootstrap [data-bs-popper] offsets never apply and are set here instead.
   No top margin: a gap would close the menu when the pointer crosses it. */
.app-navbar .navbar-nav .dropdown-menu {
  top: 100%;
  left: 0;
  margin-top: 0;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  border-color: var(--border-color);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.app-navbar .navbar-nav .dropdown-menu-end {
  left: auto;
  right: 0;
}
.app-navbar .dropdown-item {
  padding: 0.4rem 1rem;
}

.app-navbar-account {
  margin-left: 0.75rem;
}
.app-navbar-notifications {
  margin-left: 0.35rem;
}
.app-navbar-notifications-toggle {
  position: relative;
  min-width: 2.25rem;
  text-align: center;
}
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.1rem;
  padding: 0 4px;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  line-height: 1.2rem;
  font-weight: 700;
}
.app-navbar-nav > .nav-item > .app-navbar-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
}
.app-navbar-account-name {
  font-weight: 500;
}
.app-navbar-account-caret {
  font-size: 0.9rem;
  color: var(--label-color);
}

/* Account avatar: initials placeholder until an image is uploaded in Profile. */
.user-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: #6b7a99;
  color: var(--white);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.user-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}
.user-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
}
.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Extra small button size */
.btn-xs {
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 0.2rem;
}

/* Close icon (×) for modals */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--label-color);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover,
.modal-close:focus-visible {
  background-color: #f1f3f5;
  color: var(--text-color);
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Highlight row on drag over in importable fields */
tr.drag-over {
  background-color: #e9ecef;
}
.container {
  position: relative;
  max-width: none !important;
  margin: 50px auto;
  background-color: var(--white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Login form specific width */
.login-container {
	max-width: 400px !important;
}
.navbar-brand-logo {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.login-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 240px;
  margin: 0 auto 16px;
  object-fit: contain;
}
h1 {
  margin-top: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: var(--text-color);
}

/* =====================================================================
   Page title (PageTitle.js) - left aligned heading with a leading icon.
   ===================================================================== */
.page-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.page-title-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background-color: #eef4fb;
  color: var(--primary-color);
  font-size: 1.2rem;
}
.page-title h1 {
  margin: 0;
  font-size: 28px;
  text-align: left;
}
.page-title-extra {
  margin-left: auto;
}

/* Form styles */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.form-group label {
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--label-color);
}
/* Align all Bootstrap form controls to small button height */
.form-control,
.form-control-sm,
.form-select,
.form-select-sm {
  padding: .25rem .5rem;
  line-height: 1.5;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  font-size: .875rem;
  transition: border-color 0.2s;
}
/* Reserve space for select arrow */
.form-select,
.form-select-sm {
  padding-right: 2rem;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}
.form-actions {
  display: flex;
  justify-content: center;
}
.submit-btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.submit-btn:hover {
  background-color: var(--primary-hover);
}

/* Results table */
#results {
  margin-top: 30px;
}

/* Full-page loader overlay */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  /* overlay above modals */
  z-index: 20000 !important;
}
#results table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#results th,
#results td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
#results th {
  background-color: var(--white);
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
}
#results tbody tr:hover {
  background-color: #fafafa;
  cursor: pointer;
}
#results input[type='number'] {
  width: 70px;
  padding: 6px;
}
#results input[type='checkbox'] {
  transform: scale(1.2);
  margin-right: 8px;
}

/* Dashboard grid layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dashboard-cell {
  position: relative;
}

/* ensure dropdown menus on dashboard are visible above the grid */
.dashboard-cell .dropdown {
  z-index: 10;
}

/* Action button */
.action-btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 20px;
}
/* Filters row */
.filters {
  display: flex;
  gap: 1em;
  margin-bottom: 1em;
  align-items: center;
}

/* Sticky list toolbar (filters + action buttons) — sticks to viewport on scroll.
   White background matches both the .container card surface and the white table
   rows on full-bleed pages, so the toolbar stays opaque while content scrolls under it.
   z-index sits below the navbar (so its dropdowns stay on top) and above the sticky
   table header. */
.list-page-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--white);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 1px 0 var(--border-color);
}

.list-page-header > .btn-toolbar:last-child,
.list-page-header > .d-flex:last-child {
  margin-bottom: 0 !important;
}

/* No zebra striping in list tables: the tinted odd row hid light-grey cell tags and badges.
   Bootstrap builds the stripe from --bs-table-striped-bg, so clearing that colour keeps hover
   and contextual row states (--bs-table-bg-state) working.
   The `table` element prefix is required: bootstrap.min.css is linked after this file, so a
   plain `.table` selector would lose the cascade to Bootstrap's own `.table` rule. */
table.table {
  --bs-table-striped-bg: transparent;
}

/* Sticky column headers for list tables. Offset by the sticky toolbar height, which is
   measured at runtime (see setupStickyListOffset in app.js) and exposed as --list-sticky-top.
   Headers also read as their own band (tinted background + hairline bottom line) so they
   stay separated from the rows they float over. */

/* The separated borders model is required for the pinned header to stay on top: with
   border-collapse: collapse the browser paints sticky cells together with the table's
   collapsed borders, so cell values, tags and the hover tint of the rows scrolling
   underneath bleed over the header band. border-spacing: 0 keeps the layout identical -
   Bootstrap draws row separators as per-cell bottom borders, which never merge. */
.sticky-list-table {
  border-collapse: separate;
  border-spacing: 0;
}
.sticky-list-table thead th {
  position: sticky;
  top: var(--list-sticky-top, 0px);
  z-index: 1020;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  background-color: #eef1f6;
  border-bottom: 1px solid #c2ccd9;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--label-color);
}

/* Templated JSON setting form: compact two-column grid so short inputs keep
   their natural width and related controls stay on one line. */
.json-setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
  align-items: start;
}

.json-setting-cell--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .json-setting-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.json-setting-label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--label-color);
}

.json-setting-help {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: #6c757d;
}

.json-setting-input--narrow {
  max-width: 10rem;
}

/* Fixed-choice lists: even columns instead of a ragged wrap. */
.json-setting-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.1rem 0.75rem;
}

.json-setting-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.1rem 0;
  min-height: auto;
  font-size: 0.875rem;
}

.json-setting-check .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}

/* Keeps a bare checkbox roughly on the baseline of labelled inputs next to it. */
.json-setting-check--standalone {
  padding-top: 0.75rem;
}

/* Free-text lists render as short chips with the add action on the same line. */
.json-setting-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.json-setting-tag {
  width: auto;
  max-width: 13rem;
}

.json-setting-tag .form-control {
  min-width: 0;
}

.json-setting-add {
  white-space: nowrap;
}

.json-setting-group {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem 0.6rem;
  background-color: #fbfcfd;
}

.json-setting-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--label-color);
  margin-bottom: 0.35rem;
}

.json-setting-card {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.json-setting-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.json-setting-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
}

.json-setting-card-remove {
  padding: 0;
  font-size: 0.8125rem;
  color: #b02a37;
  text-decoration: none;
}

.json-setting-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--label-color);
  white-space: nowrap;
}

.json-setting-table td,
.json-setting-table th {
  vertical-align: middle;
  padding: 0.25rem 0.4rem;
}

.json-setting-table-scroll {
  max-height: 22rem;
  overflow: auto;
}

.json-setting-advanced {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  text-align: right;
}

.json-setting-advanced-toggle {
  padding: 0;
  font-size: 0.8125rem;
  text-decoration: none;
}

.json-setting-advanced textarea {
  text-align: left;
}

/* My Settings list: readable value digest instead of a raw JSON dump. */
.setting-value-summary {
  max-width: 28rem;
}

.setting-value-summary pre {
  max-height: 8rem;
  overflow: auto;
  font-size: 0.75rem;
}

/* Emails list: the whole filters block is the sticky element (its parent, the view root,
   is tall enough for sticky to hold). The header row + expandable filter row live inside. */
.email-filters {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--white);
  padding-top: 0.5rem;
  padding-bottom: 0.35rem;
  box-shadow: 0 1px 0 var(--border-color);
}
.email-filters-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.email-filters-header-start {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.email-filters-header-end {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
.email-filters-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.email-filters-header .email-filters-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.email-filters-header .email-filters-scope-label {
  font-size: 0.8125rem;
  color: var(--text-muted, #6c757d);
}
.email-filters-header .email-filter-scope-select {
  width: 9rem;
  flex: 0 0 auto;
}
.email-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.email-filters-row .form-control-sm,
.email-filters-row .form-select-sm {
  min-height: calc(1.5em + 0.45rem + 2px);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: 0.8125rem;
}
.email-filters-row .email-filter-search {
  flex: 1 1 140px;
  min-width: 110px;
  max-width: 240px;
}
.email-filters-row .email-filter-date {
  width: 118px;
  flex: 0 0 auto;
}
.email-filters-row .email-filter-select {
  width: 8.5rem;
  flex: 0 0 auto;
}
.email-filters-row .multi-select-filter {
  width: 8.5rem;
  flex: 0 0 auto;
}
.multi-select-filter-trigger {
  display: block;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}
.multi-select-filter-trigger span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-select-filter-menu {
  max-height: min(24rem, calc(100vh - 1rem));
  overflow: hidden;
  padding: 0.4rem;
  background: var(--white);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.multi-select-filter-search {
  margin-bottom: 0.35rem;
}
.multi-select-filter-options {
  max-height: 18rem;
  overflow-y: auto;
}
.multi-select-filter-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 0.2rem;
  cursor: pointer;
  font-size: 0.8125rem;
}
.multi-select-filter-option:hover {
  background: var(--light, #f8f9fa);
}
.multi-select-filter-option input {
  flex: 0 0 auto;
  margin: 0;
}
.multi-select-filter-empty {
  padding: 0.5rem;
  color: var(--text-muted, #6c757d);
  font-size: 0.8125rem;
}
.search-select {
  position: relative;
}
.search-select-trigger {
  display: block;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}
.search-select-trigger span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-select-menu {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 100%;
  padding: 0.4rem;
  background: var(--white, #ffffff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.search-select-search {
  margin-bottom: 0.35rem;
}
.search-select-options {
  max-height: 16rem;
  overflow-y: auto;
}
.search-select-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: 0.2rem;
  background: none;
  text-align: left;
  font-size: 0.8125rem;
}
.search-select-option:hover,
.search-select-option:focus-visible {
  background: var(--light, #f8f9fa);
}
.search-select-option.selected {
  font-weight: 600;
}
.search-select-check {
  flex: 0 0 auto;
  width: 0.85rem;
  color: var(--primary, #0d6efd);
}
.search-select-empty {
  padding: 0.5rem;
  color: var(--text-muted, #6c757d);
  font-size: 0.8125rem;
}
.email-filters-row .email-filter-num {
  width: 5rem;
  flex: 0 0 auto;
}
.email-filters-row .email-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  margin: 0;
  padding: 0 0.15rem 0 1.35rem;
  flex: 0 0 auto;
  min-height: 1.75rem;
}
.email-filters-row .email-filter-check .form-check-input {
  margin-top: 0;
  margin-left: -1.2rem;
}
.email-filters-row .email-filter-check .form-check-label {
  font-size: 0.8125rem;
  line-height: 1.2;
}
/* List grid rows */
.list {
  display: grid;
  grid-template-rows: auto;
  gap: 0.5em;
}
.list .row {
  display: grid;
  grid-template-columns: 50px 150px 1fr 200px 150px 200px;
  gap: 1em;
  padding: 0.5em;
  background: var(--white);
  border-radius: 4px;
  align-items: center;
}
.list .header {
  font-weight: 600;
  background: none;
  border-bottom: 2px solid var(--border-color);
}
/* Modal */
/* Modal overlay and container styles (generic modal) */
.modal:not(.fade) {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex !important;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.modal:not(.fade).hidden {
  display: none !important;
}
/* Modal widths: md (560px), lg (840px), xl (1120px), xxl (1400px), full */
.modal-content {
  background: var(--white);
  padding: 2em;
  border-radius: 8px;
  min-width: 320px;
  max-width: 560px;
  width: 90vw;
  position: relative;
  /* Keep the same small gap above and below as on the sides; the body scrolls
     instead of the dialog growing past the viewport. */
  max-height: calc(100vh - 1rem);
  display: flex;
  flex-direction: column;
}
.modal-content--lg {
  max-width: 840px; /* 50% wider than md */
  min-width: 400px;
  width: 92vw;
}
.modal-content--xl {
  max-width: 1120px; /* 100% wider than md */
  min-width: 480px;
  width: 95vw;
}
.modal-content--xxl {
  max-width: 1400px;
  min-width: 560px;
  width: 96vw;
}
.modal-content--full {
  max-width: 99%;
  min-width: 500px;
}
/* Modal header with optional presence indicators */
.modal-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-right: 2rem;
  text-align: left;
  flex: 0 0 auto;
}
.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
.modal-header-row .modal-title {
  margin: 0;
  flex: 0 1 auto;
  text-align: left;
}
/* Leading icon tile, same language as .page-title-icon on list pages */
.modal-title-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: #eef4fb;
  color: var(--primary-color);
  font-size: 1rem;
}
.email-thread-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.email-thread-header .nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
  /* A long thread must not push the body off screen */
  max-height: 4.75rem;
  overflow-y: auto;
}
.email-thread-header .nav-link {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.email-thread-header .nav-link:hover:not(.active) {
  background: #f1f5f9;
  border-color: #dde3ea;
}
/* Active thread tab must be obvious at a glance; keep it light so status badges stay readable */
.email-thread-header .nav-link.active {
  background: #e7f1ff;
  border-color: #0d6efd;
  color: #0a58ca;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #0d6efd;
}
.modal-presence-users {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
}
.modal-presence-user {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-presence-user .fa {
  margin-right: 0.2rem;
}
.modal-presence-user--viewer {
  color: #495057;
  background: #e9ecef;
}
.modal-presence-user--editor {
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffecb5;
  font-weight: 600;
}
.modal-lock-alert {
  font-size: 0.85rem;
  width: 100%;
  text-align: left;
}
/*
 * Form presence locking on GenericModal body/footer:
 *   - `fieldset disabled` -> disables native form controls (inputs, buttons, selects)
 *   - capture-phase handlers in GenericModal -> block links, icon actions, form submit
 *   - CSS below -> visual disabled state for non-native interactive elements
 * Text selection and copy remain available while locked.
 */
.modal-content--form-locked .modal-body,
.modal-content--form-locked .modal-footer {
  opacity: 0.95;
}
.modal-presence-area {
  position: relative;
}
.modal-presence-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.modal-presence-fieldset:disabled {
  opacity: 1;
}
.modal-presence-fieldset:disabled a[href],
.modal-presence-fieldset:disabled [role="button"],
.modal-presence-fieldset:disabled [role="link"],
.modal-presence-fieldset:disabled [role="tab"] {
  opacity: 0.65;
  cursor: not-allowed;
}
.modal-presence-fieldset--loading {
  cursor: wait;
}
/* Allow scrolling when content exceeds viewport height. The body takes the space
   the header and footer leave over, so a taller header never overflows. */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.edit-product-tab-pane {
  min-height: 400px;
}

/* =====================================================================
   Detail modal cards (email detail: information, metadata, body, results)
   Same surface language as the upgraded list pages - white card, hairline
   border, soft radius, quiet grey labels. Padding stays small on purpose:
   the modal shows the header fields, the body and the results side by side.
   ===================================================================== */
.detail-card {
  height: 100%;
  min-width: 0;
  padding: 0 0.8rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
/* Wide tables (search results, AI parsing) need the horizontal space back */
.detail-card--tight {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

/* Card header band: either a title or the card's tab strip. Both blocks use the
   same tinted band so a titled card and a tabbed card read the same. */
.detail-card-title,
.detail-card > .nav-tabs:first-child {
  margin: 0 -0.8rem 0.7rem;
  padding: 0.35rem 0.8rem;
  background-color: #f6f8fb;
  border-bottom: 1px solid var(--border-color);
  border-radius: 7px 7px 0 0;
}
.detail-card--tight > .nav-tabs:first-child {
  margin-left: -0.55rem;
  margin-right: -0.55rem;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
.detail-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
}
/* Tabs sit on the band itself, so drop their own underline and lift the active one */
.detail-card > .nav-tabs:first-child {
  padding-bottom: 0;
  border-bottom-color: var(--border-color);
}
.detail-card > .nav-tabs:first-child .nav-link {
  padding: 0.35rem 0.7rem;
  border-color: transparent;
  font-size: 0.875rem;
  color: var(--label-color);
}
.detail-card > .nav-tabs:first-child .nav-link:hover:not(.active) {
  background-color: #edf1f7;
}
.detail-card > .nav-tabs:first-child .nav-link.active {
  background-color: var(--white);
  border-color: var(--border-color) var(--border-color) var(--white);
  color: var(--primary-color);
  font-weight: 600;
}

/* Read-only field pairs: label above value, two per row. No dividers - the
   grid spacing is enough and keeps the card calm. */
.detail-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
}
.detail-field {
  min-width: 0;
}
.detail-field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  color: #6c757d;
}
.detail-field-value {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-color);
  word-break: break-word;
}
@media (max-width: 767.98px) {
  .detail-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Editable metadata rows keep the Bootstrap grid (label column / control column) */
.detail-meta-row + .detail-meta-row {
  margin-top: 0.35rem;
}
/* Element prefix keeps this ahead of Bootstrap's .form-label, which is linked later */
label.detail-meta-label {
  margin-bottom: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6c757d;
}

/* Tables inside the cards use the same header band as the list tables */
.detail-card .search-results-table > thead > tr > th,
.detail-card .ai-parsing-table > thead > tr > th,
.detail-card .detail-results-table > thead > tr > th {
  background-color: #eef1f6;
  border-bottom: 1px solid #c2ccd9;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--label-color);
}

/* The cards carry the inner spacing, so the dialog itself can be tighter */
.email-detail-modal .modal-content {
  padding: 1.25rem;
}

/* Preserve line breaks in email body */
.email-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 1em;
}

/* Email attachments list (compact, no bullets) */
.email-attachments-list .attachment-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.email-attachments-list .attachment-item {
  border-bottom: 1px solid var(--border-color, #dee2e6);
  padding: 0.4rem 0;
}
.email-attachments-list .attachment-item:last-child {
  border-bottom: none;
}
.email-attachments-list .attachment-item-row {
  min-height: 2rem;
}
.email-attachments-list .attachment-link {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}
.email-attachments-list .attachment-link:hover {
  text-decoration: underline;
}
.email-attachments-list .attachment-size {
  flex-shrink: 0;
}
.email-attachments-list .attachment-content-wrapper {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  overflow: hidden;
}
.email-attachments-list .attachment-content-pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.35;
  max-height: 280px;
  overflow: auto;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.email-attachments-list .attachment-content-pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: inherit;
  background: transparent;
  padding: 0;
}

/* Preview / fullscreen / download actions, pushed to the end of the attachment row */
.email-attachments-list .attachment-item-actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* Attachments modal opened from the email list (groups files per thread message) */
.email-attachments-modal-group + .email-attachments-modal-group {
  margin-top: 0.75rem;
}
.email-attachments-modal-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #495057;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

/* Attachment preview (left pane of email detail) */
.email-attachment-preview {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
}
/* Fullscreen preview: covers the viewport above the modal it was opened from, but stays
   below toasts (z-index 20000) so notifications remain readable. */
.email-attachment-preview--maximized {
  position: fixed;
  inset: 0;
  z-index: 19000;
  border: 0;
  border-radius: 0;
  min-height: 100vh;
}
.email-attachment-preview--maximized .email-attachment-preview-body,
.email-attachment-preview--maximized .attachment-preview-frame-wrap,
.email-attachment-preview--maximized .attachment-preview-image-wrap,
.email-attachment-preview--maximized .attachment-preview-frame {
  min-height: 0;
}
.email-attachment-preview--maximized .attachment-preview-image {
  max-height: 100%;
}
.email-attachment-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
.email-attachment-preview-header .attachment-preview-filename {
  font-weight: 600;
  font-size: 0.9rem;
}
.email-attachment-preview-header .min-w-0 {
  min-width: 0;
}
.email-attachment-preview-body {
  flex: 1 1 auto;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.attachment-preview-frame-wrap {
  flex: 1 1 auto;
  min-height: 50vh;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.attachment-preview-sheet-tabs {
  flex: 0 0 auto;
  padding: 0.35rem 0.5rem 0;
  margin: 0;
  gap: 0.15rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}
.attachment-preview-sheet-tabs .nav-link {
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
}
.attachment-processing-badge {
  flex-shrink: 0;
}
.attachment-preview-frame {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 40vh;
  border: 0;
}
.attachment-preview-image-wrap {
  flex: 1 1 auto;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
}
.attachment-preview-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.attachment-preview-text-pane {
  overflow: auto;
}
.attachment-preview-text-pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.35;
  max-height: none;
  min-height: 50vh;
  overflow: auto;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.attachment-preview-text-pre code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: inherit;
  background: transparent;
  padding: 0;
}

/* Accordion slide for attachment content */
.accordion-enter-active,
.accordion-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.accordion-enter-from,
.accordion-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* Sticky footer for Create Document button in email details */
/* Footer slot in GenericModal: always sticky at bottom */
.modal-footer {
  position: sticky;
  bottom: 0;
  background-color: var(--white);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
  z-index: 10;
  flex: 0 0 auto;
}
/* Teleported dropdown (e.g. Teams "Add account") - rendered outside modal-body to avoid overflow clip */
.add-account-dropdown {
  background: var(--white);
  border-radius: 4px;
  border: 1px solid var(--border-color, #dee2e6);
}
.add-account-dropdown .list-group-item,
.add-account-dropdown-item {
  cursor: pointer;
}
.action-btn:hover {
  background-color: var(--primary-hover);
}
/* Sortable table headers indicators */
th.sortable {
  cursor: pointer;
}
th.sortable::after {
  content: '\2195';
  font-size: .75rem;
  margin-left: .25rem;
  opacity: .5;
}
th.sortable[aria-sort="asc"]::after,
th.sortable[aria-sort="ascending"]::after {
  content: '\2191';
}
th.sortable[aria-sort="desc"]::after,
th.sortable[aria-sort="descending"]::after {
  content: '\2193';
}
th.sortable:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}
/* =====================================================================
   List pager (Pager.js and the legacy DOM-driven lists)
   Rows-per-page select plus a compact arrow stepper. The Prev/Next labels
   stay in the DOM as the accessible name and are only hidden visually, so
   the arrows are drawn with ::before instead of replacing the text.
   ===================================================================== */
.list-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--label-color);
}
.list-pager-label {
  margin: 0;
  white-space: nowrap;
}
.list-pager .list-pager-size {
  width: auto;
  min-height: 28px;
  padding: 0.1rem 1.5rem 0.1rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  border-radius: 6px;
  background-position: right 0.4rem center;
  background-size: 12px 9px;
}
.list-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.125rem;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.list-pager .list-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1;
}
.list-pager .list-pager-btn--first::before {
  content: '\00AB';
}
.list-pager .list-pager-btn--prev::before {
  content: '\2039';
}
.list-pager .list-pager-btn--next::before {
  content: '\203A';
}
.list-pager .list-pager-btn--last::before {
  content: '\00BB';
}
.list-pager .list-pager-nav .list-pager-btn:hover:not(:disabled),
.list-pager .list-pager-nav .list-pager-btn:active:not(:disabled),
.list-pager .list-pager-nav .list-pager-btn:focus-visible {
  background-color: rgba(0, 102, 204, 0.1);
  border: 0;
  color: var(--primary-color);
}
.list-pager .list-pager-btn:disabled {
  opacity: 0.35;
}
.list-pager .list-pager-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
  box-shadow: none;
}
.list-pager-btn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.list-pager-status {
  padding: 0 0.3rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Toast notifications container */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  /* ensure toasts always overlay modals */
  z-index: 20000 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Toast common style */
.toast {
  min-width: 200px;
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 4px;
  color: #000;
  opacity: 0.95;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 14px;
  /* ensure visibility above bootstrap defaults */
  display: block !important;
}
.toast.success { background-color: #D4EDDA; color: #155724; }
.toast.error   { background-color: #F8D7DA; color: #721C24; }
.toast.warning { background-color: #FFF3CD; color: #856404; }
.toast.info    { background-color: #D1ECF1; color: #0C5460; }
.toast.notification { background-color: #e8eef8; color: #1b365d; cursor: pointer; }
.toast-clickable { cursor: pointer; }
.toast-title { font-weight: 600; margin-bottom: 2px; }

.rich-text-editor .rich-text-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.rich-text-body {
  min-height: 180px;
  overflow: auto;
}
.rich-text-body img { max-width: 100%; height: auto; }
.rich-text-editor--disabled .rich-text-body { background: #f8f9fa; }

.notification-composer-section {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: #fafbfc;
}
/* Schedule field keeps its space while inactive so switching modes does not shift the form. */
.notification-publish-schedule {
  max-width: 16rem;
}
.notification-publish-schedule--inactive {
  visibility: hidden;
}
.notification-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}
.notification-composer-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.notification-composer-actions-group--end {
  margin-left: auto;
}
.notification-publish-confirm {
  min-width: 10.5rem;
}
.notification-audience-preview-list {
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border-color);
}

.inbox-item {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  border-bottom: none;
  cursor: pointer;
}
.inbox-item:last-child { border-bottom: 1px solid var(--border-color); }
.inbox-item--unread { background: #eef4fb; }
.inbox-item--starred { box-shadow: inset 3px 0 0 #e0a800; }
.inbox-item--active { outline: 2px solid var(--primary-color); }
.inbox-item-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  flex-shrink: 0;
}
.inbox-item-actions .btn-link { color: #6c757d; line-height: 1; }
.inbox-item-actions .btn-link:hover { color: var(--primary-color); }
.inbox-select-all {
  border: 1px solid var(--border-color);
  border-bottom: none;
  background: #f8f9fa;
}
.inbox-detail { padding: 0.5rem 0.75rem; }
.notification-html img { max-width: 100%; height: auto; }

/* MSSQL connection status */
#connection-status {
  margin-bottom: 1em;
  font-weight: bold;
}
#connection-status.success { color: #155724; }
#connection-status.error   { color: #721C24; }
/* Logout button (in top-right of container) */
.logout-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}
.logout-btn:hover {
  color: var(--primary-hover);
}
/* Slide toggle containers */
.slidable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.slidable.open {
  max-height: 1000px;
}

/* Comment field styling */
.comment-field {
  position: relative;
  width: 100%;
}

.comment-preview {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 0.875rem;
  color: #6c757d;
  min-height: 32px;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.comment-preview:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

.comment-preview:not(:empty) {
  color: #495057;
  background-color: #ffffff;
}

.comment-textarea {
  resize: vertical;
  min-height: 60px;
  font-size: 0.875rem;
}

/* Document items table layout */
.document-items-table {
  table-layout: fixed;
  width: 100%;
}

.document-items-table th.col-number,
.document-items-table td:first-child {
  width: 40px;
  text-align: center;
}

.document-items-table th.col-code,
.document-items-table td:nth-child(2) {
  width: 120px;
}

.document-items-table th.col-name,
.document-items-table td:nth-child(3) {
  width: 200px;
}

.document-items-table th.col-quantity,
.document-items-table td:nth-child(4) {
  width: 100px;
}

.document-items-table th.col-unit,
.document-items-table td:nth-child(5) {
  width: 80px;
}

.document-items-table th.col-price,
.document-items-table td:nth-child(6) {
  width: 100px;
}

.document-items-table th.col-discount,
.document-items-table td:nth-child(7) {
  width: 100px;
}

.document-items-table th.col-comment,
.document-items-table td:nth-child(8) {
  width: 200px;
}

.document-items-table th.col-actions,
.document-items-table td:last-child {
  width: 50px;
  text-align: center;
}

/* Ensure inputs fit within their columns */
.document-items-table input,
.document-items-table select {
  width: 100%;
  min-width: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .document-items-table th.col-name,
  .document-items-table td:nth-child(3) {
    width: 150px;
  }

  .document-items-table th.col-comment,
  .document-items-table td:nth-child(8) {
    width: 150px;
  }
}

@media (max-width: 992px) {
  .document-items-table th.col-code,
  .document-items-table td:nth-child(2) {
    width: 100px;
  }

  .document-items-table th.col-name,
  .document-items-table td:nth-child(3) {
    width: 120px;
  }

  .document-items-table th.col-comment,
  .document-items-table td:nth-child(8) {
    width: 120px;
  }
}

/* Fix z-index for sticky table headers to prevent them from appearing above dropdown menus */
thead.sticky-top {
  z-index: 999 !important;
}

.epf-col-comment {
  width: 40%;
  min-width: 18rem;
  white-space: normal;
  word-break: break-word;
}

/* Email processing feedback: admin detail modal */
.epf-detail {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.epf-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.epf-detail-head-main {
  min-width: 0;
  flex: 1 1 20rem;
}

.epf-detail-subject {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.35;
  word-break: break-word;
}

.epf-detail-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.epf-detail-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.epf-detail-email-link:hover {
  text-decoration: underline;
}

.epf-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: #f1f3f5;
  font-size: 0.75rem;
  color: #495057;
}

.epf-detail-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-width: 11rem;
}

.epf-detail-status .form-select {
  min-width: 11rem;
}

.epf-detail-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #868e96;
}

.epf-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1rem;
  padding: 0.875rem 1rem;
  background: #fafbfc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.625rem;
}

.epf-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.epf-detail-value {
  font-size: 0.875rem;
  color: #212529;
  word-break: break-word;
}

.epf-detail-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #495057;
}

.epf-detail-section-title .fa {
  color: #868e96;
}

.epf-detail-comment {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid #adb5bd;
  border-radius: 0 0.375rem 0.375rem 0;
  background: #f8f9fa;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.epf-detail-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: #868e96;
}

.epf-detail-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.epf-detail-file {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  background: #fff;
}

.epf-detail-file-icon {
  color: #868e96;
  margin-top: 0.15rem;
}

.epf-detail-file-body {
  min-width: 0;
  flex: 1 1 auto;
}

.epf-detail-file-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.epf-detail-file-name {
  font-size: 0.875rem;
  font-weight: 500;
  word-break: break-all;
}

.epf-detail-file-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #868e96;
}

.epf-detail-file-error {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: #dc3545;
  word-break: break-word;
}

.epf-detail-snapshot {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  background: #fafbfc;
  font-size: 0.8125rem;
}

.epf-detail-snapshot dt {
  font-weight: 500;
  color: #868e96;
}

.epf-detail-snapshot dd {
  margin: 0;
  color: #212529;
  word-break: break-word;
}