/* Dashboard Mobile Responsive Styles - Clean Version */

/* ============================================
   1. GLOBAL TOUCH TARGETS
   ============================================ */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   2. MOBILE STYLES (≤767px)
   ============================================ */
@media (max-width: 767px) {

  /* LAYOUT FUNDAMENTALS */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    overflow-x: hidden !important;
  }

  .h-\[100dvh\].w-\[100dvw\] {
    padding-left: 0 !important;
    margin-left: 0 !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    width: 100vw !important;
    overflow-x: hidden !important;
  }

  .h-\[100dvh\].w-\[100dvw\].md\:pl-\[80px\] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .main {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .main-1content {
    padding: 16px !important;
    margin: 0 !important;
    padding-top: 70px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  main {
    padding: 1rem !important;
    margin: 0 !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    gap: 1rem !important;
    overflow-x: hidden !important;
  }

  /* HEADER VISIBILITY */
  .header {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 12px 16px !important;
    height: 60px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }

  /* HAMBURGER MENU */
  .mobile-menu-btn {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    padding: 12px !important;
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 1001 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-menu-btn::before,
  .mobile-menu-btn::after {
    display: none !important;
  }

  .mobile-menu-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: #374151 !important;
  }

  /* SIDEBAR */
  .side-menu {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }

  body.mobile-menu-open .side-menu {
    transform: translateX(0) !important;
  }

  /* GRID LAYOUTS */
  .grid-rows-\[243px_150px_1fr\] {
    grid-template-rows: auto auto 1fr !important;
    gap: 1rem !important;
  }

  .xl\:grid-cols-\[3fr_1fr\] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* PROFILE SECTION ORDER */
  .relative.order-2.xl\:order-1 {
    order: 1 !important;
  }

  .order-1.xl\:order-2 {
    order: 2 !important;
  }

  /* ACTION CARDS */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 100px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a:hover {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a .inline-flex {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0.5rem !important;
    margin-right: 0 !important;
    border-radius: 6px !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a h3 {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #6b7280 !important;
    text-align: center !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a .ml-3 {
    display: none !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a .flex.items-start.justify-between {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* DISABLED CARDS STYLING */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a.opacity-50 {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a.opacity-50 .inline-flex {
    background-color: #f3f4f6 !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a.opacity-50 svg {
    color: #9ca3af !important;
  }

  /* WELCOME BANNER - HIDE TEXT ON SMALL SCREENS */
  [style*="background-image: url('/static/images/dashboard/bg-complete-account-setup.svg')"] .flex.items-center {
    display: none !important;
  }

  [style*="background-image: url('/static/images/dashboard/bg-complete-account-setup.svg')"] p {
    display: none !important;
  }

  [style*="background-image: url('/static/images/dashboard/bg-complete-account-setup.svg')"] {
    min-height: 160px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 1.5rem !important;
    position: relative !important;
  }

  [style*="background-image: url('/static/images/dashboard/bg-complete-account-setup.svg')"] button {
    margin: 0 !important;
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 1.5rem !important;
    width: auto !important;
    max-width: 140px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    height: auto !important;
    min-height: 40px !important;
  }

  /* ENABLE VERTICAL SCROLLING */
  main {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .main-1content {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* MEET OSCAR KNOWLEDGE SECTION - IMPROVED MOBILE DESIGN */
  .bg-white.rounded-2xl.h-full.shadow-sm.border.border-gray-100.flex.flex-col.overflow-hidden {
    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 80px !important; /* Space for floating button */
  }

  .flex-1.min-h-0.overflow-hidden {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* MOBILE CARDS VIEW - COMPACT AND BEAUTIFUL */
  .lg\:hidden.h-full.overflow-y-auto.p-4.space-y-4 {
    display: block !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 1rem !important;
    space-y: 0.75rem !important;
  }

  /* HIDE DESKTOP TABLE */
  .hidden.lg\:block.h-full.overflow-y-auto.overflow-x-hidden {
    display: none !important;
  }

  /* IMPROVED FILE CARDS STYLING - COMPACT DESIGN */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 {
    margin-bottom: 0.75rem !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    border-color: #d1d5db !important;
  }

  /* COMPACT FILE CARD HEADER */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .flex.items-start.gap-3.mb-3 {
    margin-bottom: 0.75rem !important;
    gap: 0.75rem !important;
  }

  /* REMOVE THREE DOT MENU BUTTON */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .p-2.rounded-lg.hover\:bg-gray-200 {
    display: none !important;
  }

  /* ADJUST HEADER WITHOUT THREE DOT BUTTON */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .flex.items-start.gap-3.mb-3 {
    justify-content: flex-start !important;
  }

  /* FILE TYPE BADGE - SMALLER */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .w-12.h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 8px !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .text-xs.font-bold {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
  }

  /* FILE NAME AND SIZE - COMPACT */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 h3 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .text-sm.text-gray-500 {
    font-size: 0.75rem !important;
  }

  /* FILE DETAILS SECTION - MORE COMPACT */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .space-y-2.mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .space-y-2 > div {
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0 !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .space-y-2 .text-sm {
    font-size: 0.8rem !important;
  }

  /* STATUS BADGE - SMALLER */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .inline-flex.px-2.py-1.rounded-full {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
  }

  /* ACTION BUTTONS - COMPACT ROW */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .flex.items-center.gap-2.pt-3.border-t {
    padding-top: 0.75rem !important;
    gap: 0.5rem !important;
    border-top: 1px solid #f3f4f6 !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .flex-1.bg-white.border {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
  }

  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .px-4.py-2.rounded-lg.border {
    padding: 0.5rem !important;
    min-height: 36px !important;
    min-width: 36px !important;
  }

  /* ACTIONS ICONS - SMALLER */
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200 .w-4.h-4 {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* EMPTY STATE */
  .flex-1.flex.flex-col.items-center.justify-center.text-gray-500.p-6 {
    padding: 2rem 1rem !important;
    text-align: center !important;
    min-height: 150px !important;
  }

  .flex-1.flex.flex-col.items-center.justify-center.text-gray-500.p-6 svg {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 1rem !important;
  }

  .flex-1.flex.flex-col.items-center.justify-center.text-gray-500.p-6 p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
  }

  /* FLOATING ACTION BUTTON */
  .fixed.bottom-6.right-6 {
    display: flex !important;
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 1000 !important;
    background-color: #3b82f6 !important;
    color: white !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }

  .fixed.bottom-6.right-6:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
  }

  /* UPLOAD BUTTON IN HEADER - REMOVE */
  #uploadFilesBtn {
    display: none !important;
  }

  /* TYPOGRAPHY ADJUSTMENTS */
  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  .text-xl {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }

  .text-lg {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .text-sm {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .text-xs {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* PROFILE IMAGE SIZING */
  .w-16.h-16 {
    width: 4rem !important;
    height: 4rem !important;
  }

  .w-14.h-14 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  /* BUTTON IMPROVEMENTS */
  .default-button {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* FORM IMPROVEMENTS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ACCESSIBILITY */
  button, a {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* SCROLLING */
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch !important;
  }

  /* SAFE AREAS */
  .mobile-menu-btn {
    top: env(safe-area-inset-top, 16px) !important;
    left: env(safe-area-inset-left, 16px) !important;
  }

  .main-1content {
    padding-top: calc(60px + env(safe-area-inset-top, 16px)) !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .fixed.bottom-6.right-6 {
    bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    right: max(1.5rem, env(safe-area-inset-right)) !important;
  }

  /* FORCE ELEMENTS TO STAY WITHIN BOUNDS */
  .main *,
  .main-1content *,
  main * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   3. TABLET STYLES (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-header {
    display: none !important;
  }

  .header {
    display: flex !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a:last-child {
    grid-column: 1 / -1 !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  .hidden.lg\:block {
    display: block !important;
  }

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

  main {
    padding: 1.5rem !important;
  }

  .main-1content {
    padding: 1.5rem !important;
    padding-top: 1.5rem !important;
  }
}

/* ============================================
   4. DESKTOP STYLES (≥1024px)
   ============================================ */
@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }

  .hidden.lg\:block {
    display: block !important;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .xl\:grid-cols-\[3fr_1fr\] {
    grid-template-columns: 3fr 1fr !important;
  }

  .md\:pl-\[80px\] {
    padding-left: 80px !important;
  }

  /* Restore desktop styling for action items */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a {
    flex-direction: row !important;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 1rem !important;
    min-height: auto !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a .flex.items-start.justify-between {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a .ml-3 {
    display: block !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a h3 {
    font-size: 1rem !important;
    text-align: left !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a p {
    font-size: 0.875rem !important;
    text-align: left !important;
  }
}

/* ============================================
   5. ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .bg-gray-50.rounded-xl.p-4.border.border-gray-200,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a {
    animation: fadeInUp 0.3s ease-out forwards;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a:nth-child(1) {
    animation-delay: 0ms;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a:nth-child(2) {
    animation-delay: 100ms;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 > a:nth-child(3) {
    animation-delay: 200ms;
  }

  .touch-target:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ============================================
   6. GENERAL IMPROVEMENTS
   ============================================ */
.transition-all {
  transition: all 0.2s ease;
}

.transition-colors {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.transition-transform {
  transition: transform 0.15s ease-in-out;
}

/* File type styling */
.file-type-badge {
  transition: all 0.2s ease;
}

.file-type-badge:hover {
  transform: scale(1.05);
}

@media (max-width: 1023px) {
  .file-type-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
  }

  .file-type-text {
    font-size: 0.75rem;
    font-weight: 700;
  }
}

/* File type colors */
.file-type-badge[data-filename*=".pdf"] .file-type-text {
  color: #dc2626;
}

.file-type-badge[data-filename*=".doc"] .file-type-text,
.file-type-badge[data-filename*=".docx"] .file-type-text {
  color: #2563eb;
}

.file-type-badge[data-filename*=".xls"] .file-type-text,
.file-type-badge[data-filename*=".xlsx"] .file-type-text {
  color: #059669;
}

.file-type-badge[data-filename*=".txt"] .file-type-text {
  color: #6b7280;
}