/* layout.css — App shell: sidebar, navigation, topbar, buttons and view container.
   Split from the original styles.css; rule order is preserved verbatim. */

.app-shell {
  display:flex;
  min-height:100vh;
}

.sidebar {
  width:292px;
  flex:0 0 292px;
  height:100vh;
  height:100dvh;
  position:fixed;
  left:0;
  bottom:0;
  top:0;
  padding:22px 18px;
  background:linear-gradient(180deg,#092018,#143a2b 48%, #0e271f 100%);
  color:#fff;
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.08);
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 10px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.brand img {
  width:54px;
  height:54px;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  padding:4px;
}

.brand b {
  display:block;
  font-size:18px;
  letter-spacing:.2px;
}

.brand small {
  display:block;
  color:#c6dacb;
  font-size:12px;
  margin-top:3px;
}

.side-nav {
  display:grid;
  gap:8px;
  margin-top:22px;
}

.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  color:#dceee1;
  border-radius:15px;
  transition:.2s ease;
  font-weight:650;
}

.nav-link span {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border-radius:10px;
}

.nav-link:hover,.nav-link.active {
  background:#fff;
  color:#123321;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.nav-link.active span {
  background:#e9f7ea;
}

.sidebar-card {
  margin-top:28px;
  padding:16px;
  display:flex;
  gap:12px;
  border-radius:19px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}

.sidebar-card p {
  margin:6px 0 0;
  color:#c5d9ca;
  font-size:13px;
  line-height:1.45;
}

.status-dot {
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:50%;
  background:#5cf270;
  box-shadow:0 0 0 7px rgba(92,242,112,.1);
}

.main {
  flex:1;
  width:calc(100% - 292px);
  margin-left:292px;
  padding:24px;
  max-width:calc(100vw - 292px);
}

.topbar {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border:1px solid rgba(209,228,216,.88);
  box-shadow:0 12px 34px rgba(28,71,45,.07);
  border-radius:24px;
  padding:18px 20px;
  margin-bottom:22px;
}

.topbar h1 {
  font-size:22px;
  margin:0;
  color:#10251c;
}

.topbar p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
  max-width:760px;
}

.top-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu-btn {
  display:none;
  background:#eef8ef;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}

.primary-btn,.soft-btn,.ghost-btn {
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  transition:.2s ease;
  white-space:nowrap;
}

.primary-btn {
  background:linear-gradient(135deg,var(--green),#1d8d43);
  color:#fff;
  box-shadow:0 15px 35px rgba(47,174,74,.28);
}

.primary-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(47,174,74,.36);
}

.soft-btn {
  background:#ecf8ee;
  color:#176d36;
  border:1px solid #cae8d0;
}

.soft-btn:hover {
  background:#def3e3;
}

.ghost-btn {
  background:#fff;
  color:#254134;
  border:1px solid var(--line);
}

.ghost-btn:hover {
  border-color:#b9dac1;
  background:#f7fbf8;
}

.ghost-btn.danger {
  color:var(--danger);
  border-color:#f1cccc;
}

.view {
  display:none;
  animation:fade .25s ease;
}

.view.active {
  display:block;
}

@keyframes fade {
  from {
    opacity:.3;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:none;
  }
}