/* --- Base Styles & Variables --- */
/* Design tokens (#6).
   Warm-neutral paper ground, white card surfaces, hairline borders rather than
   elevation, and Zederkof's green kept as the single accent. Retuning the tokens
   propagates through the components, which already consume these variables. */
:root {
  /* Brand accent — unchanged, this is Zederkof's green */
  --primary-color: #014d40;
  --primary-light: #e8efed;
  --primary-dark: #01382d;

  /* Warm neutrals. Pure grey reads cold next to the green; these are warmed slightly. */
  --secondary-color: #6b6a67;
  --light-gray: #f7f7f4;      /* paper ground */
  --medium-gray: #e4e3df;
  --dark-gray: #2e2d2a;
  --background-color: #ffffff; /* card surface */
  --text-color: #1c1b19;       /* warm near-black, never pure #000 */
  --border-color: #e0dfda;     /* hairline */

  /* Status colours, desaturated to sit calmly on the warm ground */
  --success-color: #1f7a3d;
  --danger-color: #c0392f;
  --warning-color: #d9a300;

  /* Status pills */
  --stock-critical-bg: #fdeceb;
  --stock-critical-text: #a3271f;
  --stock-danger-bg: #fdf1e7;
  --stock-danger-text: #9a4f10;
  --stock-warning-bg: #fdf8e6;
  --stock-warning-text: #7a6300;

  /* Shadows: barely there. Structure comes from borders, not elevation. */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.04);
  --shadow-md: 0 1px 4px rgba(28, 27, 25, 0.05);
  --shadow-lg: 0 4px 16px rgba(28, 27, 25, 0.07);

  /* Radii: softer, card-like */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Legacy aliases */
  --border-radius: var(--radius-sm);
  --box-shadow: var(--shadow-md);
  --transition-speed: 0.18s ease;
  --product-name-column-width: 34%;
  --table-header-font-size: 0.8rem;
  --table-header-padding-y: 12px;
  --table-header-padding-x: 15px;
  --table-header-line-height: 1.4;
}

html {
  overflow-y: scroll; /* Keep scrollbar space reserved */
  font-size: 14px; /* Base size (down from 16px) — all rem values scale from this */
}
@media (max-width: 1200px) {
  html { font-size: 13px; }
}
@media (max-width: 767px) {
  html { font-size: 12.5px; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 20px;
  background-color: var(--light-gray);
  color: var(--text-color);
  line-height: 1.5;
}

/* --- App layout: sidebar + content --- */
.app-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: -20px -20px 0; /* counteract body padding so sidebar is flush top+sides */
  min-height: 100vh;
}
.app-layout__content {
  flex: 1;
  min-width: 0;
  padding: 20px 20px 0;
}

/* Prevent scrolling and hide mobile toggle when modal is open */
html.modal-open,
body.modal-open {
  overflow: hidden; /* Apply to both html and body */
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

/* --- Header Styling --- */
h1 {
  font-size: 1.3rem;
  color: var(--dark-gray);
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}

/* --- Mobile Menu Toggle Button (Hidden by default) --- */
#mobile-menu-toggle {
  display: none; /* Hidden on desktop */
  position: absolute;
  top: 25px; /* Adjust vertical position */
  right: 20px;
  background: none;
  border: none;
  font-size: 1.8rem; /* Make icon larger */
  color: var(--primary-color);
  cursor: pointer;
  padding: 5px;
  z-index: 1001; /* Above nav */
}

h1 .company-name {
  font-size: 1em;
  font-weight: 600;
  color: var(--dark-gray);
}

h1 .page-title {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--secondary-color);
}

button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed), color var(--transition-speed),
    box-shadow var(--transition-speed);
  background-color: var(--primary-color);
  color: white;
  box-shadow: none;
  font-weight: 500;
}

button:hover {
  background-color: var(--primary-dark);
}

button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.secondary-action {
  background-color: var(--secondary-color);
  color: white;
  border-color: transparent;
}

.secondary-action:hover {
  background-color: #545b62;
}

button:disabled {
  background-color: var(--medium-gray);
  color: white;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="time"],
select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color var(--transition-speed),
    box-shadow var(--transition-speed);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(1, 77, 64, 0.15);
}

label {
  /* display: block; <-- Removed global display: block */
  margin-bottom: 0.3rem;
  font-weight: 500;
  font-size: 0.9rem;
}

/* --- Layout & Containers --- */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
}

.header-row h1 {
  margin-bottom: 0;
}

.main-navigation {
  display: block;
}

.top-right-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.top-right-buttons button {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid transparent;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.top-right-buttons button:hover {
  background-color: var(--primary-dark);
}

/* Recipients input card */
.recipient-input-card {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 0.5rem;
}

.recipient-input-card label {
  margin-bottom: 0.25rem;
}

.recipient-input-card input {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#recipients-modal .recipient-input-card button.recipient-action-btn {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

#recipients-modal #add-recipient-btn {
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

#recipients-modal #add-recipient-btn:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
}

#add-recipient-btn:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
}

.recipient-action-btn:first-of-type {
  margin-top: 16px;
}

#recipients-modal .close-modal-btn {
  margin-top: 6px;
  width: 100%;
}

/* --- Universal Notification --- */
#universal-notification {
  position: fixed;
  top: 0; /* Start position for transform */
  left: 50%;
  transform: translate(-50%, -120%); /* Start above screen */
  background-color: var(--dark-gray); /* Default background */
  color: white;
  padding: 12px 25px;
  border-radius: var(--border-radius); /* Rounded all corners */
  box-shadow: var(--box-shadow);
  z-index: 10000; /* Ensure it's above everything (modals, login) */
  min-width: 250px; /* Minimum width */
  max-width: 80%; /* Max width */
  text-align: center;
  font-size: 0.95rem;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Added opacity to transition */
  opacity: 0; /* Start hidden */
  pointer-events: none; /* Don't block clicks when hidden */
}

#universal-notification.show-notification {
  transform: translate(-50%, 20px); /* Slide down to 20px from top */
  opacity: 1;
  pointer-events: auto; /* Allow interaction when shown */
}

/* Notification Type Styles */
#universal-notification.notification-success {
  background-color: var(--primary-color); /* Changed to primary green */
  color: white;
}
#universal-notification.notification-error {
  background-color: var(--danger-color);
  color: white;
}
#universal-notification.notification-warning {
  background-color: var(--warning-color);
  color: var(--dark-gray); /* Dark text on yellow */
}
/* --- End Universal Notification --- */

/* Filter/Search Area */
.filter-search-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
  background-color: var(--background-color);
  padding: 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Top row - always together: Search, Categories, Date */
.top-row-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: nowrap;
}

/* Filter pill group and reset button inside top-row-filters */
.top-row-filters .filter-pill-group {
  flex-shrink: 0;
}
/* Removed .filter-row - now using natural flex flow in .filter-search-container */

/* Search input wrapper - flexible within top row */
.top-row-filters .search-input-wrapper {
  flex: 1 1 0;
  min-width: 150px;
  max-width: 400px;
}
.top-row-filters #search-input {
  width: 100%;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

/* Categories - fixed width */
.top-row-filters .category-multiselect {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 220px;
}
.category-filter-btn {
  height: 42px;
  background-color: var(--light-gray);
  color: var(--text-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.category-filter-btn:hover {
  background-color: #eef2f3;
}
.category-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--background-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  padding: 6px;
}
.category-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
}
.category-option:hover {
  background: #f6f7f8;
}
.category-option.selected {
  background: #eef6f4;
}
.category-option .check {
  display: inline-block;
  width: 18px;
  text-align: center;
  color: var(--primary-color);
  font-weight: 700;
}
.category-option.all-option .label {
  font-weight: 600;
}
.category-panel-error {
  padding: 8px;
  color: var(--danger-color);
}

/* Date range - fixed width */
.top-row-filters .date-range-filter {
  flex-shrink: 0;   /* Don't shrink */
  flex-grow: 0;     /* Don't grow */
}

/* Style for descending sort */
#product-table th.sort-desc .sort-arrow {
  /* content: "▼"; /* Down arrow character */ /* REMOVED - Handled by JS */
  opacity: 1; /* Show the span containing the JS-added text */
}

/* --- Desktop Filter Layout Adjustments --- */
@media (min-width: 768px) {
  .filter-search-container {
    display: flex; /* Ensure flex display */
    align-items: center; /* Vertically center items */
    gap: 16px; /* Space between items */
    row-gap: 20px; /* Extra spacing between wrapped rows */
    flex-wrap: wrap; /* Allow wrapping on desktop */
  }

  /* Reset mobile overrides and apply new styles */
  #search-input,
  #category-filter {
    /* width: auto; Removed */
    /* height: auto; Removed */
    height: 42px; /* Consistent height */
    padding: 0.5rem 0.75rem; /* Consistent padding */
    background-color: var(--light-gray); /* Light gray background */
    box-sizing: border-box; /* Ensure padding is included in height */
  }

  .search-input-wrapper {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 45%;
    min-width: 280px;
    max-width: 500px;
  }
  #search-input {
    width: 100%;
    box-sizing: border-box;
  }

  #category-filter {
      min-width: 150px; /* Restore min-width or adjust as needed */
      flex-grow: 0;     /* Do not grow */
      flex-shrink: 0;   /* Do not shrink */
  }

  .filter-wrapper.date-range-filter {
    flex-grow: 0;     /* Do not grow */
    flex-shrink: 0;   /* Do not shrink */
    /* Its width will be determined by its content */
  }

  /* Style the wrapper for label + buttons on desktop */
  .filter-wrapper {
    display: flex; /* Arrange label and buttons horizontally */
    align-items: center; /* Vertically center label and buttons */
    gap: 8px; /* Space between label and button group */
  }

  /* Remove bottom margin from label only on desktop */
  .filter-label {
    margin-bottom: 0;
  }

  /* Ensure labels and button groups are direct flex items */
  #filter-controls span,
  #stock-filter-controls span {
      /* Styles are handled globally, ensure they align correctly */
      align-self: center; /* Align labels vertically */
  }

  /* Display button groups horizontally */
  #filter-controls,
  #stock-filter-controls {
    display: flex;
    gap: 8px;
    width: auto; /* Allow natural width */
    align-items: center; /* Align buttons vertically */
  }

  /* Adjust filter button styling */
  .filter-btn {
    /* width: auto; Removed */
    /* padding: 0.4rem 0.6rem; Removed */
    /* font-size: 0.75rem; Removed */
    min-width: 90px; /* Minimum width */
    padding: 0.4rem 0.8rem; /* Match action button padding */
    font-size: 0.85rem; /* Consistent font size */
    line-height: 1.2; /* Match action button line-height */
  /* Background color is handled globally */
  }

  /* Styling for the new date filter controls on desktop */
  .filter-wrapper.date-range-filter .date-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* Consistent gap */
  }

  .filter-wrapper.date-range-filter .date-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    box-sizing: border-box;
    height: 42px; /* Match other desktop filter inputs */
    background-color: var(--light-gray); /* Match other desktop filter inputs */
    width: auto; /* Allow natural width or set a specific one if needed */
  }

  .filter-wrapper.date-range-filter .date-separator {
    font-size: 0.9rem;
    color: var(--secondary-color);
    line-height: 42px; /* Align with input height */
  }
}

/* Add breakpoint specifically for applying min-width to containers when table likely scrolls */
@media (max-width: 600px) { /* Match NEW table min-width */
    h1,
    .filter-search-container,
    #pagination-controls {
        box-sizing: border-box; /* Ensure padding/border are included */
    }
    /* Note: .top-right-buttons min-width is handled in the 992px breakpoint where it becomes static */
}

