/* ===== Notifications: robust badge + fallback ===== */

/* make sure the bell can anchor absolutely positioned children */
.icon-btn[aria-label="Notifications"]{ position: relative; }

/* span injected by JS */
.icon-btn[aria-label="Notifications"] .notify-badge{
  position:absolute;
  top:4px; right:4px;
  transform: translate(25%,-25%);
  min-width:16px; height:16px;
  padding:0 4px;
  border-radius:9999px;
  background:#ef4444;  /* red-500 */
  color:#fff;
  font:700 10px/16px Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:center;
  pointer-events:none;
  display:none; /* JS toggles this */
  z-index: 1;   /* stay above icon glyph */
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

/* subtle emphasis when unread */
.icon-btn[aria-label="Notifications"][data-has-unread="true"]{
  box-shadow: 0 0 0 2px rgba(239,68,68,.15);
}

/* Fallback: tiny dot even if span isn't there yet */
.icon-btn[aria-label="Notifications"][data-has-unread="true"]::after{
  content:"";
  position:absolute;
  top:6px; right:6px;
  width:8px; height:8px;
  border-radius:9999px;
  background:#ef4444;
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
  z-index: 1;
}

/* Dark-mode tweaks */
.dark .icon-btn[aria-label="Notifications"][data-has-unread="true"]{
  box-shadow: 0 0 0 2px rgba(239,68,68,.25);
}






/* hide only until Alpine boots */
[x-cloak] { display: none !important; }

/* overlay + modal */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.45);
}

.modal {
  width: 100%; max-width: 640px;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  padding: 16px;
}

.modal__head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.modal__title { font-size: 1.125rem; font-weight: 700; }
.modal__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }

.icon-btn.ghost { background: transparent; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; }
.icon-btn.ghost:hover { background: rgba(0,0,0,.06); }








/* --- Global page scrolling --- */
html, body { height: 100%; }
body.page {
  overflow-y: auto;            /* allow vertical scroll */
  -webkit-overflow-scrolling: touch;
}

/* Main content should own the scroll, not the whole app wrapper */
.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;           /* let .main handle inner scroll if needed */
}
.main {
  flex: 1 1 auto;
  overflow-y: auto;            /* scroll long pages */
  -webkit-overflow-scrolling: touch;
}

/* Sidebar layout safety (desktop vs mobile) */
@media (min-width:1024px){
  .content--expanded  { padding-left: var(--sidebar-w); }
  .content--collapsed { padding-left: var(--sidebar-w-collapsed); }
}

/* --- Scrollable blocks (opt-in) --- */
.table-wrap {                 /* for long tables/lists */
  max-height: 420px;
  overflow: auto;
}

.card--scroll {               /* add this class to any tall card */
  max-height: 70vh;
  overflow: auto;
}

/* --- Modal safety so content inside can scroll --- */
.modal-scrim { overflow: auto; }
.modal {
  max-height: 90vh;
  overflow: auto;
}

/* If anything elsewhere sets overflow:hidden on containers, remove it. */