/* Hide mobile UI by default on desktop */
.mbottom-nav,
.mdrawer,
.mdrawer-backdrop {
  display: none;
}

/* ===== MOBILE ONLY ===== */
@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }

  .mbottom-nav,
  .mdrawer,
  .mdrawer-backdrop {
    display: block;
  }

  /* Bottom bar (unchanged) */
  .mbottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 6px 4px;
  }

  .mbottom-item {
    text-align: center;
    font-size: 11px;
    line-height: 1.1;
    color: #111827;
    background: none;
    border: 0;
  }

  .mbottom-item .icon,
  .md-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    margin-bottom: 4px;
  }

  .mbottom-item .icon svg,
  .md-icon svg {
    width: 100%;
    height: 100%;
  }

  .mbottom-item.active {
    color: #0d3b66;
    font-weight: 600;
  }

  /* Backdrop */
  .mdrawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }

  .mdrawer-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Drawer panel */
  .mdrawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.28s ease;
    max-height: 75vh;
    overflow: hidden;
  }

  .mdrawer.show {
    transform: translateY(0);
  }

  .mdrawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .mdrawer-title {
    font-weight: 700;
    font-size: 14px;
  }

  .mdrawer-close {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Make the sheet scroll */
  .mdrawer-body {
    padding: 8px 8px 16px;
    max-height: calc(75vh - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Search */
  .mdrawer-search {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 6px;
  }

  .mdrawer-search input {
    flex: 1;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
  }

  .mdrawer-search button {
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    border: 0;
    font-weight: 600;
  }

  /* ===== FORCE A TRUE VERTICAL LIST ===== */
  ul.mdrawer-list {
    list-style: none;
    margin: 6px 0 12px;
    padding: 0;
    display: block !important;
    /* kill any grid/flex overrides */
  }

  .mdrawer-list > li {
    display: block !important;
    /* one item per row */
    padding: 12px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .mdrawer-list > li:first-child {
    border-top: 0;
  }

  /* Each row: icon + label + chevron */
  .mdrawer-list > li > a,
  .md-submenu-toggle {
    width: 100%;
    display: flex !important;
    /* not inline or grid */
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    font-size: 14px;
  }

  /* Keep icons tidy */
  .md-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    flex: 0 0 20px;
  }

  .md-label {
    flex: 1 1 auto;
  }

  .md-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  /* Submenus (Assignment / Events) */
  .md-submenu {
    display: none;
    padding-left: 44px;
    margin-top: 6px;
  }

  .md-submenu.show {
    display: block;
  }

  .md-submenu li {
    list-style: none;
    padding: 8px 0;
  }

  .mdrawer-list .mini {
    font-weight: 500;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
    display: block;
  }

  /* Drawer list icons — force same size as bottom bar */
  .mdrawer-list .icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
  }

  .mdrawer-list .icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  /* --- Submenu: stack children as rows (mobile drawer only) --- */
  .mdrawer .md-submenu {
    display: none !important;
    /* hidden by default */
    padding-left: 44px;
    margin: 6px 0 0;
  }

  .mdrawer .md-submenu.show {
    display: block !important;
    /* ensure NOT flex/grid/inline */
  }

  .mdrawer .md-submenu li {
    display: block !important;
    /* kill any inline/inline-block rules */
    width: 100%;
    padding: 8px 0;
  }

  .mdrawer .md-submenu li + li {
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    /* subtle separator between rows */
  }

  .mdrawer .md-submenu a,
  .mdrawer .mdrawer-list .mini {
    display: block !important;
    /* make each link take full row width */
    text-decoration: none;
    font-size: 13px;
    color: #374151;
    padding: 0;
    /* keep your current spacing */
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Keep two columns instead of stacking */
  .dashboard .container-fluid.full__width__padding > .row {
    display: flex;
    flex-wrap: nowrap;
  }

  /* Sidebar width ~1/3 */
  .dashboard .col-xl-3.col-lg-3.col-md-12 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  /* Content width ~2/3 */
  .dashboard .col-xl-9.col-lg-9.col-md-12 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }

  /* Ensure desktop sidebar is visible on tablets */
  .dashboard__inner {
    display: block !important;
  }

  .dashboard__nav {
    display: block !important;
  }

  /* Hide mobile UI on tablets */
  .mbottom-nav,
  .mdrawer,
  .mdrawer-backdrop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  /* Anything you hid "for mobile" should be re-shown from 768px upwards */
  .dashboard__nav {
    display: block;
  }

  .hide-on-mobile {
    display: block !important;
  }

  /* Prevent the mobile bottom bar at exactly 768px */
  .mbottom-nav,
  .mdrawer,
  .mdrawer-backdrop {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .dashboard__nav .dropdown > a.dropdown-btn {
    pointer-events: none;
    /* stop click */
    cursor: default;
  }

  .dashboard__nav .dropdown > a .icofont-rounded-down {
    pointer-events: none;
    /* arrow not clickable */
  }

  /* Keep the hover behavior explicitly on desktop */
  .dashboard__nav .dropdown:hover > .dropdown-content {
    display: block !important;
  }
}