/* Paleta de culori inspirată din Bootstrap Themes exemplul 2 */
:root {
  --primary-color: #2C3E50; /* o nuanță închisă de albastru */
  --secondary-color: #459284; /* verde/turcoaz modern */
  --light-color: #ecf0f1; /* gri deschis, aproape alb */
  --dark-color: #34495e; /* gri închis */
}

/* Stil pentru navbar */
.navbar {
  background-color: var(--primary-color) !important;
}

/* Navbar brand */
.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Stiluri pentru butoanele din navbar (iconițe) */
.navbar-nav .nav-link {
  font-size: 1.0rem;
  color: var(--light-color) !important;
  transition: color 0.3s;
}
.navbar-nav .nav-link:hover {
  color: var(--secondary-color) !important;
}

/* Sidebar */
.sidebar {
  background-color: var(--light-color);
  border-right: 1px solid var(--dark-color);
}
.sidebar .nav-link {
  color: var(--dark-color);
  transition: background-color 0.3s, color 0.3s;
}
.sidebar .nav-link:hover {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

/* Accordion headers in sidebar */
.accordion-button {
  background-color: var(--light-color);
  color: var(--dark-color);
  font-weight: bold;
}
.accordion-button:not(.collapsed) {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

/* Butonul "Acasă" */
.btn-outline-primary {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
  transition: background-color 0.3s, color 0.3s;
}
.btn-outline-primary:hover {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

/* Butonul "Înapoi" */
.back-button-container {
  margin-left: 0px;   /* Ajustează această valoare după nevoie */
}

/* Alte stilizări generale */
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.0; /* Compactează spațiul dintre linii */
  /*background-color: var(--light-color);
  color: var(--dark-color); */
  background-color: #f8f9fa;   
}

.container, .content {
  padding: 0%; /* Reduce spațiul interior */
}

h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-size: 22px; 
  font-weight: 700; /* Face titlurile mai clare */
}

.table td, .table th {
  font-family: 'Inter', sans-serif;
  font-size: 15px; /* Micșorează fontul în tabele */
  font-weight: 500;
  text-align: left; /* Aliniază textul la stânga */
  vertical-align: middle; /* Centrează vertical textul în celulă */
  padding: 0px; /* Reduce spațiul interior al celulelor */
  padding-left: 5px;  /* Adaugă spațiu în partea stângă */
}
/* 
.table {
  background-color: var(--light-color);
  color: var(--dark-color);
}

.table th {
  background-color: var(--primary-color);
  color: var(--light-color);
}

.table td {
  border-color: var(--dark-color);
}

button, .btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
*/
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-color);
  transition: background-color 0.3s, color 0.3s;
}

.btn-primary:hover {
  background-color: darken(var(--secondary-color), 10%);
  color: var(--primary-color);
}

.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--light-color);
  transition: background-color 0.3s, color 0.3s;
}

.btn-secondary:hover {
  background-color: darken(var(--secondary-color), 10%);
  color: var(--primary-color);
}

.dropdown-toggle {
  font-size: 13px;
  padding: 4px 8px;
  background-color: var(--light-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.dropdown-toggle:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.dropdown-menu {
  font-size: 14px; /* Micșorează fontul pentru elementele dropdown */
  padding: 5px 10px; /* Reduce spațiul interior */
  background-color: #f8f9fa;
  color: var(--primary-color);
}

.dropdown-item {
  font-size: 14px; /* Micșorează textul fiecărui element */
  padding: 5px 10px; /* Face elementele mai compacte */
  color: var(--primary-color);
}

.dropdown-item:hover {
  background-color: var(--secondary-color);
  color: #f8f9fa;
}

/* Exemplu simplu pentru dark theme */
.dark-theme {
  background-color: #2C3E50;
  color: #ecf0f1;
}

.dark-theme .navbar {
  background-color: #1A252F !important;
}

.dark-theme .sidebar {
  background-color: #1A252F;
  border-right: 1px solid #34495e;
}

.dark-theme .nav-link {
  color: #ecf0f1 !important;
}

.dark-theme .accordion-button {
  background-color: #1A252F;
  color: #ecf0f1;
}

.offcanvas {
  width: 250px; /* Ajustează lățimea offcanvas-ului după preferință */
}

@media (max-width: 768px) {
  #sidebarMenu {
      display: none;
  }

  .offcanvas {
      width: 80%;
      background-color: var(--light-color);
  }

  .offcanvas .nav-link {
      color: var(--primary-color) !important;
  }

  .offcanvas .nav-link:hover {
      background-color: var(--light-color);
      color: var(--primary-color);
  }

  /* Asigură că sidebar-ul nu rupe layout-ul */
  .container-fluid {
      padding-left: 15px;
      padding-right: 15px;
  }
}

.cke_contents {
  width: 100% !important;
  height: 400px !important;  /* Sau altă înălțime potrivită */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .cke_contents {
      width: 100px; 
      height: 400px !important; /* ajustați după necesitate */
  }
}