/*
  Staff notifications (header bell + modal)
  - Bell is centered in staff header (before Logout)
  - Bell is always visible even when count = 0
  - Modal keeps history for 30 days (read/unread)
*/

/* Floating placement: bottom-right above the fixed bottom tabs.
   This stays put while scrolling and visually matches common "message notify" patterns. */
.kna-staff-notify-dock{
  position:fixed;
  right:14px;
  /* lift above bottom tabs (approx tab height) + safe area */
  bottom:calc(env(safe-area-inset-bottom) + 62px);
  z-index:1002; /* above .knpos-tabs (1000) */
  pointer-events:auto;
}

/* Make the floating bell blend with the bottom bar (no card background).
   Keep a large hit-area for easy tapping on mobile. */
.kna-staff-bell--dock{
  width:44px;
  height:44px;
  border-radius:12px;
  background:transparent;
  border:none;
  box-shadow:none;
  transition:transform .12s ease;
}

.kna-staff-bell{
  /* no circular background (per request) */
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative; /* badge anchor */
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.kna-staff-bell:active{transform:scale(.98)}
.kna-staff-bell:focus{outline:none}

.kna-bell-svg{width:26px;height:26px;fill:#111;display:block}
.kna-staff-bell.has-appt .kna-bell-svg{fill:#e02424;}

.kna-staff-bell-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e02424;
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* White rim helps legibility on red bell + bright backgrounds */
  box-shadow:0 2px 10px rgba(0,0,0,.20);
  outline:2px solid #fff;
}

/* Subtle "new activity" pulse — runs once when count increases */
.kna-staff-bell.kna-pulse{animation:knaBellPulse .6s ease-out 1}
@keyframes knaBellPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* (Text pill removed per request) */

/* Modal */
.kna-notify-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:99999;padding:16px;}
.kna-notify-modal{width:min(560px,100%);max-height:85vh;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;}
.kna-notify-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);}
.kna-notify-modal-title{font-size:16px;font-weight:900}
.kna-notify-close{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;}
.kna-notify-modal-body{padding:14px 16px;overflow:auto;}
.kna-notify-empty{padding:14px 0;color:#666}

.kna-notify-group{margin-bottom:12px}
.kna-notify-group-title{font-weight:900;margin:8px 0 10px 0;color:#222}

.kna-notify-card{border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:12px 12px;margin-bottom:12px;background:#fff}
.kna-notify-card.is-new{border-left:5px solid #16a34a}
.kna-notify-card.is-cancel{border-left:5px solid #dc2626}

.kna-notify-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.kna-notify-card-title{font-weight:900;line-height:1.25}
.kna-notify-tag{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#f6f6f6;color:#222}
.kna-notify-tag.is-new{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.kna-notify-tag.is-cancel{background:#fef2f2;border-color:#fecaca;color:#991b1b}

.kna-notify-card-row{font-size:13px;color:#111;margin:4px 0;line-height:1.35}
.kna-notify-card-row b{font-weight:900}

@media (max-width: 420px){
  .kna-bell-svg{width:25px;height:25px}
  .kna-staff-notify-dock{right:12px;bottom:calc(env(safe-area-inset-bottom) + 60px)}
  .kna-staff-bell--dock{width:44px;height:44px;border-radius:12px}
}


/* Pager for read list */
.kna-notify-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 10px;
}
.kna-notify-page-btn{
  width:34px;
  height:30px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}
.kna-notify-page-btn[disabled]{
  opacity:.4;
  cursor:default;
}
.kna-notify-page-range{
  font-size:12px;
  color:#666;
}

/* Read cards a bit calmer */
.kna-notify-card.is-read{
  opacity:0.9;
}