/* ── shared.css — myflex v4.0 ────────────────────────────────────────────────
   Loaded on every page after tabler.css.
   Tabler handles all base variables, colours, and dark/light theming.
   This file contains only: toast system, custom overrides, layout helpers,
   and a compatibility layer mapping old v3 CSS variable names to Tabler vars.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── v3 → v4 variable compatibility layer ──────────────────────────────────── */
/* Maps old custom variable names used in page-specific <style> blocks
   to their Tabler equivalents so existing page CSS keeps working.          */
:root, [data-bs-theme] {
  --bg0:     var(--tblr-body-bg);
  --bg1:     var(--tblr-bg-surface);
  --bg2:     var(--tblr-bg-surface-secondary);
  --bg3:     var(--tblr-bg-surface-tertiary);
  --bg4:     var(--tblr-secondary-bg);
  --border:  var(--tblr-border-color);
  --border2: var(--tblr-border-active-color);
  --text0:   var(--tblr-body-color);
  --text1:   var(--tblr-secondary-color);
  --text2:   var(--tblr-tertiary-color);
  --accent:  var(--tblr-primary);
  --accent2: var(--tblr-link-hover-color);
  --green:   var(--tblr-success);
  --red:     var(--tblr-danger);
  --yellow:  var(--tblr-warning);
  --r:       var(--tblr-border-radius);
}

/* ── Page-wrapper min-height so footer sticks to bottom ────────────────────── */
.page-wrapper {
  min-height: calc(100vh - var(--myflex-navbar-h, 110px));
  display: flex;
  flex-direction: column;
}
.page-wrapper .page-body {
  flex: 1;
}

/* ── Toast notifications ────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.toast-msg {
  pointer-events: auto;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--tblr-body-color);
  box-shadow: var(--tblr-box-shadow);
  animation: mfx-toast-in .25s ease;
  min-width: 200px;
  max-width: 380px;
}
.toast-msg.ok  { border-left: 3px solid var(--tblr-success); }
.toast-msg.err { border-left: 3px solid var(--tblr-danger); }
@keyframes mfx-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Navbar avatar initials ────────────────────────────────────────────────── */
.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
}

/* ── Active nav highlight ──────────────────────────────────────────────────── */
#navbar-menu .nav-link.active {
  color: var(--tblr-primary);
  font-weight: 600;
}

/* ── Notification dropdown placeholder ─────────────────────────────────────── */
.notification-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--tblr-secondary);
  font-size: 13px;
}

/* ── Mobile adjustments ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #toast { right: 12px; left: 12px; bottom: 16px; }
  .toast-msg { max-width: 100%; }
}