/* Small screens (e.g., mobile phones) */
@media (max-width: 767px) {
  body {
    padding: 8px;
    font-size: 0.85rem;
  }

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    min-height: 56px;
    box-sizing: border-box;
  }

  h1 {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  h1 .company-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }

  h1 .page-title {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--secondary-color);
    line-height: 1;
  }

  #mobile-menu-toggle {
    display: flex !important;
    position: static !important;
    align-self: center;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    font-size: 1.8rem;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 1;
    font-family: monospace;
  }

  /* --- Mobile Filter Layout --- */
  .filter-search-container {
    gap: 16px;          /* Smaller gap on mobile */
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .top-row-filters {
    gap: 12px;          /* Smaller gap for top row on mobile */
    flex-wrap: wrap;    /* Allow wrapping on very small screens */
  }
  
  /* .remaining-filters removed - filters now in top-row-filters */

  .top-row-filters .search-input-wrapper {
    flex-basis: auto;
    flex-grow: 1;
    min-width: 120px;
    width: auto;
  }
  .top-row-filters #search-input {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    height: 42px;
    box-sizing: border-box;
  }
  
  .top-row-filters #category-filter {
    min-width: 120px;   /* Smaller on mobile for better fit */
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    height: 42px;
    box-sizing: border-box;
  }

  /* Filtergruppe-wrapper (Lager/Alarm) */
  .filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filter-label {
    display: block; /* Keep display: block specifically for mobile */
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-color);
  }

  #stock-filter-controls,
  #trigger-filter-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  #filter-controls {
    display: flex;
    width: 100%;
    gap: 0;
    order: 3; /* Push below search + filter button */
  }

  #trigger-filter-controls .filter-btn {
    flex-grow: 1;
    flex-basis: 0;
    width: auto;
  }

  /* General filter button style for mobile */
  .filter-btn {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    background-color: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    color: var(--text-color);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  /* Pill group mobile */
  .filter-pill-group {
    width: auto;
    flex-shrink: 0;
    display: flex;
  }
  .filter-pill-group .filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
    padding: 8px 6px;
    font-size: 0.72rem;
  }
  .filter-pill.active {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-color: transparent;
  }

  /* Override for buttons inside the flex container */
  #filter-controls .filter-btn {
    flex-grow: 1;
    flex-basis: 0;
    width: auto;
  }

  .filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
    border-color: var(--primary-color);
  }

  /* Allow filter elements to size naturally for optimal wrapping */
  .filter-wrapper {
    flex-shrink: 0; /* Don't shrink filter wrappers */
    margin: 0;
  }

  .filter-search-container input,
  .filter-search-container select {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  /* --- Tabel med wrap og mindre font --- */
  .table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-wrapper table#product-table {
    table-layout: auto;
  }

  .table-responsive-wrapper #product-table th {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.78rem;
    padding: 10px 8px;
  }

  .table-responsive-wrapper #product-table td {
    font-size: 0.78rem;
    white-space: nowrap;
    line-height: 1.35;
    padding: 8px 8px;
  }

  .table-responsive-wrapper #product-table td:nth-child(4) {
    text-align: left;
  }

  /* Keep side-by-side layout on mobile, no wrapping */
  #product-table td[data-label="Handling"] > div {
    display: flex;
    gap: 6px; /* Smaller gap on mobile */
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /* Buttons stay compact side-by-side */
  #product-table td[data-label="Handling"] .manage-alarms-btn,
  #product-table td[data-label="Handling"] .show-combined-stats-btn {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
  }

  /* --- Mobile Navigation Styles --- */
  .main-navigation {
    display: none;
    position: absolute;
    top: 55px;
    right: 10px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 10px;
    z-index: 1000;
    min-width: 180px;
  }

  .main-navigation.nav-open {
    display: block;
  }

  .top-right-buttons {
    position: static;
    display: block;
    width: 100%;
    gap: 0;
  }

  .top-right-buttons button {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }

  .top-right-buttons button:last-child {
    margin-bottom: 0;
  }

  /* --- Pagination & Modaler --- */
  .pagination-controls {
    justify-content: center;
    gap: 6px;
  }
  .pagination-btn {
    min-width: 38px;
    height: 38px;
    font-size: 0.8rem;
  }

  .modal-content {
    width: 92%;
    padding: 16px;
    max-width: none;
    box-sizing: border-box;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Style for the table wrapper inside modals on mobile */
  .modal-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    max-height: 220px;
    overflow-y: auto;
  }

  .modal h3 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    padding-right: 30px;
  }

  .modal h4 {
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
    margin-top: 1rem;
  }

  .modal .product-info-modal p {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .new-alarm-inputs,
  .recipient-input-card {
    padding: 10px 12px;
  }

  #options-modal .input-row {
    padding: 8px 10px;
  }

  .options-action-col {
    padding: 10px 12px;
  }

  .modal label {
    font-size: 0.75rem;
  }

  .modal input { /* Style input separately now */
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }

  .modal select {
    font-size: 0.75rem; /* Keep existing mobile modal font size */
    padding: 0.3rem 1.5rem 0.3rem 0.5rem; /* Adjust padding for arrow (T, R, B, L) */
    background-color: var(--background-color); /* Ensure white background */
    border: 1px solid var(--medium-gray); /* Ensure gray border */
    -webkit-appearance: none; /* Remove default styling (iOS) */
    -moz-appearance: none; /* Remove default styling (Firefox) */
    appearance: none;
    background-color: var(--background-color); /* White background like other inputs */
    border: 1px solid var(--medium-gray); /* Match general border */
    border-radius: var(--border-radius); /* Match general radius */
    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='M2 5l6 6 6-6'/%3E%3C/svg%3E"); /* Simple dark arrow SVG */
    background-repeat: no-repeat;
    background-position: right 0.5rem center; /* Position arrow */
    background-size: 1em auto; /* Size arrow */
    /* Ensure width is still 100% as per parent rule */
    width: 100%;
    box-sizing: border-box; /* Include padding/border in width */
    margin-bottom: 0.5rem; /* Keep margin consistent */
    color: var(--text-color); /* Ensure text color matches other inputs */
  }
  /* Ensure consistent focus style for modal selects */
  .modal select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(1, 77, 64, 0.25); /* Match general focus */
  }

  .modal button {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
  }

  .modal table {
    font-size: 0.75rem;
    /* Remove margin-bottom from table itself, handled by wrapper */
    margin-bottom: 0;
  }

  .modal th,
  .modal td {
    padding: 5px 6px;
  }

  .modal .remove-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .table-responsive-wrapper #product-table .manage-alarms-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    line-height: 1.1;
  }

  .date-row {
    /* flex-direction: column; <-- Removed */
    /* align-items: stretch; <-- Removed */
    gap: 10px; /* Add small gap for mobile */
  }

  .date-group {
    /* flex-basis: auto; <-- Removed */
    /* width: 100%; <-- Removed */
    flex: 1; /* Make groups share space */
  }

  /* --- Options Modal Mobile Height Adjustment --- */
  #options-modal .input-row select,
  #options-modal .input-row input[type="time"] {
    height: auto; /* Override fixed height */
    font-size: 0.75rem; /* Match other mobile modal inputs */
    padding: 0.3rem 0.5rem; /* Match other mobile modal inputs */
  }
  /* Adjust select padding specifically for arrow */
  #options-modal .input-row select {
      padding-right: 1.5rem; /* Ensure space for dropdown arrow */
  }

  .options-actions-row {
    flex-direction: column;
  }

  /* Mobile specific styles for date filter */
  .filter-wrapper.date-range-filter .date-filter-controls {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 8px;
    width: 100%; /* Take full width of the filter-wrapper */
  }

  .filter-wrapper.date-range-filter .date-input {
    height: 42px; /* Consistent height with other mobile inputs */
    font-size: 0.85rem; /* Match other mobile inputs */
    padding: 0.5rem 0.75rem; /* Match other mobile inputs */
    flex-grow: 1; /* Allow inputs to grow */
    min-width: calc(50% - 12px); /* Try to fit two per line, accounting for gap and separator */
    box-sizing: border-box;
  }
  
  .filter-wrapper.date-range-filter .date-separator {
    font-size: 0.85rem; /* Match mobile input font size */
    color: var(--secondary-color);
    text-align: center; /* Center if it wraps to its own line */
    flex-basis: 100%; /* If it wraps, let it take full width */
    line-height: normal; /* Reset line-height from desktop if needed */
    margin: 0 auto; /* Center if it takes full width */
  }
  /* If date inputs are still too wide and force separator to new line, adjust min-width or use grid */
   /* .filter-wrapper.date-range-filter .date-input:first-of-type { */
    /* margin-right: auto; */ /* Push separator and second input to the right if space allows */
  /* } */
   /* .filter-wrapper.date-range-filter .date-input:last-of-type { */
    /* margin-left: auto; */
  /* } */


}

/* --- Status Badge Styles (Now Normal Text) --- */
.status-badge {
  /* display: inline-block; */ /* Changed to inline */
  display: inline; /* Behave like normal text */
  padding: 0; /* Remove padding */
  /* font-size: 0.85em; */ /* Changed to inherit */
  font-size: inherit; /* Inherit from parent (td) */
  /* font-weight: 600; */ /* Changed to inherit */
  font-weight: inherit; /* Inherit from parent (td) */
  line-height: inherit; /* Inherit from parent (td) */
  text-align: left; /* Align with other text */
  /* white-space: nowrap; */ /* Changed to normal */
  white-space: normal; /* Allow wrapping */
  vertical-align: baseline;
  border-radius: 0; /* Remove rounded corners */
  background-color: transparent; /* Remove background */
  border: none; /* Remove border */
  color: inherit; /* Default color inherited */
}

.status-badge.status-active {
  color: #1a7f37; /* Darker green text */
  /* background-color: #e9f7ec; */ /* Background removed */
}

.status-badge.status-inactive {
  color: #adb5bd; /* Lighter grey text */
  /* background-color: #f8f9fa; */ /* Background removed */
}

#category-filter {
  min-width: 150px;
  color: var(--text-color); /* Ensure dropdown text color matches */
}

#filter-controls span,
#stock-filter-controls span {
  /* Apply to both spans */
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-right: 5px;
}

.filter-btn {
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  padding: 0.3rem 0.8rem;
}

.filter-btn:hover {
  background-color: #e2e6ea;
}

.filter-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  font-weight: 500;
}

/* --- Filter pill group (segmented control) --- */
.filter-pill-group {
  display: inline-flex;
  align-items: center;
  background: var(--light-gray);
  border-radius: var(--radius-md);
  padding: 3px;
  border: 1px solid var(--medium-gray);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.filter-pill {
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dark-gray);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
  min-width: auto;
  line-height: 1.3;
}
.filter-pill:hover {
  color: var(--primary-color);
  background: rgba(1, 77, 64, 0.06);
}
.filter-pill.active {
  color: var(--primary-color);
  background: var(--background-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(1,77,64,0.15);
  font-weight: 600;
  border-color: transparent;
}

/* --- Top bar pill group (compact on mobile) --- */
.filter-pill-group--topbar {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .filter-pill-group--topbar .filter-pill {
    flex: 1 1 0;
    padding: 8px 6px;
    font-size: 0.76rem;
    text-align: center;
    min-width: 0;
    width: auto;
    min-height: 36px;
  }
}

/* --- Reset filters (icon button, matches pill-group height) --- */
/* #reset-filters-btn is now inside .filter-sidebar__footer — styled via .reset-btn--sidebar */

/* --- Main Product Table --- */
/* Wrapper — no overflow so sticky thead works */
.table-responsive-wrapper {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

table#product-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0;
  background-color: var(--background-color);
  font-size: 0.9rem;
  table-layout: auto;
}

/* Fixed layout only on desktop to prevent column shifting */
@media (min-width: 768px) {
  table#product-table {
    table-layout: fixed; /* Fixed layout to prevent column shifting */
  }

  #product-table th:first-child,
  #product-table td:first-child {
    width: var(--product-name-column-width, 20%); /* Keep name column fixed */
  }

  #product-table th:not(:first-child),
  #product-table td:not(:first-child) {
    width: calc(
      (100% - var(--product-name-column-width, 22%)) / 6
    ); /* Distribute remaining width evenly across 6 columns */
  }
}

#product-table th,
#product-table td {
  padding: 12px 15px; /* Increased padding */
  border: none; /* Remove default borders */
  border-bottom: 1px solid var(--medium-gray); /* Use bottom borders */
  text-align: left;
  vertical-align: middle;
}

#product-table th {
  background-color: var(--primary-color); /* Use primary color */
  font-weight: 600;
  color: white; /* White text for contrast */
  border-bottom-width: 2px;
  white-space: nowrap; /* Prevent header text wrapping */
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: var(--table-header-font-size);
  line-height: var(--table-header-line-height);
  padding: var(--table-header-padding-y) var(--table-header-padding-x);
}

#product-table thead th:first-child {
  border-top-left-radius: var(--radius-md);
}
#product-table thead th:last-child {
  border-top-right-radius: var(--radius-md);
}

/* Ensure content doesn't overflow (keep word-wrap) */
#product-table td {
  word-wrap: break-word; /* Break long words if necessary */
  overflow-wrap: break-word; /* Standard property */
}

/* SKU font family applies to all screen sizes */
#product-table th:nth-child(2), /* SKU */
#product-table td:nth-child(2) {
  font-family: monospace;
}

/* Button container for side-by-side layout */
#product-table td[data-label="Handling"] > div {
  display: flex;
  gap: 8px; /* Space between buttons */
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Ensure all buttons have consistent height and flex behavior */
#product-table .manage-alarms-btn {
  flex: 0 0 90px;
  min-height: 36px; /* Consistent height */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600; /* Ensure consistent font weight */
}

#product-table tbody tr:last-child td {
  border-bottom: none; /* No border for the last row */
}

#product-table tbody tr:nth-child(4n+1):not(.stock-history-row) {
  background-color: #fafbfc;
}

#product-table tbody tr:hover:not(.stock-history-row) {
  background-color: var(--primary-light);
}

/* Statistics dropdown/fold-out menu styling */
#product-table .stock-history-row {
  background-color: #f5f7fa;
}

/* Remove hover effect from statistics menu */
#product-table .stock-history-row:hover {
  background-color: #f5f7fa;
}

#product-table .stock-history-row td {
  padding: 0; /* Let embedded layout control spacing */
  white-space: normal; /* Allow stats panel to wrap without pushing table */
}

#product-table .stock-history-row td > div {
  width: 100%; /* Ensure grid container spans full cell width */
  box-sizing: border-box;
}

#product-table td:last-child {
  /* Action button column */
  text-align: right;
}

#product-table th:last-child {
  text-align: right;
}

/* --- Action Button in Table --- */
#product-table .manage-alarms-btn {
  background-color: white;
  color: var(--primary-color);
  border: 1px solid rgba(1, 77, 64, 0.25);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed), color var(--transition-speed);
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
  text-align: center;
}

#product-table .manage-alarms-btn:hover {
  background-color: rgba(1, 77, 64, 0.06);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
  text-decoration: none;
}

/* State when alarm exists: "Rediger" - Subtle outlined */
#product-table .manage-alarms-btn.edit-mode {
  background-color: white;
  color: var(--primary-color);
  border: 1.5px solid rgba(1, 77, 64, 0.35);
  font-weight: 600;
}

#product-table .manage-alarms-btn.edit-mode:hover {
  background-color: rgba(1, 77, 64, 0.06);
  color: var(--primary-dark);
  border-color: rgba(1, 77, 64, 0.4);
}

/* --- Style for "Statistik" button in table --- */
#product-table .show-history-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.2;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid rgba(1, 77, 64, 0.25);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed), color var(--transition-speed);
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-weight: 600;
}

#product-table .show-history-btn:hover {
  background-color: rgba(1, 77, 64, 0.06);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
}
/* --- Style for "Statistik" combined stats button --- */
#product-table .show-combined-stats-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.2;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid rgba(1, 77, 64, 0.25);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-speed),
    border-color var(--transition-speed), color var(--transition-speed);
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
}

#product-table .show-combined-stats-btn:hover {
  background-color: rgba(1, 77, 64, 0.06);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
}
/* --- End Action Button --- */

#product-table td em {
  /* Loading/No products message */
  color: var(--secondary-color);
  font-style: normal;
}

