/* polish-responsive: small-screen layer (1024x720, 820 tablet, 375-600 phone). */

/* Global safety: no page-level horizontal scroll; media never overflows. */
html, body { max-width: 100%; }
html { overflow-x: hidden; }
body { overflow-x: clip; } /* clip does not create a scroll container, so sticky/fixed descendants keep working */
img, svg, video, canvas { max-width: 100%; }
.app-main, .plan-root, .plan-main { min-width: 0; }
.plan-root .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Small laptop 1024x720 and below: tighter paddings, wrapping toolbars. */
@media (max-width: 1100px) {
  .schedule-editor { width: 100%; }
  .plan-root .scroll > header { flex-wrap: wrap; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .modal-back > .modal:not(.subpanel) { max-height: calc(100dvh - 24px); }
  .modal-back { padding: 12px; }
  .schedule-overlay { padding: 12px 20px; }
  .schedule-editor { max-height: calc(100dvh - 24px); }
}

/* Tablet <=900 (820): bottom rail, touch targets, safe areas. */
@media (max-width: 900px) {
  .app-main { margin-left: 0; padding-bottom: env(safe-area-inset-bottom, 0); }
  .rail {
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .rail a { min-width: 44px; min-height: 44px; }
  .btn, .pill, .admin-tabs button, .insights-tabs button, .plan-switch-button { min-height: 40px; }
  .btn-sm { min-height: 40px; padding-left: 12px; padding-right: 12px; }
  .btn-x { min-width: 40px; min-height: 40px; }
  input, select, textarea { min-height: 40px; font-size: 16px; } /* 16px prevents iOS zoom */
  .insights-tabs { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .insights-tabs::-webkit-scrollbar { display: none; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }
  .save-error { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* Timesheet: first column (st-fio) stays pinned inside .scroll. Thead stickiness, z-index and
     backgrounds come from planning-mvp.css / style.css; only make sure position+left survive here. */
  .plan-root table.tabel { border-collapse: separate; border-spacing: 0; }
  .plan-root table.tabel th.st-fio, .plan-root table.tabel td.st-fio { position: sticky; left: 0; }
  .plan-root table.tabel tbody td.st-fio { box-shadow: 1px 0 0 #e1e8ec; }
  .plan-root table.tabel tr.substitution-parent td.st-fio,
  .plan-root table.tabel tr.substitution-child td.st-fio { box-shadow: inset 3px 0 #7d8dc0, 1px 0 0 #e1e8ec; }
  /* Full-width tables scroll only inside their own wrapper. */
  .modal-body, .admin-page { max-width: 100%; }
  .modal-body .ntable { min-width: 480px; }
  .modal-body:has(.ntable:not(.pob-table)) { overflow-x: auto; }
}

/* Phone <=600: full-screen dialogs, view-only friendly. */
@media (max-width: 600px) {
  .modal-back { padding: 0; align-items: stretch; }
  .modal-back > .modal:not(.subpanel),
  .modal-back > .modal.modal-wide,
  .modal-back > .modal.subpanel {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; margin: 0;
  }
  .modal > .modal-head {
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .modal > .modal-body { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .modal-body > .mrow { position: sticky; bottom: 0; margin-bottom: -16px; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .modal-body .ntable { min-width: 420px; }
  .modal-body .pob-table { min-width: 0; }

  .schedule-overlay { padding: 0 0 56px; align-items: stretch; }
  .schedule-editor { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .schedule-heading { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); }
  .schedule-all { padding: 10px 16px; }

  .card { padding: 14px; border-radius: 14px; }
  .admin-page { padding: 14px max(12px, env(safe-area-inset-left, 0px)); }

  .tablewrap { margin-left: 0; margin-right: 0; border-radius: 0; }
  .plan-root table.tabel td.day, .plan-root table.tabel th.day-h { min-width: 36px; }
  .plan-root .plan-menu, .plan-root .plan-object-menu { max-width: calc(100vw - 16px); }
  .plan-root .plan-zoom-range { min-height: 40px; }
  .btn, .pill { min-height: 44px; }
}

/* Very narrow phones (<=380). */
@media (max-width: 380px) {
  .admin-tabs button, .insights-tabs button { padding: 12px 10px; font-size: 12px; }
}

/* Touch devices: no hover-only affordances, larger hit areas. */
@media (hover: none) and (pointer: coarse) {
  .btn, .pill, .rail a, .btn-x, .admin-tabs button, .insights-tabs button { min-height: 44px; }
  .btn-x { min-width: 44px; }
}

/* Landscape phones: keep dialogs reachable. */
@media (max-height: 480px) and (orientation: landscape) {
  .rail { height: 48px; }
  .modal-back > .modal:not(.subpanel) { max-height: 100dvh; }
}