/* --- 1. TŁO I STRUKTURA GŁÓWNA --- */
body {
  background-color: #d1e2f1 !important;
}

.container-header {
  background-color: #2980b9 !important; 
  background-image: none !important;
  color: #ffffff !important;           
  padding: 30px 0 !important;
  border-bottom: 2px solid #1a5276;
}

main {
  background-color: #ffffff !important; 
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-top: 20px;
}

.sidebar-right {
  background-color: #f0f7fd !important;
  padding: 15px !important;
  border-radius: 8px;
  border: 2px solid #2980b9;
}

/* --- 2. NAGŁÓWKI MODUŁÓW (np. Strefa Ucznia) --- */
.card-header {
  background-color: #2980b9 !important; 
  color: #ffffff !important;
  padding: 0.75rem 1rem;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
}
.blog-item, .item-page {
  background-color: #ffffff !important;
  border: 2px solid #d1e2f1 !important;
  padding: 25px !important;
  border-radius: 8px !important;
  margin-bottom: 25px !important;
}

/* --- 3. USUNIĘCIE STRZAŁEK I TOGGLERÓW --- */
.mm-toggler, 
.metismenu .has-arrow::after,
.mod-menu .mm-toggler {
  display: none !important;
}
/* --- 4. TYTUŁ SZKOŁY - POPRAWKA ŁAMANIA SŁÓW --- */
header .navbar-brand, .navbar-brand, .site-title {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  display: block !important;
  color: #ffffff !important; 
  font-weight: bold;
  font-size: 2.2rem !important;
}
/* --- 5. PRZYPIĘTE MENU GÓRNE (DESKTOP) --- */
header.header {
  position: relative !important;
  display: block !important;
  padding-top: 80px !important; 
}

.container-nav {
  height: 60px; 
}

.container-nav .navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #1a5276 !important; 
  padding: 8px 0 !important;
  margin: 0 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex !important;
  justify-content: center !important;
}

.container-nav .mod-menu {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: wrap !important;
}

/* GŁÓWNE PRZYCISKI */
.container-header .mod-menu a,
.container-nav .mod-menu a,
.container-nav .nav-link {
  background-color: #2980b9;
  color: #ffffff !important;
  padding: 4px 8px !important;       
  margin: 2px 3px !important;        
  font-size: 0.9rem !important;      
  border-radius: 4px !important;     
  text-decoration: none;
  display: inline-block;
}

/* ROZWIJANE PODMENU - Zmiana białego tła na ciemny granat (#1a5276) */
.container-nav .dropdown-menu,
.container-nav .mod-menu ul,
.container-nav .metismenu ul {
  background-color: #1a5276 !important; /* CIEMNY GRANAT ZAMIAST BIELI */
  border: 1px solid #2980b9 !important;  /* Delikatna ramka wokół podmenu */
  padding: 4px 0 !important;         
  min-width: 140px !important;       
  border-radius: 4px !important;     
}

/* LINKI WEWNĄTRZ PODMENU */
.container-nav .dropdown-item,
.container-nav .dropdown-menu a,
.container-nav .mod-menu ul a,
.container-nav .metismenu ul a {
  background-color: #2980b9 !important; /* Kolor przycisków wewnątrz podmenu */
  color: #ffffff !important;      
  padding: 4px 10px !important;      
  font-size: 0.85rem !important;     
  margin: 2px 4px !important;          
  border-radius: 4px !important;     
  display: block !important;
}

/* EFEKT PO NAJECHANIU MYSZKĄ - DLA CAŁEGO MENU GÓRNEGO I PODMENU */
.container-nav a:hover,
.container-nav .nav-link:hover,
.container-nav .mod-menu a:hover,
.container-header .mod-menu a:hover,
.container-nav .dropdown-item:hover,
.container-nav .dropdown-menu a:hover {
  background-color: #ff0000 !important; /* Czerwone tło po najechaniu */
  color: #ffffff !important;           
  border-radius: 4px !important;     
  transition: background-color 0.2s ease; 
}
/* --- 6. STOPKA STRONY (WYŚRODKOWANA I WĄSKA) --- */
.container-footer {
  background-color: #1a5276 !important; /* Granat jak w menu */
  background-image: none !important;
  color: #ffffff !important;
  padding: 15px 0 !important; /* Wąska stopka */
  margin-top: 30px !important;
}

.container-footer .grid-child,
.container-footer .footer,
.container-footer .mod-custom,
.container-footer .footer-content {
  display: flex !important;
  flex-direction: row !important; /* Elementy obok siebie */
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.container-footer a {
  color: #ffcc00 !important; 
  text-decoration: none;
}

/* --- 7. RESPONSYWNOŚĆ I HAMBURGER PO LEWEJ --- */
@media (max-width: 991px) {
  header.header { 
    display: flex !important; 
    flex-direction: column !important;
    padding-top: 0 !important; 
  }
  
  .container-nav { 
    order: -1 !important; 
    height: auto !important; 
    position: relative !important;
    width: 100% !important;
  }
  
  .container-header {
    order: 0 !important; 
    width: 100% !important;
    padding: 20px 10px !important;
  }

  .container-nav .navbar {
    position: relative !important;
    display: flex !important;
    justify-content: flex-start !important; 
    background-color: #1a5276 !important;
    padding: 10px 20px !important;
  }

  .navbar-toggler {
    display: block !important;
    border: 2px solid #ffffff !important;
  }

  /* Ikona hamburgera na biało */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  header .navbar-brand, .site-title { 
    font-size: 1.3rem !important; 
    text-align: center;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    width: 100% !important;
  }

  /* Stopka na mobilnych w pionie */
  .container-footer .grid-child, .container-footer .footer {
    flex-direction: column !important;
    gap: 10px !important;
  }
}