/* ============================================================
   HS PWA — Emerald Green Theme
   ============================================================ */
:root{
  --em-900:#063d24;
  --em-800:#0f5132;
  --em-700:#157347;
  --em-600:#198754;
  --em-500:#20c997;
  --em-200:#c3e6cb;
  --em-100:#e6f4ea;
  --em-50:#f4fbf6;
  --nav-h:58px;
}
*{box-sizing:border-box}
body.app-bg,body.auth-bg{
  background:linear-gradient(160deg,var(--em-50) 0%,#dbeee3 100%);
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.pb-nav{padding-bottom:calc(var(--nav-h) + 16px)}
.text-emerald{color:var(--em-800)!important}

/* Buttons */
.btn-emerald{background:var(--em-800);border-color:var(--em-800);color:#fff}
.btn-emerald:hover,.btn-emerald:focus{background:var(--em-700);border-color:var(--em-700);color:#fff}
.btn-outline-emerald{color:var(--em-800);border-color:var(--em-800)}
.btn-outline-emerald:hover{background:var(--em-800);color:#fff}

/* Brand badge */
.brand-badge{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--em-800),var(--em-600));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.6rem;box-shadow:0 8px 20px rgba(15,81,50,.35);
}
.brand-badge-sm{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#ffffff22,#ffffff10);
  border:1px solid #ffffff33;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;
}

/* Topbar */
.topbar-emerald{
  background:linear-gradient(135deg,var(--em-900),var(--em-700));
  color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);
  position:sticky;top:0;z-index:100;
}
.topbar-emerald .btn-light{background:#ffffff22;border:none;color:#fff}
.topbar-emerald .btn-light:hover{background:#ffffff33;color:#fff}

/* Bottom nav */
.bottombar-emerald{
  position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);
  background:linear-gradient(135deg,var(--em-900),var(--em-700));
  display:flex;justify-content:space-around;align-items:center;
  box-shadow:0 -2px 12px rgba(0,0,0,.25);
  z-index:100;padding-bottom:env(safe-area-inset-bottom);
}
.bn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#ffffffaa;text-decoration:none;font-size:.7rem;gap:2px;
  padding:6px 10px;border-radius:10px;flex:1;max-width:90px;
}
.bn-item span{font-size:1.15rem;line-height:1}
.bn-item.active{color:#fff;background:#ffffff1a}
.bn-item:hover{color:#fff}

/* Tiles */
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;border-radius:16px;padding:18px 12px;text-decoration:none;
  color:var(--em-900);box-shadow:0 2px 10px rgba(15,81,50,.08);
  transition:transform .15s,box-shadow .15s;height:100%;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,81,50,.15);color:var(--em-900)}
.tile-icon{font-size:1.8rem;margin-bottom:4px}
.tile-title{font-weight:700;font-size:1rem}
.tile small{color:#5b6b63}

/* Notifications */
.notif-item{background:#fff;border:1px solid var(--em-100)}
.notif-item.unread{background:var(--em-50);border-color:var(--em-200)}
.card{border-radius:16px}

/* Auth pages */
.auth-bg .card{background:#fffffffa;backdrop-filter:blur(6px)}

/* PWA safe areas */
@supports (padding:env(safe-area-inset-top)){
  body{padding-top:env(safe-area-inset-top)}
}

/* Reusable */
.form-control:focus{border-color:var(--em-600);box-shadow:0 0 0 .2rem rgba(25,135,84,.15)}
.badge.bg-warning{color:#663c00!important}