body { background:#f5f7fb; }
.app-shell { display:flex; min-height:calc(100vh - 56px); }
.sidebar {
  width:240px; background:#17202a; padding:18px 12px; flex-shrink:0;
}
.sidebar a {
  display:block; color:#dfe6e9; text-decoration:none; padding:11px 14px;
  border-radius:8px; margin-bottom:6px;
}
.sidebar a:hover { background:#2c3e50; color:white; }
.content { flex:1; padding:28px; }
.summary-card { border:0; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card {
  width:100%; max-width:420px; background:white; padding:32px;
  border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.demo-box { background:#eef2f7; padding:10px; border-radius:8px; font-size:.9rem; }

  .sidebar { width:100%; display:flex; overflow:auto; gap:6px; }
  .sidebar a { white-space:nowrap; margin-bottom:0; }
  .content { padding:18px; }
}

.member-card { border:0; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.member-avatar, .profile-avatar {
  object-fit:cover; border-radius:50%; background:#e9ecef; display:flex;
  align-items:center; justify-content:center; font-weight:700;
}
.member-avatar { width:72px; height:72px; font-size:1.5rem; }
.profile-avatar { width:96px; height:96px; font-size:2rem; }
.placeholder-avatar { color:#495057; }
.life-widget {
  border:1px solid #e7eaf0; border-radius:12px; padding:16px; background:#fafbfc;
  min-height:86px;
}
.profile-list { display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0; }
.profile-list dt { color:#6c757d; font-weight:500; }
.profile-list dd { margin:0; word-break:break-word; }
@media (max-width: 576px) {
  .profile-list { grid-template-columns:1fr; gap:2px; }
  .profile-list dd { margin-bottom:10px; }
}

.inventory-photo{height:190px;object-fit:cover}.inventory-photo-large{max-height:320px;object-fit:cover}


/* Mobile-first refinements */
html,body{max-width:100%;overflow-x:hidden}body{font-size:15px}.navbar{min-height:60px}.content{min-width:0}.card{border-radius:14px}.btn,.form-control,.form-select{min-height:44px}.table-responsive{-webkit-overflow-scrolling:touch}.table{white-space:nowrap}.table td:first-child,.table th:first-child{padding-left:14px}.auth-card{max-width:440px;padding:30px}.brand-mark{width:68px;height:68px;border-radius:20px;background:#17202a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto 16px}.auth-title{text-align:center;font-size:1.65rem}.auth-divider{display:flex;align-items:center;gap:12px;color:#88919a;margin:18px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#dfe3e8;flex:1}.auth-divider span{font-size:.85rem}.sidebar{position:sticky;top:0;max-height:calc(100vh - 60px);overflow:auto}.summary-card .fs-4{font-size:1.25rem!important}
.navbar-brand{font-size:1rem}.navbar .text-white span{display:none}.app-shell{display:block}.sidebar{position:sticky;top:60px;z-index:1020;width:100%;max-height:none;display:flex;gap:6px;overflow-x:auto;padding:9px;background:#17202a;box-shadow:0 4px 12px rgba(0,0,0,.12)}.sidebar::-webkit-scrollbar{display:none}.sidebar a{padding:10px 13px;font-size:.86rem;white-space:nowrap;background:rgba(255,255,255,.05)}.content{padding:16px 12px 34px}.login-page{padding:14px;align-items:flex-start;padding-top:7vh}.auth-card{padding:24px 18px;border-radius:20px}.row.g-3{--bs-gutter-x:.75rem}.card-body{padding:16px}.d-flex.justify-content-end,.d-flex.justify-content-between{gap:8px;flex-wrap:wrap}.d-flex.justify-content-end .btn,.d-flex.justify-content-between .btn{flex:1 1 auto}.table{font-size:.85rem}.profile-avatar{width:76px;height:76px}.member-avatar{width:60px;height:60px}}
@media(max-width:420px){.auth-title{font-size:1.4rem}.btn-lg,.form-control-lg{font-size:1rem}.content h2{font-size:1.35rem}.summary-card .card-body{padding:13px}}


/* LMF 2.0 - Mobile navigation */
.mobile-menu-button {
  width: 42px;
  height: 38px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 10px;
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.mobile-menu-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  margin-bottom: 4px;
  color: #f8f9fa;
  text-decoration: none;
  border-radius: 10px;
  font-size: 1rem;
}

.mobile-menu-list a:hover,
.mobile-menu-list a:focus,
.mobile-menu-list a:active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.offcanvas {
  width: min(86vw, 330px) !important;
}

.offcanvas-body {
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block;
    min-height: calc(100vh - 56px);
  }

  .content {
    width: 100%;
    padding: 16px;
  }

  .navbar {
    min-height: 58px;
  }

  .navbar-brand {
    font-size: 1.1rem;
  }

  .card {
    border-radius: 14px;
  }

  .summary-card .card-body {
    padding: 15px;
  }

  .btn {
    min-height: 42px;
  }

  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px;
  }

  .table-responsive {
    border-radius: 12px;
  }
}

@media (max-width: 575.98px) {
  .content {
    padding: 12px;
  }

  h2 {
    font-size: 1.35rem;
  }

  .navbar-user {
    display: none !important;
  }

  .row.g-3 {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
}


/* LMF 2.0.1 - Reliable custom mobile drawer */
.lmf-topbar {
  z-index: 1050;
}

.lmf-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(86vw, 330px);
  height: 100dvh;
  background: #17202a;
  color: #fff;
  z-index: 2001;
  transform: translateX(-105%);
  transition: transform .25s ease;
  box-shadow: 8px 0 24px rgba(0,0,0,.28);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lmf-mobile-drawer.is-open {
  transform: translateX(0);
}

.lmf-mobile-drawer-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 12px 14px;
  background: #17202a;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.lmf-menu-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.lmf-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.lmf-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.lmf-menu-open {
  overflow: hidden;
  touch-action: none;
}

@media (min-width: 992px) {
  .lmf-mobile-drawer,
  .lmf-menu-overlay {
    display: none !important;
  }
}