/* ===== ASSIGNEE COLORS ===== */
.assignee-color-1 { background-color: #FF6B6B; color: white; }
.assignee-color-2 { background-color: #4ECDC4; color: white; }
.assignee-color-3 { background-color: #FFE66D; color: #333; }
.assignee-color-4 { background-color: #A8E6CF; color: #333; }
.assignee-color-5 { background-color: #FF8A5C; color: white; }
.assignee-color-6 { background-color: #6C5CE7; color: white; }
.assignee-color-7 { background-color: #FD79A8; color: white; }
.assignee-color-8 { background-color: #00CEC9; color: white; }
.assignee-color-9 { background-color: #FDCB6E; color: #333; }
.assignee-color-10 { background-color: #E17055; color: white; }
.assignee-color-11 { background-color: #0984E3; color: white; }
.assignee-color-12 { background-color: #00B894; color: white; }
.assignee-color-default { background-color: #636E72; color: white; }

/* Smooth accordion arrow rotation */
details summary .text-white\/40 {
  transition: transform 0.2s ease;
}
details[open] summary .text-white\/40 {
  transform: rotate(180deg);
}

/* Force hide dashboard when section page is open */
.dashboard-hidden {
  display: none !important;
}

/* ============================================================
   SECTION PAGE – FIXED: removed !important from left/right/width/height
   Now relies on class `xl:left-[182px]` and media query for positioning.
   ============================================================ */
#sectionPage:not(.hidden) {
  display: block !important;
  position: fixed !important;
  top: 64px !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 35 !important;
  background: #1E1E1C !important;
  overflow-y: auto !important;
}

/* ============================================================
   On large screens, push section page to the right of the sidebar
   ============================================================ */
@media (min-width: 1280px) {
  #sectionPage:not(.hidden) {
    left: 182px !important;
    width: calc(100% - 182px) !important;
  }
}

/* ============================================================
   HEADER – keep its original z-index from class (z-[45])
   No !important override here anymore.
   ============================================================ */
header {
  position: sticky !important;
  top: 0 !important;
  background: #F69F1A !important; /* brand-orange fallback */
}

#hamburgerBtn {
  position: relative !important;
  z-index: 10000 !important;
  cursor: pointer !important;
}

/* ============================================================
   FILTER BAR COLLAPSIBLE (mobile) – for other uses (unused)
   ============================================================ */

/* Default: all controls visible */
.filter-bar-collapsible .filter-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  width: 100%;
}

/* Toggle button – hidden on desktop */
.filter-bar-collapsible .filter-toggle-btn {
  display: none;
}

/* On small screens, collapse by default */
@media (max-width: 639px) {
  .filter-bar-collapsible .filter-controls {
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .filter-bar-collapsible .filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.15);
    color: currentColor;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .filter-bar-collapsible .filter-toggle-btn:hover {
    background: rgba(255,255,255,0.25);
  }
  .filter-bar-collapsible .filter-toggle-btn svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  /* Expanded state */
  .filter-bar-collapsible.filter-bar-expanded .filter-controls {
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
    margin: 0.5rem 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex-wrap: wrap;
  }

  .filter-bar-collapsible.filter-bar-expanded .filter-toggle-btn {
    display: none;
  }

  .filter-bar-collapsible.filter-bar-expanded .filter-controls > * {
    flex: 1 0 auto;
    min-width: 80px;
  }
}

/* Ensure the container uses flex column on mobile */
.filter-bar-collapsible {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .filter-bar-collapsible {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .filter-bar-collapsible .filter-controls {
    flex: 1;
    flex-wrap: nowrap;
  }
}

/* ============================================================
   DASHBOARD FILTER BAR (compact) – NEW
   ============================================================ */

/* Container */
.filter-bar-compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  position: relative; /* for absolute popovers */
}

/* Each control wrapper – equal width on large screens */
.filter-control-wrapper {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* The expanded container (input/select) */
.filter-control-expanded {
  width: 100%;
}

/* Icon button – hidden on large screens */
.filter-icon-btn {
  display: none;
}

/* Large screens (≥640px) – show expanded inline, hide icons */
@media (min-width: 640px) {
  .filter-control-wrapper {
    flex: 1 1 0;
  }
  .filter-control-expanded {
    display: block !important; /* override any hidden class */
    position: static;
  }
  .filter-icon-btn {
    display: none !important;
  }
}

/* Small screens (<640px) – icons only, popovers absolute */
@media (max-width: 639px) {
  .filter-bar-compact {
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .filter-control-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }
  .filter-icon-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0;
    background: rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    border: none;
    color: currentColor;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
  }
  .filter-icon-btn:hover {
    background: rgba(255,255,255,0.25);
  }
    .filter-control-wrapper {
    position: static !important;
  }
  .filter-control-expanded {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    top: calc(64px + 56px + 0.5rem) !important;
    z-index: 50 !important;
    min-width: 200px !important;
    max-width: calc(100vw - 2rem) !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    display: none !important;
    width: auto !important;
  }
  .filter-control-expanded:not(.hidden) {
    display: block !important;
  }
  /* Ensure inputs/selects inside popover take full width */
  .filter-control-expanded input,
  .filter-control-expanded select {
    width: 100% !important;
    min-width: 0;
  }
  /* Small screens: the clear and refresh buttons can remain as icon/compact */
  #clearFiltersBtn,
  #refreshBtn {
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem;
  }
  #clearFiltersBtn svg,
  #refreshBtn svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  #clearFiltersBtn span,
  #refreshBtn span {
    display: none;
  }
}

/* Pin icon rotation */
#pinIcon {
  transition: transform 0.3s ease;
}

#pinIcon.pin-rotated {
  transform: rotate(90deg);
}

#adminImportSection {
  display: none !important;
}

/* Admin section collapse */
#adminNav.collapsed {
  display: none;
}
#adminArrow.rotated {
  transform: rotate(180deg);
}

/* Mobile sidebar overlay – no backdrop, just slide */
#sidebarNav {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1279px) {
  header {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    overflow: hidden;
  }
  header .flex-wrap {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 1279px) {
  #sidebarNav {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 280px;
    background: #f69f1a;
    z-index: 40;
    transform: translateX(-100%);
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 3rem;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: block !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #sidebarNav.open {
    transform: translateX(0);
  }
  /* On mobile, section page should not have a left offset */
  #sectionPage:not(.hidden) {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   DRAWER BACKDROP – above header (z-45) but below drawer (z-50)
   ============================================================ */
#drawerBackdrop {
  z-index: 46 !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #a4a4a4 transparent;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modal-backdrop {
  transition: opacity 0.2s ease;
}

.drawer {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast {
  animation: toastIn 0.22s ease-out;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-out {
  animation: toastOut 0.22s ease-in forwards;
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.dropzone.drag {
  border-color: #326363;
  background: rgba(50, 99, 99, 0.1);
}

.pulse-dot {
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(50, 99, 99, 0.25);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(50, 99, 99, 0);
  }
}

/* Fix dropdown options visibility in dark theme */
#fieldConfigTable select option {
  background: #1e1e1c;
  color: #ffffff;
}
#fieldConfigTable select option:hover {
  background: #326363;
}
#fieldConfigTable select:focus {
  outline: 2px solid #326363;
}

