/* ═══════════════════════════════════════════════════════
   Droga Tradera — ETAP 1D UI SAFETY LAYER
   Cel: stabilność layoutu edukacji bez redesignu.
═══════════════════════════════════════════════════════ */

:root{
  --edu-focus:0 0 0 2px rgba(86,211,227,.35),0 0 18px rgba(86,211,227,.14);
  --edu-z-modal:9900;
  --edu-z-toast:99990;
}

html,body{min-width:320px;overscroll-behavior:none;}
body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
*,*::before,*::after{box-sizing:border-box;}
button,input,select,textarea{font:inherit;}
button,[role="button"]{touch-action:manipulation;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none!important;box-shadow:var(--edu-focus)!important;
}
[hidden],.hidden{display:none!important;}

.login-screen,.login-box,#app,.edu-top,.edu-tabs,.edu-grid,.edu-card,.panel,.module-card,.lesson-card,
.admin-grid,.mentor-grid,.training-grid,.cert-grid,.modal-box{
  min-width:0;box-sizing:border-box;
}
.login-screen{min-height:100dvh;padding:18px;overflow:auto;}
.login-box{width:min(440px,100%);max-height:none;}
.login-hint code{white-space:normal;word-break:break-word;}
#app{min-height:100dvh;}
.edu-top{position:sticky;top:0;z-index:100;gap:10px;isolation:isolate;}
.edu-user,.edu-logo,.brand,.nick{min-width:0;}
.edu-logo{text-decoration:none;}
.edu-user{flex-wrap:wrap;justify-content:flex-end;}
.edu-tabs{position:sticky;top:var(--edu-top-h,64px);z-index:90;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.edu-tab,.edu-btn{white-space:nowrap;min-height:28px;line-height:1.2;user-select:none;}

.edu-main,.edu-content,.tab-panel{min-width:0;}
.edu-card,.lesson-card,.module-card,.cert-card,.exam-card,.practice-card{
  overflow:hidden;overflow-wrap:anywhere;
}
.table-wrap,.admin-table-wrap,.mentor-table-wrap,.media-list,.training-list,.cert-list{
  min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
table{min-width:100%;border-collapse:separate;border-spacing:0;}
th{position:sticky;top:0;z-index:2;}
th,td{vertical-align:middle;}
img,video,canvas,audio{max-width:100%;}
textarea{resize:vertical;max-width:100%;}
input,select{max-width:100%;}

.modal,.modal-overlay,.exam-modal,.practice-modal,.admin-modal{z-index:var(--edu-z-modal)!important;}
.modal-box,.exam-box,.practice-box,.admin-box{
  max-width:calc(100vw - 28px)!important;max-height:calc(100dvh - 28px)!important;
  overflow:auto;overscroll-behavior:contain;
}
.toast,.toasts,.edu-toast{z-index:var(--edu-z-toast)!important;}

@media (max-width:980px){
  .edu-top{align-items:flex-start;flex-wrap:wrap;}
  .edu-user{width:100%;justify-content:flex-start;}
  .edu-back{margin-left:0;}
  .edu-grid,.admin-grid,.mentor-grid,.training-grid{grid-template-columns:1fr!important;}
}
@media (max-width:620px){
  body{overflow:auto;}
  .login-screen{align-items:flex-start;}
  .edu-top{position:relative;}
  .edu-tabs{top:0;}
  .edu-logo .brand span{font-size:10px;}
  .edu-btn{padding-left:10px;padding-right:10px;}
  .modal-box,.exam-box,.practice-box,.admin-box{width:calc(100vw - 20px)!important;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}