/* ====== BAZA ====== */
:root{
  --spk-bg:#F3F5F7;
  --spk-text:#3B3D4D;
  --spk-muted:#8F97A8;
  --spk-white:#fff;
  --spk-shadow:0 4px 20px rgba(0,0,0,.06);
  --spk-radius:16px;
  --spk-hover:#eef1f5;
  --spk-danger:#e5231b;
}

html,body{
  height:100%;
}

body{
  margin:0;
  background:var(--spk-bg);
  color:var(--spk-text);
  font-family: "Geist", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.45;
}

/* ====== LAYOUT ====== */
.spk-layout{
  display:flex;
  min-height:100vh;
  box-sizing:border-box;
  padding:14px;              /* oddech wokół białych kafelków */
  gap:20px;                  /* odstęp między sidebar a contentem */
}

/* ====== SIDEBAR ====== */
.spk-sidebar{
  width:160px;               /* trzymamy wąski sidebar jak wcześniej */
  background:var(--spk-white);
  border-radius:var(--spk-radius);
  box-shadow:var(--spk-shadow);
  padding:16px 0px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:0 0 185px;            /* nie pozwalaj zmieniać szerokości */
}

.spk-sidebar__logo{
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}

.spk-sidebar__logo img{
  display:block;
  width:120px;
  height:auto;
  border-radius:50%;
  object-fit:cover;
}

.spk-sidebar__nav{ width:100%; }
.spk-sidebar__nav ul{
  list-style:none; margin:0; padding:0;
}
.spk-sidebar__nav li{ width:100%; }

.spk-sidebar__nav a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--spk-text);
  padding:10px 10px; border-radius:10px;
  transition:background .15s ease;
  white-space:nowrap;
}
.spk-sidebar__nav a:hover{ background:var(--spk-hover); }