/* --- Modals --- */
.modal {
  display: none;
  position: fixed;
  z-index: 1005;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-content {
  background-color: var(--background-color);
  margin: auto;
  padding: 32px 32px 28px;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  width: 90%;
  max-width: 480px;
  position: relative;
  animation: modalSlideIn 0.25s ease-out;
  flex-shrink: 0;
}

/* Style for the product info section in modals */
.modal .product-info-modal {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 0.75rem;
}

.modal .product-info-modal p {
  margin: 0;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--secondary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.modal .product-info-modal p:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.modal .product-info-modal p:first-child {
  padding-top: 0;
}

.modal .product-info-modal p span {
  color: var(--text-color);
  font-weight: 500;
}

/* Style for the horizontal rule in modals */
.modal hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1.25rem 0;
}

.modal h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark-gray);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}
.modal h4 {
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
}

.modal hr + h4 {
  margin-top: 0.5rem;
}

.modal label {
  margin-bottom: 0.5rem;
}

.modal input,
.modal select,
.modal button {
  width: 100%;
  margin-bottom: 0.5rem; /* Reduced space below buttons */
}

.modal button {
  margin-top: 0.5rem; /* Add space above buttons */
}

/* Primary action buttons in modals */
#add-alarm-btn,
#save-options-btn,
#add-recipient-btn,
#send-test-notification-btn {
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  margin-top: 1rem;
}

#add-alarm-btn:hover,
#save-options-btn:hover,
#add-recipient-btn:hover,
#send-test-notification-btn:hover {
  box-shadow: var(--shadow-sm);
}

.modal .close-modal-btn {
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  margin-top: 0.2rem;
  margin-bottom: 0;
}
.modal .close-modal-btn:hover {
  background-color: #e2e6ea;
}

/* Close icon button (X) */
.modal .close-icon-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--secondary-color);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  width: auto;
  margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal .close-icon-btn:hover {
  color: var(--dark-gray);
  background-color: var(--light-gray);
}

/* Removed old .feedback styles */

/* General style for modal table wrappers */
.modal-table-wrapper {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

/* Custom scrollbar for modal table wrappers */
.modal-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.modal-table-wrapper::-webkit-scrollbar-track {
  background: var(--light-gray);
  border-radius: 3px;
}
.modal-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--medium-gray);
  border-radius: 3px;
}
.modal-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* Modal Table Styles */
.modal table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.modal th,
.modal td {
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-align: left;
  vertical-align: middle;
}

.modal th {
  background-color: var(--primary-color);
  color: white;
  position: sticky;
  top: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  z-index: 1;
}

.modal tbody tr:hover {
  background-color: var(--primary-light);
}

.modal tr:last-child td {
  border-bottom: none;
}

.modal td:last-child {
  /* Handling column */
  text-align: left; /* Align button to the left */
  /* Removed fixed width */
}

.modal .remove-btn {
  background-color: transparent;
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  width: auto;
  box-sizing: border-box;
  transition: background-color var(--transition-speed),
    color var(--transition-speed);
  line-height: 1.2;
  vertical-align: middle;
}
.modal .remove-btn:hover {
  background-color: var(--danger-color);
  color: white;
}

.modal .empty-row td {
  text-align: center;
  font-style: normal;
  color: var(--secondary-color);
  opacity: 0.7;
  padding: 20px 15px;
}

/* New alarm inputs card */
.new-alarm-inputs {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

/* Date range inputs in modal */
.date-range-inputs {
  margin-top: 12px;
  margin-bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.date-range-inputs label {
  display: block; /* Make label take full width */
  margin-bottom: 8px; /* Space below the main label */
  font-weight: 500; /* Match other labels */
}

.date-row {
  display: flex;
  align-items: flex-end; /* Align items to the bottom (buttons, inputs) */
  gap: 15px; /* Space between Fra/Til groups and button */
  flex-wrap: wrap; /* Allow wrapping on very small screens */
}

.date-group {
  /* display: flex; */ /* Removed horizontal flex */
  /* align-items: center; */
  /* gap: 5px; */
  flex-basis: calc(
    50% - 10px
  ); /* Take roughly half width, accounting for gap */
  display: flex; /* Use flex for internal stacking */
  flex-direction: column; /* Stack label, select, input vertically */
  gap: 5px; /* Space between select and input */
}

.date-group span {
  font-size: 0.9em;
  color: var(--secondary-color);
  margin-bottom: 3px; /* Small space below Fra/Til label */
  font-weight: 500; /* Match other labels */
}

.date-range-inputs select,
.date-range-inputs input[type="number"] {
  width: 100%; /* Make select and input take full width of the group */
  margin-bottom: 0; /* Remove default bottom margin */
  /* flex-grow: 0; */ /* Not needed with vertical stacking */
  /* flex-shrink: 0; */
  box-sizing: border-box; /* Include padding/border in width */
}

/* Remove specific widths */
/* .date-range-inputs select { min-width: 70px; } */
/* .date-range-inputs input[type="number"] { width: 60px; } */

#clear-dates-btn {
  width: auto; /* Allow button to size naturally */
  padding: 0.4rem 0.8rem; /* Adjust padding */
  align-self: flex-end; /* Align button to the bottom of the flex row */
  margin-bottom: 0; /* Align with inputs */
  margin-left: 5px; /* Space before button */
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
}
#clear-dates-btn:hover {
  background-color: #e2e6ea;
}

/* Options Modal Specifics */
#options-modal > .modal-content > label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--secondary-color);
}

#options-modal .input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 1rem;
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-sizing: border-box;
}

#options-modal .input-row select {
  flex-grow: 1;
  margin-bottom: 0;
  width: auto;
  height: 38px;
  box-sizing: border-box;
  background-color: var(--background-color);
}

#options-modal .input-row span {
  /* Time input container */
  display: none; /* Keep hidden by default */
  align-items: center;
  gap: 5px;
}
#options-modal .input-row span[style*="inline-flex"] {
  /* Show when needed */
  display: inline-flex;
}

#options-modal .input-row input[type="time"] {
  padding: 0.5rem 0.75rem; /* Match other inputs */
  width: auto; /* Allow natural sizing */
  margin-bottom: 0; /* Remove margin */
  height: 38px; /* Set consistent height */
  /* Add standard input styling */
  background-color: var(--background-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  font-size: 0.9rem; /* Match other inputs */
  box-sizing: border-box;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
  color: var(--text-color); /* Ensure text color matches */
  -webkit-appearance: none; /* Attempt to override default browser styling */
  -moz-appearance: none;
  appearance: none;
}
/* Add focus style for time input */
#options-modal .input-row input[type="time"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(1, 77, 64, 0.25); /* Match general focus */
}

/* Style for text input in options modal input row to match select/time */
#options-modal .input-row input[type="text"] {
  height: 38px;
  padding: 0.5rem 0.75rem; /* Match general input/select padding */
  border: 1px solid var(--medium-gray); /* Match general input/select border */
  border-radius: var(--border-radius); /* Match general input/select radius */
  background-color: var(--background-color); /* Consistent with time/select input */
  font-size: 0.9rem; /* Match general input/select font size */
  color: var(--text-color); /* Standard text color */
  margin-bottom: 0; /* Override .modal input default margin */
  box-sizing: border-box; /* Crucial for height and padding */
  width: auto; /* Override .modal input default width: 100% and allow flex behavior */
  /* flex-grow: 1; is handled by inline style on the element itself */
}

/* --- Action buttons in options modal (backfill + hent produkter) --- */
#options-modal #pilot-backfill-btn,
#options-modal #update-products-btn {
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
#options-modal #pilot-backfill-btn:hover:not(:disabled),
#options-modal #update-products-btn:hover:not(:disabled) {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-color: rgba(1, 77, 64, 0.25);
}
#options-modal #pilot-backfill-btn:disabled,
#options-modal #update-products-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.setting-hint {
  font-size: 0.78rem;
  color: var(--secondary-color);
  font-style: italic;
}

/* --- Options modal: side-by-side action columns --- */
.options-actions-row {
  display: flex;
  gap: 16px;
  margin-bottom: 0.5rem;
}

.options-action-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.options-action-col label {
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
}

.options-action-col button {
  margin-bottom: 0.4rem;
  margin-top: 0;
}

.options-action-col .setting-hint {
  margin-top: 0;
}

/* Login Screen */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Login Screen */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Login Screen Container */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

/* Login overlay */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e6f0ee 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}


/* Login box */
.form-box {
  background-color: var(--background-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.5em;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Logo styling */
.login-logo {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
}

/* Input fields */
#login-username,
#login-password {
  width: 100%;
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  background-color: var(--background-color);
  text-align: left;
}

/* Button */
#login-screen button {
  width: 100%;
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--border-radius);
  border: none;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

#login-screen button:hover {
  background-color: #01382d;
}

/* Error message */
#login-error {
  color: var(--danger-color);
  font-size: 0.9rem;
  height: 1.2em; /* Reserver plads selv når den er tom */
  margin-top: 12px;
  text-align: center;
  opacity: 0;
}

#login-error.show {
  display: block;
}

/* Placeholder fade on focus */
#login-password:focus::placeholder {
  color: transparent;
}

.login-logo {
  display: block;
  margin: 0 auto 1.5rem auto; /* Centrer og luft under */
  width: 100%;
  max-width: 180px; /* Standard max på mobil og desktop */
  height: auto;
}

@media (max-width: 767px) {
  .form-box {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    box-sizing: border-box;
  }
}

/* På større skærme: gør logoet lidt større */
@media (min-width: 768px) {
  .login-logo {
    max-width: 200px; /* Eller det du ønsker på desktop */
  }
}

/* --- Table Sorting Styles --- */
#product-table th[data-sort-key] {
  cursor: pointer;
  position: relative; /* Needed for absolute positioning of arrow */
  user-select: none; /* Prevent text selection on click */
}

/* Add hover effect for ALL table headers */
#product-table th:hover {
  background-color: #01382d; /* Darker shade of primary green */
}

/* Updated arrow styles using text content */
.sort-arrow {
  display: inline-block; /* Keep as inline-block */
  vertical-align: middle; /* Align with text */
  margin-left: 5px; /* Adjust spacing */
  font-size: 0.8em; /* Slightly smaller than header text */
  color: white; /* White color for visibility on green header */
  opacity: 0; /* Hidden by default */
  transition: opacity var(--transition-speed); /* Transition opacity only */
  /* width: 1em; Removed reserved space */
  text-align: center;
}

/* Remove the border-based ::after rule */
/* .sort-arrow::after { ... } */

/* Style for ascending sort */
#product-table th.sort-asc .sort-arrow {
  /* content: "▲"; /* Up arrow character */ /* REMOVED - Handled by JS */
  opacity: 1; /* Show the span containing the JS-added text */
}

/* Style for descending sort */
#product-table th.sort-desc .sort-arrow {
  /* content: "▼"; /* Down arrow character */ /* REMOVED - Handled by JS */
  opacity: 1; /* Show the span containing the JS-added text */
}

/* --- Stockout Analysis Modal Styles --- */
#stockout-filter-modal .modal-content {
  max-width: 900px;
}

.modal-content h2 {
  margin-top: 0;
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  position: absolute;
  right: 15px;
  top: 10px;
}

.close:hover,
.close:focus {
  color: var(--danger-color);
  text-decoration: none;
}

.period-selector {
  background: var(--light-gray);
  padding: 15px;
  margin: 15px 0;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-color);
}

.period-selector label {
  font-weight: 500;
  margin-right: 10px;
}

.period-selector input[type="date"] {
  margin: 0 5px;
  padding: 8px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--border-radius);
}

.period-selector .btn {
  margin-left: 15px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.period-selector .btn:hover {
  background-color: #01382d;
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--secondary-color);
  font-style: italic;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 20px;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--danger-color);
  margin: 15px 0;
}

.analysis-results h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.stat-box {
  padding: 15px;
  background: var(--light-gray);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--medium-gray);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-box label {
  font-size: 0.9rem;
  color: var(--secondary-color);
  font-weight: 500;
  margin: 0;
}

.stat-box span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.stat-box.critical {
  background: #ffebee;
  border-left-color: var(--danger-color);
}

.stat-box.critical span {
  color: var(--danger-color);
}

.stat-box.warning {
  background: #fff8e1;
  border-left-color: var(--warning-color);
}

.stat-box.warning span {
  color: #e65100;
}

.stockout-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  background: white;
}

.stockout-table th,
.stockout-table td {
  border: 1px solid var(--medium-gray);
  padding: 10px;
  text-align: left;
}

.stockout-table th {
  background-color: var(--primary-color);
  color: white;
  font-weight: 500;
}

.stockout-table tr:nth-child(even) {
  background-color: var(--light-gray);
}

.status-critical {
  color: var(--danger-color);
  font-weight: 500;
}

.status-good {
  color: var(--success-color);
  font-weight: 500;
}

.no-stockouts {
  text-align: center;
  padding: 30px;
  color: var(--success-color);
  font-size: 1.1rem;
  background: #f1f8e9;
  border-radius: var(--border-radius);
  margin: 20px 0;
}

.prediction-box {
  margin-top: 20px;
  padding: 20px;
  background: #e3f2fd;
  border-radius: var(--border-radius);
  border-left: 4px solid #1976d2;
}

.prediction-box h4 {
  margin-top: 0;
  color: #1976d2;
}

.stockout-analysis-btn {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.85rem;
  margin: 2px;
  transition: background-color var(--transition-speed);
}

.stockout-analysis-btn:hover {
  background-color: #1976d2;
}

/* --- Combined statistics layout --- */
.combined-stats-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
  margin-top: 4px;
}

.combined-stats-panel {
  min-width: 0;
  background: var(--background-color);
  border-radius: var(--radius-md);
  padding: 14px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  animation: statsSlideIn 0.3s ease-out;
}

@keyframes statsSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.combined-stats-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding: 0 4px 8px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.combined-stats-scroll.modal-table-wrapper {
  max-height: 420px;
  margin-bottom: 0;
}

.stats-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 36px; /* Ensure consistent header height across panels */
}

.stats-panel-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.stats-panel-header--with-action {
  min-height: 36px; /* Maintain existing class for clarity */
}

