:root{
  --p-green:#2e7d32;
  --p-green-dark:#0d4411;
  --p-border:#dee2e6;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; width:100%; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  padding-bottom: calc(72px + var(--safe-bottom));
  background:#f5f8f5;
}

/* Header */
#appHeader{ padding-top: min(var(--safe-top), 24px); background: var(--p-green-dark); }
#appHeader .container-fluid{ flex-wrap: nowrap !important; }

#btnBack, #btnMenu, #btnBell, #btnMail{
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff;
  background:transparent;
  width:38px; height:38px;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}

#btnProfile{
  border:1px solid rgba(255,255,255,.28) !important;
  height:38px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  max-width:190px;
  min-width:0;
  color:#fff;
  text-decoration:none;
  padding:0 10px;
}
#btnProfile::after{ display:none !important; }
#profileText{ max-width:95px; min-width:0; font-size:.75rem; font-weight:600; }

#profileDropdown{
  position:absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  border:0;
  border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  padding:8px;
  min-width:220px;
  z-index:2000;
}

/* header click feel */
#btnBack, #btnMenu, #btnBell, #btnMail, #btnProfile{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition: transform .06s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
#btnBack:hover, #btnMenu:hover, #btnBell:hover, #btnMail:hover, #btnProfile:hover{ background: rgba(255,255,255,.07); }
#btnBack:active, #btnMenu:active, #btnBell:active, #btnMail:active, #btnProfile:active{
  transform: scale(.98);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.04);
}
#btnBack:focus-visible, #btnMenu:focus-visible, #btnBell:focus-visible, #btnMail:focus-visible, #btnProfile:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}

/* Footer */
#mobileFooter{
  background:#f8f9fa;
  border-top:1px solid #dee2e6;
  position:fixed;
  bottom:0;
  width:100%;
  z-index:1050;
  padding-bottom: var(--safe-bottom);
}
.footer-item{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:.6rem;
  font-weight:800;
  padding:10px 0;
  transition:.2s;
}
.footer-item i{ font-size:1.25rem; line-height:1; }
.footer-item span{ line-height:1; }

/* footer click feel */
.footer-item{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition: transform .06s ease, opacity .15s ease;
}
.footer-item:active{ transform: translateY(1px) scale(.99); opacity:.9; }
.footer-item:focus-visible{ outline:2px solid rgba(46,125,50,.35); outline-offset:2px; border-radius:10px; }

/* Sidebar overlay (mobil) */
.sidebar-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
  z-index:999;
}
body.sidebar-open .sidebar-overlay{ opacity:1; pointer-events:auto; }

@media (min-width: 992px){
  .sidebar, .sidebar-overlay{ display:none !important; }
  #btnMenu{ display:none !important; }
}