.status-dropdown-trigger {
  cursor: pointer;
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  padding: 4px 18px 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  border: 1px solid transparent;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%23333333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 8px 6px;
  min-width: 70px;
}
.status-dropdown-trigger:focus {
  outline: 2px solid #326363;
}
.status-dropdown-trigger option {
  background: white;
  color: #1e293b;
}

.field-label-sm {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
  display: block;
}

.field-input-sm {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  background: #fff;
  outline: none;
}
.field-input-sm:focus {
  border-color: #326363;
  box-shadow: 0 0 0 3px rgba(50, 99, 99, 0.12);
}

.field-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  background: #fff;
  outline: none;
}
.field-input:focus {
  border-color: #326363;
  box-shadow: 0 0 0 3px rgba(50, 99, 99, 0.12);
}

.field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  margin-bottom: 0.4rem;
}

.import-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.import-step-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.import-step-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-step-subtitle {
  display: block;
}
.import-source-badge,
.import-file-name {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.import-source-badge {
  flex: 0 1 180px;
  min-width: 0;
  max-width: 180px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-file-name {
  margin-top: 8px;
  color: #326363;
  font-size: 11px;
  font-weight: 700;
}

.import-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.import-custom-row > * {
  min-width: 0;
  max-width: 100%;
}
.import-custom-row .field-input-sm,
.import-custom-row select.field-input-sm {
  max-width: 100%;
  min-width: 0;
}

.detail-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .detail-box-grid {
    grid-template-columns: 1fr;
  }
}

.drawer-custom-fields-list .custom-field-item {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
}
.drawer-custom-fields-list .custom-field-item strong {
  color: #475569;
  font-weight: 700;
  display: inline-block;
  min-width: 80px;
}

.edit-scroll {
  overflow-y: auto;
  max-height: calc(94vh - 140px);
}
.edit-scroll::-webkit-scrollbar {
  width: 4px;
}
.edit-scroll::-webkit-scrollbar-thumb {
  background: #a4a4a4;
  border-radius: 8px;
}

.drawer-custom-field-row,
.edit-custom-field-row {
  display: grid;
  grid-template-columns: 1fr 1.8fr 32px;
  gap: 8px;
  align-items: center;
}
.drawer-custom-field-row .field-remove-btn,
.edit-custom-field-row .field-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-custom-field-row .field-remove-btn:hover,
.edit-custom-field-row .field-remove-btn:hover {
  background: #fef2f2;
}

.add-field-btn {
  font-size: 11px;
  font-weight: 700;
  color: #326363;
  background: rgba(50, 99, 99, 0.1);
  border: 1px dashed #326363;
  border-radius: 10px;
  padding: 8px 14px;
  width: 100%;
  text-align: center;
  transition: all 0.15s;
  cursor: pointer;
}
.add-field-btn:hover {
  background: rgba(50, 99, 99, 0.2);
  border-color: #326363;
}

.drawer-add-field-section,
.edit-add-field-section {
  border-top: 1px solid #e2e8f0;
  margin-top: 12px;
  padding-top: 12px;
}

.delete-btn-danger {
  transition: all 0.15s;
}
.delete-btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* Login modal extra style */
.login-modal {
  max-width: 400px;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1e1e1c;
}
::-webkit-scrollbar-thumb {
  background: #a4a4a4;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7ebf36;
}

/* Sidebar nav hover effect */
#sidebarNav .nav-link {
  font-weight: 700;
  transition: all 0.2s ease;
}
#sidebarNav .nav-link:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: translateX(4px);
  color: #000;
}
#sidebarNav .nav-link.active {
  background: rgba(0, 0, 0, 0.15);
  color: #000;
}

