/* ========= Unicorn theme (sidebar + nav) ========= */
/* Palette / helpers */
:root { --unicorn-red: #8B0000; }

.bg-unicorn { background: var(--unicorn-red); }

/* FORCE SIDEBAR BACKGROUND — OVERRIDES EVERYTHING */
.sidebar,
.sidebar.offcanvas,
.sidebar.offcanvas-lg {
    background-color: #8B0000 !important;
}

/* Sidebar base */
.sidebar {
  background: var(--unicorn-red);
  color: #fff;
}

.sidebar .offcanvas-body { display: flex; flex-direction: column; min-height: 100%; }

.offcanvas-backdrop.show { opacity: .65; }

.sidebar .small,
.sidebar .text-muted { color: rgba(255,255,255,.85) !important; }

/* ----- Nav tree ----- */
.sidebar .nav-tree { display: flex; flex-direction: column; gap: .5rem; }

.sidebar .menu-group-header {
  margin-top: 1rem;
  margin-bottom: 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffdddd;
  opacity: 0.85;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar .menu-group-header:hover {
  opacity: 1;
  color: #ffffff;
  text-decoration: underline;
}
.sidebar .menu-group-chevron { font-size: 0.65rem; transition: transform 0.15s ease-in-out; }
.sidebar .menu-group-content { padding-left: 0; }
.sidebar .menu-group.collapsed .menu-group-content { display: none; }
.sidebar .menu-group.collapsed .menu-group-chevron { transform: rotate(-90deg); }

/* Links */
.sidebar .nav-tree a.leaf,
.sidebar .nav-tree button.leaf {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  text-align: left;
  color: #fff;
  background: transparent;
  border: 0;
}
.sidebar .nav-tree a.leaf:hover,
.sidebar .nav-tree button.leaf:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.sidebar .nav-tree a.leaf.active {
  background: rgba(255,255,255,.25);
  color: #fff;
}

.sidebar .nav-tree i {
  width: 1.25rem;
  text-align: center;
  color: inherit;
}

/* Collapsible branches */
.sidebar .nav-tree details.branch > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: .5rem;
  color: #fff;
}
.sidebar .nav-tree details.branch > summary:hover {
  background: rgba(255,255,255,.15);
}
.sidebar .nav-tree details > ul {
  margin: .35rem 0 .35rem .75rem;
  padding-left: .5rem;
  border-left: 2px solid rgba(255,255,255,.25);
}
.sidebar .nav-tree li { list-style: none; margin: .15rem 0; }

/* ----- Sidebar Footer (user area) ----- */
.sidebar .sidebar-footer {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.25);
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: .75rem;
  align-items: center;
}

.sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3); /* soft white glow */
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar .sidebar-footer button.leaf {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .75rem;
    border-radius: .5rem;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    text-decoration: none;
}

.sidebar .sidebar-footer button.leaf:hover {
    background: rgba(255,255,255,.15) !important;
}

/* ===== FIXED SIDEBAR WIDTH (prevents resizing completely) ===== */
.sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important; /* absolutely critical */
}

.instructor-different {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}

/* Highlight rows where per-day instructor differs from lead instructor */
#booking-days tr.instructor-different {
    background-color: rgba(255, 235, 59, 0.25) !important;
    border-left: 4px solid #0d6efd !important;
}
/* Make entire row highlight + full outline */
#booking-days tr.instructor-different > td {
    background-color: rgba(255, 235, 59, 0.25) !important;
    border-top: 2px solid #0d6efd !important;
    border-bottom: 2px solid #0d6efd !important;
}

#booking-days tr.instructor-different > td:first-child {
    border-left: 2px solid #0d6efd !important;
}

#booking-days tr.instructor-different > td:last-child {
    border-right: 2px solid #0d6efd !important;
}