/* 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;
}

/* 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 - specific column widths */
.email-registry-table th:nth-child(1),
.email-registry-table td:nth-child(1) { width: 3%; } /* Checkbox */
.email-registry-table th:nth-child(2),
.email-registry-table td:nth-child(2) { width: 10%; } /* Received */
.email-registry-table th:nth-child(3),
.email-registry-table td:nth-child(3) { width: 15%; } /* From */
.email-registry-table th:nth-child(4),
.email-registry-table td:nth-child(4) { width: 16%; } /* Customer / Receivers */
.email-registry-table th:nth-child(5),
.email-registry-table td:nth-child(5) { width: 18%; } /* Subject */
.email-registry-table th:nth-child(6),
.email-registry-table td:nth-child(6) { width: 10%; } /* Mailbox */
.email-registry-table th:nth-child(7),
.email-registry-table td:nth-child(7) { width: 8%; } /* Category */
.email-registry-table th:nth-child(8),
.email-registry-table td:nth-child(8) { width: 8%; } /* Language */
.email-registry-table th:nth-child(9),
.email-registry-table td:nth-child(9) { width: 8%; } /* Status */
.email-registry-table th:nth-child(10),
.email-registry-table td:nth-child(10) { width: 3%; } /* Attachment icon */
.email-registry-table th:nth-child(11),
.email-registry-table td:nth-child(11) { width: 8%; } /* Actions */

/* Receivers column (receiver grouping mode): 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;
}

/* 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;
}

/* 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;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* 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;
}
h1 {
  margin-top: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: var(--text-color);
}

/* 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;
}

/* 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. */
.sticky-list-table thead th {
  position: sticky;
  top: var(--list-sticky-top, 0px);
  z-index: 1020;
  background-color: var(--white);
}

/* 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 .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;
}
.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;
}
.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;
}
.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.7rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-presence-user-time {
  font-weight: 400;
  opacity: 0.85;
}
.modal-presence-user--viewer {
  color: #495057;
  background: #e9ecef;
}
.modal-presence-user--editor {
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffecb5;
}
.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 */
.modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.edit-product-tab-pane {
  min-height: 400px;
}

/* 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;
}

/* 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;
}
/* 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 {
  content: '\2191';
}
th.sortable[aria-sort="desc"]::after {
  content: '\2193';
}
/* 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; }

/* 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);
}
/* Header navigation */
nav {
  background-color: var(--primary-color);
  padding: 0.5em;
}
nav .header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav .header-menu li {
  margin-right: 1em;
}
nav .header-menu li a {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
}
nav .header-menu li a:hover {
  text-decoration: underline;
}
nav .header-menu li.active a {
  text-decoration: underline;
}
/* 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;
}