/* ===========================================
   DROP-IN FIX: MOBILKA, BEZ RUSZANIA DESKTOPU
   =========================================== */

/* 0) Prewencja „wychodzenia w bok” */
html, body { max-width:100%;  }

.wrap, .page { width:auto;  }
.row > *, .grid > *, .grid-dash > *, .tl-left, .name, .title { min-width:0; }

/* 1) Header / nawigacja mobilna (tylko mobile) */

@media (max-width: 900px){
header {display: inherit !important}
}


.hdr-nav.hdr-mobile { display:none !important; }
.hdr-burger { display:none; }

@media (max-width: 860px){
  .hdr-nav.hdr-desktop { display:none !important; }
  .hdr-burger { display:flex; width:40px; height:40px; }
  .hdr-row { padding:8px 10px; }
  .hdr-brand { padding:6px 10px; }
  .hdr-nav.hdr-mobile {
    display:none !important;
    width:100%; flex-direction:column; gap:6px; padding:8px 0;
  }
  body.hdr-open .hdr-nav.hdr-mobile { display:flex !important; }
  body.hdr-open { overflow:hidden; } /* lock tła gdy menu otwarte */
  .hdr-nav.hdr-mobile a { width:100%; justify-content:flex-start; padding:12px 14px; }
}

/* 2) Główne siatki łamią się wcześniej */
@media (max-width: 1024px){
  .grid { grid-template-columns:1fr; }
  .grid-dash { grid-template-columns:1fr; }
}

