/* =============================================
   DAARTS — Sidebar Navigation (Mobile-First)
   ============================================= */

/* --- Page with sidebar layout --- */
.page-with-sidebar {
   display: block;
}

/* --- Sidebar --- */
.sidebar {
   width: 100%;
   background: var(--color-white);
   padding: 0;
   margin: 0;
}

/* Mobile: sidebar as dropdown */
.sidebar-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 0 5px;
   height: 36px;
   line-height: 36px;
   background: #F24242;
   border: 1px solid #EB6864;
   border-radius: 0;
   cursor: pointer;
   font-family: var(--font-condensed);
   font-size: 14px;
   font-weight: normal;
   color: #FFFFFF;
}

.sidebar-toggle::after {
   content: "\f078";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 10px;
   transition: transform var(--transition);
}

.sidebar-toggle.is-open::after {
   transform: rotate(180deg);
}

.sidebar-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: none;
   width: 270px;
}

.sidebar-menu.is-open {
   display: block;
}

.sidebar-menu li {
   padding-bottom: 1px;
   border-bottom: none;
}

.sidebar-menu a {
   display: block;
   padding: 0 5px;
   height: 34px;
   line-height: 34px;
   font-family: var(--font-condensed);
   font-size: 13px;
   color: #FFFFFF;
   text-decoration: none;
   text-align: left;
   background: #F24242;
   border: 1px solid #EB6864;
   transition: all var(--transition);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.sidebar-menu a:hover {
   background: #E6403C;
   border-color: #CC0000;
   color: #FFFFFF;
}

.sidebar-menu a.active {
   background: #CC0000;
   border-color: #B04E4B;
   color: #FFFFFF;
   font-weight: normal;
}

/* --- Main content area --- */
.page-content {
   min-width: 0;
}

.page-content > .section {
   padding-top: 0 !important;
   margin-top: 0;
}

.page-content > .section > :first-child {
   margin-top: 0 !important;
}

.page-content h2.section-title {
   color: var(--color-text);
   border-bottom: none;
   padding-bottom: 0;
}

/* ======================
   MOBILE: sidebar-toggle replaces h1
   ====================== */
@media (max-width: 991px) {
   main > .container {
      display: flex;
      flex-direction: column;
   }

   .page-with-sidebar {
      display: contents;
   }

   .sidebar {
      order: -1;
      margin-bottom: 16px;
   }

   /* h1 hidden — sidebar-toggle serves as title + menu */
   main > .container > h1.section-title {
      display: none;
   }

   .sidebar-toggle {
      font-size: 18px;
      height: 42px;
      line-height: 42px;
      padding: 0 12px;
   }
}

/* ======================
   DESKTOP (>=992px)
   ====================== */
@media (min-width: 992px) {
   .page-with-sidebar {
      display: block;
   }

   .sidebar {
      float: left;
      width: 270px;
      margin: 0 16px 16px 0;
      padding: 0;
   }

   .sidebar-toggle {
      display: none;
   }

   .sidebar-menu {
      display: block;
      margin: 0;
      padding: 0;
   }

   .page-content {
      overflow: hidden;
   }
}