/* stylelint-disable selector-id-pattern, declaration-block-single-line-max-declarations, comment-empty-line-before */

/* =========================
   HEADER / BUTTONS (bez panelu użytkownika)
   ========================= */

   .szkoly-logo {
    max-height: 50px !important;
    height: 50px !important;
    width: auto !important;
    max-width: 100%;
    margin-left: 2rem !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
    display: block;
    z-index: 1000 !important;
    position: relative;
  }

  @media (width <= 768px) {
    .szkoly-logo {
      content: url('/wp-content/themes/warcabytv-szkola/assets/images/szkm.svg');
    }
  }
  
  .szkoly-header-inner {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 997 !important;
    background-color: rgb(255 255 255 / 50%) !important;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    height: 4.3rem !important;
  }

  /* Slightly taller header when mini tiles are present */
  .szkoly-header-inner.has-mini-tiles {
    height: 5.2rem !important;
  }
  
  .szkoly-button-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0.5rem;
    margin-top: 0.7rem !important;
    gap: 0.5rem;
    z-index: 998 !important;
  }

  .szkoly-button-wrapper > div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    width: 100%;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  
  /* Ujednolicony przycisk szklany */
  .szkoly-button,
  .szkoly-login-button,
  button.szkoly-login-button,
  a.szkoly-login-button {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 6%);
    /* Safari/iOS support */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgb(23 123 254 / 25%);
    color: rgb(23 123 254);
    padding: 0.4rem 1.25rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 2px 6px rgb(23 123 254 / 10%);
  }

  .szkoly-button:hover,
  .szkoly-login-button:hover {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(23 123 254 / 40%);
    box-shadow: 0 4px 12px rgb(23 123 254 / 20%);
    transform: translateY(-1px);
  }
  
  /* Drobne: kontener z logo i grupa przycisków w headerze */
  .szkoly-logo-wrapper {
    display: flex;
    justify-content: flex-start;
    padding-left: 1rem !important;
    padding-top: 0;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1102;
  }

  .szkoly-button-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
  }
  
  /* Tekst “Wyjście z trybu szkolnego” */
  .szkoly-logout-exit { 
    align-self: center;
    margin-top: 0.25rem;
    font-size: 0.9rem;
  }

  /* Mini dashboard tiles in header (visible only on /dashboard) */
  .header-mini-tiles {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 999; /* above background, below user buttons */
    width: calc(100% - 380px); /* leave room for right-side buttons */
    margin-top: 0.2rem; /* requested top margin from menu */
  }

  .mini-tiles-list {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem;
    display: flex;
    /* replace flex-direction + flex-wrap with shorthand */
    flex-flow: row nowrap; /* stylelint-disable-line declaration-block-no-redundant-longhand-properties */
    gap: 6px;
    max-height: none; /* single row */
    overflow: hidden; /* keep within header */
  }

  .mini-tiles-list .mini-tile { position: relative; }
  .mini-tiles-list .mini-tile a {
    display: grid;
    grid-template-columns: 22px auto;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    text-decoration: none;
    background: rgb(255 255 255 / 55%);
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(23 123 254 / 22%);
    box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
    /* Equal size tiles */
    inline-size: 168px; /* fixed width for equality */
    block-size: 34px;   /* fixed height for equality */
  }

  /* Tooltip bubble with full tile */
  .mini-tile-tooltip {
    position: absolute;
    top: calc(100% + 8px); /* show below the mini tile */
    left: 0;
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
  }

  .mini-tile:hover .mini-tile-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mini-tile-tooltip .tile-card {
    display: grid;
    grid-template-columns: 36px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgb(23 123 254 / 25%);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
    min-inline-size: 240px;
    max-inline-size: 340px;
  }

  .mini-tile-tooltip .tile-card::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgb(23 123 254 / 25%);
    border-top: 1px solid rgb(23 123 254 / 25%);
    transform: rotate(45deg);
  }

  .mini-tile-tooltip .tile-icon { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; }
  .mini-tile-tooltip .tile-title { font-size: 14px; font-weight: 700; color: #123; line-height: 1.25; }

  /* Keep tooltips hidden on mobile as the tiles are hidden */
  @media (width <= 900px) {
    .mini-tile-tooltip { display: none !important; }
  }

  .mini-tiles-list .mini-tile a:hover { background: rgb(255 255 255 / 75%); }
  /* stylelint-disable-next-line no-descending-specificity */
  .mini-tiles-list .mini-tile img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: block; }
  /* stylelint-disable-next-line no-descending-specificity */
  .mini-tiles-list .mini-tile span { font-size: 12px; color: #123; font-weight: 600; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

  /* On mobile – hide tiles to keep header simple */
  @media (width <= 900px) {
    .header-mini-tiles { display: none !important; }
    .szkoly-header-inner.has-mini-tiles { height: 4.3rem !important; }
  }
  
  /* =========================
     DASHBOARD / FORM / UTILITIES (neutralne)
     ========================= */
  
  .dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 40px;
    background-color: #f5f7fa;
    font-family: 'Segoe UI', sans-serif;
  }

  .dashboard-tile {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .dashboard-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
  }
  .dashboard-icon { font-size: 40px; margin-bottom: 12px; color: #177bfe; }
  .dashboard-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
  .dashboard-type { font-size: 14px; color: #666; }
  
  /* Formularze / komunikaty */
  #user-profile-container {
    margin-top: 2rem;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 5%);
  }

  @media (width <= 500px) {
    #user-profile-container { padding: 1rem; }
  }

  #user-profile-form {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-success {
    color: #2e7d32;
    background: #e8f5e9;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  .form-error {
    color: #c62828;
    background: #ffebee;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
  
  /* Avatar */
  .avatar-preview {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-top: 1rem;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .logged-user-trigger img { /* tylko ogólne image-utility, bez dropdown logiki */
    object-fit: cover;
    border-radius: 50%;
    height: 40px;
    max-height: 48px;
    width: auto;
  }

  /* Avatar w headerze */
  .logged-user-trigger .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
  }

  /* Ikona roli – nie zaokrąglaj, mniejsza, po lewej */
  .logged-user-trigger .user-role-icon {
    width: 38px;
    height: 38px;
    border-radius: 0;
    object-fit: contain;
    display: inline-block;
  }
  
  /* Linki drobne */
  a.reset-link { white-space: nowrap; }
  .wyjscie-szkoly-button { white-space: nowrap; display: flex; gap: 1rem; align-items: center; order: -1; }
  .wyjscie-szkoly-button img.pdwtv-icon { height: 36px; width: auto; display: block; }

  @media (width <= 768px) {
    .wyjscie-szkoly-button img.pdwtv-icon { height: 28px; }
  }
  
  /* Mobile-only helper (bez logiki dropdownów) */
  .mobile-only { display: none !important; }

  @media (width <= 768px) {
    .mobile-only { 
      display: inline-flex !important;
      align-items: center; justify-content: center;
      background: transparent; border: none; padding: .45rem; cursor: pointer;
    }
    .mobile-only img { height: 24px; width: 24px; }
    .desktop-only { display: none !important; }
  }

  /* Hide mobile auth icons after user is logged in (WP adds body.logged-in) */
  body.logged-in #mobileLoginIcon,
  body.logged-in #mobileRegisterIcon {
    display: none !important;
  }

  /* Also hide after dynamic login (HTML gets .user-logged-in via JS) */
  html.user-logged-in #mobileLoginIcon,
  html.user-logged-in #mobileRegisterIcon {
    display: none !important;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .logged-user-trigger span {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    background-color: #0229acdf;
    padding: 0.8rem;
    border-radius: 50%;
    min-width: 1rem;
    min-height: 1rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
  }

  .logged-user-trigger {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.1rem;
    border-radius: 0.5rem;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    max-width: 180px;
    height: auto;
    overflow: hidden;
    text-align: center;
    z-index: 1105 !important;
    margin-top: 0 !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    position: relative !important;
    margin-bottom: 1rem;
    margin-right: -1em !important;
  }
  
  /* =========================
     UZUPEŁNIENIA DLA TREŚCI W PANE­LU (neutralne)
     ========================= */
  
  .user-side-panel-content ul { padding-left: 0; list-style: none; margin: 0; }
  .user-side-panel-content li { margin-bottom: 1rem; }
  
  /* Mapowanie tailwindowych klas używanych w JS (siła hasła) na kolory w panelu */
  .ghpanel-panel .text-red-600    { color: #fecaca; }
  .ghpanel-panel .text-yellow-600 { color: #fde68a; }
  .ghpanel-panel .text-green-600  { color: #bbf7d0; }
  .ghpanel-panel .text-sm         { font-size: .875rem; }
  .ghpanel-panel .mb-4            { margin-bottom: 1rem; }

/* ========================= RESETOWANIE HASŁA – pełna strona ========================= */
.form-contact-wrapper{
  display:flex;
  justify-content:center;
  padding: clamp(24px, 4vw, 48px) 16px;
  background: transparent; /* tło strony zostaje z motywu */
}

.form-school-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
}

.school-form-box{
  width:100%;
  max-width: 560px;                  /* szerokość karty */
  margin: 0 auto;
  padding: clamp(20px, 3.2vw, 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 6%);
}

/* Tytuł i komunikaty */
.school-form-box .reset-title{
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  text-align: center;
  color: rgb(23 123 254);
}

.school-form-box .reset-message{
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  text-align: center;
}
.school-form-box .reset-success{ background: rgb(16 185 129 / 12%); color:#047857; border:1px solid rgb(16 185 129 / 28%); }
.school-form-box .reset-error{   background: rgb(239 68 68 / 12%);  color:#991b1b; border:1px solid rgb(239 68 68 / 28%); }

/* Formularz: kolumna i stała szerokość pól */
.school-form-box form{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Pola – spójne z .szkoly-input, ale o stałej szerokości i centrowane */
.school-form-box .szkoly-input.reset-input{
  width: min(100%, 360px);           /* nie na całą stronę */
  padding: 10px 12px;
  border: 1px solid rgb(23 123 254 / 25%);
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
  background: #fff;
}

.school-form-box .szkoly-input.reset-input:focus{
  outline: none;
  border-color: rgb(23 123 254 / 60%);
  box-shadow: 0 0 0 2px rgb(23 123 254 / 18%);
}

/* Wskaźnik siły hasła (ten z #password-strength) jeśli występuje pod polem */
.school-form-box #password-strength{
  width: min(100%, 360px);
  align-self: center;
  margin: -6px 0 6px;
  text-align: left;
  font-size: .9rem;
}

/* Przycisk wysłania – też o stałej szerokości */
.school-form-box .szkoly-login-button{
  width: min(100%, 360px);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(23 123 254 / 35%);
  color: rgb(23 123 254);
  font-weight: 700;
  transition: .25s ease;
  box-shadow: 0 2px 6px rgb(23 123 254 / 12%);
  cursor: pointer;
}

.school-form-box .szkoly-login-button:hover{
  background: rgb(255 255 255 / 12%);
  border-color: rgb(23 123 254 / 55%);
  box-shadow: 0 6px 16px rgb(23 123 254 / 18%);
  transform: translateY(-1px);
}

/* Mobile drobne zagęszczenie */
@media (width <= 480px){
  .school-form-box{ padding: 18px; border-radius: 10px; }

  .school-form-box .szkoly-input.reset-input,
  .school-form-box .szkoly-login-button,
  .school-form-box #password-strength{ width: 100%; }
}

/* Session expire banner as centered modal */
.session-expire-banner {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 */
  z-index: 20000;
  display: flex; /* visible layout; hidden is controlled via .hidden */
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 35%); /* dim backdrop */
}
.session-expire-banner.hidden { display: none !important; }

.session-expire-content {
  width: min(480px, 92vw);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
  text-align: center;
}
.session-expire-message { margin: 0; color: rgb(23 123 254); font-weight: 700; font-size: 1.05rem; }
.session-expire-message #sessionCountdown { color: inherit; font-weight: 800; }
#extendSessionBtn { margin-top: auto; width: 100%; }

@media (width <= 540px) {
  .session-expire-content { width: 100%; max-width: 480px; }
}

/* External confirm modal (exit to Warcaby.TV) */
.external-link-confirm {
  position: fixed;
  inset: 0;
  z-index: 20050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(0 0 0 / 35%);
}
.external-link-confirm.hidden { display: none !important; }

.external-confirm-content {
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
  text-align: center;
}

.external-confirm-message {
  margin: 0;
  color: #123;
  font-weight: 700;
  font-size: 1.02rem;
}

.external-confirm-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }

.external-confirm-actions .szkoly-button {
  white-space: normal !important; /* override base nowrap */
  text-align: center;
  min-width: 200px;
}

@media (width <= 420px) {
  .external-confirm-actions { flex-direction: column; gap: 12px; }
  .external-confirm-actions .szkoly-button { width: 100%; min-width: 0; }
}

/* Buttons reuse .szkoly-button base; adjust colors slightly */
.external-confirm-cancel { border-color: #e5e7eb !important; color: #374151 !important; }
.external-confirm-ok { border-color: rgb(23 123 254 / 50%) !important; color: rgb(23 123 254) !important; }

@media (width <= 540px) {
  .external-confirm-content { width: 100%; max-width: 520px; }
}

/* Fallbacks when backdrop-filter is not supported (Firefox <103, older Safari without prefix, etc.) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .szkoly-header-inner {
    /* Make header more opaque for readability when blur is unavailable */
    background-color: rgb(255 255 255 / 85%) !important;
  }

  .szkoly-button,
  .szkoly-login-button,
  button.szkoly-login-button,
  a.szkoly-login-button {
    /* Safer background without blur */
    background: rgb(255 255 255 / 85%);
  }
}