/* Mobile PWA layer for AHIS.
   Loaded after page styles so dashboards keep their desktop layout while phones get
   a native, compact and touch-friendly presentation. */

@media (max-width: 767.98px){
  html{
    font-size:16px;
  }

  body{
    background:#F4F7FB;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  input,
  select,
  textarea,
  button{
    font-size:16px !important;
  }

  .ahis-header{
    min-height:58px;
    padding:.45rem .65rem !important;
    gap:.45rem;
  }

  .ahis-header .btn-nav{
    height:38px;
    padding:0 10px;
    gap:7px;
    border-radius:14px;
    font-size:13px;
    box-shadow:none;
  }

  .ahis-logo{
    max-height:38px;
    width:auto;
  }

  .ahis-institution{
    min-width:0;
  }

  .ahis-flag{
    max-height:24px;
    width:auto;
    border-radius:6px;
  }

  .ahis-country{
    max-width:118px;
    margin:2px auto 0 !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.62rem !important;
    line-height:1;
  }

  .ahis-header .btn-outline-danger{
    min-height:38px;
    border-radius:14px;
    padding:.35rem .55rem;
    font-size:.78rem;
    font-weight:800;
  }

  .ahis-main .container-fluid{
    padding:.55rem .5rem 1rem !important;
  }

  .content-scroll{
    max-width:100%;
    padding:0 !important;
    overflow:visible !important;
  }

  .card,
  .card-lite,
  .filter-card,
  .filters-card,
  .header-card,
  .tabs-card,
  .stat-card{
    border-radius:16px !important;
    box-shadow:0 8px 24px rgba(16,24,40,.08) !important;
  }

  .card-body{
    padding:.85rem !important;
  }

  .card-header,
  .filter-card-header{
    padding:.72rem .85rem !important;
    line-height:1.25;
  }

  .btn,
  .form-control,
  .form-select,
  select,
  input[type="text"],
  input[type="date"],
  input[type="search"],
  input[type="number"]{
    min-height:44px;
    border-radius:12px !important;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    font-weight:800;
    white-space:normal;
  }

  .row{
    --bs-gutter-x:.75rem;
    --bs-gutter-y:.75rem;
  }

  .table-responsive,
  .table-scroll,
  .table-wrapper{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  .table-responsive table,
  .table-scroll table,
  .table-wrapper table,
  table.dash-table{
    min-width:720px;
    margin-bottom:0;
  }

  .table th,
  .table td,
  .dash-table th,
  .dash-table td{
    padding:.55rem .65rem !important;
    font-size:.83rem !important;
    white-space:nowrap;
    vertical-align:middle;
  }

  img,
  svg,
  canvas{
    max-width:100%;
  }
}

@media (max-width: 575.98px){
  .content-scroll > .container,
  .content-scroll > .container-fluid,
  .dash-wrap,
  .dep-wrapper,
  .sero-wrapper,
  .dotation-dashboard-wrapper,
  .vacc-shell{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .bf-header,
  .dash-header,
  .header-row,
  .labdash .header-top{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.7rem !important;
  }

  .bf-header h2,
  .dash-title,
  .labdash .header-title,
  .sero-wrapper .bf-header h2{
    font-size:1.25rem !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
  }

  .bf-sub,
  .dash-subtitle,
  .labdash .header-subtitle,
  .sero-wrapper .subtitle{
    font-size:.88rem !important;
    line-height:1.42 !important;
  }

  .header-actions,
  .top-actions,
  .filter-actions,
  .filters .actions,
  .section-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.55rem !important;
    justify-content:stretch !important;
  }

  .header-actions .btn,
  .top-actions .btn,
  .filter-actions .btn,
  .filters .actions .btn,
  .section-actions .btn,
  .dash-header .btn{
    width:100%;
  }

  /* Vaccination dashboard */
  .vacc-page{
    min-height:auto !important;
    padding:.35rem 0 1rem !important;
    background:transparent !important;
  }

  .vacc-head{
    gap:.75rem !important;
    margin-bottom:.85rem !important;
  }

  .institutional-dashboard-header{
    grid-template-columns:1fr !important;
    gap:.8rem !important;
    padding:1rem !important;
    border-radius:18px !important;
  }

  .institutional-icon{
    width:44px !important;
    height:44px !important;
  }

  .vacc-title{
    font-size:1.22rem !important;
    line-height:1.15 !important;
    text-transform:none !important;
  }

  .vacc-subtitle{
    font-size:.86rem !important;
    line-height:1.42 !important;
  }

  .dashboard-context{
    grid-template-columns:1fr 1fr !important;
    gap:.55rem !important;
    margin-top:.85rem !important;
    padding-top:.8rem !important;
  }

  .dashboard-context-item{
    padding:.65rem !important;
    border-radius:12px !important;
  }

  .dashboard-context-label{
    font-size:.62rem !important;
  }

  .dashboard-context-value{
    font-size:.82rem !important;
  }

  .top-filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.55rem !important;
  }

  .filter-pill,
  .btn-filter,
  .btn-export{
    width:100% !important;
    min-height:46px !important;
    justify-content:space-between !important;
  }

  .filter-pill{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
  }

  .filter-pill select,
  .filter-pill input{
    width:100% !important;
    min-width:0 !important;
    text-align:right;
  }

  .disease-cards{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:.6rem !important;
  }

  .disease-card{
    min-height:112px !important;
    padding:.75rem !important;
    border-radius:16px !important;
  }

  .chart-grid{
    grid-template-columns:1fr !important;
    gap:.75rem !important;
  }

  .svg-chart{
    min-height:220px;
  }

  /* Surveillance and treatment dashboards */
  .dash-wrap,
  .dep-wrapper{
    padding-top:.25rem !important;
    padding-bottom:1rem !important;
  }

  .filters-sticky{
    position:static !important;
    top:auto !important;
  }

  .filters-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow:visible !important;
    gap:.65rem !important;
  }

  .filter-item,
  .filter-item.small{
    min-width:0 !important;
    width:100% !important;
  }

  .kpi{
    min-height:104px !important;
  }

  .kpi .val,
  .kpi-value,
  .stat-card .value{
    font-size:1.35rem !important;
    line-height:1.1 !important;
  }

  .chip{
    max-width:100%;
    justify-content:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Laboratory dashboard */
  .labdash{
    padding:0 !important;
    background:transparent !important;
  }

  .labdash .header-card,
  .labdash .filters-card,
  .labdash .tabs-card{
    padding:.9rem !important;
    margin-bottom:.85rem !important;
  }

  .labdash .filters-grid{
    grid-template-columns:1fr !important;
    gap:.7rem !important;
  }

  .labdash .form-group,
  .labdash .form-group.span-2,
  .labdash .form-group.span-4{
    grid-column:auto !important;
  }

  .labdash .kpi-grid,
  .labdash .mini-kpi-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:.65rem !important;
  }

  .labdash .kpi,
  .labdash .mini-kpi{
    min-height:112px !important;
    padding:.85rem !important;
  }

  .labdash .tab-grid{
    grid-template-columns:1fr !important;
    gap:.8rem !important;
  }

  .labdash .tabs-nav{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  .labdash .tabs-nav button,
  .labdash .tabs-nav a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .labdash .chart-box{
    min-height:auto !important;
  }

  /* Dotations and seromonitoring */
  .dotation-dashboard-wrapper{
    margin-top:.35rem !important;
    margin-bottom:1rem !important;
  }

  .flag-bar{
    height:5px !important;
    margin-bottom:.9rem !important;
  }

  .filter-card form.row > [class*="col-"],
  .sero-wrapper form .row > [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  .kpi-row > [class*="col-"],
  .sero-wrapper .row > [class*="col-md-3"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  .stat-card{
    min-height:104px;
    padding:.9rem !important;
  }

  .section-title{
    font-size:1rem !important;
    line-height:1.25 !important;
  }

  .img-chart{
    border-radius:14px !important;
  }
}

@media (max-width: 380px){
  .ahis-country{
    display:none;
  }

  .ahis-header .btn-nav span,
  .ahis-header .btn-outline-danger span{
    display:none;
  }

  .dashboard-context,
  .disease-cards,
  .labdash .kpi-grid,
  .labdash .mini-kpi-grid{
    grid-template-columns:1fr !important;
  }
}