/* ePracownik responsive viewport guard
   Build: 2026-05-05-responsive-viewport-guard
   Cel: poprawne dopasowanie widoków do komputerów z mniejszą rozdzielczością / większym skalowaniem systemowym. */

:root{
  --epr-sidebar-width:272px;
  --epr-page-pad-x:clamp(14px,2.2vw,34px);
}

html,body{max-width:100%;}
body{overscroll-behavior:none;}
.app{width:100vw;max-width:100vw;}
.content{min-width:0;max-width:100%;overflow:auto;scrollbar-gutter:stable;}

/* Nie pozwalamy, aby duże sekcje hero / tabele wypychały layout poza ekran. */
.dash-page,
.forms-page,
.forms-shell,
.lb-admin,
.kin-wrap,
.emp-page,
.employees-page,
.settings-page,
.notes-page,
.it-page,
.panel-page{
  max-width:100% !important;
  box-sizing:border-box !important;
}

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

/* Szerokości dla klasycznych monitorów pracowniczych i laptopów 1366–1440 px. */
@media (max-width:1440px){
  :root{--epr-sidebar-width:244px;}
  .sidebar{width:244px !important;}
  .sb-logo-img{width:190px !important;}
  .sb-nav{padding-left:14px !important;padding-right:14px !important;}
  .sb-btn{padding-left:12px !important;padding-right:12px !important;gap:10px !important;}
  .sb-icon{width:32px !important;height:32px !important;border-radius:12px !important;}
  .dash-page{padding-left:var(--epr-page-pad-x) !important;padding-right:var(--epr-page-pad-x) !important;}
}

@media (max-width:1280px){
  :root{--epr-sidebar-width:224px;}
  .sidebar{width:224px !important;}
  .sb-logo-img{width:172px !important;}
  .sb-btn{font-size:12px !important;}
  .dash-title{font-size:clamp(2.05rem,3.6vw,3.35rem) !important;}
  .dash-description{font-size:.88rem !important;line-height:1.62 !important;}
  .dash-hero{gap:22px !important;grid-template-columns:minmax(0,1.05fr) minmax(260px,.72fr) !important;}
  .dash-visual-wrap{transform:scale(.88);transform-origin:center right;}
  .dash-card{padding:20px !important;border-radius:26px !important;}
  .dash-ring-visual{width:104px !important;height:104px !important;}
  .dash-ring svg{width:104px !important;height:104px !important;}
}

/* Jeżeli komputer ma małą wysokość roboczą, wyłączamy stacking hero,
   bo na niskich ekranach sztucznie zabiera pion i wygląda jak obcięcie strony. */
@media (max-height:860px){
  .dash-hero-stack{min-height:auto !important;margin-bottom:24px !important;pointer-events:auto !important;}
  .dash-hero-stack::after{display:none !important;}
  .dash-hero-sticky{position:relative !important;top:auto !important;will-change:auto !important;}
  .dash-grid{margin-top:0 !important;}
  .dash-grid::before,.dash-grid::after{display:none !important;}
  .dash-hero{padding-top:10px !important;margin-bottom:18px !important;}
  .dash-hero-visual{min-height:300px !important;}
  .dash-visual-wrap{height:300px !important;}
  .dash-title{margin-bottom:14px !important;}
  .dash-description{margin-bottom:18px !important;}
  .dash-pill{padding:9px 13px !important;border-radius:15px !important;}

  .forms-hero{min-height:auto !important;margin-bottom:24px !important;}
  .forms-hero::after{display:none !important;}
  .forms-hero > div{min-height:auto !important;display:block !important;}
  .forms-hero-features{position:relative !important;top:auto !important;padding:0 !important;gap:22px !important;}
  .forms-feature-icon{width:112px !important;height:112px !important;}
}

/* Modal logów pracownika centrujemy w rzeczywistej części roboczej, a nie pod sidebar. */
@media (min-width:901px){
  .app:not(.collapsed) .dash-employee-logs-modal,
  .app:not(.collapsed) .dash-modal{
    padding-left:calc(var(--epr-sidebar-width) + 18px) !important;
    padding-right:18px !important;
  }
  .app:not(.collapsed) .dash-employee-logs-box{
    width:min(1080px,calc(100vw - var(--epr-sidebar-width) - 54px)) !important;
  }
}

