/* static/user_portal/css/site.css - small visual polish */
:root {
  --sidebar-width: 260px;
  --sidebar-bg: #0f172a;    /* dark slate */
  --accent: #0ea5e9;        /* sky-500 */
  --muted: #94a3b8;
  --content-padding: 1.25rem;
}

/* sidebar */
.app-sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  color: #fff;
}

/* sidebar links */
.app-sidebar .nav-link {
  color: rgba(255,255,255,0.9);
}
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active {
  background: rgba(255,255,255,0.04);
  color: #fff;
}

/* compact logo area */
.brand {
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* content area */
.app-content {
  padding: var(--content-padding);
}

/* small helper for topbar */
.topbar {
  height: 56px;
  display:flex;
  align-items:center;
  gap:1rem;
  border-bottom: 1px solid #e6edf3;
  background: #fff;
  padding: 0 1rem;
}

/* make main content full height and responsive */
.main-wrapper {
  min-height: calc(100vh - 56px);
}

/* smaller screens: reduce sidebar width in offcanvas */
@media (max-width: 992px) {
  .app-sidebar { width: 100%; }
  .offcanvas-start { width: 72%; max-width: 360px; }
}
@media (min-width: 576px) {  
    .card-body.password-form p label,
    .card-body.edit p label {
        flex: 0 0 auto;
        width: 25%;
    }
    .container-fluid.app-content input {
        border: 1px solid #d3d3d3;
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
        border-radius: 6px;
        padding: 4px 10px;
        transition: all 0.2s ease;
     }
}
/* Style Django’s password rule list */
.helptext, .password-form ul {
  list-style: none;
  margin-left: 1.5rem;
  color: #6c757d;
  font-size: 0.7rem;
  margin-top: 0.5rem;
}
.app-sidebar {
  width: 240px;        /* choose comfortable width */
  flex: 0 0 240px;     /* don't grow, don't shrink, base 240px */
  box-sizing: border-box;
}

/* ensure main area can shrink inside the flex container */
.flex-grow-1 {
  min-width: 0;        /* critical: allows children to shrink/wrap */
}

/* safe wrapping for long text inside list items / columns */
.list-unstyled li div {
  min-width: 0;               /* lets flex children shrink */
  overflow-wrap: anywhere;    /* break long words/URLs */
  word-break: break-word;     /* extra safety */
}