/* ===== RECEIPT PAPER & LAYOUT STYLES ===== */
#receiptPrintArea {
  transition: width 0.3s ease, min-height 0.3s ease, margin 0.3s ease;
}
#receiptPrintArea.paper-letter {
  width: 8.5in;
  min-height: 11in;
}
#receiptPrintArea.paper-legal {
  width: 8.5in;
  min-height: 14in;
}
#receiptPrintArea.center-h {
  margin-left: auto;
  margin-right: auto;
}
#receiptPrintArea.center-v {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Keep the paper itself at the top of the scrollable canvas
     so the top is never clipped when the paper is taller than
     the viewport. Only the paper's inner content centers. */
  align-self: flex-start;
}

/* ===== RECEIPT PRINT PREVIEW ===== */
.receipt-page {
  --page-width: 8.5in;
  --page-height: 11in;
  --page-margin: 0.5in;
  width: var(--page-width);
  min-height: var(--page-height);
  padding: var(--page-margin);
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
  font-size: 12pt;
  line-height: 1.5;
    transition: width 0.2s ease, min-height 0.2s ease, padding 0.2s ease, font-size 0.2s ease;
  flex-shrink: 0;
}

/* Override Tailwind's rem-based text utilities inside the receipt so
   changing the base font-size on .receipt-page scales every label and
   value proportionally (live preview + print + PDF). */
