/* ============================================
   GASTRO BOT - RESPONSIVE & MOBILE STYLES
   Global responsive design system
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES FOR RESPONSIVE DESIGN
   ============================================ */
:root {
  /* Dynamic spacing that adjusts to screen size */
  --kf-space-dynamic-xs: clamp(0.25rem, 1vw, 0.5rem);
  --kf-space-dynamic-sm: clamp(0.5rem, 2vw, 0.75rem);
  --kf-space-dynamic-md: clamp(0.75rem, 3vw, 1rem);
  --kf-space-dynamic-lg: clamp(1rem, 4vw, 1.5rem);
  --kf-space-dynamic-xl: clamp(1.5rem, 5vw, 2rem);

  /* Dynamic font sizes */
  --kf-font-size-dynamic-sm: clamp(0.75rem, 2vw, 0.875rem);
  --kf-font-size-dynamic-base: clamp(0.875rem, 2.5vw, 1rem);
  --kf-font-size-dynamic-lg: clamp(1rem, 3vw, 1.125rem);
  --kf-font-size-dynamic-xl: clamp(1.25rem, 4vw, 1.75rem);
  --kf-font-size-dynamic-2xl: clamp(1.5rem, 5vw, 2rem);
  --kf-font-size-dynamic-3xl: clamp(1.75rem, 6vw, 2.5rem);

  /* Touch target size (minimum 44px for accessibility) */
  --kf-touch-target: 44px;

  /* Content max width */
  --kf-content-max-width: 1400px;
}

/* ============================================
   BASE MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent horizontal scroll on mobile */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Improve touch behavior */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Better text rendering on mobile */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Headings scale down on mobile */
h1 {
  font-size: var(--kf-font-size-dynamic-3xl);
  line-height: 1.2;
}

h2 {
  font-size: var(--kf-font-size-dynamic-2xl);
  line-height: 1.25;
}

h3 {
  font-size: var(--kf-font-size-dynamic-xl);
  line-height: 1.3;
}

h4 {
  font-size: var(--kf-font-size-dynamic-lg);
  line-height: 1.35;
}

/* ============================================
   RESPONSIVE BUTTONS
   ============================================ */

/* All interactive elements should be touch-friendly */
button,
.btn,
.btn-kf-primary,
.btn-kf-outline,
.icon-button,
a[role="button"],
[type="button"],
[type="submit"],
[type="reset"] {
  min-height: var(--kf-touch-target);
}

/* Button full-width on mobile when needed */
@media (max-width: 479px) {
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }

  /* Make button groups stack on very small screens */
  .btn-group-responsive {
    flex-direction: column;
    gap: var(--kf-space-xs);
  }

  .btn-group-responsive > * {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

/* Form inputs should be comfortable to tap */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  min-height: var(--kf-touch-target);
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Form layout adjustments for mobile */
@media (max-width: 767px) {
  .form-row,
  .form-group-row {
    flex-direction: column !important;
    gap: var(--kf-space-sm);
  }

  .form-row > *,
  .form-group-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Labels above inputs on mobile */
  .form-label-inline {
    flex-direction: column;
    align-items: flex-start !important;
  }
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

/* Tables become scrollable on mobile */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Card-style tables on mobile */
@media (max-width: 767px) {
  .table-mobile-cards {
    display: block;
  }

  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards tbody {
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-sm);
  }

  .table-mobile-cards tr {
    display: block;
    background: var(--kf-color-surface);
    border-radius: var(--kf-radius-md);
    padding: var(--kf-space-md);
    box-shadow: var(--kf-shadow-sm);
  }

  .table-mobile-cards td {
    display: flex;
    justify-content: space-between;
    padding: var(--kf-space-xs) 0;
    border-bottom: 1px solid var(--kf-color-border);
  }

  .table-mobile-cards td:last-child {
    border-bottom: none;
  }

  .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--kf-color-text-muted);
  }
}

/* ============================================
   RESPONSIVE MODALS & DIALOGS
   ============================================ */