/* ––– WYŁĄCZONY link (Sensations English) ––– */
.spk-sidebar__nav a.spk-link--disabled{
  color:var(--spk-muted);
  background:#f3f5f7;
  cursor:not-allowed;
  pointer-events:none;           /* faktycznie nieklikalny */
  position:relative;
}
.spk-badge{
  margin-left:auto;
  font-size:.72rem;
  color:#6b7280;
  background:#e9edf3;
  padding:2px 6px;
  border-radius:9999px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ====== CONTENT ====== */
.spk-content{
  flex:1 1 auto;
  min-width:0;
  /* nic nie narzucamy kafelkom w środku – tylko delikatny oddech */
  padding:0 6px 18px 6px;
  background:transparent;
}

/* ====== WIADOMOŚCI ====== */
.spk-flash{ max-width:1100px; margin:10px auto 0; }
.spk-flash__item{
  border-radius:10px; padding:10px 14px; margin:8px 0; border:1px solid transparent;
  background:#eef4ff; color:#133a7a; border-color:#cfe0ff;
}
.spk-flash__item--success{ background:#eaf7ea; color:#0e7a1f; border-color:#bfe3c1; }
.spk-flash__item--error{   background:#fdecec; color:#a90000; border-color:#f5b7b1; }

/* ====== DROBNE DOPIESZCZENIA ====== */
.spk-sidebar i{ width:18px; height:18px; }

/* NIE DOTYKAJ klas .s-card, .donut, .section-classes itd.
   żeby nie rozwalać wizualnych kafelków w treści dashboardu */

/* --- FEATHER SVG w sidebarze: wymuszamy widoczność i wymiary --- */
.spk-sidebar__nav a svg {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  stroke: currentColor !important;   /* przejmuje kolor tekstu linku */
  stroke-width: 2 !important;
  margin-right: 2px;
  vertical-align: middle;
}

/* Ikona w linku wyłączonym (Sensations English) – przygaszona */
.spk-sidebar__nav a.spk-link--disabled {
  color: var(--spk-muted);
}
.spk-sidebar__nav a.spk-link--disabled svg {
  opacity: .8;
}

/* (opcjonalnie) wyrównanie tekstu i ikon w menu */
.spk-sidebar__nav a {
  gap: 10px;
  align-items: center;
}

/* Tylko w sekcji pomocy (kontener .form) */
.form .form-control,
.form input,
.form textarea,
.form select {
  border: none !important;         /* brak ramki */
  box-shadow: none !important;     /* brak niebieskiej poświaty Bootstrapa */
  outline: none !important;        /* brak outline */
  background: #fff;                /* czyste tło (zmień jeśli chcesz) */
  border-radius: 8px;
  margin: 20px; 
}

/* Na focus nic nie podświetlaj (opcjonalnie możesz dać delikatne tło) */
.form .form-control:focus,
.form input:focus,
.form textarea:focus,
.form select:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff; /* np. #f9fbfc, jeśli chcesz subtelny sygnał */
}

/* Safari/Firefox drobiazgi */
.form input,
.form select,
.form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ====== MOJE ZAJĘCIA (LESSONS) ====== */

.lessons-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.lessons-header h2 {
  font-size: 28px;
  margin: 0;
  color: var(--spk-text);
}

.lessons-header .spk-btn-group {
  display: flex;
  gap: 12px;
}

.lessons-header .spk-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}

.spk-btn--materials {
  background: var(--spk-text);
  color: white;
}
.spk-btn--materials:hover {
  background: #2d2f3b;
}

.spk-btn--reserve {
  background: #DFE6ED;
  color: var(--spk-text);
}
.spk-btn--reserve:hover {
  background: #d1d9e1;
}

.lesson-card {
  background: var(--spk-white);
  padding: 20px;
  border-radius: var(--spk-radius);
  box-shadow: var(--spk-shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}

.lesson-card .lesson-date {
  flex: 0 0 120px;
  font-weight: 500;
  font-size: 14px;
  color: var(--spk-text);
}

.lesson-card .lesson-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.lesson-card .lesson-info img {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
}

.lesson-card .lesson-info-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-card .lesson-info-text .teacher {
  font-weight: 600;
  font-size: 16px;
  color: var(--spk-text);
}

.lesson-card .lesson-info-text .topic {
  font-size: 14px;
  color: var(--spk-muted);
}

.lesson-card .lesson-actions {
  display: flex;
  gap: 12px;
}

.lesson-card .lesson-actions button,
.lesson-card .lesson-actions a {
  border: none;
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
}

.lesson-card .lesson-actions .cancel-btn {
  background: #DFE6ED;
  color: var(--spk-text);
}

.lesson-card .lesson-actions .cancel-btn:hover {
  background: #c9d3db;
}

.lesson-card .lesson-actions .join-btn {
  background: var(--spk-danger);
  color: white;
  pointer-events: none;
  opacity: 0.5;
}
.lesson-card .lesson-actions .join-btn.active {
  pointer-events: auto;
  opacity: 1;
}
.lesson-card .lesson-actions .join-btn:hover {
  background: #d01e18;
}

.join-hint {
  font-size: 0.9em;
  color: #888;
  margin-top: 6px;
}

/* ====== PRZYCISKI UNIWERSALNE ====== */
.spk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font: 600 14px Geist, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.spk-btn:disabled,
.spk-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* GŁÓWNY (czerwony) */
.spk-btn--primary {
  background: var(--spk-danger);
  color: white;
}
.spk-btn--primary:hover {
  background: #c91e17;
}

/* OBRYS */
.spk-btn--outline {
  background: transparent;
  border: 1.5px solid var(--spk-text);
  color: var(--spk-text);
}
.spk-btn--outline:hover {
  background: var(--spk-hover);
}

/* JOIN (zielony) */
.spk-btn--join {
  background: #77b28c;
  color: white;
}
.spk-btn--join:hover {
  background: #66a279;
}

/* CANCEL (szary/czarny) */
.spk-btn--cancel {
  background: #f5f5f5;
  color: #333;
}
.spk-btn--cancel:hover {
  background: #e0e0e0;
}

/* MAŁY przycisk (np. w kafelkach lekcji) */
.spk-btn--small {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  line-height: 1.2;
}

/* ====== GÓRNY PASEK W "MOJE ZAJĘCIA" ====== */

.spk-lessons-top {
  background: white;
  box-shadow: 0px 10px 22px rgba(153, 156, 178, 0.03);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.spk-lessons-top__left {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.spk-lessons-top__card {
  background: var(--spk-bg);
  padding: 16px;
  border-radius: 10px;
  width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  color: var(--spk-text);
}

.spk-lessons-top__title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--spk-text);
}

.spk-lessons-top__desc {
  font-size: 12px;
  color: var(--spk-muted);
}

.spk-lessons-top__desc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.spk-lessons-top_count {
  font-weight: 600;
  color: var(--spk-text);
  font-size: 14px;
}

.spk-lessons-top__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 14px;
  min-width: 260px;
  flex: 1;
}

.spk-lessons-top__info {
  font-size: 12px;
  color: var(--spk-muted);
}

/* Przyciski (styl już masz – tu tylko upewnienie się, że działa) */
.spk-btn--materials {
  background: var(--spk-text);
  color: white;
}
.spk-btn--materials:hover {
  background: #2d2f3b;
}

.spk-lessons__heading {
  margin: 40px 0 20px 0;
}

.spk-lessons__heading h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--spk-text);
}

.spk-lessons__sub {
  margin-top: 8px;
  color: var(--spk-muted);
  font-size: 14px;
}

.lesson-card {
  background: var(--spk-white);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 10px 22px rgba(153, 156, 178, 0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.lesson-card__date {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lesson-card__day {
  color: var(--spk-text);
  font-size: 16px;
  font-weight: 500;
}

.lesson-card__time {
  color: var(--spk-muted);
  font-size: 14px;
  font-weight: 400;
}

.lesson-card__teacher {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 400px;
}

.lesson-card__teacher img {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
}

.lesson-card__teacher-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-card__teacher-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--spk-text);
}

.lesson-card__topic {
  font-size: 14px;
  color: var(--spk-muted);
}

.lesson-card__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.spk-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* === Karta lekcji === */
.lesson-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 10px 22px rgba(153, 156, 178, 0.03);
  gap: 20px;
  flex-wrap: wrap;
}

