/* =========================================================
   My Sfetnic – app.css FINAL (ai.suport-like sidebar)
========================================================= */

/* -------------------- Variables -------------------- */
:root{
  --ms-bg: #f6f8fb;
  --ms-card: #ffffff;
  --ms-border: rgba(15, 23, 42, .08);

  --ms-navbar-z: 1100;

  --sb-bg: #1f2a3a;
  --sb-bg2:#1b2533;

  --sb-text: rgba(255,255,255,.88);
  --sb-text-soft: rgba(255,255,255,.70);

  --sb-hover: rgba(255,255,255,.04);
  --sb-active: rgba(255,255,255,.05);

  --sb-accent: #0d6efd; /* active bar */
}

/* -------------------- Base -------------------- */
html, body { height: 100%; }
body { background: var(--ms-bg); }
a { text-decoration: none; }
* { -webkit-tap-highlight-color: transparent; }

/* -------------------- Full width content -------------------- */
.container-xl,
.page-body .container-xl{
  max-width: 100% !important;
}

/* -------------------- Navbar + dropdown overlap fix -------------------- */
header.navbar{
  position: sticky;
  top: 0;
  z-index: var(--ms-navbar-z);
  overflow: visible !important;
}

header.navbar .container-fluid{
  overflow: visible !important;
}

/* dropdowns must appear above cards/tables */
header.navbar .dropdown-menu{
  z-index: 3000;
  border-radius: 14px;
  border: 1px solid var(--ms-border);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* prevent clipping */
.page,
.page-wrapper,
.page-body{
  overflow: visible !important;
}

/* -------------------- Cards / Tables / Forms polish -------------------- */
.card{
  border-radius: 14px;
  border: 1px solid var(--ms-border);
}
.table{ border-color: var(--ms-border); }
.badge{ border-radius: 999px; }
.form-control, .form-select{ border-radius: 10px; }
.btn{ border-radius: 10px; }

/* -------------------- Icons baseline -------------------- */
.icon{
  font-size: 1rem;
  vertical-align: middle;
}

/* =========================================================
   DESKTOP SIDEBAR – flat rows (no "button frame")
========================================================= */

.navbar-vertical{
  background: #1f2a3a !important;              /* no gradient = ai.suport */
  border-right: 1px solid rgba(255,255,255,.06);
}

/* brand */
.navbar-vertical .navbar-brand{
  padding: .95rem 1rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .3px;
}

/* remove pill feeling */
.navbar-vertical .navbar-nav{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* each item flat */
.navbar-vertical .nav-item{
  margin: 0 !important;
}

/* main links: full-width rows */
.navbar-vertical .nav-link{
  position: relative;
  padding: .55rem .95rem;
  margin: 0 .35rem;
  border-radius: 6px !important;

  font-weight: 600;
  font-size: .94rem;
  line-height: 1.2rem;

  color: var(--sb-text);
  display: flex;
  align-items: center;
  gap: .65rem;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  transition: background .15s ease, color .15s ease;
}

.navbar-vertical .nav-link:hover{
  background: var(--sb-hover) !important;
  color: #fff;
}

.navbar-vertical .nav-link.active{
  background: var(--sb-active) !important;
  color: #fff;
}

/* open parent */
.navbar-vertical .nav-item.dropdown > .nav-link.show{
  background: rgba(255,255,255,.045) !important;
  color: #fff;
}

/* left active bar for active or open */
.navbar-vertical .nav-link.active::before,
.navbar-vertical .nav-item.dropdown > .nav-link.show::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--sb-accent);
}

/* chevron rotate subtle */
.navbar-vertical .nav-link.dropdown-toggle::after{
  opacity: .65;
  transform-origin: center;
  transition: transform .15s ease;
}
.navbar-vertical .nav-link.dropdown-toggle.show::after{
  transform: rotate(180deg);
}

/* =========================================================
   Sidebar submenu – inline list (NOT floating dropdown)
========================================================= */

.navbar-vertical .dropdown-menu{
  position: static !important;
  transform: none !important;
  float: none !important;
  inset: auto !important;

  display: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: .10rem 0 .35rem;
  margin: 0;
}

.navbar-vertical .dropdown-menu.show{
  display: block;
}

/* submenu items */
.navbar-vertical .dropdown-item{
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;

  font-size: .90rem;
  font-weight: 600;
  color: var(--sb-text-soft);

  padding: .46rem .95rem .46rem 2.35rem; /* indent */
  margin: 0 .35rem 0 1.0rem;             /* nested offset */

  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transition: background .15s ease, color .15s ease;
}

/* bullet */
.navbar-vertical .dropdown-item::before{
  content: "";
  position: absolute;
  left: 1.30rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

.navbar-vertical .dropdown-item:hover{
  background: var(--sb-hover) !important;
  color: #fff !important;
}

.navbar-vertical .dropdown-item.active{
  background: var(--sb-active) !important;
  color: #fff !important;
}
.navbar-vertical .dropdown-item.active::before{
  background: #fff;
}

/* icon alignment holder (even if empty) */
.navbar-vertical .nav-link-icon{
  width: 18px;
  display: inline-flex;
  justify-content: center;
}
.navbar-vertical .submenu-icon{
  width: 16px;
  display: inline-flex;
  justify-content: center;
}

/* =========================================================
   Smaller sidebar icons (main + submenu)
========================================================= */

.navbar-vertical .nav-link-icon .icon,
.navbar-vertical .nav-link-icon i,
.navbar-vertical .nav-link-icon svg{
  font-size: 0.90rem !important;
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.6 !important;
  opacity: .85;
}

.navbar-vertical .dropdown-item .icon,
.navbar-vertical .dropdown-item i,
.navbar-vertical .dropdown-item svg{
  font-size: 0.85rem !important;
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.6 !important;
  opacity: .75;
}

/* =========================================================
   MOBILE – offcanvas left (big buttons)
========================================================= */
@media (max-width: 991.98px){
  #offcanvasSidebar .offcanvas-body{ padding: 0; }

  #offcanvasSidebar .btn{
    padding: 1rem 1rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
  }

  #offcanvasSidebar .btn-outline-light{
    border: 1px solid rgba(255,255,255,.30);
  }

  #offcanvasSidebar .btn-outline-light:hover{
    background: rgba(255,255,255,.08);
  }

  #offcanvasSidebar .btn-light{
    background: #fff;
    color: #0f172a !important;
  }

  #offcanvasSidebar .mobile-menu-child{
    padding: .95rem 1rem;
    border-radius: 14px;
    font-size: 1rem;
  }

  #offcanvasSidebar .mobile-menu-parent.is-open .ti-chevron-down{
    transform: rotate(180deg);
  }

  #offcanvasSidebar .ti-chevron-down{
    transition: transform .2s ease;
  }
}