/* BBMT Polish — vizible UX upgrades over the existing portal.
 * Loaded LAST, after page-specific styles, so it wins specificity.
 * Targets common legacy class names found across the portal.
 */

/* ── Body smooths ──────────────────────────────────────────────── */
body {
  font-family: var(--bbmt-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Topbar: stronger blur + subtle shadow on scroll ───────────── */
.topbar,
.bbmt-topbar,
header.header,
.app-header {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 1px 0 var(--bbmt-border), 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* ── Module tiles: lift + colored overlay on hover ─────────────── */
.tile, .module-tile, .bbmt-tile,
a.tile, a.module-tile {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
  will-change: transform;
}
.tile:hover, .module-tile:hover, .bbmt-tile:hover,
a.tile:hover, a.module-tile:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14),
              0 4px 12px rgba(74, 21, 75, 0.08) !important;
}

/* ── Cards: gentle lift on hover (only those that hint at interaction) ── */
.card[role="button"],
.card.clickable,
.card-link,
a.card,
button.card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.card[role="button"]:hover,
.card.clickable:hover,
.card-link:hover,
a.card:hover,
button.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bbmt-shadow-card-hover);
}

/* ── Buttons: unified portal-wide ──────────────────────────────────
 * Overrides per-page .btn definitions for portal-wide consistency.
 * Base style = BBMT button (font 13/700, radius 11, padding 9×15, aubergine accent).
 */
.btn,
button.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--bbmt-font-sans) !important;
  font-size: var(--bbmt-fs-body-sm) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 9px 15px !important;
  border-radius: 11px !important;
  border: 1px solid transparent !important;
  background: var(--bbmt-surface) !important;
  color: var(--bbmt-text) !important;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, box-shadow .15s ease, background .12s ease, border-color .12s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.btn:hover,
button.btn:hover {
  filter: brightness(1.04);
  border-color: var(--bbmt-border-md) !important;
}
.btn:not(:disabled):active,
button.btn:not(:disabled):active {
  transform: scale(0.97);
}
.btn:disabled,
button.btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
}

/* Primary / brand */
.btn.primary, .btn-primary, .btn-brand,
button.btn.primary, button.btn-primary {
  background: var(--bbmt-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--bbmt-shadow-brand-btn) !important;
}
.btn.primary:hover, .btn-primary:hover, .btn-brand:hover {
  filter: brightness(1.10);
  border-color: transparent !important;
}

/* Secondary (outlined brand) */
.btn.secondary, .btn-secondary,
button.btn.secondary {
  background: var(--bbmt-surface) !important;
  color: var(--bbmt-brand) !important;
  border-color: rgba(74, 21, 75, 0.26) !important;
}
.btn.secondary:hover, .btn-secondary:hover {
  background: var(--bbmt-brand-soft) !important;
  border-color: rgba(74, 21, 75, 0.40) !important;
  filter: none;
}

/* Danger */
.btn.danger, .btn-danger,
button.btn.danger {
  background: var(--bbmt-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.22) !important;
}
.btn.danger:hover, .btn-danger:hover {
  filter: brightness(1.08);
}

/* Success */
.btn.success, .btn-success,
button.btn.success {
  background: var(--bbmt-success) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.22) !important;
}

/* Ghost / link-like */
.btn.ghost, .btn-ghost,
button.btn.ghost {
  background: transparent !important;
  color: var(--bbmt-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn.ghost:hover, .btn-ghost:hover {
  background: var(--bbmt-surface-alt) !important;
  color: var(--bbmt-text) !important;
}

/* Tiny size modifier */
.btn.tiny, .btn.small, .btn-tiny, .btn-sm {
  padding: 6px 10px !important;
  font-size: var(--bbmt-fs-meta) !important;
  border-radius: var(--bbmt-radius-xs) !important;
}

/* Large size modifier */
.btn.large, .btn-lg, .btn-submit {
  padding: 13px 18px !important;
  font-size: var(--bbmt-fs-body) !important;
  border-radius: 12px !important;
}

/* Other action button patterns: also pick up press scale */
button:not(.bbmt-btn-ghost):not(.x):not(.bell):not(.icon-btn):not(.bbmt-icon-btn):not(.btn):not(.bbmt-icon-btn),
.btn-action, .btn-submit {
  transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.15s ease;
}
button:not(:disabled):not([disabled]):not(.btn):active,
.btn-action:not(:disabled):active {
  transform: scale(0.97);
}

/* ── Inputs: smoother focus glow ────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              background 0.18s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
}

/* ── Modal backdrop: stronger blur ──────────────────────────────── */
.modal-overlay, .modal-backdrop, .overlay,
.bbmt-modal-overlay {
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* ── Scrollbars: subtle, branded ───────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 21, 75, 0.25) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(74, 21, 75, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 21, 75, 0.35);
  background-clip: content-box;
}

/* ── Status pills: tighter spacing, sharper shadow ─────────────── */
.status-pill, .pill-status, .badge-status {
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Tables: cleaner rows, smoother hover ──────────────────────── */
table:not(.no-polish) tbody tr {
  transition: background 0.12s ease;
}
table:not(.no-polish) tbody tr:hover td {
  background: rgba(74, 21, 75, 0.025);
}

/* ── Links: smoother brand color transition ────────────────────── */
a:not(.tile):not(.module-tile):not(.bbmt-tile):not(.card-link):not(.btn) {
  transition: color 0.12s ease, opacity 0.12s ease;
}

/* ── Selection: brand-tinted ───────────────────────────────────── */
::selection {
  background: var(--bbmt-brand-glow);
  color: var(--bbmt-brand);
}

/* ── Avatars: subtle gradient lift ─────────────────────────────── */
.avatar, .av, .bbmt-avatar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Focus ring: consistent brand ring ─────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--bbmt-brand) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ── Live dot: gentle pulse animation ──────────────────────────── */
.live-dot, .bbmt-topbar-live, .status-dot.live {
  animation: bbmt-pulse 2s ease-in-out infinite;
}
@keyframes bbmt-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}

/* ── Notification badges: subtle bounce on appearance ──────────── */
.notif-badge, .nb, .badge {
  animation: bbmt-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bbmt-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}