/* Zov Integration — mobile / fluid overrides (keeps desktop look) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body,
#root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Prefer dynamic viewport height over classic 100vh on phones */
@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
  }
  .min-h-screen {
    min-height: 100dvh;
  }
}

img,
svg,
video,
canvas {
  max-width: 100%;
}
iframe {
  max-width: 100%;
}

/* Touch-friendly controls */
button,
[role="button"],
a.button,
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}

/* Forms: avoid iOS zoom + comfortable tap targets */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"] {
    min-height: 44px;
  }
  select {
    min-height: 44px;
  }
  textarea {
    min-height: 96px;
  }
}

/* Login */
@media (max-width: 480px) {
  .max-w-\[400px\] {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  .rounded-2xl.border.p-8 {
    padding: 1.25rem !important;
    margin-left: 0;
    margin-right: 0;
  }
  .min-h-screen {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .zovenok-button,
  .zovenok-button.secondary {
    min-height: 44px;
    width: 100%;
  }
}

/* App shell: content gutters */
@media (max-width: 767px) {
  main .flex-1.overflow-auto > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }
  /* Page shells */
  .max-w-6xl,
  .max-w-7xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* Typography hierarchy */
  h1,
  .text-xl.font-semibold,
  .text-2xl {
    font-size: clamp(1.15rem, 4.6vw, 1.35rem) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }
  h2,
  .text-base.font-semibold {
    font-size: clamp(1rem, 4vw, 1.125rem) !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem) !important;
  }
  p,
  .text-sm {
    overflow-wrap: break-word;
  }
  /* Dense KPI / card grids → 1–2 columns */
  .grid.grid-cols-2.md\:grid-cols-3,
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.md\:grid-cols-5,
  .grid.grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.xl\:grid-cols-7,
  .grid.grid-cols-2.xl\:grid-cols-8,
  .grid.grid-cols-2.md\:grid-cols-4.xl\:grid-cols-8,
  .grid.grid-cols-2.md\:grid-cols-3.xl\:grid-cols-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.625rem !important;
  }
  .grid.grid-cols-3:not(.sm\:grid-cols-3):not(.md\:grid-cols-3),
  .grid.grid-cols-4:not(.md\:grid-cols-4),
  .grid.grid-cols-5,
  .grid.grid-cols-7,
  .grid.grid-cols-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Filter toolbars */
  .flex.flex-wrap.items-end,
  .flex.flex-wrap.items-center,
  .flex.flex-col.sm\:flex-row,
  .flex.flex-col.md\:flex-row {
    gap: 0.625rem !important;
  }
  /* Buttons / chips */
  button.h-9,
  button.h-10,
  .h-9.px-3,
  .h-10.px-3,
  .h-10.px-4 {
    min-height: 44px;
  }
  /* Tables: scroll locally, never the page */
  .overflow-x-auto,
  .relative.w-full.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }
  table {
    max-width: none;
  }
  table.min-w-\[920px\],
  .min-w-\[920px\] {
    min-width: 720px !important;
  }
  .min-w-\[520px\] {
    min-width: 100% !important;
  }
  .min-w-\[720px\] {
    min-width: 100% !important;
  }
  .min-w-\[200px\],
  .min-w-\[180px\],
  .min-w-\[160px\],
  .min-w-\[140px\],
  .min-w-\[132px\] {
    min-width: 0 !important;
  }
  /* Fixed desktop widths */
  .w-\[720px\],
  .w-\[400px\],
  .w-\[320px\],
  .w-\[220px\],
  .w-\[200px\],
  .w-\[140px\] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Modals / dialogs */
  [role="dialog"] > div,
  [aria-modal="true"] > div {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(85dvh, calc(100vh - 24px)) !important;
    margin: 0 auto;
  }
  /* Sticky header safe area */
  aside.fixed,
  aside.h-full {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Long unbroken strings */
  .truncate {
    max-width: 100%;
  }
  .whitespace-nowrap {
    max-width: 100%;
  }
  /* Toast / notice */
  .zovenok-notice {
    left: 12px !important;
    right: 12px !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    max-width: none !important;
  }
  /* Footer of shell */
  footer.py-3 {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Very small phones */
@media (max-width: 359px) {
  .grid.grid-cols-2,
  .grid.grid-cols-2.md\:grid-cols-3,
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.md\:grid-cols-5,
  .grid.grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.xl\:grid-cols-7,
  .grid.grid-cols-2.xl\:grid-cols-8 {
    grid-template-columns: 1fr !important;
  }
  main .flex-1.overflow-auto > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  main .flex-1.overflow-auto > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .grid.xl\:grid-cols-7,
  .grid.xl\:grid-cols-8 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Date-range popover & wide panels: never exceed viewport */
@media (max-width: 640px) {
  div[style*="min-width: 560px"],
  div[style*="minWidth: 560"],
  div[style*="min-width:560px"] {
    min-width: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    flex-direction: column !important;
  }
}

/* Audio fallback link spacing */
.audio-fallback {
  word-break: break-all;
}

/* Filter / toolbar rows: children can shrink */
@media (max-width: 767px) {
  .flex.flex-wrap > *,
  .flex.flex-wrap.items-end > *,
  .flex.flex-wrap.items-center > * {
    max-width: 100%;
  }
  label.text-sm,
  label.text-sm > input,
  label.text-sm > select {
    width: 100%;
    display: block;
  }
  label.text-sm > input,
  label.text-sm > select {
    margin-top: 0.35rem;
  }
  /* Full-width primary actions in stacked toolbars */
  .shot-actions .btn,
  .flex.gap-2 > button.h-10,
  .flex.gap-3 > button.h-10 {
    flex: 1 1 auto;
  }
  /* Cards / bordered panels */
  .border.p-4,
  .border.p-3,
  .rounded-xl.border,
  .rounded-lg.border {
    max-width: 100%;
  }
  /* Prevent page-level table spill */
  .flex-1.overflow-auto {
    overflow-x: hidden;
  }
  .flex-1.overflow-auto .overflow-x-auto {
    overflow-x: auto;
  }
}

/* Desktop unchanged: only tighten intermediate tablet grids */
@media (min-width: 768px) and (max-width: 1279px) {
  .grid.xl\:grid-cols-7.gap-3,
  .grid.xl\:grid-cols-8.gap-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Classes injected in bundle after original Tailwind build */
@media (min-width: 640px) {
  .sm\:min-w-\[520px\] { min-width: 520px; }
  .sm\:min-w-\[720px\] { min-width: 720px; }
}