/* stylelint-disable selector-id-pattern, selector-class-pattern, no-descending-specificity, declaration-block-single-line-max-declarations */

/* 📄 dashboard.css — style dashboardu, panelu użytkownika i profilu */

/* Pola formularza */
.szkoly-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #f9f9f9;
  }
  
  .szkoly-input:disabled {
    background: #f2f2f2;
  }
  
  /* Przycisk */
 
  
  /* Mini marginesy i odstępy */
  .mt-10 {
    margin-top: 10px;
  }
  
  /* Modal poprawki szkoły */
  #schoolChangeModal {
    margin-top: 1rem;
  }
  
  #schoolChangeText {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-size: 1rem;
  }

/* Nowe style dla avatara i układu formularza */

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.form-col-50 {
    flex: 1 1 48%;
}

.form-col-33 {
    flex: 1 1 30%;
}

.form-col-25 {
    flex: 1 1 22%;
}

/* Added new form column sizes for address fields */
.form-col-60 {
    flex: 1 1 58%;
}

.form-col-40 {
    flex: 1 1 38%;
}

/* ✅ Mobile: układ pól w jednej kolumnie i brak overflow */
@media (width <= 768px) {
  .form-row { flex-direction: column; gap: 0.75rem; }

  .form-col-50,
  .form-col-33,
  .form-col-25,
  .form-col-60,
  .form-col-40 { flex: 1 1 100%; width: 100%; min-width: 0; }

  /* Upewnij się, że pola nigdy nie wychodzą poza ekran */
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row input[type="tel"],
  .form-row input[type="password"],
  .form-row select,
  .form-row textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}

.reset-form-wrapper {
  max-width: 480px;
  width: 100%;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
  margin: 0 auto;
}

.reset-form-wrapper h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.reset-input,
.szkoly-input {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid rgb(23 123 254) !important;
  border-radius: 8px !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  color: rgb(23 123 254) !important;
  margin-bottom: 16px !important;
  background-color: #fff !important;
  box-sizing: border-box;
}

a.reset-link {
  white-space: nowrap;
}

/* ==============================
   🆕 Boczne menu użytkownika (prawy panel)
   Ciemny granat + jasne ikony/menu
   ============================== */
.user-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 260px;
  background-color: #0c1e3a; /* ciemny granat */
  color: #e9efff;            /* jasny tekst */
  box-shadow: -8px 0 20px rgb(0 0 0 / 25%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  border-left: 1px solid rgb(23 123 254 / 25%);
}

/* Kontener w footer-szkoly.php (opcjonalny układ) */
.user-side-panel-container {
  position: relative;
  z-index: 2000;
}

/* Odsunięcie treści na desktopie, aby nie nachodziła pod panel */
@media (width >= 992px) {
  body.has-user-side-panel {
    padding-right: 260px;
  }
}

.user-side-menu {
  margin: 0;
  padding: 0;
}

.user-side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-side-menu li {
  margin: 0;
}

.user-side-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.6rem;
  border-radius: 0.5rem;
  color: #e9efff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.user-side-link:hover {
  background-color: rgb(23 123 254 / 18%);
  color: #fff;
  transform: translateX(-1px);
}

.user-side-link--danger {
  color: #ffebef;
}

.user-side-link--danger:hover {
  background-color: rgb(220 38 38 / 22%);
  color: #fff;
}

.user-side-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  filter: brightness(0) invert(1) opacity(0.9); /* rozjaśnij SVG na ciemnym tle */
}

/* Mobile: panel szerzej, półprzezroczysty z delikatnym blur */
@media (width <= 768px) {
  .user-side-panel {
    width: 85vw;
  }

  @supports (backdrop-filter: blur(6px)) {
    .user-side-panel {
      backdrop-filter: blur(6px);
    }
  }
}

/* ==============================
   Admin panel: top actions spacing
   ============================== */
.admin-panel-container .admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; /* 10px odstęp między przyciskami */
  margin: 10px 0 20px; /* 20px pod całą grupą */
}

/* Mobile/ciasny układ: drugi przycisk nieco niżej */
@media (width <= 768px) {
  .admin-panel-container .admin-actions > *:nth-child(2) {
    margin-top: 10px;
  }
}