@media (max-width: 767px) {
  .modal-responsive {
    max-width: calc(100vw - var(--kf-space-md) * 2) !important;
    margin: var(--kf-space-md);
  }

  /* Full-screen modals on mobile */
  .modal-fullscreen-mobile {
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .modal-fullscreen-mobile .modal-content {
    border-radius: 0;
    min-height: 100dvh;
  }

  /* Bottom sheet style modals */
  .modal-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: var(--kf-radius-lg) var(--kf-radius-lg) 0 0 !important;
    animation: slideUpModal 0.3s ease-out;
  }

  @keyframes slideUpModal {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* ============================================
   RESPONSIVE NAVIGATION
   ============================================ */

/* Bottom navigation bar for mobile */
.mobile-nav-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--kf-color-surface);
  border-top: 1px solid var(--kf-color-border);
  padding: var(--kf-space-xs) var(--kf-space-sm);
  padding-bottom: calc(var(--kf-space-xs) + env(safe-area-inset-bottom));
  z-index: 900;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.mobile-nav-bottom__items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mobile-nav-bottom__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--kf-space-xs);
  color: var(--kf-color-text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  transition: color var(--kf-transition-base);
  min-width: 60px;
}

.mobile-nav-bottom__item i {
  font-size: 1.25rem;
}

.mobile-nav-bottom__item.active,
.mobile-nav-bottom__item:hover {
  color: var(--kf-color-primary);
}

