/* ==============================================================================
   Alpine Logistics TMS - Multi-Device Responsiveness Engine
   Covers All iPhones (iPhone 16 Pro Max, 16 Pro, 16, 15, 14, 13, 12, SE)
   and All Tablet Formats (iPad Mini, iPad 10.2, iPad Air, iPad Pro)
   ============================================================================== */

/* ------------------------------------------------------------------------------
   0. PRIMARY BRAND COLOR SYSTEM & ACTION BUTTON HARDENING (ALL SCREENS & DEVICES)
   ------------------------------------------------------------------------------ */
:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

/* Backgrounds */
.bg-primary-50 { background-color: #eff6ff !important; }
.bg-primary-100 { background-color: #dbeafe !important; }
.bg-primary-200 { background-color: #bfdbfe !important; }
.bg-primary-500 { background-color: #3b82f6 !important; }
.bg-primary-600 { background-color: #2563eb !important; }
.bg-primary-700 { background-color: #1d4ed8 !important; }
.bg-primary-800 { background-color: #1e40af !important; }
.bg-primary-900 { background-color: #1e3a8a !important; }
.bg-primary-950 { background-color: #172554 !important; }

/* Hover Backgrounds */
.hover\:bg-primary-50:hover { background-color: #eff6ff !important; }
.hover\:bg-primary-100:hover { background-color: #dbeafe !important; }
.hover\:bg-primary-600:hover { background-color: #2563eb !important; }
.hover\:bg-primary-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-primary-800:hover { background-color: #1e40af !important; }

/* Text Colors */
.text-primary-300 { color: #93c5fd !important; }
.text-primary-400 { color: #60a5fa !important; }
.text-primary-500 { color: #3b82f6 !important; }
.text-primary-600 { color: #2563eb !important; }
.text-primary-700 { color: #1d4ed8 !important; }
.hover\:text-primary-500:hover { color: #3b82f6 !important; }
.hover\:text-primary-600:hover { color: #2563eb !important; }
.hover\:text-primary-700:hover { color: #1d4ed8 !important; }

/* Borders & Rings */
.border-primary-200 { border-color: #bfdbfe !important; }
.border-primary-300 { border-color: #93c5fd !important; }
.border-primary-500 { border-color: #3b82f6 !important; }
.border-primary-600 { border-color: #2563eb !important; }
.border-primary-700 { border-color: #1d4ed8 !important; }
.border-primary-800 { border-color: #1e40af !important; }
.focus\:border-primary-500:focus { border-color: #3b82f6 !important; }
.ring-primary-500 { --tw-ring-color: #3b82f6 !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: #3b82f6 !important; }

/* Shadows */
.shadow-primary-500\/20 {
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -2px rgba(59, 130, 246, 0.2) !important;
}
.shadow-primary-600 {
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -4px rgba(37, 99, 235, 0.3) !important;
}

/* Gradients */
.from-primary-600 { --tw-gradient-from: #2563eb !important; }
.from-primary-700 { --tw-gradient-from: #1d4ed8 !important; }
.to-primary-500 { --tw-gradient-to: #3b82f6 !important; }
.to-primary-600 { --tw-gradient-to: #2563eb !important; }
.to-primary-950 { --tw-gradient-to: #172554 !important; }

/* Dark mode variants */
.dark .dark\:bg-primary-950\/30 { background-color: rgba(23, 37, 84, 0.3) !important; }
.dark .dark\:bg-primary-950 { background-color: #172554 !important; }
.dark .dark\:text-primary-400 { color: #60a5fa !important; }
.dark .dark\:border-primary-800 { border-color: #1e40af !important; }

/* Master Data Module Buttons - Explicit High-Contrast Styling */
button.bg-primary-600,
button[class*="bg-primary-600"] {
  background-color: #2563eb !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
}

button.bg-primary-600:hover,
button[class*="bg-primary-600"]:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Modal Save Entry button */
div.flex.justify-end > button[type="submit"],
form button[type="submit"] {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

div.flex.justify-end > button[type="submit"]:hover,
form button[type="submit"]:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------------------------
   0.1 DESKTOP & TABLET PERSISTENT SIDEBAR NAVIGATION (>= 768px)
   ------------------------------------------------------------------------------ */
@media screen and (min-width: 768px) {
  .desktop-sidebar,
  .md\:block,
  div:has(> aside),
  div:has(> aside.bg-slate-900) {
    display: block !important;
    visibility: visible !important;
  }

  .md\:hidden {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .desktop-sidebar {
    display: none !important;
  }
}

/* ------------------------------------------------------------------------------
   1. TABLET & MOBILE UNIFIED RULES (<= 1024px)
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
  /* Ensure container uses full screen with comfortable gutters */
  main, [class*="max-w-7xl"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile/Tablet slide-in drawer styling & stacking context */
  .fixed.inset-0.lg\:hidden,
  .fixed.inset-0.md\:hidden {
    z-index: 99999 !important;
  }
  .fixed.inset-0.lg\:hidden > div:first-child,
  .fixed.inset-0.md\:hidden > div:first-child {
    z-index: 99998 !important;
  }
  .fixed.inset-0.lg\:hidden > div:last-child,
  .fixed.inset-0.md\:hidden > div:last-child {
    z-index: 100000 !important;
    max-width: 85vw !important;
  }

  /* Slide in animation */
  .animate-slide-in {
    animation: slideInLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  /* Universal Table Horizontal Scrolling */
  div:has(> table),
  .overflow-x-auto,
  [class*="overflow-x-auto"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px !important;
  }

  /* Modals on tablets & mobile */
  .fixed.inset-0.z-50 > div:last-child,
  .fixed.inset-0.z-40 > div:last-child {
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 92vh !important;
    margin: auto !important;
  }
}

/* ------------------------------------------------------------------------------
   2. MOBILE & SMARTPHONE SPECIFIC RULES (<= 768px)
   Covers iPhone 16 Pro Max, 16 Pro, 16, 15, 14, 13, 12, SE & all handhelds
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* Global Viewport & Flow Hygiene */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* Prevent iOS automatic zoom on focus while maintaining touch target sizing */
  input, select, textarea {
    font-size: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Main Container Padding */
  main, [class*="max-w-7xl"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 24px !important;
  }

  /* ----------------------------------------------------------------------------
     HEADER BAR HARDENING - ABSOLUTE SINGLE ROW, NEVER WRAP
     Guarantees right side icons (Theme, Bell, Profile) never drop or overlap breadcrumbs
     ---------------------------------------------------------------------------- */
  header,
  header.flex {
    flex-wrap: nowrap !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }

  header > div {
    flex-wrap: nowrap !important;
  }

  /* Left: Hamburger + Brand */
  header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
  }

  /* Right: Actions (Theme, Bell, Divider, Avatar) */
  header > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  header > div:last-child button,
  header > div:last-child a {
    padding: 6px !important;
    min-height: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header > div:last-child .w-9.h-9,
  header > div:last-child [class*="w-9"][class*="h-9"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }

  /* Breadcrumbs Bar */
  nav.select-none {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 11px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
    clear: both !important;
  }

  /* Form Grids & Layout Stacking */
  .grid-cols-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .grid-cols-12 > div,
  .grid-cols-12 > [class*="col-span-"] {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px dashed rgba(100, 116, 139, 0.25) !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
  }

  .grid-cols-12 > div:last-child,
  .grid-cols-12 > [class*="col-span-"]:last-child {
    border-bottom: none !important;
  }

  /* Multi-column input rows stack cleanly */
  .grid-cols-4, [class*="grid-cols-4"],
  .grid-cols-3, [class*="grid-cols-3"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Address & Text Collision Prevention */
  .whitespace-nowrap:not(th):not(td):not(button):not(header *):not(nav *) {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Tables maintain readable proportions */
  table {
    min-width: 580px !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  table th, table td {
    padding: 7px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Action Bars, Toolbars & Buttons (Excluding Header and Nav) */
  :not(header):not(nav).flex.justify-between.items-center,
  :not(header).flex.justify-end.items-center,
  :not(header).flex.items-center.gap-3,
  :not(header).flex.items-end.gap-2 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  button:not(.p-1):not(.p-1\.5):not(.rounded-full):not(header button) {
    min-height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* A4 Paper Preview Mobile Adaptability */
  .work-order-print-page,
  [style*="width: 210mm"],
  [style*="minWidth: 210mm"],
  [style*="min-width: 210mm"] {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }
}

/* ------------------------------------------------------------------------------
   3. IPHONE & COMPACT MOBILE DEVICES (<= 440px)
   iPhone 16 Pro Max (440px), iPhone 16 Plus (430px), iPhone 16 Pro (402px),
   iPhone 16/15/14/13/12 (390-393px), iPhone SE (375px), iPhone mini (360-375px)
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 440px) {
  /* Header branding scale down to avoid truncation */
  header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  header > div:first-child {
    gap: 6px !important;
  }

  header > div:first-child img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  header > div:first-child span {
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
  }

  header > div:last-child {
    gap: 3px !important;
  }

  header > div:last-child .w-\[1px\] {
    margin: 0 1px !important;
  }

  header > div:last-child .w-9.h-9,
  header > div:last-child [class*="w-9"][class*="h-9"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 12px !important;
  }

  /* Date Scope Card - Stack dropdown underneath date range */
  .date-scope-card,
  .rounded-erp:has(select),
  div[class*="rounded-erp"]:has(select) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .date-scope-card > div:first-child,
  .rounded-erp:has(select) > div:first-of-type {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .date-scope-divider,
  .rounded-erp:has(select) > .border-l,
  .rounded-erp:has(select) > [class*="border-l"],
  div[class*="rounded-erp"]:has(select) > .border-l {
    display: none !important;
  }

  .date-scope-select,
  .rounded-erp:has(select) > select,
  div[class*="rounded-erp"]:has(select) > select {
    width: 100% !important;
    min-width: 100% !important;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }

  /* Dashboard Action Buttons Stack */
  .flex.items-center.gap-3:has(button) {
    width: 100% !important;
  }

  .flex.items-center.gap-3:has(button) > button {
    flex: 1 1 auto !important;
  }
}

/* ------------------------------------------------------------------------------
   4. ULTRA-COMPACT SCREENS (<= 375px - iPhone SE, iPhone 12/13 mini)
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 375px) {
  header > div:first-child span {
    font-size: 11.5px !important;
  }

  header > div:first-child span > span {
    font-size: 10.5px !important;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ==============================================================================
   Address Line Formatting & Print Support
   ============================================================================== */
.whitespace-pre-line {
  white-space: pre-line !important;
}
.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}
.address-line-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.address-split-container {
  display: block !important;
}
@page landscape-layout {
  size: A4 landscape !important;
  margin: 0 !important;
}
@page portrait-layout {
  size: A4 portrait !important;
  margin: 0 !important;
}

@media print {
  @page landscape-layout {
    size: A4 landscape !important;
    margin: 0 !important;
  }
  @page portrait-layout {
    size: A4 portrait !important;
    margin: 0 !important;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .print-only,
  .print-landscape-container {
    display: block !important;
    visibility: visible !important;
  }
  .print-landscape-container,
  .print-landscape,
  .consignment-note-print-page {
    position: absolute !important;
    left: 7mm !important;
    top: 6mm !important;
    width: 283mm !important;
    max-width: 283mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    page: landscape-layout !important;
  }
  .desktop-sidebar,
  .desktop-header,
  aside,
  header,
  nav,
  footer,
  #alpine-mailbox-root,
  .Toastify {
    display: none !important;
  }
  .tax-invoice-print-page,
  .work-order-print-page,
  .print-portrait {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 198mm !important;
    min-width: 198mm !important;
    max-width: 198mm !important;
    min-height: unset !important;
    height: 270mm !important;
    max-height: 270mm !important;
    margin: 6mm auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    page: portrait-layout !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
  .fixed.inset-0.z-50 {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .fixed.inset-0.z-50 > div {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  .print-landscape-container * {
    visibility: visible !important;
  }
  .print-landscape,
  .consignment-note-print-page {
    page: landscape-layout !important;
    width: 283mm !important;
    max-width: 283mm !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid-page !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
    overflow: visible !important;
  }
  .consignment-note-print-page .grid-cols-12,
  .print-card .grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    flex-direction: row !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .consignment-note-print-page .grid-cols-12 > div,
  .consignment-note-print-page .grid-cols-12 > [class*="col-span-"],
  .print-card .grid-cols-12 > div,
  .print-card .grid-cols-12 > [class*="col-span-"] {
    width: auto !important;
    max-width: none !important;
    border-bottom: none !important;
  }
  .consignment-note-print-page .col-span-3 { grid-column: span 3 / span 3 !important; }
  .consignment-note-print-page .col-span-4 { grid-column: span 4 / span 4 !important; }
  .consignment-note-print-page .col-span-5 { grid-column: span 5 / span 5 !important; }
  .consignment-note-print-page .col-span-6 { grid-column: span 6 / span 6 !important; }
  .consignment-note-print-page .col-span-7 { grid-column: span 7 / span 7 !important; }
  .consignment-note-print-page .grid-cols-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .consignment-note-print-page .grid-cols-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html, body, #root, #root > div, main, .min-h-screen, div[class*="min-h-screen"], div[class*="flex-1"] {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .whitespace-pre-line {
    white-space: pre-line !important;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap !important;
  }
  .address-line-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
  .address-split-container {
    display: block !important;
  }
  .print-card img,
  .consignment-note-print-page img,
  .print-card .shrink-0 img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
  }
  .alpine-mail-btn,
  .alpine-mail-overlay,
  .alpine-mail-modal,
  [class*="alpine-mail"] {
    display: none !important;
  }
}




/* Global grid protection for Consignment Note print card (Screen & Print) */
.consignment-note-print-page,
.print-card {
  font-family: 'Times New Roman', Times, serif !important;
  box-sizing: border-box !important;
}
.consignment-note-print-page .grid-cols-12,
.print-card .grid-cols-12 {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  flex-direction: row !important;
  gap: 0 !important;
  width: 100% !important;
}
.consignment-note-print-page .grid-cols-12 > div,
.consignment-note-print-page .grid-cols-12 > [class*="col-span-"],
.print-card .grid-cols-12 > div,
.print-card .grid-cols-12 > [class*="col-span-"] {
  width: auto !important;
  max-width: none !important;
  border-bottom: none !important;
}
.consignment-note-print-page .col-span-3 { grid-column: span 3 / span 3 !important; }
.consignment-note-print-page .col-span-4 { grid-column: span 4 / span 4 !important; }
.consignment-note-print-page .col-span-5 { grid-column: span 5 / span 5 !important; }
.consignment-note-print-page .col-span-6 { grid-column: span 6 / span 6 !important; }
.consignment-note-print-page .col-span-7 { grid-column: span 7 / span 7 !important; }
.consignment-note-print-page .grid-cols-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.consignment-note-print-page .grid-cols-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }


/* Work Order print (Ctrl+P): proper margins on both pages.
   - outer: ~10mm clear space between paper edge and the bordered page (all sides)
   - inner: padding so text never touches the border */
@media print {
  .work-order-print-page {
    width: 190mm !important;
    min-width: 190mm !important;
    max-width: 190mm !important;
    height: 275mm !important;
    min-height: 0 !important;
    max-height: 275mm !important;
    margin: 0 auto !important;
    padding: 5mm 6mm !important;
    position: relative !important;
    top: 4mm !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-after: page !important;
    page-break-after: always !important;
  }
  .work-order-print-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}