/* stockout-view-toggle now uses .stats-tab-group + .stats-tab styling */

/* --- Statistics data grids (BC Historik & Udsolgt Statistik) --- */
.stats-table {
  width: 100%;
  --stats-column-count: 1;
  border-radius: var(--border-radius);
  background-color: #fff;
  box-shadow: var(--box-shadow);
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  font-size: 0.9rem;
  box-sizing: border-box;
  margin: 0;
}

.stats-table--cols-3 {
  --stats-column-count: 3;
}

.stats-table--cols-5 {
  --stats-column-count: 5;
}

.stats-table--cols-6 {
  --stats-column-count: 6;
}

.stats-table__body {
  width: 100%;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(var(--stats-column-count), minmax(0, 1fr));
  width: 100%;
}

.stats-row--header {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
}

.stats-cell {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  line-height: 1.35;
  word-break: break-word;
  font-family: inherit;
}

.stats-row--header .stats-cell {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  font-size: var(--table-header-font-size); /* Match main table header text size */
  line-height: var(--table-header-line-height);
  padding: var(--table-header-padding-y) var(--table-header-padding-x); /* Match main table header height */
  white-space: nowrap;
  display: block; /* Match block layout of main table headers */
  text-align: left; /* Match data cell alignment */
  min-height: 0; /* Let padding control the height */
}

.stats-row:last-child .stats-cell {
  border-bottom: none;
}

.stats-row:not(.stats-row--header):hover {
  background-color: #f1f3f5;
}

.stats-row.parent-row .stats-cell {
  font-weight: 400;
}

.stats-row.component-row .stats-cell {
  color: #555;
}

.stats-row.anchor-row .stats-cell {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-style: italic;
}

.stats-row--empty .stats-cell {
  justify-content: center;
  text-align: center;
  font-style: italic;
  color: #4b5563;
}

.stats-cell--span-all {
  grid-column: 1 / -1;
}

.stats-cell--number {
  justify-content: flex-start;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

#sync-progress-overlay {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0;
  margin: 0 12px 0 0;
  color: var(--primary-color);
  background: transparent;
  flex-wrap: wrap;
  max-width: 520px;
}

#sync-progress-overlay[hidden] {
  display: none !important;
}

#sync-progress-overlay.is-visible {
  display: flex;
}

.sync-overlay-line {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.sync-overlay-timestamp {
  display: none;
}

.sync-overlay-list {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sync-overlay-list li {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

#sync-progress-overlay.status-running {
  color: #0f172a;
}

#sync-progress-overlay.status-finished {
  color: #166534;
}

#sync-progress-overlay.status-error {
  color: #b91c1c;
}

@media (max-width: 992px) {
  #sync-progress-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
  }

  .top-right-buttons #sync-progress-overlay {
    width: 100%;
    margin-bottom: 8px;
  }

  .sync-overlay-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}



@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .period-selector input[type="date"],
  .period-selector .btn {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
}

/* ========== NEW COMPONENT STYLES ========== */

/* --- Summary Cards --- */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.summary-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  background-color: var(--background-color);
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform 0.15s ease;
  text-align: left;
  min-height: 70px;
}

.summary-card:hover {
  background-color: var(--light-gray);
  color: var(--text-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.summary-card.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(1, 77, 64, 0.12);
}

.summary-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark-gray);
}

.summary-card__label {
  font-size: 0.82rem;
  color: var(--secondary-color);
  margin-top: 4px;
  font-weight: 500;
}

.summary-card--success .summary-card__value { color: var(--success-color); }
.summary-card--danger .summary-card__value { color: var(--stock-critical-text); }

@media (max-width: 767px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .summary-card {
    padding: 12px 14px;
    min-height: 56px;
  }
  .summary-card__value {
    font-size: 1.3rem;
  }
}

/* --- Stock Indicator (combined lager+grænse column) --- */
.stock-indicator {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}

.stock-indicator__value {
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.stock-indicator__bar {
  position: relative;
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: visible;
  width: 100%;
}

.stock-indicator__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--success-color);
  transition: width 0.3s ease;
}

.stock-indicator__threshold {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 9px;
  background: var(--dark-gray);
  border-radius: 1px;
  z-index: 1;
}

.stock-indicator__label {
  font-size: 0.72rem;
  color: var(--secondary-color);
  line-height: 1;
}

/* Stock status cell colors */
.stock-critical .stock-indicator__value {
  color: var(--stock-critical-text);
  font-weight: 700;
}
.stock-critical .stock-indicator__fill {
  background: var(--stock-critical-text);
}

.stock-danger .stock-indicator__value {
  color: var(--stock-danger-text);
  font-weight: 700;
}
.stock-danger .stock-indicator__fill {
  background: var(--stock-danger-text);
}

.stock-warning .stock-indicator__value {
  color: var(--stock-warning-text);
  font-weight: 600;
}
.stock-warning .stock-indicator__fill {
  background: var(--warning-color);
}

@media (max-width: 767px) {
  .stock-indicator__bar,
  .stock-indicator__label {
    display: none;
  }
}

/* --- Woo stock cell + BC vs Woo mismatch row --- */
.woo-stock-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.woo-stock-cell--mismatch {
  color: var(--stock-critical-text);
  font-weight: 700;
}

.woo-stock-missing {
  color: var(--secondary-color);
  font-style: italic;
}

.woo-stock-pending {
  color: var(--secondary-color);
  font-style: italic;
  letter-spacing: 1px;
}

#product-table tbody tr.row-stock-mismatch > td {
  background-color: var(--stock-critical-bg);
}

#product-table tbody tr.row-stock-mismatch:hover > td {
  background-color: #FFD0D0;
}

/* --- SKU Cell (SKU + variant subtitle) --- */
.sku-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sku-cell__code {
  font-family: monospace;
  font-weight: 500;
}

.sku-cell__variant {
  font-size: 0.76rem;
  color: var(--secondary-color);
  font-family: monospace;
}

/* --- Status Pills --- */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.status-pill--active {
  background: #E8F5E9;
  color: #2E7D32;
}

.status-pill--triggered {
  background: var(--stock-critical-bg);
  color: var(--stock-critical-text);
}

.status-pill--none {
  background: #F5F5F5;
  color: #9E9E9E;
}

/* --- Relative Time Tooltip --- */
td[title] {
  cursor: default;
}

/* --- Chart Container --- */
.chart-container {
  background: var(--background-color);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 4px;
}

.chart-container canvas {
  width: 100% !important;
  max-height: 280px;
}

.chart-container h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.chart-header__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-toggle .stats-tab {
  padding: 5px 14px;
  font-size: 0.78rem;
}

/* --- Stats Section (tab wrapper) --- */
.stats-section {
  display: flex;
  flex-direction: column;
  background: var(--background-color);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  animation: statsSlideIn 0.3s ease-out;
}

/* --- Metric Strip --- */
.stats-metric-strip {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.stats-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  background: var(--background-color);
  box-shadow: var(--shadow-sm);
}

.stats-metric__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  font-variant-numeric: tabular-nums;
}
.stats-metric__value--danger { color: var(--stock-critical-text); }
.stats-metric__value--warning { color: var(--stock-danger-text); }

.stats-metric__label {
  font-size: 0.78rem;
  color: var(--secondary-color);
  margin-top: 3px;
  font-weight: 500;
  text-align: center;
}

/* --- Tab Bar --- */
.stats-tab-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
}

.stats-tab-group {
  display: inline-flex;
  background: var(--light-gray);
  border-radius: var(--radius-md);
  padding: 3px;
  border: 1px solid var(--medium-gray);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stats-tab {
  padding: 8px 20px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dark-gray);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.stats-tab:hover {
  color: var(--primary-color);
  background: rgba(1, 77, 64, 0.06);
}
.stats-tab.active {
  color: var(--primary-color);
  background: var(--background-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(1, 77, 64, 0.15);
  font-weight: 600;
}

.stats-tab-actions {
  margin-left: auto;
}

.stats-tab-content { padding-top: 14px; }
.stats-tab-pane { display: none; }
.stats-tab-pane.active { display: block; }

@media (max-width: 767px) {
  .stats-metric-strip { flex-direction: column; gap: 8px; }
  .stats-metric { flex-direction: row; justify-content: center; gap: 8px; padding: 10px; }
  .stats-tab { padding: 6px 12px; font-size: 0.78rem; }
  .stats-tab-bar { flex-wrap: wrap; gap: 8px; }
}

/* --- Clickable product rows --- */
#product-table tbody tr:not(.stock-history-row) {
  cursor: pointer;
}

/* --- Sales overlay toggle (checkbox in chart header) --- */
.sales-overlay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark-gray);
  user-select: none;
  margin: 0;
}
.sales-overlay-toggle input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* --- Search suggestions dropdown --- */
.search-input-wrapper {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 200px;
}
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--background-color);
  border: 1px solid var(--medium-gray);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.1s ease;
}
.search-suggestion-item:last-child {
  border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
  background-color: var(--primary-light);
}
.search-suggestion-item__name {
  font-weight: 500;
  color: var(--text-color);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion-item__sku {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin-left: 12px;
  flex-shrink: 0;
}
.search-suggestion-item__stock {
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin-left: 8px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .search-input-wrapper {
    flex-basis: auto;
    flex-grow: 1;
    min-width: 120px;
  }
}

/* --- Pagination improvements --- */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 10px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.pagination-info {
  font-size: 0.85rem;
  color: var(--secondary-color);
  white-space: nowrap;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-numbers {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background-color);
  color: var(--text-color);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  font-weight: 600;
}
.pagination-ellipsis {
  padding: 0 4px;
  color: var(--secondary-color);
  font-size: 0.85rem;
  user-select: none;
}

/* --- Salg tab: fetch sales entries button --- */
.fetch-sales-entries-btn {
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--primary-color);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.fetch-sales-entries-btn:hover {
  background-color: var(--primary-hover);
}

.fetch-sales-entries-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Dage udsolgt column --- */
.stockout-days-cell {
  text-align: center;
}

.stockout-count {
  font-weight: 700;
  color: var(--danger-color);
}

.lost-revenue-sub {
  font-size: 0.7rem;
  color: var(--secondary-color);
  margin-top: 2px;
}

/* --- Sparkline column --- */
.sparkline-cell {
  min-width: 80px;
  text-align: center;
}

.sparkline-cell canvas {
  display: inline-block;
  width: 80px;
  height: 30px;
}

/* --- Settings Page --- */
#settings-page {
  max-width: 1200px;
}
.settings-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.settings-page-header h2 {
  margin: 0;
  font-size: 1.3rem;
  flex: 1;
}
.global-save-btn {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.global-save-btn:hover:not(:disabled) {
  background: var(--primary-hover);
  transform: translateY(-1px);
}
.global-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.settings-back-btn {
  background: transparent;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-color);
  transition: background var(--transition-speed), border-color var(--transition-speed);
}
.settings-back-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-color);
}
/* --- Settings Tabs --- */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--secondary-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.settings-tab:hover {
  color: var(--primary-color);
  background: var(--primary-light);
}
.settings-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}
.settings-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.settings-tab.active svg {
  opacity: 1;
}
.settings-tab-content {
  display: none;
}
.settings-tab-content.active {
  display: block;
  animation: settingsTabFadeIn 0.2s ease-out;
}
@keyframes settingsTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .settings-tab {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
  .settings-tab svg {
    display: none;
  }
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
}
.settings-card {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.settings-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--secondary-color);
}
.settings-card p.settings-hint {
  font-size: 0.85rem;
  color: var(--text-muted, #666);
  margin: 0 0 12px 0;
}

/* --- Unified settings form elements --- */
.settings-card label.sc-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-color);
}
.settings-card label.sc-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.settings-card label.sc-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}
.settings-card .sc-input,
.settings-card input[type="text"].sc-input,
.settings-card input[type="number"].sc-input,
.settings-card input[type="date"].sc-input,
.settings-card input[type="time"].sc-input,
.settings-card select.sc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  height: 38px;
  background-color: var(--light-gray);
  color: var(--text-color);
  transition: border-color var(--transition-speed);
  margin-bottom: 8px;
}
.settings-card .sc-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(1, 77, 64, 0.15);
}
.settings-card select.sc-input {
  cursor: pointer;
  appearance: auto;
}
.settings-card .sc-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.settings-card .sc-input-row .sc-input {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.settings-card .sc-input-row select.sc-input {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
}
.settings-card .sc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.settings-card .sc-actions .sc-status {
  font-size: 0.82rem;
  color: var(--text-muted, #666);
}
.settings-card .sc-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  background: var(--primary-color);
  color: #fff;
  transition: background var(--transition-speed), opacity var(--transition-speed);
}
.settings-card .sc-btn:hover {
  opacity: 0.9;
}
.settings-card .sc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-card .sc-btn--secondary {
  background: none;
  border: 1px solid var(--medium-gray);
  color: var(--text-muted, #666);
}
.settings-card .sc-btn--secondary:hover {
  border-color: var(--primary-color);
  color: var(--text-color);
}
.settings-card .sc-btn--icon {
  padding: 6px 12px;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--light-gray);
  color: var(--text-color);
  border: 1px solid var(--medium-gray);
}
.settings-card .sc-btn--icon:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
}
.settings-card .sc-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 14px 0;
}
.settings-card .sc-color-input {
  width: 38px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--light-gray);
}
/* Override old exclusion-rule-add layout since it now uses sc-input-row */
.exclusion-rule-add.sc-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* SKU merge input list inline */
.sku-inputs-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sku-inputs-list .sc-input {
  width: auto;
  min-width: 100px;
  flex: 1;
}

/* --- Calendar Events in Settings --- */
.calendar-events-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.calendar-events-table th,
.calendar-events-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.calendar-events-table th {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 0.8rem;
}
.color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.recurring-badge {
  font-size: 0.75rem;
  background: var(--primary-light);
  color: var(--primary-color);
  padding: 1px 6px;
  border-radius: 8px;
}
.calendar-event-form {
  margin-top: 12px;
}