@media (max-width: 767px) {
  .mobile-nav-bottom {
    display: block;
  }

  /* Add padding to main content to account for bottom nav */
  .has-mobile-nav {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

@media (max-width: 767px) {
  /* Cards take full width on mobile */
  .card-grid {
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-md);
  }

  .card-grid > * {
    width: 100%;
  }

  /* Reduce card padding on mobile */
  .card,
  .card-kf,
  .surface {
    padding: var(--kf-space-md);
    border-radius: var(--kf-radius-md);
  }

  /* Stack card actions vertically */
  .card-actions-responsive {
    flex-direction: column;
    gap: var(--kf-space-xs);
  }

  .card-actions-responsive > * {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE LISTS
   ============================================ */

/* Compact list items on mobile */
@media (max-width: 767px) {
  .list-responsive .list-item {
    padding: var(--kf-space-md);
  }

  /* Stack list item content */
  .list-item-content-stack {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--kf-space-xs);
  }

  .list-item-content-stack > * {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE GRIDS
   ============================================ */

/* Auto-responsive grid */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--kf-space-md);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--kf-space-md);
}

/* Responsive grid with explicit breakpoints */
.grid-responsive {
  display: grid;
  gap: var(--kf-space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid-responsive {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   RESPONSIVE CONVERSATION VIEW
   ============================================ */

@media (max-width: 991px) {
  /* Conversation takes full width on tablet */
  .conversation-panel {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* Message bubbles */
  .message-bubble {
    max-width: 90%;
    padding: var(--kf-space-sm) var(--kf-space-md);
  }

  /* Compact message header */
  .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kf-space-2xs);
  }

  /* Stack action buttons */
  .message-actions {
    flex-wrap: wrap;
    gap: var(--kf-space-xs);
  }

  /* Suggestion cards stack */
  .suggestion-cards-grid {
    flex-direction: column;
  }

  .suggestion-card {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE PAGE LAYOUTS
   ============================================ */

/* Two-column layout that stacks on mobile */
.layout-two-col {
  display: grid;
  gap: var(--kf-space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .layout-two-col {
    grid-template-columns: 1fr 1fr;
  }

  .layout-two-col--sidebar {
    grid-template-columns: 320px 1fr;
  }

  .layout-two-col--sidebar-right {
    grid-template-columns: 1fr 320px;
  }
}

/* Three-column layout */
.layout-three-col {
  display: grid;
  gap: var(--kf-space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .layout-three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .layout-three-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   RESPONSIVE PAGE HEADER
   ============================================ */

.page-header-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--kf-space-md);
  margin-bottom: var(--kf-space-lg);
}

.page-header-responsive h1,
.page-header-responsive h2 {
  margin: 0;
}

@media (min-width: 768px) {
  .page-header-responsive {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .page-header-responsive .page-actions {
    display: flex;
    flex-direction: column;
    gap: var(--kf-space-xs);
  }

  .page-header-responsive .page-actions > * {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE TABS
   ============================================ */

/* Horizontal scroll tabs on mobile */
.tabs-responsive {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--kf-space-xs);
  padding-bottom: var(--kf-space-xs);
}

.tabs-responsive::-webkit-scrollbar {
  display: none;
}

.tabs-responsive .tab {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .tabs-responsive .tab {
    padding: var(--kf-space-sm) var(--kf-space-md);
    font-size: var(--kf-font-size-sm);
  }
}

/* ============================================
   RESPONSIVE METRICS / STATS
   ============================================ */

.metrics-grid {
  display: grid;
  gap: var(--kf-space-md);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 479px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Metric card responsive */
.metric-card-responsive {
  padding: var(--kf-space-md);
  text-align: center;
}

@media (max-width: 767px) {
  .metric-card-responsive {
    padding: var(--kf-space-sm);
  }

  .metric-card-responsive .metric-value {
    font-size: 1.5rem;
  }

  .metric-card-responsive .metric-label {
    font-size: var(--kf-font-size-sm);
  }
}

/* ============================================
   PULL-TO-REFRESH INDICATOR
   ============================================ */

.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: var(--kf-space-sm) var(--kf-space-md);
  background: var(--kf-color-surface);
  border-radius: 0 0 var(--kf-radius-md) var(--kf-radius-md);
  box-shadow: var(--kf-shadow-sm);
  z-index: 1000;
  transition: transform 0.3s ease;
}

.pull-to-refresh.active {
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   FLOATING ACTION BUTTON (FAB)
   ============================================ */

.fab {
  position: fixed;
  bottom: calc(var(--kf-space-lg) + env(safe-area-inset-bottom));
  right: var(--kf-space-lg);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kf-color-primary);
  color: var(--kf-color-primary-contrast);
  border: none;
  box-shadow: var(--kf-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 800;
  transition:
    transform var(--kf-transition-base),
    box-shadow var(--kf-transition-base);
}

.fab:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
}

.fab:active {
  transform: scale(0.95);
}

/* Move FAB up when bottom nav is present */
@media (max-width: 767px) {
  .has-mobile-nav .fab {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   SKELETON LOADING STATES
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 58, 14, 0.06) 25%,
    rgba(30, 58, 14, 0.12) 50%,
    rgba(30, 58, 14, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--kf-radius-sm);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 1em;
  margin: 0.5em 0;
}

.skeleton-heading {
  height: 1.5em;
  width: 60%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  height: 120px;
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--kf-space-2xl);
  text-align: center;
  color: var(--kf-color-text-muted);
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--kf-space-md);
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--kf-font-size-lg);
  font-weight: 600;
  margin-bottom: var(--kf-space-xs);
  color: var(--kf-color-text);
}

.empty-state__description {
  max-width: 300px;
  margin-bottom: var(--kf-space-lg);
}

@media (max-width: 767px) {
  .empty-state {
    padding: var(--kf-space-xl);
  }

  .empty-state__icon {
    font-size: 2.5rem;
  }
}

/* ============================================
   ORIENTATION UTILITIES
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
  /* Reduce vertical spacing in landscape on phones */
  .landscape-compact {
    padding-top: var(--kf-space-sm) !important;
    padding-bottom: var(--kf-space-sm) !important;
  }

  .landscape-compact h1,
  .landscape-compact h2 {
    margin-bottom: var(--kf-space-xs);
  }
}

/* ============================================
   SUPERADMIN KPI CARDS RESPONSIVE
   ============================================ */

/* Ensure proper containment for admin pages */
.admin-dark-layout .admin-metrics,
.admin-dark-layout .subscription-analytics,
.admin-dark-layout .health-dashboard {
  overflow-x: hidden;
  max-width: 100%;
}

/* KPI card grid responsive adjustments */
@media (max-width: 959px) {
  .admin-dark-layout .mud-grid-item[class*="md-3"],
  .admin-dark-layout .mud-grid-item[class*="md-4"] {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 599px) {
  .admin-dark-layout .mud-grid-item[class*="sm-6"],
  .admin-dark-layout .mud-grid-item[class*="md-3"],
  .admin-dark-layout .mud-grid-item[class*="md-4"],
  .admin-dark-layout .mud-grid-item[class*="lg-2"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* Reduce padding on mobile KPI cards */
  .admin-dark-layout .mud-paper.pa-4 {
    padding: 0.75rem !important;
  }

  /* Smaller KPI values on mobile */
  .admin-dark-layout .mud-paper .mud-text-h4 {
    font-size: 1.5rem !important;
  }

  /* Reduce MudGrid spacing on mobile */
  .admin-dark-layout .mud-grid {
    margin: -8px !important;
  }

  .admin-dark-layout .mud-grid-item {
    padding: 8px !important;
  }
}

/* ============================================
   DARK MODE SUPPORT (if needed in future)
   ============================================ */

@media (prefers-color-scheme: dark) {
  .auto-dark-mode {
    --kf-color-background: #1a1816;
    --kf-color-surface: #252220;
    --kf-color-surface-alt: #2d2a26;
    --kf-color-border: rgba(255, 255, 255, 0.08);
    --kf-color-text: #f0f4ec;
    --kf-color-text-muted: rgba(240, 244, 236, 0.68);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --kf-color-border: rgba(0, 0, 0, 0.3);
  }

  .btn-kf-primary,
  .btn-kf-outline {
    border-width: 2px;
  }
}