/* 3) Kalendarz – 7 → 4 → 2 → 1 */
@media (max-width: 1024px){
  .cal { grid-template-columns:repeat(4,1fr); }
  .cal-head { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 680px){
  .cal { grid-template-columns:repeat(2,1fr); }
  .cal-head { display:none; }
  .day { min-height:110px; }
  .day-body { gap:5px; }
  .chip { flex-wrap:wrap; }
}
@media (max-width: 420px){
  .cal { grid-template-columns:1fr; }
}

/* 4) Timeline – ciaśniej, elipsy, zero wyciekania */
@media (max-width: 680px){
  .timeline { padding-left:22px; }
  .timeline::before { left:10px; }
  .tl-item { margin:8px 0; }
  .tl-item::before { left:-12px; width:8px; height:8px; box-shadow:0 0 0 3px rgba(53,160,255,.15); }
  .tl-body { padding:8px 10px; }
  .tl-title { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tl-meta { font-size:10px; gap:6px; padding:6px 8px; }
}

/* 5) Projekty – jedna kolumna poniżej 760px */
@media (max-width: 760px){
  .grid-proj { grid-template-columns:1fr; gap:10px; }
  .filters { gap:6px; }
}

/* 6) Drive – miniatury i menu bez uciekających elementów */
@media (max-width: 640px){
  .grid-drive { grid-template-columns:repeat(2,1fr); }
  .tile { overflow:visible; }
  .thumb-drive { aspect-ratio:16/10; }
  .menu-list { right:8px; left:auto; }
}
@media (max-width: 400px){
  .grid-drive { grid-template-columns:1fr; }
  .menu-list { min-width:160px; }
}

/* 7) Formularze i pola – wygodne tap-targety */
@media (max-width: 680px){
  .grid-lr { grid-template-columns:1fr; }
  .inp, .sel { padding:11px 12px; }
  .tools { gap:6px; }
}

/* 8) Modale – mieszczą się na ekranie */
@media (max-width: 640px){
  .modal { padding:10px; }
  .modal-box { max-width:96vw; max-height:88vh; }
  .modal-bd .viewer { height:60vh; }
  .modal-hd, .modal-ft { padding:8px 10px; }
  .btn.icon { padding:8px; }
}

/* 9) Admin – tabela jako poziomy scroller */
@media (max-width: 760px){
  .table { display:block; width:100%; overflow:auto; }
  .table table { min-width:600px; }
}

/* 10) Drobiazgi anty-overflow */
@media (max-width: 480px){
  .name, .title, .tl-title { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kpi .v { font-size:16px; }
  .kpi .i { width:28px; height:28px; font-size:13px; }
}

/* === KALENDARZ: dni jeden pod drugim na mobile === */
@media (max-width: 680px){
  /* chowamy nagłówek z nazwami dni tygodnia */
  .cal-head{ display:none !important; }

  /* zamiast siatki: pionowa lista dni */
  .cal{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  /* wywal puste „kratki” z początku miesiąca,
     które mają aria-hidden="true" */
  .cal > .day[aria-hidden="true"]{
    display:none !important;
  }

  /* trochę ciaśniej, ale czytelnie */
  .day{ min-height:auto; }
  .day-hd{ padding:10px 12px; }
  .day-body{ padding:10px 12px; gap:6px; }

  /* chipy niech się łamią w dół bez rozpychania */
  .chip{ flex-wrap:wrap; }
}
/* ================================
   PROJECT VIEW – DROP-IN MOBILE FIX
   (bez ruszania HTML; nadpisy z !important)
   ================================ */

/* 0) anty-overflow */
.project-container{max-width:1200px}
@media (max-width: 760px){
  .project-container{padding:10px !important}
  .project-header h2{font-size:18px}
  .project-header .btn{padding:9px 12px}
}

/* 1) header projektu – wygodne łamanie */
@media (max-width: 860px){
  .project-header{gap:10px}
  .project-header > div{min-width:0}
  .project-header h2{margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .project-header .header-meta{width:100%}
  .project-header .pill{white-space:nowrap}
}

/* 2) layout 2 kolumny -> 1 kolumna na mobile */
@media (max-width: 980px){
  .project-layout{grid-template-columns:1fr !important}
}

/* 3) „Dodaj zadanie” – 2 kolumny -> 1 kolumna */
@media (max-width: 760px){
  .project-layout .form-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .project-layout .form-row .input{min-width:0 !important}
  .project-layout .form-actions{flex-wrap:wrap}
  .project-layout .form-actions .btn{flex:1 1 180px}
}

/* 4) Lista zadań – akcje i formularze nie wypychają */
@media (max-width: 860px){
  .task-item{padding:10px !important}
  .task-item > div:first-child{align-items:flex-start}
  .task-item .btn{padding:8px 10px}
  .task-item select.input{min-width:140px !important}
  .task-item form{flex-wrap:wrap}
  .task-item form .btn{flex:0 0 auto}
}
@media (max-width: 560px){
  .task-item select.input{min-width:0 !important; width:100%}
  .task-item form{width:100%}
  .task-item form .btn{width:100%}
}

/* 5) Komentarze – textarea i przycisk układają się ładnie */
@media (max-width: 640px){
  .task-item details form{flex-direction:column; align-items:stretch}
  .task-item details textarea{width:100%}
  .task-item details .btn{width:100%}
}

/* 6) Prawa kolumna: „pliki projektu” – wiersze nie uciekają */
@media (max-width: 760px){
  .col-right ul li{align-items:flex-start !important}
  .col-right ul li > div:first-child{min-width:0}
  .col-right ul li span{display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .col-right form{flex-direction:column}
  .col-right form .input{min-width:0 !important; width:100%}
  .col-right form .btn{width:100%}
}

/* 7) Drobiazgi: długie nazwy nie „wychodzą w bok” */
.project-desc{word-break:break-word}
.task-item .font-bold,
.task-item .name,
.project-header h2,
.project-layout .desc{min-width:0}

/* ==== Drive: mobilka = 1 kolumna ==== */
@media (max-width: 680px){
  .grid-drive{
    display:grid;
    grid-template-columns: 1fr !important; /* jeden pod drugim */
    gap:10px;
  }
  /* żeby nic nie „wypychało” w bok */
  .tile{max-width:100%}
  .tile .name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .thumb-drive{aspect-ratio:16/10} /* trochę niższa miniatura na telefonie */
  .menu-list{right:8px; left:auto} /* menu ⋯ nie wyleci za ekran */
}

/* Hours: na mobilce najpierw „Dodaj wpis”, potem reszta */
@media (max-width: 980px){
  .hours-grid{
    display:flex;           /* tylko dla tej strony, nie ruszamy reszty .grid w projekcie */
    flex-direction:column;
    gap:16px;
  }
  .hours-grid > aside{ order:-1; }   /* przenieś BOX „Dodaj wpis” nad kalendarz/listę */
}