/* ============================================================
   SAFENTRA DESIGN SYSTEM — RESPONSIVE
   Desktop ≥ 1200 · Laptop 1024–1199 · Tablet ≤ 1024
   (Tablet = sidebar becomes overlay; phone degrades gracefully)
   ============================================================ */

/* ---------- Large desktop ---------- */
@media (min-width:1600px){
  :root{--page-max:1560px}
}

/* ---------- Laptop ---------- */
@media (max-width:1440px){
  .role-tx{max-width:110px}
}

@media (max-width:1280px){
  .page-wrap{padding:var(--sp-5) var(--sp-6) var(--sp-10)}
  .app-foot{padding-left:var(--sp-6);padding-right:var(--sp-6)}
  .ask-btn .ask-lb{display:none}
  .ask-btn{padding:0 10px}
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .ctx-cols{grid-template-columns:repeat(5,minmax(120px,1fr))}
}

@media (max-width:1199px){
  /* Auto-collapse sidebar to rail on smaller laptops */
  .gsearch{width:min(340px,100%)}
  .hdr{gap:var(--sp-3)}
  .ctxsel{max-width:150px}
}

/* ---------- Tablet (≤ 1024): sidebar overlay ---------- */
@media (max-width:1024px){
  .burger{display:inline-flex}

  .sbar{
    position:fixed;top:var(--header-h);left:0;bottom:0;height:auto;
    transform:translateX(-100%);box-shadow:var(--shadow-xl);
  }
  body.nav-open .sbar{transform:none}
  body.nav-mini .sbar{width:var(--sidebar-w)}           /* rail mode disabled on tablet */
  body.nav-mini .nav-tx,body.nav-mini .nav-caret{display:block}
  body.nav-mini .nav-caret{display:inline-flex}
  body.nav-mini .nav-lnk{justify-content:flex-start;padding:0 10px}
  body.nav-mini .nav-badge{position:static;border:0;min-width:20px;height:18px}
  body.nav-mini .nav-sec{text-align:left;font-size:var(--text-2xs);padding:var(--sp-4) 10px var(--sp-2)}
  body.nav-mini .nav-sec::after{content:""}
  body.nav-mini .cm-tx{display:block}
  body.nav-mini .ctx-mini{justify-content:flex-start;padding:10px}
  body.nav-mini .collapse-btn span{display:inline}
  .collapse-btn{display:none}                            /* collapse irrelevant on overlay */

  .hdr-c{flex:none}
  .gsearch{width:36px;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .gsearch:hover{background:var(--color-hover)}
  .gsearch span,.gsearch kbd{display:none}

  .hdr-ctx{display:none}                                 /* context moves into page header on tablet */
  .role-chip .role-tx{display:none}
  .role-chip{padding:0 8px}

  .dash-grid > .c-4,.dash-grid > .c-6,.dash-grid > .c-8{grid-column:span 12}
  .prf-grid{grid-template-columns:1fr}
  .prf-nav{position:static;display:flex;overflow-x:auto;padding:6px!important}
  .prf-nav .qa-item{white-space:nowrap}
  .form-grid{grid-template-columns:1fr}
  .dash-kpis{grid-template-columns:repeat(2,1fr)}
  .ctx-cols{grid-template-columns:repeat(2,1fr);max-height:420px;overflow:auto}
  .ctx-col{max-height:none;border-bottom:1px solid var(--color-border)}

  .auth-brand{display:none}                              /* brand panel hidden on tablet login */
  .auth-panel{background:
    radial-gradient(700px 300px at 50% -10%,rgba(46,123,246,.12),transparent 60%),var(--color-bg)}
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width:768px){
  .page-wrap{padding:var(--sp-4) var(--sp-4) var(--sp-8)}
  .app-foot{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .hdr{padding:0 var(--sp-3)}
  .page-head{flex-direction:column;align-items:stretch}
  .ph-actions{margin-left:0}
  .ph-title h1{font-size:var(--text-2xl)}
  .drawer,.drawer.lg{width:100vw}
  .modal{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .modal.open{transform:none}
  .modal{transform:translateY(24px);opacity:0}
  .toasts{top:auto;bottom:16px;right:16px}
  .qa-grid{grid-template-columns:repeat(3,1fr)}
  .dt-ft{flex-direction:column;align-items:flex-start;gap:8px}
  .pgn{margin-left:0}
  .auth-foot,.auth-support,.auth-card{max-width:100%}
  .demo-hint{font-size:11px}
  .d-sm-none{display:none!important}
}

/* ---------- Phone ---------- */
@media (max-width:560px){
  .dash-kpis{grid-template-columns:1fr}
  .hdr-div,.hact.hide-sm{display:none}
  .user-chip .uc-name{display:none}
  .dt-tb .btn-s span{display:none}
  .sov-wrap{padding-top:6vh}
  .prf-hero .av-xl{width:52px;height:52px}
}

/* ---------- Print ---------- */
@media print{
  .sbar,.hdr,.app-foot,.drawer,.toasts,.sbar-backdrop{display:none!important}
  .page-wrap{max-width:none;padding:0}
  .card{box-shadow:none}
}

/* Auth panel compact brand (visible only when brand sidebar is hidden) */
.ap-brand{display:none}
@media (max-width:1024px){
  .ap-brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--sp-6)}
  .ap-brand img{width:34px;height:34px}
  .ap-brand-name{font-size:16px;font-weight:var(--fw-bold);letter-spacing:-.01em}
  .ap-brand-sub{font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.11em;text-transform:uppercase;color:var(--color-text-3)}
}