/* ==============================
   DASHBOARD MODUŁÓW (kafelki 3x w rzędzie, pionowe prostokąty)
   ============================== */
:root{
  --dash-accent:#177BFE;       /* rgb(23,123,254) */
  --dash-fg:#1f2937;           /* ciemny tekst */
  --dash-muted:#6b7280;        /* opis/secondary */
  --dash-card:#fff;            /* tło kart */
  --dash-bg:#f6f7fb;           /* tło dash */
  --dash-ok:#10b981;           /* zielony */
  --dash-warn:#f59e0b;         /* żółty */
  --dash-danger:#ef4444;       /* czerwony */
  --dash-radius:16px;
  --dash-shadow:0 10px 26px rgb(0 0 0 / 6%);
}

.dashboard-wrap{
  background:var(--dash-bg);
  padding:28px 24px 36px;
  margin-top: 3em;
  font-family: Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  align-items: center;
}
.dashboard-head{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:18px; }
.dashboard-head h3{ margin:0; font-size:24px; font-weight:800; color:var(--dash-fg); }
.dashboard-head .hint{ color:var(--dash-muted); font-size:13px; }

.modules-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap:22px;
  justify-content: center;
}

@media (width <= 1100px){ .modules-grid{ grid-template-columns: repeat(2, 1fr); } }

@media (width <= 640px){ .modules-grid{ grid-template-columns: 1fr; } }

.module-card{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  min-height: 300px;
  background:var(--dash-card);
  border-radius:var(--dash-radius);
  box-shadow:var(--dash-shadow);
  padding:16px 16px 14px;
  outline:1px solid rgb(0 0 0 / 5%);
  transition:transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
}
.module-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgb(0 0 0 / 8%); outline-color: rgb(23 123 254 / 18%); }

.module-header{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }

.module-icon{
  width:80px; height:80px; border-radius:16px;
  background:#eef5ff;
  border:1px solid rgb(23 123 254 / 22%);
  display:grid; place-items:center; flex:0 0 auto;
}
.module-icon svg{ width:44px; height:44px; color:var(--dash-accent); }

.module-title{ font-weight:800; color:var(--dash-fg); line-height:1.15; font-size:15px; }
.module-key{ font-size:12px; color:var(--dash-muted); }
.module-desc{ font-size:13px; color:#394150; line-height:1.35; min-height:auto; text-align:center; margin:0 4px; }

.module-metas{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgb(0 0 0 / 6%); background:#f8fafc; color:#111827; }
.badge.accent{ border-color: rgb(23 123 254 / 20%); background: rgb(23 123 254 / 9%); color:#0b4ea9; }
.badge.ok{ border-color: rgb(16 185 129 / 20%); background: rgb(16 185 129 / 9%); color:#0c8a64; }
.badge.warn{ border-color: rgb(245 158 11 / 20%); background: rgb(245 158 11 / 12%); color:#8a5b03; }
.badge.danger{ border-color: rgb(239 68 68 / 20%); background: rgb(239 68 68 / 12%); color:#8a1320; }

.module-actions{ display:flex; gap:8px; margin-top:auto; justify-content:center; }
.btn{ font-size:13px; font-weight:600; border:1px solid transparent; border-radius:8px; padding:8px 14px; cursor:pointer; background:#f3f6ff; color:#1e3a8a; transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgb(23 123 254 / 18%); }
.btn:focus-visible{ outline:3px solid rgb(23 123 254 / 35%); outline-offset:2px; }
.btn.primary{ background: var(--dash-accent); color:#fff; border-color: var(--dash-accent); }
.btn.primary:hover{ background:#0f67e0; }
.btn.ghost{ background:#fff; color:#0b4ea9; border-color: rgb(23 123 254 / 28%); display:none !important; }
.btn.ghost:hover{ border-color: rgb(23 123 254 / 45%); box-shadow: 0 6px 18px rgb(0 0 0 / 6%); }

/* Stany */
.module-card.is-locked{ opacity:.78; }
.module-card.is-expired{ outline-color: rgb(239 68 68 / 25%); }