/* Tabele administracyjne mają się przewijać wewnątrz karty, zamiast obcinać prawą stronę. */
.lb-table-wrap,
.sched-wrap,
.table-wrap,
.logs-table-wrap,
.emp-table-wrap,
.dash-employee-logs-table-wrap{
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* Banery i karty nie mogą wychodzić poza siatkę dashboardu. */
.dash-feature-banner,
.dash-card,
.dash-notice-card,
.dash-duty-card,
.forms-card,
.lb-card{
  min-width:0 !important;
  max-width:100% !important;
}

/* Fallback dla bardzo małych okien / dużego skalowania w Windows/macOS. */
@media (max-width:1180px){
  .dash-hero{grid-template-columns:1fr !important;}
  .dash-hero-visual{display:none !important;}
  .dash-hero-stack{min-height:auto !important;margin-bottom:24px !important;}
  .dash-grid,.dash-admin-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
  .dash-card--span-4,.dash-card--span-5,.dash-card--span-6,.dash-card--span-7,.dash-card--span-8,.dash-card--span-12{grid-column:1/-1 !important;}
}

@media (max-width:900px){
  :root{--epr-sidebar-width:0px;}
  .app{display:block !important;overflow:auto !important;height:auto !important;min-height:100dvh !important;}
  .sidebar{position:relative !important;width:100% !important;height:auto !important;max-height:none !important;}
  .content{height:auto !important;min-height:100dvh !important;overflow:visible !important;}
  .dash-modal,.dash-employee-logs-modal{padding:12px !important;}
  .dash-employee-logs-box{width:100% !important;max-height:94dvh !important;}
}

/* ePracownik responsive viewport guard — strony z dużym hero
   Build: 2026-05-05-responsive-viewport-guard-c
   Cel: zapobiega obcinaniu widoków: Urlopy i nadgodziny, Wypisz się, Szyfrowanie plików, Formularze. */

@media (max-width:1440px), (max-height:900px){
  .content{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .forms-page,
  .fileenc-page,
  .wy-page,
  .lb-admin,
  .dash-page{
    padding-left:clamp(18px,2.4vw,34px) !important;
    padding-right:clamp(18px,2.4vw,34px) !important;
  }

  .forms-title,
  .fileenc-title,
  .wy-title{
    font-size:clamp(2.35rem,4.9vw,4.15rem) !important;
    line-height:.98 !important;
    max-width:min(980px,100%) !important;
  }

  .forms-title-accent,
  .fileenc-title-accent,
  .wy-title-accent{
    line-height:1.02 !important;
    overflow-wrap:anywhere !important;
  }

  .forms-hero-features,
  .fileenc-hero-features,
  .wy-hero-features{
    gap:clamp(18px,3vw,44px) !important;
    padding-left:4% !important;
    padding-right:4% !important;
  }

  .forms-feature-icon,
  .fileenc-feature-icon,
  .wy-feature-icon{
    width:clamp(104px,10vw,154px) !important;
    height:clamp(104px,10vw,154px) !important;
  }

  .forms-grid,
  .fileenc-grid,
  .wy-main-card,
  .lb-card,
  .lb-table-card{
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Najważniejsza poprawka: na niskich ekranach wyłączamy efekt dużego, klejącego hero.
   Ten efekt wygląda dobrze na dużych monitorach, ale na laptopach 13–14'' zakrywa treść kart. */
@media (max-height:920px){
  .forms-hero,
  .fileenc-hero,
  .wy-hero{
    min-height:auto !important;
    margin-bottom:18px !important;
    pointer-events:auto !important;
  }

  .forms-hero::after,
  .fileenc-hero::after,
  .wy-hero::after{
    display:none !important;
  }

  .forms-hero > div,
  .fileenc-hero > div,
  .wy-hero > div{
    min-height:auto !important;
    display:block !important;
  }

  .forms-hero-features,
  .fileenc-hero-features,
  .wy-hero-features{
    position:relative !important;
    top:auto !important;
    z-index:1 !important;
    pointer-events:auto !important;
    transform:none !important;
    margin-top:24px !important;
    padding:0 !important;
    opacity:.46 !important;
  }

  .forms-grid,
  .fileenc-grid{
    margin-top:0 !important;
    position:relative !important;
    z-index:5 !important;
  }

  .wy-main-card{
    margin-top:0 !important;
    position:relative !important;
    z-index:5 !important;
  }

  .forms-card,
  .fileenc-card,
  .fileenc-main-card,
  .wy-main-card,
  .lb-card,
  .lb-table-card{
    border-radius:26px !important;
  }
}

/* Widoki pracownicze na komputerach z małą wysokością roboczą: karty mają zaczynać się od razu,
   zamiast chować dolną część pod krawędzią okna. */
@media (max-height:820px){
  .forms-page,
  .fileenc-page,
  .wy-page{
    padding-top:18px !important;
    padding-bottom:40px !important;
  }

  .forms-title,
  .fileenc-title,
  .wy-title{
    font-size:clamp(2.05rem,4.5vw,3.55rem) !important;
    margin-bottom:10px !important;
  }

  .forms-badge,
  .fileenc-badge,
  .wy-badge{
    padding:8px 13px !important;
    font-size:11px !important;
  }

  .forms-hero-meta,
  .fileenc-hero-meta,
  .wy-hero-meta{
    margin-bottom:12px !important;
  }

  .forms-hero-features,
  .fileenc-hero-features,
  .wy-hero-features{
    max-height:132px !important;
    overflow:hidden !important;
  }

  .forms-feature-card h3,
  .fileenc-feature-card h3,
  .wy-feature-card h3,
  .forms-feature-card p,
  .fileenc-feature-card p,
  .wy-feature-card p{
    display:none !important;
  }

  .fileenc-action-layout,
  .wy-action-grid,
  .wy-main-grid{
    grid-template-columns:1fr !important;
  }
}

/* Bardzo wąskie okna lub duże skalowanie: cały layout przechodzi w tryb jednej kolumny. */
@media (max-width:1180px){
  .forms-hero-features,
  .fileenc-hero-features,
  .wy-hero-features{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .fileenc-action-layout,
  .fileenc-secondary-grid,
  .wy-action-grid,
  .wy-main-grid,
  .lb-top-grid,
  .lb-metrics{
    grid-template-columns:1fr !important;
  }

  .lb-table-wrap,
  .table-wrap,
  .emp-table-wrap{
    overflow-x:auto !important;
    max-width:100% !important;
  }

  .lb-table,
  .emp-table{
    min-width:980px !important;
  }
}

/* Przycięte kolumny w tabelach: zamiast obcinać prawą stronę pokazujemy przewijanie poziome. */
.lb-admin,
.lb-card,
.lb-table-card,
.lb-table-wrap,
.emp-card,
.forms-card,
.fileenc-card,
.wy-main-card{
  overflow:visible;
}

.lb-table-wrap,
.emp-table-wrap,
.forms-history-wrap,
.fileenc-history-wrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Safari/iPad/macOS: użycie dvh/svh stabilizuje widok przy pasku adresu i pasku narzędzi. */
@supports (height: 100dvh){
  .content{
    min-height:100dvh !important;
  }
  .app{
    min-height:100dvh !important;
  }
}

/* ePracownik responsive viewport guard — Wypisz się: opisy pod ikonami
   Build: 2026-05-06-wypisz-feature-text-fix
   Cel: na niskich ekranach nie chowamy opisów pod ikonami i nie pozwalamy karcie roboczej nachodzić na sekcję ikon. */
@media (max-height: 860px), (max-width: 1440px){
  .wy-page .wy-hero{
    min-height:auto !important;
    margin-bottom:18px !important;
    pointer-events:auto !important;
  }

  .wy-page .wy-hero::after{
    display:none !important;
  }

  .wy-page .wy-hero > div{
    min-height:auto !important;
    display:block !important;
  }

  .wy-page .wy-hero-features{
    position:relative !important;
    top:auto !important;
    z-index:1 !important;
    margin-top:18px !important;
    padding:0 !important;
    max-height:none !important;
    overflow:visible !important;
    opacity:.78 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .wy-page .wy-feature-icon-wrap{
    width:clamp(82px,7.4vw,112px) !important;
    height:clamp(82px,7.4vw,112px) !important;
    margin-bottom:7px !important;
  }

  .wy-page .wy-feature-card h2,
  .wy-page .wy-feature-card h3,
  .wy-page .wy-feature-card p{
    display:block !important;
  }

  .wy-page .wy-feature-card h2,
  .wy-page .wy-feature-card h3{
    font-size:clamp(13px,1.25vw,16px) !important;
    line-height:1.15 !important;
    margin-bottom:4px !important;
  }

  .wy-page .wy-feature-card p{
    max-width:260px !important;
    font-size:clamp(10.5px,.9vw,12px) !important;
    line-height:1.42 !important;
  }

  .wy-page .wy-grid{
    margin-top:16px !important;
    position:relative !important;
    z-index:5 !important;
  }

  .wy-page .wy-grid > .wy-card:first-child::after{
    display:none !important;
  }
}

@media (max-height: 760px){
  .wy-page .wy-title{
    font-size:clamp(2rem,4vw,3rem) !important;
    margin-bottom:8px !important;
  }

  .wy-page .wy-title-accent{
    margin-top:8px !important;
  }

  .wy-page .wy-feature-icon-wrap{
    width:76px !important;
    height:76px !important;
  }

  .wy-page .wy-feature-card p{
    font-size:10.5px !important;
    line-height:1.35 !important;
  }
}


/* Dashboard width sync with my_schedule.php / schedule.php
   Build: 2026-05-06-dashboard-width-my-schedule
   Dashboard korzysta z takiego samego limitu kontenera jak Mój grafik. */
.dash-page{
  width:min(100%,1380px) !important;
  max-width:1380px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(16px,3.2vw,40px) !important;
  padding-right:clamp(16px,3.2vw,40px) !important;
}

@media (max-width:1440px){
  .dash-page{
    width:100% !important;
    max-width:1380px !important;
  }
}

/* Dashboard height sync with my_schedule.php / schedule.php
   Build: 2026-05-06-dashboard-height-my-schedule
   Dashboard nie używa już pełnoekranowego stackingu hero jako domyślnej wysokości. */
.dash-page .dash-hero-stack{
  min-height:auto !important;
  margin-bottom:18px !important;
  pointer-events:auto !important;
}
.dash-page .dash-hero-stack::after{
  display:none !important;
}
.dash-page .dash-hero-sticky{
  position:relative !important;
  top:auto !important;
  transform:none !important;
  will-change:auto !important;
}
.dash-page .dash-hero{
  gap:24px !important;
  padding-top:18px !important;
  padding-bottom:10px !important;
  margin-bottom:18px !important;
}
.dash-page .dash-hero-visual{
  min-height:360px !important;
}
.dash-page .dash-visual-wrap{
  height:360px !important;
}
@media (max-height:860px){
  .dash-page .dash-hero{
    padding-top:10px !important;
    margin-bottom:14px !important;
  }
  .dash-page .dash-hero-visual{
    min-height:300px !important;
  }
  .dash-page .dash-visual-wrap{
    height:300px !important;
  }
}


/* Dashboard layout stabilization
   Build: 2026-05-06-dashboard-no-hero-overlap
   Sekcje kart nie mogą nachodzić na hero po ujednoliceniu wysokości z my_schedule.php. */
.dash-page .dash-grid{
  margin-top:clamp(12px,2vw,26px) !important;
}
.dash-page .dash-grid::before{
  top:-10px !important;
}
@media (max-height:860px){
  .dash-page .dash-grid{
    margin-top:14px !important;
  }
}

/* Dashboard background stabilization
   Build: 2026-05-06-dashboard-bg-match-schedule
   Tło dashboardu jest jednolite jak w my_schedule.php; wyłączone są dodatkowe pasy/warstwy z siatki kart. */
.dash-page{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  isolation:isolate !important;
  overflow-x:clip !important;
}
.dash-page::before{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  transform:none !important;
}
.dash-page .dash-layer{
  max-width:1380px !important;
  width:100% !important;
  margin:0 auto !important;
}
.dash-page .dash-hero::before,
.dash-page .dash-grid::before,
.dash-page .dash-grid::after{
  display:none !important;
}