/* PROGRIVO mobile/responsive layer – 2026-09-27
   Keeps desktop unchanged and makes student, teacher, customer admin and platform admin usable on phones/tablets. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

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

button,input,select,textarea{
  max-width:100%;
}

@media (max-width:900px){
  .admin-app{
    display:block;
    min-width:0;
  }

  .admin-sidebar{
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    min-height:0;
    height:auto;
    padding:10px 12px 8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand org"
      "nav nav"
      "bottom bottom";
    gap:6px 10px;
    box-shadow:0 6px 20px rgba(13,27,42,.18);
  }

  .admin-sidebar-brand{
    grid-area:brand;
    border-bottom:0;
    padding:2px 4px;
    min-width:0;
    font-size:15px;
  }

  .admin-sidebar-brand svg{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }

  .admin-sidebar-org{
    grid-area:org;
    padding:2px 4px;
    min-width:0;
    max-width:46vw;
    text-align:right;
  }

  .admin-sidebar-org small{
    display:none;
  }

  .admin-sidebar-org strong{
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .admin-sidebar-nav{
    grid-area:nav;
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-top:2px;
    padding:2px 0 4px;
  }

  .admin-sidebar-nav::-webkit-scrollbar{
    display:none;
  }

  .admin-sidebar-nav button{
    flex:0 0 auto;
    width:auto;
    min-height:40px;
    margin:0;
    padding:9px 12px;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.08);
  }

  .admin-sidebar-nav button.active{
    background:rgba(37,99,235,.28);
    border-color:rgba(125,211,252,.35);
  }

  .admin-sidebar-bottom{
    grid-area:bottom;
    margin:0;
    padding:2px 0 0;
    border-top:0;
    display:flex;
    justify-content:flex-end;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .admin-sidebar-bottom::-webkit-scrollbar{
    display:none;
  }

  .admin-sidebar-bottom button{
    flex:0 0 auto;
    width:auto;
    min-height:36px;
    padding:7px 10px;
    font-size:12px;
  }

  .admin-main{
    width:100%;
    min-width:0;
    padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  }

  .admin-main .page{
    width:100%;
    max-width:100%;
    padding:26px 0 max(44px,env(safe-area-inset-bottom));
  }

  /* Inline desktop grids are common in the current app. Force them to one column on mobile. */
  .admin-main .layout,
  .admin-main [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .admin-main [style*="display:flex"]{
    min-width:0;
    flex-wrap:wrap;
  }

  .side{
    position:static!important;
    top:auto!important;
  }

  .shell{
    width:min(100% - 28px,1220px);
  }

  .page{
    padding-top:30px;
  }

  h1,
  .admin-main h1{
    font-size:clamp(30px,9vw,40px);
    line-height:1.04;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
  }

  .card{
    padding:18px;
    border-radius:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .card h2{
    font-size:24px;
  }

  .question{
    padding:15px;
    border-radius:14px;
  }

  .callout{
    padding:14px;
    margin:14px 0;
  }

  .row{
    min-width:0;
    align-items:flex-start;
  }

  .row > *{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
    margin:18px 0;
  }

  .stat{
    min-width:0;
    padding:13px;
    border-radius:14px;
  }

  .stat small{
    font-size:10px;
    overflow-wrap:anywhere;
  }

  .stat strong{
    font-size:24px;
    margin-top:5px;
    overflow-wrap:anywhere;
  }

  .button,
  button{
    min-height:44px;
  }

  .button{
    padding:11px 14px;
  }

  .field{
    margin:12px 0;
  }

  .field input,
  .field select,
  .field textarea,
  input,
  select,
  textarea{
    width:100%;
    min-height:44px;
    font-size:16px; /* prevents automatic zoom in iOS Safari */
  }

  .field textarea,
  textarea{
    min-height:120px;
  }

  table{
    min-width:680px;
  }

  .badge{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  details > summary{
    min-height:44px;
    display:flex;
    align-items:center;
  }

  .flow{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    scrollbar-width:none;
  }

  .flow::-webkit-scrollbar{
    display:none;
  }

  .flow span{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .progrivo-events-overlay{
    padding:10px;
    align-items:end;
  }

  .progrivo-events-dialog{
    width:100%;
    max-height:88dvh;
    border-radius:18px 18px 0 0;
    padding:14px;
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }

  .progrivo-events-head{
    top:-14px;
    padding:16px 0 12px;
  }

  .progrivo-events-head h2{
    font-size:24px;
  }
}

@media (max-width:620px){
  .topbar{
    height:auto;
    min-height:60px;
    padding:8px 14px;
    gap:8px;
  }

  .topbar .brand{
    min-width:0;
  }

  .topbar .nav{
    overflow-x:auto;
    scrollbar-width:none;
  }

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

  .topbar .nav button{
    flex:0 0 auto;
    min-height:40px;
    white-space:nowrap;
  }

  .auth{
    min-height:100dvh;
    grid-template-columns:1fr;
  }

  .auth-left{
    min-height:auto;
    padding:26px 20px 22px;
  }

  .auth-left h1{
    font-size:32px;
    line-height:1.05;
  }

  .auth-left p{
    margin-bottom:0;
  }

  .auth-right{
    align-items:start;
    padding:16px 14px max(28px,env(safe-area-inset-bottom));
  }

  .auth-card{
    width:100%;
    padding:20px;
    border-radius:18px;
  }

  .admin-sidebar{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }

  .admin-main{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }

  .admin-main .page{
    padding-top:22px;
  }

  .card{
    padding:15px;
    margin-bottom:12px;
  }

  .question{
    padding:13px;
  }

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

  .button{
    max-width:100%;
  }

  .certificate-card-main{
    grid-template-columns:1fr!important;
  }

  .certificate-card-main > div:last-child{
    justify-self:start;
  }

  /* Bedömningsöversikten blir läsbara kort på telefon i stället för en bred tabell. */
  .assessment-dashboard-wrap{
    overflow:visible!important;
  }

  .assessment-dashboard-table{
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  .assessment-dashboard-table thead{
    display:none;
  }

  .assessment-dashboard-table,
  .assessment-dashboard-table tbody,
  .assessment-dashboard-table tr,
  .assessment-dashboard-table td{
    width:100%;
  }

  .assessment-dashboard-table tbody,
  .assessment-dashboard-table tr{
    display:block;
  }

  .assessment-dashboard-table tr{
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px 14px;
    margin-bottom:12px;
    background:#fff;
    overflow:hidden;
  }

  .assessment-dashboard-table td{
    display:grid!important;
    grid-template-columns:minmax(96px,40%) minmax(0,1fr);
    gap:12px;
    align-items:center;
    min-width:0!important;
    padding:10px 0!important;
    text-align:right!important;
    border-bottom:1px solid var(--line)!important;
    overflow-wrap:anywhere;
  }

  .assessment-dashboard-table td::before{
    content:attr(data-label);
    min-width:0;
    text-align:left;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .assessment-dashboard-table .badge{
    justify-self:end;
    white-space:nowrap;
  }

  .assessment-dashboard-table .progress{
    min-width:0;
  }

  .assessment-dashboard-table td:last-child{
    display:block!important;
    padding-top:12px!important;
    border-bottom:0!important;
  }

  .assessment-dashboard-table td:last-child::before{
    display:none;
  }

  .assessment-dashboard-table td:last-child .button{
    width:100%;
  }

  /* Form action groups are easier to tap when they stack. */
  form > .button,
  form > button.button{
    width:100%;
  }

  .progrivo-event-row{
    grid-template-columns:36px minmax(0,1fr);
    gap:10px;
  }

  .progrivo-events-toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  .progrivo-events-toolbar .button{
    width:100%;
  }
}

@media (max-width:390px){
  .admin-sidebar-org{
    max-width:40vw;
  }

  .admin-sidebar-nav button{
    padding:8px 10px;
    font-size:13px;
  }

  .stats{
    grid-template-columns:1fr!important;
  }

  h1,
  .admin-main h1{
    font-size:30px;
  }
}

/* Comfortable touch targets on touch devices without changing desktop mouse layouts. */
@media (pointer:coarse){
  .admin-sidebar-nav button,
  .admin-sidebar-bottom button,
  .button,
  input,
  select{
    min-height:44px;
  }

  input[type="checkbox"],
  input[type="radio"]{
    min-width:20px;
    min-height:20px;
    width:20px;
    height:20px;
  }

  .option{
    padding:13px;
  }
}