/* --- Event Toggle Pills (chart header) --- */
.event-toggle-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.event-toggle-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
  color: #000;
  border: 1px solid var(--medium-gray);
  cursor: pointer;
  gap: 4px;
  background: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.event-toggle-pill:hover {
  border-color: var(--secondary-color);
}
.event-toggle-pill.active {
  font-weight: 500;
}
.event-toggle-pill .pill-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* --- Assembly Cell & Tooltip --- */
.assembly-cell {
  position: relative;
}
.assembly-badge {
  cursor: default;
}
.assembly-stock-label {
  font-size: 0.75em;
  color: var(--text-secondary, #888);
  font-weight: normal;
}
.assembly-tooltip {
  position: absolute;
  z-index: 10;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  padding: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
  display: none;
  border-radius: var(--radius-sm);
  left: 0;
  top: 100%;
}
.assembly-cell:hover .assembly-tooltip {
  display: block;
}
.assembly-tooltip__row {
  padding: 2px 0;
}

/* --- Assembly Components Banner (expanded row) --- */
/* --- Merge group banner --- */
.merge-group-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.merge-group-banner__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--primary-color);
}
.merge-group-banner__header h5 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.merge-group-banner__desc {
  font-size: 0.82rem;
  color: var(--secondary-color);
  margin: 0 0 8px;
}
.merge-group-banner__skus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.merge-group-banner__sku {
  display: inline-block;
  padding: 3px 10px;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #166534;
  font-family: monospace;
}
.merge-group-banner__sku--current {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  font-weight: 700;
}

.assembly-components-banner {
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.assembly-components-banner__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.assembly-components-banner__header h5 {
  margin: 0;
  font-size: 0.88rem;
  color: #312e81;
}
.assembly-components-banner__icon {
  font-size: 1.1rem;
}
.assembly-components-banner__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.assembly-comp-row {
  display: grid;
  grid-template-columns: 120px 60px 1fr 80px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  font-size: 0.82rem;
  border-bottom: 1px solid #e0e7ff;
}
.assembly-comp-row:last-child {
  border-bottom: none;
}
.assembly-comp-row--header {
  font-weight: 600;
  font-size: 0.75rem;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid #c7d2fe;
  padding-bottom: 4px;
}
.assembly-comp-row__sku {
  font-weight: 600;
  color: #1e1b4b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assembly-comp-row__qty {
  font-weight: 600;
  color: #4338ca;
  text-align: center;
}
.assembly-comp-row__name {
  color: var(--secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assembly-comp-row__stock {
  text-align: right;
  font-weight: 600;
  color: #059669;
}
.assembly-comp-row__stock--low {
  color: #dc2626;
}

/* --- Customer Chart --- */
.customer-chart-container {
  margin-top: 12px;
  text-align: center;
}
.customer-chart-container canvas {
  max-width: 280px;
  max-height: 280px;
  margin: 0 auto;
}
.customer-chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* --- Lost Sales Filter --- */
.lost-sales-filter {
  display: flex;
  align-items: center;
}
.lost-sales-filter input[type="number"] {
  width: 130px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.lost-sales-filter input[type="number"]:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* ========== Filter Sidebar ========== */

/* --- Toggle button in top bar (hidden: sidebar is permanent) --- */
.filter-sidebar-toggle {
  display: none !important;
}
.filter-sidebar-toggle--legacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--light-gray);
  color: var(--text-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md);
  height: 42px;
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.filter-sidebar-toggle:hover {
  background-color: var(--primary-light);
  border-color: rgba(1, 77, 64, 0.25);
  color: var(--primary-color);
}
.filter-sidebar-toggle svg {
  flex-shrink: 0;
}

/* --- Filter badge (count circle) --- */
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* --- Backdrop (hidden: sidebar is permanent) --- */
.filter-sidebar-backdrop {
  display: none !important;
}
.filter-sidebar-backdrop--legacy {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1009;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.filter-sidebar-backdrop[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.filter-sidebar-backdrop.is-visible {
  opacity: 1;
}

/* --- Sidebar panel (permanently visible, full height) --- */
.filter-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
  overflow-y: auto;
}
.filter-sidebar[hidden] {
  display: flex !important;
}
.filter-sidebar.is-open {
  /* no-op: always visible */
}

/* --- Sidebar header --- */
.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.filter-sidebar__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark-gray);
}

/* --- Close button (hidden: sidebar is permanent) --- */
.filter-sidebar__close {
  display: none;
}
.filter-sidebar__close--legacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--secondary-color);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-sidebar__close:hover {
  background-color: var(--light-gray);
  color: var(--dark-gray);
}

/* --- Sidebar body (scrollable) --- */
.filter-sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 12px;
}

/* --- Section within sidebar --- */
.filter-sidebar__section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.filter-sidebar__section:last-child {
  border-bottom: none;
}

/* --- Section label --- */
.filter-sidebar__section-label {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--secondary-color);
  margin-bottom: 8px;
}

/* --- Summary cards inside sidebar (stacked for narrow width) --- */
.summary-cards--sidebar {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 0;
}
.summary-cards--sidebar .summary-card {
  padding: 10px 12px;
  min-height: auto;
}
.summary-cards--sidebar .summary-card__value {
  font-size: 1.3rem;
}
.summary-cards--sidebar .summary-card__label {
  font-size: 0.75rem;
}

/* --- Date filter inline in top bar --- */
.date-filter-controls--topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.date-filter-controls--topbar .date-input {
  padding: 6px 8px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  height: 38px;
  box-sizing: border-box;
  background-color: var(--light-gray);
  min-width: 0;
  width: 140px;
}
.date-filter-controls--topbar select.date-input {
  width: auto;
  cursor: pointer;
}
.date-filter-controls--topbar .date-separator {
  font-size: 0.8rem;
  color: var(--secondary-color);
}

/* --- Date filter inside sidebar (stacked for narrow width) --- */
.date-filter-controls--sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.date-filter-controls--sidebar .date-input {
  width: 100%;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  box-sizing: border-box;
  height: 32px;
  background-color: var(--light-gray);
}
.date-filter-controls--sidebar .date-separator {
  font-size: 0.75rem;
  color: var(--secondary-color);
  text-align: center;
}

/* --- Lost sales inside sidebar (full-width) --- */
.filter-sidebar .lost-sales-filter {
  width: 100%;
}
.filter-sidebar .lost-sales-filter input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  height: 40px;
  background-color: var(--light-gray);
}

/* --- Forecast progress bar --- */
.forecast-progress {
  margin-top: 12px;
}
.forecast-progress__bar-bg {
  width: 100%;
  height: 8px;
  background: var(--light-gray, #eee);
  border-radius: 4px;
  overflow: hidden;
}
.forecast-progress__bar-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.forecast-progress__text {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted, #666);
}

/* --- Data filter checkboxes --- */
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
}
.filter-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Sidebar footer --- */
.filter-sidebar__footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* --- Reset button inside sidebar (full-width with label) --- */
.filter-sidebar__footer .reset-btn--sidebar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background-color: transparent;
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}
.filter-sidebar__footer .reset-btn--sidebar:hover {
  background-color: var(--light-gray);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

/* --- Favorite star --- */
/* Favourites (#11).
   The inactive star stays quiet so it does not compete with the product name, but an
   active favourite is deliberately loud: larger, gold, and with a tinted row so a
   favourited product is recognisable while scanning the table rather than only when
   looking directly at the star. */
.fav-star {
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  color: #c9ccd1;
  margin-right: 7px;
  transition: color 0.15s ease, transform 0.12s ease;
  vertical-align: middle;
  display: inline-block;
}
.fav-star:hover {
  color: #f5a623;
  transform: scale(1.18);
}
.fav-star:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 3px;
}
.fav-star--active {
  color: #f0a500;
  font-size: 1.3rem;
  text-shadow: 0 1px 2px rgba(240, 165, 0, 0.35);
}
/* Tint the whole row of a favourited product, with a gold spine on the left. */
tr.product-row--favorite > td:first-child {
  box-shadow: inset 3px 0 0 #f0a500;
}
tr.product-row--favorite > td {
  background-color: #fffdf5;
}
tr.product-row--favorite:hover > td {
  background-color: #fff8e6;
}

/* --- Merge badge --- */
.merge-badge {
  font-size: 0.7rem;
  background: #e8f4fd;
  color: #1976d2;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Critical Component Badge & Panel --- */
.critical-component-badge {
  font-size: 0.65rem;
  background: #fef3c7;
  color: #92400e;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #fbbf24;
}
.critical-parents-panel {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
}
.critical-parents-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}
.critical-parents-panel__table-wrap {
  max-height: 300px;
  overflow-y: auto;
}
.critical-parents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.critical-parents-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid #fbbf24;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #92400e;
  position: sticky;
  top: 0;
  background: #fffbeb;
}
.critical-parents-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #fde68a;
}
.critical-parents-table .text-danger {
  color: #dc2626;
  font-weight: 600;
}

/* --- Chart Empty State --- */
.chart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 24px;
  text-align: center;
  color: #6b7280;
}
.chart-empty-state__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.7;
}
.chart-empty-state__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.chart-empty-state__text {
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 420px;
  color: #6b7280;
}

/* --- Entry Type Colors Settings --- */
.entry-type-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.entry-type-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-type-color-row label {
  font-size: 0.85rem;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-type-color-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 1px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- SKU Merge Settings --- */
.sku-merge-form .input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.sku-merge-form .sku-inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sku-merge-form .sku-inputs-list input {
  width: 140px;
}

/* --- Reorder badge styles --- */
.reorder-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}
.reorder-badge--urgent {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.reorder-hint {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #fff;
  background: #1f2937;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.3;
  z-index: 10;
  pointer-events: none;
  margin-bottom: 4px;
}
.reorder-cell {
  position: relative;
}
.reorder-cell:hover .reorder-hint {
  display: block;
}
.reorder-badge--ok {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.reorder-badge--upcoming {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fcd34d;
}
/* Below the reorder point on shelf stock, but already covered by an open order.
   Blue rather than red: this is information, not an action. */
/* Editable lead-time field in the what-if simulation. The slider covers the common
   range; this field accepts any value above it, since lead time is not capped. */
.forecast-whatif__num {
  width: 4.5em;
  padding: 1px 4px;
  font: inherit;
  font-weight: 700;
  color: var(--text-color);
  text-align: right;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
}
.forecast-whatif__num:focus {
  outline: none;
  border-color: var(--primary-color);
}
/* --- Stykliste membership (#8) --- */
/* Shown for every component that belongs to a stykliste. The louder
   .critical-component-badge is reserved for components above the critical threshold. */
.part-of-assembly-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--primary-light);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.critical-parents-panel__hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--secondary-color);
}
.critical-parents-panel__hint strong { color: var(--text-color); }


/* --- Card surfaces and typography (#6) --- */
/* Panels read as cards on the paper ground: white, hairline border, soft radius,
   and only a whisper of shadow. */
