/* v0257 — mobilanpassning, konsultens vyer.
   Laddas sist. Allt ligger i media queries, så inget ändras på dator.
   Brytpunkt 600 px = telefon. 601–900 px (surfplatta) berörs bara av
   det som uttryckligen står under den andra frågan längst ner. */

@media (max-width:600px){

  /* ---- 1. Sidhuvudet följer med när man skrollar ------------------ */
  .app-shell .topbar{position:sticky;top:0}

  /* ---- 2. Läsbar text -------------------------------------------
     Portalens täthet är räknad för stor skärm: 8–11 px är vanligt.
     Här höjs golvet på det konsulten faktiskt läser i telefonen.   */
  .app-shell .page-head h1,
  .app-shell .compact-page-head h1{font-size:24px;line-height:1.15}
  .app-shell .page-head p,
  .app-shell .panel-head p,
  .app-shell .portal-modal-head p,
  .app-shell .empty,
  .app-shell .empty-inline,
  .app-shell .project-empty-state{font-size:13px;line-height:1.4}
  .app-shell .eyebrow{font-size:11px;letter-spacing:.09em}
  .app-shell .panel-head h2,
  .app-shell .project-section-head h2{font-size:17px}
  .app-shell small,
  .app-shell .admin-form small,
  .app-shell .admin-form label>span,
  .app-shell .account-profile-form label>span,
  .app-shell .absence-review-form label span,
  .app-shell .evaluation-fields label>span{font-size:12px}
  .app-shell th,
  .app-shell td{font-size:13px}
  .app-shell .flow span,
  .app-shell .stats span,
  .app-shell .consultant-project-facts dt,
  .app-shell .consultant-project-assignment-status,
  .app-shell .absence-own-list span,
  .app-shell .absence-own-list small,
  .app-shell .project-invite-note{font-size:12px}
  .app-shell .button,
  .app-shell .button-small,
  .app-shell .link-button,
  .app-shell .primary-action{font-size:14px}

  /* ---- 3. Tryckytor, minst 44 px --------------------------------- */
  .app-shell .button,
  .app-shell .button-small,
  .app-shell .primary-action,
  .app-shell .link-button,
  .app-shell .form-actions button,
  .app-shell .admin-form button,
  .app-shell .account-profile-form button,
  .app-shell .assignment-actions .button,
  .app-shell .project-invite-quick-actions .button,
  .app-shell .project-answer-yes,
  .app-shell .project-answer-no{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:44px;padding:10px 16px}
  .app-shell input,
  .app-shell select,
  .app-shell textarea{min-height:44px}
  .top-dropdown-menu a,
  .user-dropdown-menu a,
  .user-dropdown-menu button{min-height:44px;display:flex;align-items:center;font-size:15px}
  .app-shell .section-tabs a,
  .app-shell .calendar-mode a{min-height:44px;display:inline-flex;align-items:center}

  /* ---- 4. Ingen ofrivillig inzoomning i iOS ----------------------
     Safari zoomar in så fort ett fält har mindre text än 16 px.    */
  .app-shell input,
  .app-shell select,
  .app-shell textarea,
  .app-shell .project-core-grid-dense input,
  .app-shell .project-core-grid-dense select,
  .app-shell .project-core-grid-dense textarea,
  .app-shell .resource-calendar-filters input,
  .app-shell .event-cancel-comment textarea,
  .app-shell .assessment-comment-text{font-size:16px!important}

  /* ---- 5. Breda block skrollar i sig själva, inte hela sidan ----- */
  .app-shell .personal-week,
  .app-shell .personal-weeks,
  .app-shell .week-grid,
  .app-shell .schedule-grid,
  .app-shell .table-scroll,
  .app-shell .table-panel,
  .app-shell .consultant-team-table,
  .app-shell .evaluation-matrix,
  .app-shell .document-family-card{
      overflow-x:auto;-webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain}
  .app-shell .panel{max-width:100%;overflow-wrap:anywhere}

  /* ---- 6. En kolumn i stället för två ---------------------------- */
  .app-shell .consultant-project-grid,
  .app-shell .consultant-project-actions,
  .app-shell .person-summary-grid,
  .app-shell .account-profile-form,
  .app-shell .admin-form,
  .app-shell .absence-simple-form,
  .app-shell .project-partial-fields{grid-template-columns:1fr!important}
  .app-shell .consultant-project-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .form-actions,
  .app-shell .assignment-actions,
  .app-shell .consultant-project-actions,
  .app-shell .project-invite-quick-actions,
  .app-shell .team-list-actions{display:flex;flex-wrap:wrap;gap:8px}
  .app-shell .form-actions .button,
  .app-shell .project-invite-quick-actions .button{flex:1 1 auto}

  /* ---- 7. Dialoger fyller skärmen ------------------------------- */
  .app-shell .portal-modal,
  dialog.portal-modal{
      width:100vw;max-width:100vw;
      height:100dvh;max-height:100dvh;
      margin:0;border-radius:0}
  .app-shell .portal-modal-body{max-height:calc(100dvh - 132px);padding:14px 14px 20px}
  dialog.ask-dialog,
  dialog.nda-dialog,
  dialog.comment-dialog{width:calc(100vw - 16px);max-width:none}
  .ask-dialog-card,
  .nda-card,
  .comment-dialog-card{padding:18px 16px}
  .nda-fields{grid-template-columns:1fr}
  .ask-dialog-actions,
  .nda-actions,
  .comment-dialog-actions{flex-wrap:wrap}
  .ask-dialog-actions .button,
  .nda-actions .button,
  .comment-dialog-actions .button{flex:1 1 auto}

  /* ---- 8. Bedömningsformuläret ---------------------------------- */
  .app-shell .assessment-button-group{gap:8px}
  .app-shell .assessment-button-item button,
  .app-shell .assessment-number-choice button{min-height:48px;font-size:16px}
  .app-shell .evaluation-action-bar{
      position:sticky;bottom:0;z-index:20;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      background:#fff;border-top:1px solid var(--line)}

  /* ---- 9. Marginaler och telefonens hörn ------------------------ */
  .app-shell .main-content{
      padding-left:max(10px,env(safe-area-inset-left));
      padding-right:max(10px,env(safe-area-inset-right));
      padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* Surfplatta på höjden: bara det som annars klipps av. */
@media (min-width:601px) and (max-width:900px){
  .app-shell .consultant-project-grid{grid-template-columns:1fr}
  .app-shell .personal-week,
  .app-shell .consultant-team-table,
  .app-shell .table-scroll{overflow-x:auto}
  .app-shell input,
  .app-shell select,
  .app-shell textarea{min-height:40px}
}

/* ---------------------------------------------------------------
   v0258: konsultens dagsvy (agenda) + surfplatta.
   Agendan är en lista, inte ett rutnät — den fungerar lika bra på
   telefon, iPad och dator.                                        */
.day-agenda{display:grid;gap:8px;margin:0 0 18px}
.day-agenda-head{display:flex;align-items:baseline;gap:10px;padding:0 2px 2px}
.day-agenda-head strong{font-size:19px;text-transform:capitalize}
.day-agenda-head span{color:var(--muted);font-size:13px}
.day-agenda-empty{margin:0;padding:22px 16px;border:1px dashed var(--line);border-radius:12px;background:#fbfcfb;color:var(--muted);text-align:center}
.day-agenda-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;
    min-height:64px;padding:12px 14px;border:1px solid var(--line);border-left-width:5px;border-radius:12px;
    background:#fff;color:var(--ink);text-decoration:none}
.day-agenda-item:hover{background:#f7f9f6}
.day-agenda-time{display:grid;gap:2px;text-align:right;color:var(--muted);font-size:12px;line-height:1.2}
.day-agenda-time b{font-size:16px;color:var(--ink);font-weight:700}
.day-agenda-time i{font-style:normal}
.day-agenda-body{display:grid;gap:2px;min-width:0}
.day-agenda-body strong{font-size:15px;overflow-wrap:anywhere}
.day-agenda-body small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.day-agenda-item.cal-tentative{border-style:dashed}
.consultant-calendar-mode{display:inline-flex;gap:4px}

/* Surfplatta – iPad är den vanligaste enheten hos konsulterna.
   Porträtt 768/834 px, landskap 1024/1194 px.                      */
@media (min-width:601px) and (max-width:1194px){
  .app-shell .button,
  .app-shell .button-small,
  .app-shell .link-button,
  .app-shell .section-tabs a,
  .app-shell .calendar-mode a,
  .top-dropdown-menu a,
  .user-dropdown-menu a,
  .user-dropdown-menu button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .app-shell input,
  .app-shell select,
  .app-shell textarea{min-height:44px;font-size:16px}
  .app-shell .button,
  .app-shell .button-small{font-size:14px}
  .app-shell .page-head p,
  .app-shell .panel-head p,
  .app-shell .empty,
  .app-shell .empty-inline{font-size:13px}
  .app-shell small,
  .app-shell .admin-form label>span,
  .app-shell .evaluation-fields label>span{font-size:12px}
  .app-shell th,.app-shell td{font-size:13px}
  .app-shell .assessment-button-item button,
  .app-shell .assessment-number-choice button{min-height:52px;font-size:17px}
  .day-agenda-item{min-height:68px}
}
@media (pointer:coarse){
  .app-shell .day-agenda-item{min-height:68px}
  .app-shell .calendar-jump-trigger{min-height:44px}
}

/* v0259: hindra att sidan kan skrollas i sidled i telefon.
   clip (inte hidden) eftersom hidden slår sönder position:sticky. */
@media (max-width:600px){
  html,body{max-width:100%;overflow-x:clip}
  .app-shell{max-width:100%}
  .app-shell .consultant-calendar-toolbar{flex-wrap:wrap;row-gap:6px}
  .app-shell .consultant-calendar-toolbar .calendar-mode{flex:0 0 auto}
  .app-shell .personal-week{overflow-x:auto}
}