/* Shared responsive layer for the HRIS demo pages.
   Pages are authored with inline styles, so overrides here need !important. */

img, svg, video, canvas { max-width: 100%; }
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

#hris-nav-toggle { display: none; }
/* tables that were left without a scroll wrapper */
section:has(> [style^="min-width:"]) { overflow-x: auto; }


/* ---- wide cards: shrink their minimum track before they overflow ---- */
@media (max-width: 1100px) {
  [style*="minmax(420px"] { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
  [style*="minmax(320px"] { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
}

/* ---- tablet / phone: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 900px) {
  #hris-nav-toggle {
    display: flex;
    position: fixed;
    top: 15px;
    left: 12px;
    z-index: 70;
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    background: var(--color-bg);
    cursor: pointer;
  }
  #hris-nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--color-text);
  }

  aside {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 65;
    width: 250px !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  body.nav-open aside { transform: none; box-shadow: var(--shadow-lg); }
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(29, 45, 61, .45);
  }

  header { padding: 0 16px 0 60px !important; }
  header button[aria-label="Collapse sidebar"] { display: none !important; }
  main { padding: 18px 16px !important; }
}

/* ---- phone: stack the fixed-column card and form grids ---- */
@media (max-width: 760px) {
  header { height: auto !important; min-height: 68px; padding: 12px 14px 12px 60px !important; flex-wrap: wrap; }
  main { padding: 16px 14px !important; }
  h1 { font-size: 24px !important; }

  header > div { min-width: 0; }
  header > div[style*="margin-left: auto"],
  header > div[style*="margin-left:auto"] { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  header [style*="text-transform: uppercase"],
  header [style*="text-transform:uppercase"] { display: none !important; }
  header [style*="max-width: 32vw"],
  header [style*="max-width:32vw"] { max-width: none !important; width: auto !important; flex: 1 1 130px; }

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 520px) {
  main { padding: 14px 12px !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="minmax(230px"],
  [style*="minmax(250px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"],
  [style*="minmax(420px"] { grid-template-columns: 1fr !important; }
}