.stats-section,
.filter-sidebar,
.critical-parents-panel,
.assembly-components-banner,
.movement-legend,
.explain-panel,
.stats-metric-strip,
.forecast-whatif {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Headings tracked slightly tight, the way the reference sites set type. */
h1, h2, h3, h4, h5 {
  letter-spacing: -0.014em;
  color: var(--text-color);
}
h1 { letter-spacing: -0.022em; }

body {
  background-color: var(--light-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tables sit on the card surface rather than floating on the ground. */
#product-table {
  background: var(--background-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
#product-table thead th {
  background: var(--light-gray);
  color: var(--secondary-color);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* --- Phosphor icons (#6) --- */
/* Replaces the glyph characters previously used for stars, sort arrows and the menu. */
.ph, .ph-fill, .ph-bold {
  line-height: 1;
  vertical-align: -0.125em;
}
.icon-sm { font-size: 0.95rem; }
.icon-md { font-size: 1.15rem; }
.icon-lg { font-size: 1.4rem; }

/* The favourite star is a Phosphor glyph now; keep the #11 emphasis rules working. */
.fav-star .ph,
.fav-star .ph-fill { pointer-events: none; }

/* The favourite star is a Phosphor glyph (#6); keep the #11 emphasis working. */
.fav-star.ph,
.fav-star.ph-fill {
  font-size: 1.15rem;
  line-height: 1;
  vertical-align: -0.125em;
}
.fav-star--active.ph-fill {
  font-size: 1.3rem;
}

/* --- Custom filter builder (#5) --- */
.filter-builder__hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--secondary-color);
}
.filter-builder-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 6px;
}
.filter-builder { margin: 8px 0; }

/* A group is indented and spined so nesting is readable at a glance. */
.fb-group {
  border-left: 2px solid var(--border-color);
  padding-left: 8px;
  margin-bottom: 6px;
}
.fb-group .fb-group {
  margin-top: 6px;
  border-left-color: var(--primary-color);
}
.fb-group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.fb-group__hint {
  font-size: 0.68rem;
  color: var(--secondary-color);
}
.fb-group__actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

/* AND/OR switch: the single most important control here, so it reads as a segmented
   toggle rather than two loose buttons. */
.fb-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fb-toggle__btn {
  border: 0;
  background: #fff;
  color: var(--secondary-color);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.fb-toggle__btn.active {
  background: var(--primary-color);
  color: #fff;
}
.fb-toggle__btn:not(.active):hover { background: var(--light-gray); }

.fb-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.fb-rule select,
.fb-rule input {
  font-size: 0.72rem;
  padding: 3px 5px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-color);
  min-width: 0;
}
.fb-rule .fb-field { flex: 1 1 40%; }
.fb-rule .fb-op { flex: 1 1 28%; }
.fb-rule .fb-value,
.fb-rule .fb-value2 { flex: 1 1 22%; }
.fb-and { font-size: 0.68rem; color: var(--secondary-color); }
.fb-value-none { font-size: 0.72rem; color: var(--secondary-color); }

.fb-combinator-label {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--primary-color);
  letter-spacing: 0.06em;
  margin: 1px 0 3px;
}
.fb-empty {
  font-size: 0.7rem;
  color: var(--secondary-color);
  font-style: italic;
  padding: 3px 0;
}

.fb-add-rule,
.fb-add-group,
.filter-builder__btn {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--primary-color);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fb-add-rule:hover,
.fb-add-group:hover,
.filter-builder__btn:hover { background: var(--primary-light); }

.fb-remove {
  border: 0;
  background: transparent;
  color: var(--danger-color);
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.fb-remove:hover { color: #a71d2a; }

.filter-builder__actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}
.filter-builder__actions input { flex: 1 1 auto; min-width: 0; }

/* --- Inline explainer panels (#12, #13) --- */
/* Collapsed by default: available beside the number it explains, without pushing the
   number itself off the screen. */
.explain-panel {
  margin: 10px 0 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.explain-panel__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  list-style: none;
  user-select: none;
}
.explain-panel__summary::-webkit-details-marker { display: none; }
.explain-panel__summary:hover { background: #dbe9e5; }
.explain-panel__icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.explain-panel[open] .explain-panel__summary {
  border-bottom: 1px solid var(--border-color);
}
.explain-panel__body {
  padding: 12px 14px 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-color);
}
.explain-panel__lead { margin: 0 0 10px; }
.explain-panel__note,
.explain-panel__caveat {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.5;
}
.explain-panel__note {
  background: var(--light-gray);
  border-left: 3px solid var(--primary-color);
}
.explain-panel__caveat {
  background: var(--stock-warning-bg);
  border-left: 3px solid var(--warning-color);
  color: var(--stock-warning-text);
}
.explain-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.explain-step {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.79rem;
  line-height: 1.5;
}
.explain-step__n {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.explain-columns {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.explain-columns th,
.explain-columns td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.explain-columns th {
  font-weight: 600;
  color: var(--secondary-color);
  background: var(--light-gray);
}
.explain-columns td:first-child { font-weight: 600; white-space: nowrap; }

/* --- Table refinements (#9) --- */
/* Numeric columns align right and use tabular figures so digits line up column-wise
   and magnitudes are comparable at a glance. */
#product-table td[data-label="Lager"],
#product-table td[data-label="Woo"],
.stats-cell--number,
.critical-parents-table td:last-child,
.critical-parents-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stats-cell--number { text-align: right; }
/* Zebra striping, kept subtle enough not to fight the status colours. */
#product-table tbody tr:not(.stock-history-row):nth-of-type(4n + 3) > td {
  background-color: #fcfcfd;
}
#product-table tbody tr:not(.stock-history-row):hover > td {
  background-color: var(--primary-light);
}
/* The row currently open wins over both striping and hover. */
#product-table tbody tr.product-row--sticky > td { background-color: var(--primary-light); }
/* Header stays put while the table scrolls. */
#product-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--light-gray);
  box-shadow: inset 0 -1px 0 var(--border-color);
}
/* Wide tables scroll inside their own container rather than the page. */
.critical-parents-panel__table-wrap,
.stats-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Sticky product row (#10) --- */
/* When a product's detail pane is open, its own row stays pinned just under the table
   header, so you can scroll through the charts and still see which product you are on.
   Applied to the cells rather than the <tr>, because sticky positioning on table rows
   is not honoured consistently across browsers. --sticky-row-offset is set from JS,
   where the real header height is known. */
tr.product-row--sticky > td {
  position: sticky;
  top: var(--sticky-row-offset, 0px);
  z-index: 3;
  background-color: var(--primary-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
tr.product-row--sticky > td:first-child {
  box-shadow: inset 3px 0 0 var(--primary-color), 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* A favourited product that is also open keeps the gold spine, on the pinned tint. */
tr.product-row--sticky.product-row--favorite > td {
  background-color: var(--primary-light);
}
@media (max-width: 767px) {
  /* Too little vertical room on phones for a pinned row to earn its space. */
  tr.product-row--sticky > td {
    position: static;
  }
}

/* --- Movement legend (stock chart colour key) --- */
.movement-legend {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.movement-legend__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 6px;
}
.movement-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 16px;
}
.movement-legend__item {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.movement-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.movement-legend__label {
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
}
.movement-legend__origin { color: var(--secondary-color); }
@media (max-width: 767px) {
  .movement-legend__origin { display: none; }
  .movement-legend__list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
.reorder-badge--on-order {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
/* Genuinely short, but a delivery lands before a new order could arrive, so
   ordering now changes nothing before then. */
.reorder-badge--inbound {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.reorder-badge--no-season {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  font-weight: 500;
}

/* --- Backfill Progress Bar --- */
.backfill-progress {
  margin-top: 10px;
  width: 100%;
}
.backfill-progress__bar-wrap {
  width: 100%;
  height: 20px;
  background: var(--light-gray);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.backfill-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #28a745);
  border-radius: 10px;
  transition: width 0.3s ease;
  min-width: 0;
}
.backfill-progress__bar--done {
  background: linear-gradient(90deg, #28a745, #20c997);
}
.backfill-progress__bar--error {
  background: linear-gradient(90deg, #dc3545, #e74c3c);
}
.backfill-progress__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--secondary-color);
}
.backfill-progress__info span:first-child {
  font-weight: 600;
  color: var(--dark-gray);
}
.backfill-progress__stats {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin-top: 3px;
}

/* --- Forecast Chart & Details --- */
.forecast-chart-container {
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}
.forecast-chart-row {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.forecast-chart-row__canvas {
  flex: 1;
  min-width: 0;
}
.forecast-chart-row__canvas canvas {
  max-height: 260px;
  width: 100% !important;
}
@media (max-width: 700px) {
  .forecast-chart-row { flex-direction: column; }
  .forecast-whatif { border-left: none !important; border-top: 1px solid #dbeafe; }
}

/* Status banner */
.forecast-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 12px;
}
.forecast-status__icon {
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.forecast-status--critical {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.forecast-status--warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.forecast-status--caution {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.forecast-status--ok {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Metrics grid */
.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.forecast-metric {
  background: var(--light-gray);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.forecast-metric__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
}
.forecast-metric__value--danger {
  color: #dc2626;
}
.forecast-metric__label {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin-top: 2px;
  line-height: 1.3;
}

/* Order recommendation */
.forecast-order-rec {
  margin-top: 14px;
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.forecast-order-rec--normal {
  border-left: 4px solid var(--primary-color);
}
.forecast-order-rec--warning {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
}
.forecast-order-rec--critical {
  border-left: 4px solid #dc2626;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 60%);
}

.forecast-order-rec__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0 16px;
}
.forecast-order-rec__header h5 {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dark-gray);
}
.forecast-order-rec__badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 10px;
}
.forecast-order-rec__badge--urgent {
  background: #fee2e2;
  color: #b91c1c;
}
.forecast-order-rec__badge--planned {
  background: var(--primary-light);
  color: var(--primary-color);
}
.forecast-order-rec__badge--sim {
  background: #dbeafe;
  color: #1e40af;
}

.forecast-order-rec__hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
}
.forecast-order-rec__qty-block {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: var(--primary-light);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.forecast-order-rec--critical .forecast-order-rec__qty-block {
  background: #fee2e2;
}
.forecast-order-rec--warning .forecast-order-rec__qty-block {
  background: #fef3c7;
}
.forecast-order-rec__number {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1;
}
.forecast-order-rec--critical .forecast-order-rec__number {
  color: #b91c1c;
}
.forecast-order-rec--warning .forecast-order-rec__number {
  color: #92400e;
}
.forecast-order-rec__unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
}
.forecast-order-rec--critical .forecast-order-rec__unit {
  color: #b91c1c;
}
.forecast-order-rec--warning .forecast-order-rec__unit {
  color: #92400e;
}
.forecast-order-rec__context {
  flex: 1;
}
.forecast-order-rec__context p {
  margin: 0 0 4px 0;
  font-size: 0.82rem;
  color: var(--dark-gray);
  line-height: 1.5;
}
.forecast-order-rec__deadline {
  font-size: 0.8rem !important;
  color: var(--secondary-color) !important;
}
.forecast-order-rec__coverage-reason {
  font-size: 0.78rem !important;
  color: var(--secondary-color) !important;
  margin: 2px 0 4px 0 !important;
  font-style: italic;
}

.forecast-order-rec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-color);
  border-top: 1px solid var(--border-color);
}
.forecast-order-rec__stat {
  background: #fff;
  padding: 10px 12px;
  text-align: center;
  position: relative;
}
.forecast-order-rec__stat[data-tip] {
  cursor: help;
}
.forecast-order-rec__stat[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-gray);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.forecast-order-rec__stat[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}
.forecast-order-rec--warning .forecast-order-rec__stat {
  background: #fffdf7;
}
.forecast-order-rec--critical .forecast-order-rec__stat {
  background: #fffbfb;
}
.forecast-order-rec__stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
}
.forecast-order-rec__stat-label {
  display: block;
  font-size: 0.68rem;
  color: var(--secondary-color);
  margin-top: 2px;
  line-height: 1.3;
}

/* "Why this number?" explanation accordion */
.forecast-order-rec__explain {
  padding: 6px 16px 0;
  text-align: left;
}
.forecast-order-rec__explain summary {
  display: inline-block;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--primary-color);
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
  margin: 0;
}
.forecast-order-rec__explain summary::-webkit-details-marker { display: none; }
.forecast-order-rec__explain summary::before {
  content: '+ ';
  font-weight: 700;
}
.forecast-order-rec__explain[open] summary::before {
  content: '\2212  ';
}
.forecast-order-rec__explain summary:hover {
  background: var(--primary-light);
  border-color: var(--primary-color);
}
.forecast-order-rec__explain-body {
  padding: 12px 0 4px;
  font-size: 0.85rem;
  line-height: 1.55;
  border-top: 1px solid var(--border-color);
}
.forecast-order-rec__explain-intro {
  margin: 0 0 10px;
}
.forecast-order-rec__explain-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 0.83rem;
}
.forecast-order-rec__explain-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}
.forecast-order-rec__explain-label {
  white-space: nowrap;
  color: var(--secondary-color);
  width: 160px;
}
.forecast-order-rec__explain-table tfoot td {
  border-top: 2px solid var(--primary-color);
  border-bottom: none;
  background: var(--primary-light);
  padding: 8px 10px;
}
.forecast-order-rec__explain-note {
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin: 6px 0;
  line-height: 1.5;
}

/* EOQ reuses .forecast-order-rec__hero / __qty-block / __number / __unit */

/* Seasonal demand bars */
.forecast-seasonal {
  margin-top: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.forecast-seasonal h5 {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  color: var(--dark-gray);
}
.forecast-seasonal__bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 80px;
}
.forecast-seasonal__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.forecast-seasonal__col--current {
  background: rgba(1, 77, 64, 0.06);
  border-radius: 4px;
  padding: 2px 0;
}
.forecast-seasonal__bar-wrap {
  height: 55px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.forecast-seasonal__bar {
  width: 70%;
  min-width: 8px;
  max-width: 24px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}
.forecast-bar--high { background: #dc2626; }
.forecast-bar--normal { background: #014d40; }
.forecast-bar--low { background: #94a3b8; }
.forecast-seasonal__label {
  font-size: 0.65rem;
  color: var(--secondary-color);
  text-transform: uppercase;
  font-weight: 600;
}
.forecast-seasonal__val {
  font-size: 0.62rem;
  color: var(--secondary-color);
}
.forecast-seasonal__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--dark-gray);
}

/* Explanations */
.forecast-explain {
  margin-top: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.forecast-explain h5 {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  color: var(--dark-gray);
}
.forecast-explain__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forecast-explain__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--dark-gray);
  line-height: 1.5;
}
.forecast-explain__line {
  flex-shrink: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  margin-top: 7px;
}
.forecast-explain__line--dashed {
  background: none !important;
  border-top: 2px dashed;
  height: 0;
  margin-top: 8px;
}
.forecast-explain__zone {
  flex-shrink: 0;
  width: 24px;
  height: 14px;
  border-radius: 2px;
  margin-top: 3px;
}
.forecast-explain__note {
  margin: 12px 0 0 0;
  font-size: 0.73rem;
  color: var(--secondary-color);
  font-style: italic;
  line-height: 1.5;
}

/* --- Trend Indicator --- */
.forecast-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}
.forecast-trend__arrow {
  font-size: 1.2rem;
}

/* --- Confidence Badge --- */
.forecast-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  text-align: left;
}
.forecast-confidence__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.forecast-confidence__badge--high {
  background: #dcfce7;
  color: #166534;
}
.forecast-confidence__badge--medium {
  background: #fef9c3;
  color: #854d0e;
}
.forecast-confidence__badge--low {
  background: #fee2e2;
  color: #991b1b;
}
.forecast-confidence__text {
  color: var(--secondary-color);
  font-size: 0.78rem;
}
.forecast-trend__explain,
.forecast-confidence__explain {
  font-size: 0.75rem;
  color: var(--secondary-color);
  line-height: 1.4;
  margin-top: 2px;
  margin-bottom: 4px;
  padding-left: 2px;
  text-align: left;
}
/* Precision info button & panel */
.precision-info-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--primary-color);
  font-size: 0.72rem;
  padding: 1px 8px;
  cursor: pointer;
  margin-left: 6px;
  font-weight: 600;
  transition: background 0.15s;
}
.precision-info-btn:hover {
  background: var(--primary-color);
  color: #fff;
}
.precision-info-panel {
  background: #f8faf9;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 6px 0 8px 0;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
}
.precision-info-panel__title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.precision-info-panel__intro {
  margin: 0 0 6px 0;
  color: var(--secondary-color);
  font-size: 0.78rem;
}
.precision-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 8px 0;
}
.precision-info-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--secondary-color);
}
.precision-info-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.precision-info-table__row--high td { background: #f0fdf4; }
.precision-info-table__row--medium td { background: #fefce8; }
.precision-info-table__row--low td { background: #fef2f2; }
.precision-info-panel__current {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.78rem;
}
.precision-info-panel__note {
  margin: 6px 0 0 0;
  font-size: 0.75rem;
  color: var(--secondary-color);
  font-style: italic;
}

.trend-proof-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--primary-color);
  font-size: 0.72rem;
  padding: 1px 8px;
  cursor: pointer;
  margin-left: 4px;
  font-weight: 600;
  transition: background 0.15s;
}
.trend-proof-btn:hover {
  background: var(--primary-color);
  color: #fff;
}
.trend-proof-panel {
  background: #f8faf9;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 6px 0 8px 0;
  text-align: left;
}
.trend-proof-panel__loading {
  color: var(--secondary-color);
  font-size: 0.8rem;
}
.trend-proof-panel__error {
  color: #dc2626;
  font-size: 0.8rem;
}
.trend-proof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.trend-proof-table th {
  text-align: left;
  font-weight: 600;
  padding: 4px 10px 4px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.trend-proof-table td {
  padding: 4px 10px 4px 0;
  border-bottom: 1px solid #eee;
}
.trend-proof-calc {
  font-size: 0.78rem;
  color: var(--text-primary);
  padding: 6px 0 2px;
  line-height: 1.5;
}
.trend-proof-note {
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin-top: 4px;
  font-style: italic;
}
.trend-proof-ytd {
  font-size: 0.78rem;
  color: var(--text-color);
  padding: 6px 0 2px;
  line-height: 1.5;
  border-top: 1px solid var(--border-color);
  margin-top: 6px;
}
.forecast-ytd {
  font-size: 0.78rem;
  color: var(--secondary-color);
  margin-top: 4px;
  line-height: 1.5;
}

/* --- EOQ Card --- */
.forecast-eoq {
  margin-top: 14px;
  border: 1px solid var(--border-color);
  border-left: 4px solid #6366f1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* --- Lost Revenue Metric --- */
.forecast-metric--lost-revenue {
  grid-column: span 2;
  position: relative;
}
.lost-revenue-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
}
.lost-revenue-tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--background-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-color);
  border-radius: var(--radius-sm);
  width: 280px;
  white-space: normal;
  pointer-events: none;
}
.forecast-metric--lost-revenue:hover .lost-revenue-tooltip {
  display: block;
}