.lesson-card__date,
.lesson-card__teacher,
.lesson-card__info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.lesson-card__date {
  color: #999CB3;
  font-weight: 400;
}

.lesson-card__date .day {
  color: #3B3D4D;
  font-size: 16px;
  font-weight: 500;
}

.lesson-card__teacher strong {
  color: #3B3D4D;
  font-size: 16px;
  font-weight: 600;
}

.lesson-card__teacher small {
  color: #999CB3;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
}

.lesson-card__info {
  text-align: right;
  font-size: 14px;
}

.lesson-card__info a {
  display: inline-block;
  margin-top: 6px;
  color: #417690;
  text-decoration: none;
  font-weight: 500;
}

/* === Materiały === */
.lesson-card__materials {
  margin-top: 8px;
}

.lesson-card__materials ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

.lesson-card__materials li {
  margin-bottom: 4px;
  font-size: 14px;
}

.lesson-card__materials a {
  background: #DFE6ED;
  padding: 6px 12px;
  border-radius: 9999px;
  color: #3B3D4D;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* === Nagłówek i filtr === */
.materials-header {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #3B3D4D;
}

.materials-sub {
  font-size: 14px;
  color: #8F97A8;
  margin-bottom: 30px;
}

.materials-filter {
  width: 120%;
  padding: 20px;
  background: var(--spk-bg); /* #F3F5F7 */
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: flex-start;
  margin-bottom: 40px;
}

.materials-filter__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 170px;
  font-size: 14px;
  color: var(--spk-text);
}

.materials-filter__field--wide {
  width: 240px;
}

.materials-filter__field label {
  color: var(--spk-muted);
  font-size: 14px;
  font-weight: 400;
}

.materials-filter__field input,
.materials-filter__field select {
  padding: 12px 16px;
  background: white;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 10px 22px rgba(153, 156, 178, 0.03);
  font-size: 14px;
  font-weight: 400;
  color: var(--spk-text);
  appearance: none;
}

.materials-filter__submit {
  width: 220px;
  display: flex;
  align-items: center;
  height: 100%;
}

.spk-btn--filter {
  padding: 12px 24px;
  background: var(--spk-text);
  color: white;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.spk-btn--filter:hover {
  background: #c91e17;
}

.materials-filter {
  font-family: 'Geist', sans-serif;
}

/* Wymuś Geist na inputach flatpickr */
.flatpickr-input {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--spk-text);
}

.flatpickr-calendar {
  font-family: 'Geist', sans-serif !important;
}

input[type="text"].flatpickr-input {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3B3D4D !important;
  line-height: 1.2 !important;
}

.lesson-material-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: white;
  border-radius: 10px;
  padding: 32px 20px;
  box-shadow: 0px 10px 22px rgba(153, 156, 178, 0.03);
  gap: 20px;
}

.lesson-material__left {
  width: 180px;
  display: flex;
  flex-shrink: 0;
  font-family: Geist, sans-serif;
  flex-direction: column;
  gap: 14px;
}

.lesson-material__date {
  font-size: 16px;
  font-weight: 500;
  font-family: Geist, sans-serif;
  color: #3B3D4D;
  line-height: 16.2px;
}

.lesson-material__time {
  font-size: 12px;
  font-weight: 500;
  font-family: Geist, sans-serif;
  color: #999CB3;
  line-height: 12.2px;
}

.lesson-material__center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  font-family: Geist, sans-serif;
  max-width: 600px;
}

.lesson-material__topic {
  font-size: 16px;
  font-weight: 500;
  font-family: Geist, sans-serif;
  color: #3B3D4D;
  line-height: 16.2px;
}

.lesson-material__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lesson-material__label {
  font-size: 12px;
  font-weight: 400;
  font-family: Geist, sans-serif;
  color: #999CB3;
  line-height: 12.2px;
}

.lesson-material__file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #DFE6ED;
  border-radius: 60px;
  font-size: 12px;
  font-weight: 600;
  font-family: Geist, sans-serif;
  color: #3B3D4D;
  line-height: 12.2px;
  text-decoration: none;
}

.lesson-material__icon {
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%233B3D4D" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14m7-7H5"></path></svg>') no-repeat center;
  background-size: 16px;
}

.lesson-material__right {
  width: 160px;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.lesson-material__avatar {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
}

.lesson-material__teacher {
  font-size: 16px;
  font-weight: 500;
  font-family: Geist, sans-serif;
  color: #3B3D4D;
  line-height: 16.2px;
}

/* === Flatpickr (wymuszenie Geist) === */
.flatpickr-input,
input[type="text"].flatpickr-input {
  font-family: 'Geist', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3B3D4D !important;
  line-height: 1.2 !important;
}
.flatpickr-calendar {
  font-family: 'Geist', sans-serif !important;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-family: Geist, sans-serif;
}

.pagination a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #DFE6ED;
  text-decoration: none;
  color: #3B3D4D;
  font-weight: 600;
}

.pagination .current {
  padding: 6px 12px;
  border-radius: 8px;
  background: #3B3D4D;
  color: white;
  font-weight: 600;
}