/* ========================================================
   PHOTOSNAPBD CRM - COMPREHENSIVE MOBILE & DARK MODE SYSTEM
   ======================================================== */

/* Root & Global Setup */
html {
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ========================================================
   FLAWLESS ANDROID & IOS MOBILE SCROLL VIEW (FIXES LOCKED SCROLL)
   ======================================================== */
/* App root container: full viewport dynamic height */
#root > div {
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Flex row container holding sidebar and main content */
#root > div > div.flex-1 {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  overflow: hidden !important;
}

/* Main scrollable viewport across all CRM pages */
main {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  scroll-behavior: smooth;
  /* Extra bottom padding so mobile navigation bars & floating action buttons never hide content */
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 32px)) !important;
}

@media (max-width: 768px) {
  /* Hide collapsed mini sidebar on mobile so main gets 100% screen width */
  aside.w-16 {
    display: none !important;
  }

  /* When drawer sidebar is open on mobile, float over main */
  aside.w-64 {
    position: fixed !important;
    top: 4rem !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
  }

  /* Smooth table horizontal scrolling without blocking vertical touch gestures */
  .overflow-x-auto, [class*="overflow-x-auto"], table {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    max-width: 100% !important;
  }

  /* Header stays crisp & sticky on mobile */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    flex-shrink: 0 !important;
  }

  /* Modals on mobile should scroll smoothly when keyboard appears */
  .fixed.inset-0 {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: auto !important;
    padding: 0.75rem !important;
  }

  /* Better tap feedback and no ugly gray tap flash on Android */
  button, a, input, select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}

/* ========================================================
   COMPREHENSIVE PROFESSIONAL DARK MODE THEME
   ======================================================== */
html.dark, html.dark body {
  background-color: #090D16 !important;
  color: #F1F5F9 !important;
  color-scheme: dark;
}

/* Base background containers */
html.dark #root,
html.dark .bg-\[\#FAFBFD\],
html.dark main.bg-\[\#FAFBFD\] {
  background-color: #090D16 !important;
}

/* Header & Sidebar */
html.dark header,
html.dark header.bg-white {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

html.dark aside,
html.dark aside.bg-white {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* Cards & Panels */
html.dark .bg-white {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
  color: #F8FAFC !important;
}

/* Dropdowns, Menus & Modal Dialogs */
html.dark .absolute.bg-white,
html.dark .fixed .bg-white,
html.dark div[role="dialog"] {
  background-color: #161F30 !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
  color: #F8FAFC !important;
}

/* Soft Slate Backgrounds & Hover States */
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  background-color: #161F30 !important;
  border-color: #1E293B !important;
}

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-50\/80:hover,
html.dark .hover\:bg-slate-50\/60:hover {
  background-color: #1E293B !important;
}

html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/70 {
  background-color: rgba(22, 31, 48, 0.7) !important;
}

/* Colored Dashboard Stat Cards */
html.dark .bg-blue-50,
html.dark .bg-blue-50\/70,
html.dark .bg-blue-50\/40 {
  background-color: rgba(30, 58, 138, 0.22) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-50\/70,
html.dark .bg-purple-50\/40 {
  background-color: rgba(88, 28, 135, 0.22) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-50\/70,
html.dark .bg-amber-50\/40 {
  background-color: rgba(120, 53, 15, 0.22) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/70,
html.dark .bg-emerald-50\/40 {
  background-color: rgba(6, 78, 59, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .bg-indigo-50,
html.dark .bg-indigo-50\/40 {
  background-color: rgba(49, 46, 129, 0.22) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .bg-rose-50,
html.dark .bg-rose-50\/40 {
  background-color: rgba(136, 19, 55, 0.22) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

html.dark .bg-cyan-50,
html.dark .bg-cyan-50\/40 {
  background-color: rgba(22, 78, 99, 0.22) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}

/* Icon Badges Circles inside Stat Cards */
html.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.25) !important;
}
html.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.25) !important;
}
html.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.25) !important;
}
html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.25) !important;
}
html.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.25) !important;
}
html.dark .bg-rose-100 {
  background-color: rgba(244, 63, 94, 0.25) !important;
}
html.dark .bg-cyan-100 {
  background-color: rgba(6, 182, 212, 0.25) !important;
}

/* Borders & Dividers */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60 {
  border-color: #1F2937 !important;
}

html.dark .divide-slate-100 > * + *,
html.dark .divide-slate-200 > * + * {
  border-color: #1F2937 !important;
}

/* Typography Hierarchy */
html.dark .text-slate-900 {
  color: #F8FAFC !important;
}
html.dark .text-slate-800,
html.dark .text-slate-700 {
  color: #E2E8F0 !important;
}
html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #94A3B8 !important;
}
html.dark .text-slate-400 {
  color: #64748B !important;
}

/* Colored text accents in cards */
html.dark .text-blue-900,
html.dark .text-blue-900\/80,
html.dark .text-blue-800\/70 {
  color: #93C5FD !important;
}
html.dark .text-purple-900,
html.dark .text-purple-900\/80,
html.dark .text-purple-800\/70 {
  color: #D8B4FE !important;
}
html.dark .text-amber-900,
html.dark .text-amber-900\/80,
html.dark .text-amber-800\/70 {
  color: #FCD34D !important;
}
html.dark .text-emerald-900,
html.dark .text-emerald-900\/80,
html.dark .text-emerald-800\/70 {
  color: #6EE7B7 !important;
}

/* Form Inputs, Selects, and Textareas */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

/* Tables & Lists */
html.dark table th {
  background-color: #0F172A !important;
  color: #94A3B8 !important;
  border-color: #1F2937 !important;
}
html.dark table td {
  border-color: #1F2937 !important;
  color: #E2E8F0 !important;
}
html.dark table tr:hover td {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

/* Dark Mode Scrollbars */
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* ========================================================
   IMPORTANT: PRESERVE PERFECT INVOICE PRINTING IN LIGHT A4
   ======================================================== */
@media print {
  html.dark, html.dark body, html.dark .bg-white {
    background-color: #FFFFFF !important;
    color: #000000 !important;
  }
  .print\:hidden {
    display: none !important;
  }
}

/* ========================================================
   v40 ENHANCEMENTS: PERFECT MOBILE TOUCH, SAFE AREAS & DIALOGS
   ======================================================== */

/* Mobile Header: hide wide center badge on small screens to prevent clipping */
@media (max-width: 640px) {
  header .flex-1.flex.justify-center {
    display: none !important;
  }
  
  header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Floating Studio Assistant Icon: mobile padding & touch sizing */
@media (max-width: 640px) {
  button[title="Open Support & Studio Assistant"] {
    bottom: calc(1rem + env(safe-area-inset-bottom, 12px)) !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
    opacity: 0.92;
    z-index: 40 !important;
  }
}

/* iOS Safe Areas & Native Touch Responsiveness */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

body {
  padding-top: var(--sat);
  padding-left: var(--sal);
  padding-right: var(--sar);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Modals sizing and scroll on iOS & Android */
.fixed.inset-0 > div {
  max-height: calc(100dvh - 2rem) !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 640px) {
  /* Ensure comfortable touch target heights on mobile */
  button, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Make sure buttons inside cards have minimum height */
  .flex.items-center.gap-1\.5 > button,
  .flex.flex-wrap.items-center.gap-1\.5 > button,
  .flex.items-center.gap-2 > button,
  .flex.flex-wrap.items-center.gap-2 > button {
    min-height: 38px;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}