/* ==========================================================================
   responsive.css  -  tablet / mobile behaviour
   ========================================================================== */
@media (max-width: 1199.98px) {
  .sa-search { flex-basis: 220px; }
}
@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer */
  .sa-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(16, 24, 40, .2); }
  body.sa-open .sa-sidebar { transform: translateX(0); }
  body.sa-open .sa-backdrop { display: block; position: fixed; inset: var(--sa-navbar-h) 0 0 0; background: rgba(16, 24, 40, .45); z-index: 1010; }
  .sa-main { margin-left: 0; }
  .sa-brand { width: auto; flex: 0 0 auto; border-right: 0; padding-right: .5rem; }
  .sa-search, .sa-clock, .sa-welcome small { display: none; }
  .sa-nav-actions { margin-left: auto; }
  body.sa-collapsed .sa-sidebar { transform: translateX(-100%); }
}
@media (max-width: 767.98px) {
  .sa-content { padding: 1rem .75rem; }
  .panel-body { padding: 1rem; }
  .control-label { padding-top: 0; }
  .form-horizontal .form-group > [class*="col-"] { flex: 0 0 100%; width: 100%; margin-left: 0; }
  .page-header h1 { font-size: 1.2rem; }
  .sa-brand span, .sa-userchip span, .sa-logout span { display: none; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 479.98px) {
  .sa-kpi { padding: .9rem; }
  .sa-kpi .sa-kpi-val { font-size: 1.2rem; }
}