/* ==========================================================================
   BioTrack Pro — Responsive
   Layouts are REDESIGNED per breakpoint, not scaled down.
   Load order: this file is last, so it may override earlier rules.
   ========================================================================== */

/* ==========================================================================
   ≤ 1439px — Laptop
   ========================================================================== */

@media (max-width: 1439px) {
  .entry-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .billing-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ==========================================================================
   ≤ 1279px — Small laptop: dashboard drops to a 6-column rhythm
   ========================================================================== */

@media (max-width: 1279px) {
  .dash-col-8 { grid-column: span 12; }
  .dash-col-4 { grid-column: span 6; }
  .dash-col-6 { grid-column: span 6; }
}

/* ==========================================================================
   ≤ 1023px — Tablet
   Sidebar becomes an icon rail; side panels stack below content.
   ========================================================================== */

@media (max-width: 1023px) {
  .app {
    grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr);
  }

  /* Rail behaviour matches the collapsed desktop state. */
  .app .sidebar__brand-text,
  .app .sidebar__link-label,
  .app .sidebar__section,
  .app .sidebar__collapse span,
  .app .sidebar__badge {
    display: none;
  }

  .app .sidebar__brand,
  .app .sidebar__link,
  .app .sidebar__collapse {
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .app .sidebar__link.is-active::before { left: 0; }

  .app .sidebar__link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + var(--space-3));
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-900);
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    z-index: var(--z-tooltip);
    pointer-events: none;
    box-shadow: var(--shadow-md);
  }

  /* The desktop collapse toggle is meaningless at rail width. */
  .sidebar__footer { display: none; }

  .entry-layout,
  .billing-layout,
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-aside,
  .cart-aside,
  .settings-nav {
    position: static;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar { display: none; }

  .settings-nav__item { white-space: nowrap; flex-shrink: 0; width: auto; }

  .header__clock { display: none; }
}

