/* ==========================================================================
   AlDerhamy HCAG — Responsive behaviour (desktop / tablet / mobile) + a11y
   ========================================================================== */

/* ---------------- Large desktop refinement ---------------- */
@media (min-width: 1600px) {
  :root { --content-max: 1640px; }
}

/* ---------------- Tablet landscape (<= 1180px) ---------------- */
@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--split, .grid--split-left { grid-template-columns: minmax(0, 1fr); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .topbar__heading { flex: 0 1 220px; }
  .global-search { max-width: 300px; }
  .chip-btn__text { display: none; }
}

/* ---------------- Tablet portrait (<= 1000px) ---------------- */
@media (max-width: 1000px) {
  .app, .app[data-nav-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(315px, 86vw);
    transform: translateX(-102%);
    transition: transform var(--t-slow);
    box-shadow: var(--shadow-lg);
  }
  .app[data-nav-open="true"] .sidebar { transform: none; }
  .app[data-nav-collapsed="true"] .brand__text,
  .app[data-nav-collapsed="true"] .nav-label,
  .app[data-nav-collapsed="true"] .nav-count,
  .app[data-nav-collapsed="true"] .nav-group__label,
  .app[data-nav-collapsed="true"] .sidebar__foot { display: initial; }
  .app[data-nav-collapsed="true"] .sidebar__foot { display: block; }
  .app[data-nav-collapsed="true"] .nav-sub { display: flex; }
  .app[data-nav-collapsed="true"] .nav-link { justify-content: flex-start; padding: 9px var(--sp-3); }
  .sidebar__collapse { display: none; }
  .topbar__menu { display: grid; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Mobile (<= 720px) ---------------- */
@media (max-width: 720px) {
  :root { --fs-2xl: 23px; --fs-xl: 19px; --fs-3xl: 27px; }
  .content { padding: var(--sp-4) var(--sp-3); }
  .topbar { padding: var(--sp-3); gap: var(--sp-2); flex-wrap: wrap; }
  .topbar__heading { order: 1; flex: 1 1 auto; }
  .topbar__title { font-size: var(--fs-md); }
  .global-search { order: 3; flex: 1 1 100%; max-width: none; }
  .topbar__actions { order: 2; gap: var(--sp-1); }
  .profile-btn__meta, .profile-btn .chev { display: none; }
  .profile-btn { padding: 3px; }
  .grid, .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto, .grid--cards { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__inner { padding: var(--sp-5); }
  .card__body, .card__head { padding: var(--sp-4); }
  .overlay-root { padding: 0; align-items: flex-end; }
  .overlay-root--drawer { align-items: stretch; }
  .modal { width: 100%; max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal__foot { border-radius: 0; }
  .drawer, .drawer--lg { width: 100%; }
  .toast-stack { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); max-width: none; }
  .detail-page__head { flex-direction: column; }
  .detail-page__identity { flex-direction: column; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: var(--sp-3); }
  table.data-table { min-width: 520px; }
  .table-toolbar { padding: var(--sp-3); }
  .table-toolbar__search { max-width: none; }
  .menu, .menu--wide { min-width: min(320px, calc(100vw - 24px)); right: auto; left: 0; }
  .app-footer { padding: var(--sp-4) var(--sp-3); }
  .app-footer__right { font-size: 10.8px; }
  .hide-mobile { display: none !important; }
  .stat-inline { gap: var(--sp-4); }
}

/* ---------------- Small mobile (<= 420px) ---------------- */
@media (max-width: 420px) {
  .kpi__value { font-size: var(--fs-xl); }
  .pager button { min-width: 28px; height: 28px; font-size: 11.5px; }
}

/* ---------------- Touch target comfort ---------------- */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .menu__item, .tab { min-height: 44px; }
  .icon-btn { width: 42px; height: 42px; }
}

/* ---------------- High contrast / forced colours ---------------- */
@media (forced-colors: active) {
  .badge, .chip, .btn { border: 1px solid currentColor; }
  .nav-link.is-active { outline: 2px solid; }
}