/* Application shell styles — keep this file after Bootstrap and app.css. */
:root {
  --app-green: #5a9f35;
  --app-green-dark: #28712c;
  --app-green-soft: #edf6e9;
  --app-ink: #172b2b;
  --app-muted: #667575;
  --app-border: #e2e8e6;
  --app-surface: #ffffff;
  --app-page: #f5f7f6;
  --app-radius: 14px;
  --app-shadow: 0 8px 28px rgba(25, 48, 42, .07);
}

html, body { min-height: 100%; }
body { background: var(--app-page); color: var(--app-ink); font-family: "Karla", sans-serif; }
.app-header { position: relative; z-index: 1030; background: var(--app-surface); border-top: 4px solid var(--app-green); box-shadow: 0 3px 18px rgba(24, 44, 39, .06); }
.app-navbar { min-height: 76px; padding: 0; }
.app-navbar__inner { max-width: 1720px; min-height: 72px; padding-right: clamp(16px, 3vw, 42px); padding-left: clamp(16px, 3vw, 42px); }
.app-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--app-ink); text-decoration: none; font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em; }
.app-brand:hover, .app-brand:focus { color: var(--app-green-dark); }
.app-brand__mark { display: grid; width: 38px; height: 38px; place-items: center; color: var(--app-green); }
.app-brand__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-navbar__content { align-items: center; }
.app-navbar__menu { align-items: center; gap: 3px; margin-left: clamp(22px, 3vw, 48px); }
.app-navbar .nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 13px !important; border-radius: 10px; color: #293b3b; font-size: .98rem; font-weight: 600; white-space: nowrap; transition: color .16s ease, background-color .16s ease; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus, .app-navbar .nav-link.show { color: var(--app-green-dark); background: var(--app-green-soft); }
.app-navbar .dropdown-menu { min-width: 220px; margin-top: 8px; padding: 8px; border: 1px solid var(--app-border); border-radius: 12px; box-shadow: var(--app-shadow); }
.app-navbar .dropdown-item { padding: 9px 12px; border-radius: 8px; color: #314343; font-size: .94rem; }
.app-navbar .dropdown-item:hover, .app-navbar .dropdown-item:focus { color: var(--app-green-dark); background: var(--app-green-soft); }
.app-navbar__account { margin-left: auto; }
.app-user-menu { gap: 9px; }
.app-user-menu__avatar { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--app-green-dark); background: var(--app-green-soft); }
.app-user-menu__avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-navbar__toggler { border-color: var(--app-border); border-radius: 10px; }
.app-main { min-height: calc(100vh - 80px); }
.app-main--login { min-height: 100vh; }

@media (max-width: 991.98px) {
  .app-navbar { padding: 10px 0; }
  .app-navbar__inner { min-height: 54px; }
  .app-navbar__content { padding: 12px 0 6px; }
  .app-navbar__menu { align-items: stretch; gap: 2px; margin: 0; }
  .app-navbar .nav-link { width: 100%; }
  .app-navbar__account { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--app-border); }
  .app-navbar .dropdown-menu { margin-top: 2px; box-shadow: none; }
}

@media (max-width: 575.98px) {
  .app-brand { gap: 8px; font-size: 1.18rem; }
  .app-brand__mark { width: 32px; height: 32px; }
}