/* --- What-If Scenario Controls (side panel) --- */
.forecast-whatif {
  width: 190px;
  flex-shrink: 0;
  border-left: 1px solid #dbeafe;
  padding: 10px 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forecast-whatif h5 {
  margin: 0;
  font-size: 0.78rem;
  color: var(--dark-gray);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.forecast-whatif__control {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forecast-whatif__control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--secondary-color);
}
.forecast-whatif__control label strong {
  color: var(--dark-gray);
  font-size: 0.75rem;
}
.forecast-whatif__control input[type="range"] {
  width: 100%;
  accent-color: var(--primary-color);
  height: 16px;
  margin: 0;
}
.forecast-whatif__reset {
  padding: 4px 10px;
  font-size: 0.72rem;
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: var(--dark-gray);
  font-weight: 500;
  align-self: stretch;
  text-align: center;
}
.forecast-whatif__reset:hover {
  background: #e5e7eb;
}
.forecast-whatif__simulate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  color: #1e40af;
}
.forecast-whatif__simulate input[type="checkbox"] {
  accent-color: #2563eb;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.forecast-whatif__simulate:hover {
  background: #dbeafe;
}
.forecast-whatif__sim-mode {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  font-size: 0.70rem;
  color: #1e40af;
}
.forecast-whatif__sim-mode label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 500;
}
.forecast-whatif__sim-mode input[type="radio"] {
  accent-color: #2563eb;
  width: 12px;
  height: 12px;
  margin: 0;
}

/* --- Order Calendar Page --- */
#order-calendar-page {
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
/* --- Order Calendar Header --- */
.order-calendar-header {
  margin-bottom: 24px;
}
.order-calendar-header__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.order-calendar-header__title h2 {
  margin: 0;
  font-size: 1.3rem;
}
.order-calendar-header__subtitle {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--secondary-color);
}

/* --- Order Calendar Summary --- */
.order-calendar-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.order-calendar-summary__item {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.order-calendar-summary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.order-calendar-summary__value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
}
.order-calendar-summary__label {
  display: block;
  font-size: 0.75rem;
  color: var(--secondary-color);
  margin-top: 1px;
}

/* --- Order Calendar Content --- */
.order-calendar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Loading state */
.order-calendar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--secondary-color);
}
.order-calendar-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: ocSpinner 0.7s linear infinite;
  margin-bottom: 12px;
}
@keyframes ocSpinner {
  to { transform: rotate(360deg); }
}

/* Empty state */
.order-calendar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--secondary-color);
  gap: 12px;
}
.order-calendar-empty--error { color: #dc2626; }

/* --- Order Calendar Groups --- */
.order-calendar-group {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.order-calendar-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: filter 0.15s;
}
.order-calendar-group__header:hover {
  filter: brightness(0.97);
}
.order-calendar-group__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-calendar-group__chevron {
  font-size: 0.7rem;
  transition: transform 0.2s;
  display: inline-block;
}
.order-calendar-group.collapsed .order-calendar-group__chevron {
  transform: rotate(-90deg);
}
.order-calendar-group__count {
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.8;
}
.order-calendar-group__body {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
.order-calendar-group.collapsed .order-calendar-group__body {
  display: none;
}
.order-calendar-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--light-gray);
}

/* --- Order Calendar Cards --- */
.order-calendar-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--background-color);
  transition: box-shadow 0.15s, transform 0.15s;
}
.order-calendar-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.order-calendar-card--urgent {
  border-left: 3px solid #dc2626;
}
.order-calendar-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.88rem;
}
.order-calendar-card__desc {
  font-size: 0.78rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-calendar-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.order-calendar-card__metric {
  display: flex;
  flex-direction: column;
}
.order-calendar-card__metric-label {
  font-size: 0.7rem;
  color: var(--secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.order-calendar-card__metric-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color);
}
.order-calendar-card__metric-value--danger {
  color: #dc2626;
  font-weight: 700;
}
.order-calendar-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

/* --- Order Calendar Pagination --- */
.oc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
}
.oc-pagination__btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  background: var(--background-color);
  color: var(--text-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.oc-pagination__btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--primary-color);
}
.oc-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.oc-pagination__btn--active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}
.oc-pagination__btn--active:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.oc-pagination__dots {
  padding: 0 4px;
  color: var(--secondary-color);
  font-size: 0.85rem;
}
.oc-pagination__info {
  margin-left: 12px;
  font-size: 0.78rem;
  color: var(--secondary-color);
}

@media (max-width: 600px) {
  .order-calendar-summary {
    grid-template-columns: 1fr 1fr;
  }
  .order-calendar-group__cards {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

/* --- Product Exclusion Rules --- */
.exclusion-rule-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.exclusion-rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.exclusion-rule-badge {
  background: var(--primary-color);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.exclusion-rule-op {
  color: var(--secondary-color);
  font-size: 0.82rem;
  white-space: nowrap;
}
.exclusion-rule-val {
  font-weight: 600;
  word-break: break-all;
}
.exclusion-rule-delete {
  background: none;
  border: none;
  color: var(--danger-color);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  margin-left: auto;
}
.exclusion-rule-delete:hover {
  color: #a71d2a;
}

/* --- Category filter/exclusion lists --- */
.category-filter-list,
.category-exclude-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
.category-filter-list .filter-checkbox-label,
.category-exclude-list .filter-checkbox-label {
  font-size: 0.78rem;
  text-transform: capitalize;
  padding: 3px 0;
  gap: 6px;
}
.category-filter-list .filter-checkbox-label input[type="checkbox"],
.category-exclude-list .filter-checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
}
.category-filter-search {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  box-sizing: border-box;
}
.category-filter-search:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(1, 77, 64, 0.12);
}
.category-exclude-list {
  max-height: 260px;
  margin-bottom: 8px;
}

/* --- Prevent body scroll when sidebar is open (disabled: sidebar is permanent) --- */
body.filter-sidebar-open {
  overflow: auto;
}

/* --- Mobile: hide sidebar, show toggle --- */
@media (max-width: 767px) {
  .app-layout {
    flex-direction: column;
  }
  .filter-sidebar {
    display: none !important;
  }
  .filter-sidebar-toggle {
    display: inline-flex !important;
  }
}

/* --- Reorder "Why this number?" popover --- */
.reorder-why-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--medium-gray);
  background: var(--light-gray);
  color: var(--secondary-color);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  vertical-align: middle;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.reorder-why-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.reorder-why-popover {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  width: 300px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-color);
}
.reorder-why-popover__title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--primary-dark);
}
.reorder-why-popover__rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.reorder-why-popover__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.reorder-why-popover__row--highlight {
  background: var(--primary-light);
  border-radius: 4px;
  padding: 3px 6px;
  margin: 2px -6px;
  font-weight: 600;
}
.reorder-why-popover__label {
  color: var(--secondary-color);
  white-space: nowrap;
}
.reorder-why-popover__value {
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reorder-why-popover__confidence {
  font-size: 0.78rem;
  color: var(--secondary-color);
  margin-bottom: 6px;
}
.reorder-why-popover__note {
  font-size: 0.78rem;
  color: var(--stock-warning-text);
  background: var(--stock-warning-bg);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
}
/* Plain-language description of what the reorder point is, shown above the maths. */
.reorder-why-popover__meaning {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--secondary-color);
  background: var(--light-gray);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 4px 4px 0;
  padding: 7px 9px;
  margin-bottom: 8px;
}
.reorder-why-popover__meaning strong { color: var(--text-color); }
/* The calculation restated as one readable line. */
.reorder-why-popover__formula {
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
  background: var(--primary-light);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 8px 0 6px;
}
/* Conclusion tinted by verdict. */
.reorder-why-popover__conclusion--order-now { color: #dc2626; }
.reorder-why-popover__conclusion--on-order { color: #1d4ed8; }
.reorder-why-popover__conclusion--inbound-soon { color: #6d28d9; }
.reorder-why-popover__conclusion--ok { color: #16a34a; }
.reorder-why-popover__conclusion {
  font-size: 0.8rem;
  font-weight: 500;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

/* Responsive: full-width popover on mobile */
@media (max-width: 767px) {
  .reorder-why-popover {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-top: 0;
    padding: 16px;
  }
}

/* ============================================
   Forklaringer (Documentation) Page
   ============================================ */
.explain-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.explain-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}
.explain-header__title h2 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  color: var(--primary-dark);
}
.explain-header__subtitle {
  margin: 0;
  color: var(--secondary-color);
  font-size: 0.9rem;
}

/* Layout: TOC sidebar + content */
.explain-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Table of Contents */
.explain-toc {
  position: sticky;
  top: 20px;
  flex: 0 0 220px;
  background: var(--light-gray);
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 0.82rem;
}
.explain-toc h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--primary-dark);
}
.explain-toc ol {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: decimal;
}
.explain-toc li {
  margin-bottom: 5px;
  line-height: 1.4;
}
.explain-toc a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.15s;
}
.explain-toc a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Main content area */
.explain-content {
  flex: 1;
  min-width: 0;
}

/* Section */
.explain-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-color);
  scroll-margin-top: 20px;
}
.explain-section:last-of-type {
  border-bottom: none;
}
.explain-section h3 {
  font-size: 1.25rem;
  color: var(--primary-dark);
  margin: 0 0 12px;
}
.explain-section p {
  line-height: 1.65;
  margin: 0 0 10px;
  color: var(--text-color);
}
.explain-section ul, .explain-section ol {
  line-height: 1.65;
  margin: 0 0 12px;
  padding-left: 24px;
}
.explain-section li {
  margin-bottom: 4px;
}

/* Term definition block */
.explain-term {
  background: var(--light-gray);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.explain-term__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-dark);
  margin-bottom: 4px;
}
.explain-term__def {
  color: var(--text-color);
  line-height: 1.55;
}

/* Simple explanation with emoji */
.explain-simple {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f0f9ff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.explain-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.explain-simple p {
  margin: 0 0 6px;
}
.explain-simple p:last-child {
  margin-bottom: 0;
}

/* Card variants */
.explain-card {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.explain-card h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}
.explain-card p {
  margin: 0 0 6px;
}
.explain-card p:last-child, .explain-card ul:last-child {
  margin-bottom: 0;
}
.explain-card--highlight {
  background: var(--primary-light);
  border: 1px solid rgba(1, 77, 64, 0.15);
}
.explain-card--highlight h4 {
  color: var(--primary-dark);
}
.explain-card--info {
  background: #f0f9ff;
  border: 1px solid #bfdbfe;
}
.explain-card--info h4 {
  color: #1e40af;
}
.explain-card--tip {
  background: #fefce8;
  border: 1px solid #fde68a;
}
.explain-card--tip h4 {
  color: #92400e;
}

/* Formula block */
.explain-formula {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.explain-formula__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--secondary-color);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.explain-formula__math {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  color: var(--primary-dark);
  padding: 10px 14px;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  line-height: 1.6;
}
.explain-formula__legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--secondary-color);
}

/* Calculation breakdown */
.explain-calc {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0 16px;
  font-family: 'Georgia', serif;
}
.explain-calc__line {
  padding: 3px 0;
  font-size: 0.95rem;
  color: var(--text-color);
}
.explain-calc__result {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-weight: 500;
  font-family: inherit;
  color: var(--primary-dark);
}

/* Example block */
.explain-example {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.explain-example h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--text-color);
}
.explain-example__table {
  overflow-x: auto;
  margin: 10px 0;
}
.explain-example__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.explain-example__table th {
  background: var(--light-gray);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.explain-example__table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-color);
}
.explain-example__table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--border-color);
  background: var(--light-gray);
}

.explain-highlight--green { color: #059669; font-weight: 600; }
.explain-highlight--yellow { color: #b45309; }
.explain-highlight--red { color: #dc2626; }

/* Chart containers */
.explain-chart-container {
  position: relative;
  width: 100%;
  height: 220px;
  margin: 12px 0 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px;
  background: #fff;
}
.explain-chart-container--tall {
  height: 300px;
}
.explain-chart-container--short {
  height: 160px;
}
.explain-chart-caption {
  font-size: 0.82rem;
  color: var(--secondary-color);
  font-style: italic;
  margin: 4px 0 16px;
  line-height: 1.5;
}
.explain-chart-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 12px 0;
}
.explain-chart-stack__label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-color);
}

