/* ==============================================================================
   VARA Bakery Stock Management - Brand Design System & Stylesheet
   Palette:
   - Warm Ivory: #F7F3EC (Primary Canvas)
   - Cream White: #FFFCF7 (Surface & Cards)
   - Cocoa Brown: #49372F (Deep Typography & Dark Elements)
   - Muted Sage: #87917B (Inventory & Stability)
   - Terracotta: #B8755A (Brand Accent & Primary CTAs)
   - Soft Taupe: #D8CBBE (Borders & Muted Accents)
   - Muted Red: #C05C54 (Loss & Critical Expiry)
   - Muted Amber: #D99B4B (Alerts & Near Expiry)
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Kanit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --vara-ivory: #F7F3EC;
  --vara-cream: #FFFCF7;
  --vara-cocoa: #49372F;
  --vara-cocoa-light: #6A5348;
  --vara-sage: #87917B;
  --vara-sage-light: #EBF0E8;
  --vara-terracotta: #B8755A;
  --vara-terracotta-dark: #9B5E46;
  --vara-terracotta-light: #F9ECE6;
  --vara-taupe: #D8CBBE;
  --vara-taupe-light: #EFE8DF;
  --vara-red: #C05C54;
  --vara-red-light: #FCEEED;
  --vara-amber: #D99B4B;
  --vara-amber-light: #FDF4E7;
}

body {
  font-family: 'Kanit', sans-serif;
  background-color: var(--vara-ivory);
  color: var(--vara-cocoa);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.font-editorial {
  font-family: 'Cormorant Garamond', serif;
}

.font-tabular {
  font-family: 'JetBrains Mono', 'Kanit', monospace;
  font-feature-settings: "tnum" 1;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--vara-ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--vara-taupe);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vara-cocoa-light);
}

/* Kanban column and drag states */
.vara-kanban-col {
  background: rgba(239, 232, 223, 0.65);
  border: 1px solid var(--vara-taupe);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-width: 280px;
}

.sortable-ghost {
  opacity: 0.35;
  background: var(--vara-taupe-light) !important;
  border: 2px dashed var(--vara-terracotta) !important;
  border-radius: 14px;
}

.sortable-chosen {
  box-shadow: 0 12px 24px -6px rgba(73, 55, 47, 0.18) !important;
  transform: scale(1.02);
}

/* Active navigation state */
.nav-btn.active {
  background-color: var(--vara-terracotta);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(184, 117, 90, 0.25);
}

/* Badges */
.badge-normal {
  background-color: var(--vara-sage-light);
  color: #384232;
  border: 1px solid #CED6C7;
}

.badge-expiring {
  background-color: var(--vara-amber-light);
  color: #8C5B1C;
  border: 1px solid #EED4AF;
}

.badge-expired {
  background-color: var(--vara-red-light);
  color: #8C2B24;
  border: 1px solid #F5C6C3;
  animation: pulse-soft 2s infinite ease-in-out;
}

.badge-config-missing {
  background-color: #F1EFF5;
  color: #5C5272;
  border: 1px solid #D6D0E3;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
  }

  .kanban-mobile-snap {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-mobile-snap > .vara-kanban-col {
    scroll-snap-align: center;
  }
}

/* Modal Transitions */
.vara-modal-backdrop {
  backdrop-filter: blur(4px);
  background: rgba(73, 55, 47, 0.5);
}

/* Visibility and pointer safety */
.hidden, [hidden] {
  display: none !important;
}

#sidebar-backdrop.hidden,
.vara-modal-backdrop.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Print Stylesheet for Reports & Closing receipts */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print, header, nav, #vara-sidebar, .modal-backdrop {
    display: none !important;
  }
  #print-container {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 24px;
    background: #ffffff;
  }
  .page-break {
    page-break-after: always;
  }
}