/* СтройМенеджер — Ilova karkasi: sidebar, topbar, sahifa */
/* ═══════════════════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════════════════ */
#app-screen { display:none; min-height:100vh; }
.app-wrapper { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w);
  background:var(--bg-card);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; inset:0 auto 0 0; z-index:100;
  overflow:hidden;
}
.sidebar-logo {
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border);
  font-family:'Bebas Neue', sans-serif;
  font-size:22px; color:var(--orange);
  letter-spacing:1px;
  flex-shrink:0;
}
.sidebar-logo small {
  display:block;
  font-family:'Mulish', sans-serif;
  font-size:10px; color:var(--text-muted);
  letter-spacing:0; text-transform:uppercase;
  margin-top:2px; font-weight:500;
}
.sidebar-user {
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
  flex-shrink:0;
}
.user-info { overflow:hidden; min-width:0; flex:1; }
.user-name {
  font-size:12px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-role {
  font-size:10px; color:var(--orange);
  font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  margin-top:1px;
}
.sidebar-nav { flex:1; padding:10px 0; overflow-y:auto; }
.nav-section {
  padding:10px 16px 4px;
  font-size:10px; color:var(--text-dim);
  font-weight:700; text-transform:uppercase; letter-spacing:1.4px;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px;
  color:var(--text-muted);
  font-size:13px; font-weight:600;
  border-left:3px solid transparent;
  transition:all .12s;
  user-select:none;
  cursor:pointer;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text); }
.nav-item.active {
  background:rgba(232,103,26,.12);
  color:var(--orange);
  border-left-color:var(--orange);
}
.nav-icon { font-size:15px; width:18px; text-align:center; flex-shrink:0; }

.sidebar-footer { padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0; }
.btn-logout {
  width:100%;
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text-muted);
  padding:9px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
  transition:all .12s;
}
.btn-logout:hover {
  background:var(--red-bg); border-color:var(--red); color:var(--red);
}

.main-content {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex; flex-direction:column;
  min-height:100vh;
  min-width:0;
}
.topbar {
  height:var(--header-h);
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  position:sticky; top:0; z-index:50;
}
.topbar-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:22px; letter-spacing:1px;
}
.topbar-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tl-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 10px;
  border:1px solid var(--border);
  background:transparent; color:var(--text-muted);
  border-radius:18px;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  cursor:pointer; transition:all .12s;
  white-space:nowrap;
}
.tl-btn:hover { border-color:var(--orange); color:var(--orange); }
.tl-btn.on { background:var(--orange); color:#fff; border-color:var(--orange); }

.page-content { padding:22px 26px; flex:1; }