/* Inline badges (for documentation) */
.explain-inline-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.explain-inline-badge--urgent {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.explain-inline-badge--ok {
  background: #f0fdf4;
  color: #059669;
  border: 1px solid #bbf7d0;
}
.explain-inline-badge--no-season {
  background: var(--light-gray);
  color: var(--secondary-color);
  border: 1px solid var(--medium-gray);
}

/* Steps (data flow) */
.explain-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}
.explain-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.explain-step:last-child {
  border-bottom: none;
}
.explain-step__number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.explain-step__content h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--primary-dark);
}
.explain-step__content p {
  margin: 0;
  font-size: 0.88rem;
}

/* Visual ROP bar */
.explain-visual-rop {
  margin: 16px 0;
}
.explain-visual-rop__bar {
  display: flex;
  height: 38px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.explain-visual-rop__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
}
.explain-visual-rop__zone--safe { background: #059669; }
.explain-visual-rop__zone--warn { background: #f59e0b; }
.explain-visual-rop__zone--danger { background: #ef4444; }
.explain-visual-rop__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--secondary-color);
  margin-top: 4px;
  padding: 0 2px;
}

/* Chart legend (for forecast chart explanation) */
.explain-chart-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0;
}
.explain-chart-legend__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.explain-chart-legend__line {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  border: 2px solid transparent;
}
.explain-chart-legend__marker {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 4px;
}
.explain-chart-legend__item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.9rem;
}
.explain-chart-legend__item p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--secondary-color);
}

/* Badge list (for badges explanation) */
.explain-badge-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.explain-badge-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--light-gray);
  border-radius: var(--radius-md);
}
.explain-badge-item > span:first-child {
  flex-shrink: 0;
  min-width: 130px;
}
.explain-badge-item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.88rem;
}
.explain-badge-item p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--secondary-color);
}

/* FAQ accordion */
.explain-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.explain-faq__item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.explain-faq__item summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--light-gray);
  transition: background 0.15s;
  list-style: none;
}
.explain-faq__item summary::-webkit-details-marker {
  display: none;
}
.explain-faq__item summary::before {
  content: '+ ';
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 6px;
}
.explain-faq__item[open] summary::before {
  content: '- ';
}
.explain-faq__item summary:hover {
  background: var(--primary-light);
}
.explain-faq__item p {
  padding: 12px 16px;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  border-top: 1px solid var(--border-color);
}

/* Responsive: stack TOC on mobile */
@media (max-width: 900px) {
  .explain-layout {
    flex-direction: column;
  }
  .explain-toc {
    position: static;
    flex: auto;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .explain-page {
    padding: 0 10px 30px;
  }
  .explain-header {
    flex-direction: column;
    gap: 10px;
  }
  .explain-header__title h2 {
    font-size: 1.2rem;
  }
  .explain-badge-item {
    flex-direction: column;
    gap: 6px;
  }
  .explain-badge-item > span:first-child {
    min-width: auto;
  }
  .explain-section h3 {
    font-size: 1.05rem;
  }
  .explain-formula__math {
    font-size: 0.9rem;
    padding: 8px 10px;
    overflow-x: auto;
    word-break: break-word;
  }
  .explain-card {
    padding: 12px 14px;
  }
  .explain-example {
    padding: 12px 14px;
  }
  .explain-step {
    gap: 10px;
    padding: 10px 0;
  }
  .explain-step__number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  .explain-step__content h4 {
    font-size: 0.88rem;
  }
  .explain-step__content p {
    font-size: 0.82rem;
  }
  .explain-chart-container {
    height: 180px;
    padding: 6px;
  }
  .explain-chart-container--tall {
    height: 240px;
  }
  .explain-toc {
    padding: 12px;
    font-size: 0.8rem;
  }
  .explain-faq__item summary {
    font-size: 0.85rem;
    padding: 10px 12px;
  }
  .explain-faq__item p {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .explain-chart-legend__item {
    gap: 10px;
  }
  .explain-chart-legend__item strong {
    font-size: 0.85rem;
  }
  .explain-chart-legend__item p {
    font-size: 0.8rem;
  }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE FIXES
   ============================================ */

/* --- Settings grid: fix minmax(400px) breaking on phones --- */
@media (max-width: 767px) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .settings-card {
    padding: 16px;
  }
  .settings-card h3 {
    font-size: 0.82rem;
  }
  .settings-page-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .settings-page-header h2 {
    font-size: 1.1rem;
  }
  .global-save-btn {
    width: 100%;
    padding: 10px 16px;
  }
  .settings-back-btn {
    padding: 8px 16px;
  }
  .settings-card .sc-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-card .sc-input-row select.sc-input {
    width: 100%;
    min-width: 0;
  }
  .settings-card .sc-input,
  .settings-card input[type="text"].sc-input,
  .settings-card input[type="number"].sc-input,
  .settings-card input[type="date"].sc-input,
  .settings-card input[type="time"].sc-input,
  .settings-card select.sc-input {
    height: 44px;
    font-size: 0.9rem;
  }
  .settings-card label.sc-toggle {
    min-height: 44px;
    padding: 4px 0;
  }
  .settings-card label.sc-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  #settings-page {
    padding: 16px 12px;
  }
  .settings-tabs {
    gap: 2px;
    margin-bottom: 16px;
  }
  /* Exclusion rule elements */
  .exclusion-rule-add {
    flex-direction: column;
    align-items: stretch;
  }
  .exclusion-rule-item {
    flex-wrap: wrap;
  }
}

/* --- Forecast order rec grid: fix fixed 3-column --- */
@media (max-width: 600px) {
  .forecast-order-rec__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .forecast-order-rec__stat {
    padding: 8px 10px;
  }
  .forecast-order-rec__stat-value {
    font-size: 0.92rem;
  }
  .forecast-order-rec__stat-label {
    font-size: 0.65rem;
  }
  /* Tooltip: can't hover on mobile, show on tap */
  .forecast-order-rec__stat[data-tip]::after {
    max-width: 200px;
    font-size: 0.72rem;
  }
  .forecast-order-rec__hero {
    padding: 14px;
  }
  .forecast-order-rec__explain-body {
    padding: 12px;
  }
  .forecast-order-rec__explain-label {
    width: 120px;
    font-size: 0.78rem;
  }
  .forecast-order-rec__explain-table {
    font-size: 0.8rem;
  }
}
@media (max-width: 420px) {
  .forecast-order-rec__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Order calendar: fix cards on small phones --- */
@media (max-width: 600px) {
  #order-calendar-page {
    padding: 16px 12px;
  }
  .order-calendar-header__top {
    flex-direction: column;
    gap: 8px;
  }
  .order-calendar-header__title h2 {
    font-size: 1.1rem;
  }
  .order-calendar-summary__item {
    padding: 12px;
    gap: 8px;
  }
  .order-calendar-summary__icon {
    width: 32px;
    height: 32px;
  }
  .order-calendar-summary__value {
    font-size: 1rem;
  }
  .order-calendar-summary__label {
    font-size: 0.72rem;
  }
  .order-calendar-card {
    padding: 12px;
  }
  .order-calendar-card__metrics {
    flex-wrap: wrap;
    gap: 6px;
  }
  .order-calendar-group__header {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  .oc-pagination__btn {
    min-width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
}

/* --- Pagination: increase touch targets --- */
@media (max-width: 767px) {
  .pagination-controls {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
  }
  .pagination-btn {
    min-width: 38px;
    height: 38px;
    font-size: 0.8rem;
    padding: 0 6px;
  }
  .pagination-info {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    order: -1;
  }
  .pagination-pages {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Table cell font sizes: increase for readability --- */
@media (max-width: 767px) {
  .table-responsive-wrapper #product-table td {
    font-size: 0.78rem;
    padding: 8px 8px;
    line-height: 1.35;
  }
  .table-responsive-wrapper #product-table th {
    font-size: 0.78rem;
    padding: 10px 8px;
  }
  /* Stock indicator: slightly bigger value */
  .stock-indicator__value {
    font-size: 0.82rem;
  }
  /* SKU cell */
  .sku-cell__code {
    font-size: 0.78rem;
  }
  .sku-cell__variant {
    font-size: 0.72rem;
  }
  /* Status pills */
  .status-pill {
    font-size: 0.75rem;
    padding: 2px 8px;
  }
  /* Stockout cell */
  .lost-revenue-sub {
    font-size: 0.68rem;
  }
  /* Seasonal bar labels */
  .forecast-seasonal__label {
    font-size: 0.6rem;
  }
}

/* --- Summary cards: better on small phones --- */
@media (max-width: 420px) {
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .summary-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: auto;
  }
  .summary-card__value {
    font-size: 1.2rem;
    order: 1;
    margin-left: auto;
  }
  .summary-card__label {
    margin-top: 0;
    order: 0;
  }
}

/* --- Filter pills: touch-friendly on mobile --- */
@media (max-width: 767px) {
  .filter-pill-group--topbar .filter-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .filter-pill-group {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Chart containers in product detail: responsive --- */
@media (max-width: 767px) {
  .chart-container {
    padding: 12px 8px;
    margin-bottom: 8px;
  }
  .chart-container canvas {
    max-height: 220px;
  }
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .chart-header__controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* --- Stats section (in product detail): responsive --- */
@media (max-width: 600px) {
  .stats-metric-strip {
    gap: 6px;
  }
  .stats-metric {
    padding: 8px;
    min-width: 0;
  }
}

/* --- Forecast seasonal bars: smaller phones --- */
@media (max-width: 420px) {
  .forecast-seasonal__bars {
    height: 60px;
  }
  .forecast-seasonal__bar-wrap {
    height: 40px;
  }
}

/* --- Modal improvements on mobile --- */
@media (max-width: 767px) {
  .modal-content {
    width: 95%;
    margin: 10px auto;
    padding: 14px;
    max-height: 85vh;
  }
  .modal input,
  .modal select {
    height: 44px;
    font-size: 0.85rem;
  }
  .modal label {
    font-size: 0.82rem;
  }
}

/* --- Reorder-why popover: better spacing on mobile --- */
@media (max-width: 767px) {
  .reorder-why-popover {
    padding: 18px 16px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .reorder-why-popover__title {
    font-size: 0.9rem;
  }
  .reorder-why-popover__row {
    font-size: 0.82rem;
  }
  .reorder-why-btn {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* --- Header nav: prevent overflow on small screens --- */
@media (max-width: 992px) {
  .top-right-buttons {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* --- Explain page back button: fixed on mobile for easy nav --- */
@media (max-width: 767px) {
  #explain-page .explain-header .settings-back-btn,
  #order-calendar-page .settings-back-btn,
  #settings-page .settings-back-btn {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--background-color);
    border: 1px solid var(--medium-gray);
    padding: 10px 16px;
  }
}

/* --- Global: better tap targets for links and buttons --- */
@media (max-width: 767px) {
  button, .btn, [role="button"] {
    min-height: 36px;
  }
  .sc-actions .btn,
  .settings-card .sc-actions button {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

/* --- Forecast confidence badge: don't overflow --- */
@media (max-width: 600px) {
  .forecast-confidence {
    font-size: 0.75rem;
  }
}

/* --- Search suggestions: full-width on mobile --- */
@media (max-width: 767px) {
  .search-suggestions {
    max-height: 240px;
  }
  .search-suggestion-item {
    padding: 12px 14px;
    font-size: 0.85rem;
  }
}

/* --- Product Detail Tabs (top-level tabs in expanded row) --- */
.product-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-detail-tabs::-webkit-scrollbar { display: none; }

.product-detail-tab {
  padding: 9px 22px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dark-gray);
  background: var(--light-gray);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.product-detail-tab:hover {
  color: var(--primary-color);
  background: rgba(1, 77, 64, 0.06);
}
.product-detail-tab.active {
  color: var(--primary-color);
  background: var(--background-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(1, 77, 64, 0.15);
  font-weight: 600;
  border-color: rgba(1, 77, 64, 0.25);
}

.product-detail-pane { display: none; }
.product-detail-pane.active { display: block; }

/* --- Product Details Card (Produktdetaljer tab) --- */
.product-details-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.product-details-section {
  background: var(--background-color);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.product-details-section--wide {
  grid-column: 1 / -1;
}
.product-details-section h5 {
  margin: 0 0 10px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary-color);
  text-align: left;
}

.product-details-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 0.85rem;
  max-width: 500px;
}
.product-details-grid dt {
  color: var(--secondary-color);
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
}
.product-details-grid dd {
  margin: 0;
  color: var(--text-color);
  font-weight: 500;
  word-break: break-word;
  text-align: left;
}

.product-details-incoming {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.product-details-incoming-card {
  flex: 1;
  min-width: 180px;
  background: var(--light-gray);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.product-details-incoming-card strong {
  display: block;
  font-size: 0.82rem;
  color: var(--primary-color);
  margin-bottom: 4px;
}
.product-details-incoming-card span {
  font-size: 0.85rem;
  color: var(--text-color);
}

/* Location stock table in details tab */
.product-details-location-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.product-details-location-table th,
.product-details-location-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.product-details-location-table th {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--light-gray);
}
.product-details-location-table td {
  font-variant-numeric: tabular-nums;
}

/* Forecast history checkbox in forecast pane */
.forecast-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--secondary-color);
  cursor: pointer;
  margin: 0 0 10px 0;
  text-align: left;
}
.forecast-history-toggle input { cursor: pointer; }

@media (max-width: 767px) {
  .product-detail-tabs { gap: 3px; padding-bottom: 10px; }
  .product-detail-tab { padding: 7px 14px; font-size: 0.78rem; }
  .product-details-card { grid-template-columns: 1fr; }
  .product-details-grid { grid-template-columns: 1fr; gap: 4px 0; max-width: none; }
  .product-details-grid dt { margin-top: 6px; }
  .product-details-incoming { flex-direction: column; }
}