:root{
  --brand-bg-start:#D97A33;  /* orange */
  --brand-bg-end:#F5B027;    /* yellow for gradient */
  --sidebar-w: 260px;
  --navbar-h: 56px;
}

/* Top nav */
.app-navbar{
  background: linear-gradient(135deg, var(--brand-bg-start), var(--brand-bg-end));
  min-height: var(--navbar-h);
}

/* Layout baseline */
.app{
  margin-top: var(--navbar-h);
  min-height: calc(100vh - var(--navbar-h));
  overflow: hidden; /* keep things tidy during transitions */
  width: 100%;
}

/* Sidebar */
.app-sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(135deg, var(--brand-bg-start), var(--brand-bg-end));
  color: #e9f2ff;
  min-height: calc(100vh - var(--navbar-h));
  transition: width .25s ease, transform .25s ease;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}

.app-sidebar .nav-link{
  color: #e9f2ff;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  border-radius: .5rem;
  margin: 0 .75rem .25rem;
  opacity: .95;
}
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active{
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}

/* Main content grows */
.app-content{
  flex: 1 1 auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Collapsed state: sidebar hidden and content takes full width */
body.sidebar-collapsed #sidebar{
  width: 0;
  transform: translateX(-100%);
}
body.sidebar-collapsed .app-content{
  width: 100%;
  max-width: 100%;
}

/* Phones & small screens: start with sidebar hidden so content is full width */
@media (max-width: 991.98px){
  #sidebar{
    position: fixed;
    left: 0;
    top: var(--navbar-h);
    height: calc(100vh - var(--navbar-h));
    z-index: 1030;
  }
  body:not(.sidebar-expanded-once) #sidebar{
    width: 0;
    transform: translateX(-100%);
  }
  .app-content{
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* Content label pill spacing */
.content-section-chip{
  font-weight: 500;
}

/* Smooth table visuals */
.table thead th{
  white-space: nowrap;
}