/*
 * Mobile layer for the joomlaNestle pages. The original Joomla site was
 * desktop-only; these media queries adapt the ported modules for phones
 * WITHOUT touching the desktop rendering (which stays 1:1 with the original —
 * modules.css/vacations.css/files.css are not modified).
 *
 * Selectors are prefixed with `body` so they out-rank the module stylesheets
 * regardless of load order (vacations.css/files.css are linked from inside
 * the page body, after this file).
 */

/* ---------- Header: let the auth link wrap under the menu ---------- */
/* Cassiopeia's .container-below-top is flex-nowrap; on phones the «Войти» /
   logout block otherwise sticks out past the right edge of the screen. */
@media (max-width: 700px) {
  body .container-below-top { flex-wrap: wrap; }
  body .container-below-top .auth-status { margin-left: 0; }
}

/* ---------- Employee cards: 3 fixed columns -> 2 on narrow screens ---------- */
@media (max-width: 900px) {
  body .mod-employees-item { width: calc(50% - 0.5rem); }
}

/* ---------- Employee filter: wrap instead of squeezing into one row ---------- */
@media (max-width: 700px) {
  body .mod-employees-filter-form { flex-wrap: wrap; }
  body .mod-employees-filter-form input[type="text"] { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Employee add-modal: never taller than the phone screen ---------- */
@media (max-width: 700px) {
  body #modal { max-height: 92dvh; overflow-y: auto; }
}

/* ---------- Vacations: the modal must fit the phone viewport ---------- */
/* (Desktop keeps shrink-to-fit + max-width:400px from vacations.css.) */
@media (max-width: 480px) {
  body .nestle-vacations-module .vac-modal {
    width: calc(100vw - 2rem);
    max-width: 400px;
  }
}

/* ---------- Vacations: denser staff grid on phones ---------- */
@media (max-width: 560px) {
  body .nestle-vacations-module .vac-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}