/* ==========================================================================
   ≤ 767px — Mobile
   Sidebar becomes an off-canvas drawer. Tables become cards.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --page-gutter: var(--space-4);
    --header-height: 56px;
  }

  .app,
  .app[data-sidebar="collapsed"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- Drawer sidebar --- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out);
    box-shadow: var(--shadow-xl);
    z-index: calc(var(--z-drawer) + 1);
  }

  .app[data-drawer="open"] .sidebar { transform: translateX(0); }

  /* Inside the drawer, always show full labels. */
  .app .sidebar__brand-text,
  .app .sidebar__link-label,
  .app .sidebar__section {
    display: block;
  }

  .app .sidebar__badge { display: grid; }

  .app .sidebar__brand,
  .app .sidebar__link {
    justify-content: flex-start;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .app .sidebar__link[data-tooltip]:hover::after { display: none; content: none; }

  .sidebar__footer { display: none; }

  .main { grid-column: 1; }

  /* --- Header --- */
  .header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .header__menu-btn { display: inline-flex; }

  .header__search { display: none; }

  .header__titles .breadcrumb { display: none; }

  .header__title { font-size: var(--text-md); }

  .profile-btn__meta { display: none; }

  .profile-btn { padding: var(--space-1); }

  /* --- Page --- */
  .view { padding: var(--space-4) var(--page-gutter) var(--space-16); }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .page-header__title { font-size: var(--text-xl); }

  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1 1 auto; }

  /* --- Dashboard --- */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

  .stat { padding: var(--space-3); gap: var(--space-2); }
  .stat__value { font-size: var(--text-2xl); }
  .stat__icon { width: 28px; height: 28px; }
  .stat__icon .icon { width: 15px; height: 15px; }

  .dash-col-4,
  .dash-col-6,
  .dash-col-8,
  .dash-col-12 { grid-column: span 12; }

  .dash-grid { gap: var(--space-3); }

  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Cards --- */
  .card__header { padding: var(--space-3) var(--space-4); }
  .card__body { padding: var(--space-4); }
  .card__footer { padding: var(--space-3) var(--space-4); }

  /* --- Forms --- */
  .form-grid,
  .form-grid--2,
  .form-grid--3,
  .form-grid--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .form-grid .span-2,
  .form-grid .span-3 { grid-column: span 1; }

  .age-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Touch targets */
  .input,
  .select,
  .ss__control,
  .search-input input,
  .btn { min-height: 44px; }

  .btn--sm { min-height: 36px; }

  .icon-btn { width: 44px; height: 44px; }
  .icon-btn--sm { width: 36px; height: 36px; }

  .segmented__opt span { height: 44px; min-width: 68px; }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn { width: 100%; }

  .form-actions--sticky {
    margin: var(--space-4) calc(var(--page-gutter) * -1) calc(var(--page-gutter) * -1);
    border-radius: 0;
    padding: var(--space-3) var(--page-gutter);
  }

  /* --- Tables → cards --- */
  .table-toolbar {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .table-toolbar__search {
    flex: 1 1 100%;
    max-width: none;
  }

  .table-toolbar__filters { width: 100%; }
  .table-toolbar__filters .select,
  .table-toolbar__filters .ss { flex: 1 1 140px; min-width: 0; }

  .pagination {
    padding: var(--space-3);
    justify-content: center;
    gap: var(--space-2);
  }

  .pagination__info { width: 100%; text-align: center; order: 3; }
  .pagination__size { display: none; }
  .pagination__btn { min-width: 36px; height: 36px; }

  /* --- Modals become sheets --- */
  .modal__wrap { padding: 0; align-items: flex-end; }

  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin: 0;
    animation: sheet-in var(--duration-base) var(--ease-out);
  }

  @keyframes sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .modal__header { padding: var(--space-4); }
  .modal__body { padding: var(--space-4); }

  .modal__footer {
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal__footer .btn { width: 100%; }
  .modal__footer--between { flex-direction: column-reverse; }

  /* --- Toasts --- */
  .toast-root {
    top: auto;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }

  .toast { animation: toast-in-mobile var(--duration-base) var(--ease-out); }

  @keyframes toast-in-mobile {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* --- Global search palette --- */
  .palette {
    margin: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    max-width: none;
  }

  .palette__footer { display: none; }

  /* --- Detail pages --- */
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .dl dt { margin-bottom: -2px; }

  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .patient-hero { gap: var(--space-3); }
  .patient-hero__name { font-size: var(--text-lg); }

  /* --- Side panel becomes a full sheet --- */
  .side-panel { width: 100vw; }

  /* --- Timeline --- */
  .timeline { padding-left: var(--space-5); }
  .timeline::before { left: 10px; }
  .timeline__marker { left: calc(var(--space-5) * -1); width: 22px; height: 22px; }

  /* --- Lab tiles --- */
  .lab-split { grid-template-columns: minmax(0, 1fr); }

  /* --- Storage banner --- */
  .storage-banner {
    padding: var(--space-2) var(--page-gutter);
    font-size: var(--text-xs);
    align-items: flex-start;
  }
}

/* ==========================================================================
   ≤ 479px — Small phone
   ========================================================================== */

@media (max-width: 479px) {
  :root { --page-gutter: var(--space-3); }

  .stat-grid { grid-template-columns: minmax(0, 1fr); }

  .quick-actions { grid-template-columns: minmax(0, 1fr); }

  .info-grid { grid-template-columns: minmax(0, 1fr); }

  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .login__accounts { grid-template-columns: minmax(0, 1fr); }

  .table-card__fields { grid-template-columns: minmax(0, 1fr); }

  .page-header__actions { flex-direction: column; }
  .page-header__actions .btn { width: 100%; }

  .header__actions { gap: var(--space-1); }

  .tabs { gap: 0; }
  .tab { padding: var(--space-3) var(--space-3); font-size: var(--text-sm); }
}

/* ==========================================================================
   Landscape phone — reclaim vertical space
   ========================================================================== */

@media (max-height: 480px) and (orientation: landscape) {
  .modal { max-height: 96vh; }
  .modal__wrap { align-items: center; padding: var(--space-2); }
  .modal { border-radius: var(--radius-lg); }
}

/* ==========================================================================
   Wide screens — cap line length, widen gutters
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --page-gutter: var(--space-8); }
}