.receipt-page .text-\[10px\] { font-size: 0.625em  !important; }
.receipt-page .text-\[11px\] { font-size: 0.6875em !important; }
.receipt-page .text-\[12px\] { font-size: 0.75em   !important; }
.receipt-page .text-xs       { font-size: 0.75em   !important; }
.receipt-page .text-sm       { font-size: 0.875em  !important; }
.receipt-page .text-base     { font-size: 1em      !important; }
.receipt-page .text-lg       { font-size: 1.125em  !important; }
.receipt-page .text-xl       { font-size: 1.25em   !important; }
.receipt-page .text-2xl      { font-size: 1.5em    !important; }
.receipt-page .text-3xl      { font-size: 1.875em  !important; }

/* ===== RECEIPT PRINT STYLES ===== */
@media print {
  body * { visibility: hidden !important; }
  #receiptPrintArea, #receiptPrintArea * { visibility: visible !important; }
  #receiptPrintArea {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: var(--page-margin) !important;
    width: var(--page-width) !important;
    min-height: var(--page-height) !important;
  }
    .no-print { display: none !important; }
  #receiptPrintArea.paper-letter {
    width: 8.5in !important;
    min-height: 11in !important;
  }
  #receiptPrintArea.paper-legal {
    width: 8.5in !important;
    min-height: 14in !important;
  }
  #receiptPrintArea.center-v {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}


/* Toast top-right */
#toastStack {
  top: 80px;
  bottom: auto;
}

/* Chart styles */
.chart-bar {
  transition: height 0.6s ease;
}
.chart-container {
  min-height: 200px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Column resizing */
#allOrdersTable th {
  position: relative;
  user-select: none;
}
#allOrdersTable th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}
#allOrdersTable th .resize-handle:hover,
#allOrdersTable th .resize-handle.active {
  background: rgba(50, 99, 99, 0.3);
}
#allOrdersTable th.resizing {
  border-right: 2px solid #326363;
}

/* ============================================================
   RECEIPT PRINT PREVIEW – MOBILE (≤767px)
   - Settings sidebar becomes an off-canvas slide-in panel
   - Backdrop closes the sidebar when tapped
   - Preview canvas uses smaller padding
   ============================================================ */

.receipt-sidebar-backdrop {
  display: none;
}

@media (max-width: 767px) {
  #receiptSidebar.receipt-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
  }
  #receiptSidebar.receipt-sidebar.open {
    transform: translateX(0);
  }
  #receiptSidebarBackdrop.receipt-sidebar-backdrop.open {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;
  }
    #receiptPreviewCanvas {
    padding: 16px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
}

/* ============================================================
   RECEIPT PREVIEW – PAN / ZOOM BEHAVIOUR
   The iframe is a display-only preview. Disabling pointer events
   lets every touch / click fall through to the scrollable canvas
   so MASTER can drag to pan at any zoom level.
   ============================================================ */
#receiptPdfPreview {
  pointer-events: none;
}

/* The mobile preview canvas mirrors the iframe's role: display-only,
   full-bleed, and no pointer events so touch-drag pans the wrapper.
   Visibility is toggled by JS — shown on mobile, hidden on desktop. */
#receiptPdfCanvas {
  display: none;
  border: none;
  background: #ffffff;
  pointer-events: none;
  line-height: 0;
}

/* ============================================================
   RECEIPT FIELD-EDITOR ACCORDION
   ============================================================ */
#receiptFieldsAccordion summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}
#receiptFieldsAccordion summary::-webkit-details-marker {
  display: none;
}
#receiptFieldsAccordion summary::marker {
  content: '';
}
#receiptFieldsAccordion .receipt-accordion-chevron {
  transition: transform 0.2s ease;
}
#receiptFieldsAccordion[open] .receipt-accordion-chevron {
  transform: rotate(180deg);
}