/* GO FIREMOOD - Aesthetic Purple & Cream Theme (High Readability & Responsive Layout) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Go Firemood Palette: Warm Cream & Purple Harmony */
  --bg-cream: #FAF7F2;
  --bg-cream-soft: #F6F1EA;
  --bg-card: #FFFFFF;
  --bg-table-header: #F6F1FA;
  --bg-table-zebra: #FCFAF7;
  --border-cream-purple: #E8E0EE;
  --border-table: #DDD3E6;
  
  --purple-dusty: #55418B;
  --purple-deep: #2C1B4D;
  --purple-vibrant: #6D28D9;
  --purple-periwinkle: #7D80DA;
  --purple-lilac: #EDE8F5;
  --purple-blush: #E5DBE6;

  --cream-butter: #FEF9EE;
  --cream-border: #F6E7CA;
  --cream-text: #8A5714;

  --text-primary: #2C1B4D;
  --text-secondary: #5C4E72;
  --text-muted: #7A6E8D;
}

/* Ensure hidden elements are ALWAYS completely hidden and never intercept clicks */
.hidden, [hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.modal-overlay.hidden,
.modal-overlay[style*="display: none"],
[id$="Modal"].hidden,
[id$="Modal"][style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Drag and Drop Sortable styles (Jajan with Nad style) */
.sort-ghost-tab {
  opacity: 0.4;
  border: 2px dashed #55418B !important;
}
.sort-chosen-tab {
  opacity: 0.95;
  transform: scale(1.03);
}
.sort-ghost-batch {
  opacity: 0.35;
  border: 2px dashed #55418B !important;
  background-color: #EDE8F5 !important;
}
.sort-chosen-batch {
  box-shadow: 0 10px 25px -5px rgba(85, 65, 139, 0.25) !important;
}
.sort-ghost-row {
  opacity: 0.35;
  background-color: #EDE8F5 !important;
}
.sort-chosen-row {
  background-color: #F6F1EA !important;
}

/* Warm Cream Background with Maximum Readability (No eye strain, zero busy dots) */
html, body {
  background-color: #FAF7F2 !important;
  background-image: none !important;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #2C1B4D;
  overflow-x: hidden;
}

/* Smooth & Pretty Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F4EFEA;
}
::-webkit-scrollbar-thumb {
  background: #D5C9DE;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B6A4C2;
}

/* ==================== SPREADSHEET TABLE STYLES (PURPLE & CREAM) ==================== */
.sheet-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-top: 1.5px solid #DDD3E6;
  border-left: 1.5px solid #DDD3E6;
  background-color: #FFFFFF;
}

.sheet-table th, .sheet-table td {
  border-right: 1.5px solid #DDD3E6 !important;
  border-bottom: 1.5px solid #DDD3E6 !important;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #2C1B4D;
}

.sheet-table th {
  background-color: #F6F1FA;
  color: #3B2A5E;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sheet-header-cute {
  background-color: #EDE8F5 !important;
  color: #2C1B4D !important;
  font-weight: 700;
}

.sheet-header-purple {
  background-color: #E5DBE6 !important;
  color: #2C1B4D !important;
  font-weight: 700;
}

/* Zebra Striping (Gentle Warm Cream) */
.sheet-table tbody tr:nth-child(even) td {
  background-color: #FCFAF7;
}

/* Hover Row (Soft Lilac Tint) */
.sheet-table tbody tr:hover td {
  background-color: #F3EEF9 !important;
}

/* Sticky Columns with Solid Backgrounds to Prevent Bleed */
.sticky-col-no {
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #FFFFFF !important;
}
.sheet-table tbody tr:nth-child(even) .sticky-col-no {
  background-color: #FCFAF7 !important;
}

.sticky-col-name {
  position: sticky;
  left: 36px;
  z-index: 9;
  background-color: #FFFFFF !important;
}
.sheet-table tbody tr:nth-child(even) .sticky-col-name {
  background-color: #FCFAF7 !important;
}

/* ==================== CLEAN CARD & BOX STYLES ==================== */
.clean-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E0EE;
  border-radius: 14px;
  box-shadow: 0 2px 10px -2px rgba(85, 65, 139, 0.05), 0 1px 3px 0 rgba(85, 65, 139, 0.03);
}

/* Navigation Tabs (Desktop & Tablet Strip) */
.nav-tab {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  border-radius: 8px;
}
.nav-tab.active {
  background-color: #55418B !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 2px 6px -1px rgba(85, 65, 139, 0.35);
}
.nav-tab.inactive {
  background-color: #FFFFFF !important;
  color: #55418B !important;
  border: 1px solid #E6DDEE !important;
}
.nav-tab.inactive:hover {
  background-color: #F8F4FB !important;
  color: #2C1B4D !important;
}

/* Mobile Bottom Navigation Bar Items */
.m-nav-item {
  transition: all 0.15s ease-in-out;
}
.m-nav-item.active {
  color: #55418B !important;
  font-weight: 800;
}
.m-nav-item.inactive {
  color: #8C7E9E !important;
  font-weight: 500;
}

/* Clean Gingham Accent for Hero Search only */
.bg-gingham-clean {
  background-color: #FFFFFF;
  background-image: 
    linear-gradient(45deg, rgba(237, 232, 245, 0.5) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(237, 232, 245, 0.5) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(237, 232, 245, 0.5) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(237, 232, 245, 0.5) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Modal Backdrop */
.modal-overlay {
  background-color: rgba(44, 27, 77, 0.55);
  backdrop-filter: blur(4px);
}

/* Watermark Canvas */
#watermarkCanvas {
  max-width: 100%;
  max-height: 70vh;
  box-shadow: 0 10px 25px -5px rgba(44, 27, 77, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
#watermarkCanvas.censor-cursor {
  cursor: crosshair;
}

/* E-Receipt Paper */
.receipt-paper {
  background-color: #FFFDF9;
  border: 1.5px dashed #D5C9DE;
  box-shadow: 0 4px 12px -2px rgba(85, 65, 139, 0.08);
}

/* Text Selection */
::selection {
  background-color: #EDE8F5;
  color: #2C1B4D;
}

/* Hide scrollbar for filmstrip gallery */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}