/* ══════════════════════════════════════════════════════════
   KB360 — MODERN POLISH LAYER (loaded last, purely additive)
   Subtle 2026-modern refinements: smoother type, softer depth,
   micro-interactions, focus rings. No layout changes.
   ══════════════════════════════════════════════════════════ */

/* Crisper typography everywhere */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Brand-colored text selection */
::selection { background: rgba(0, 87, 184, .18); }

/* Modern thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Soft elevation + lift on cards */
.kpi-card, .table-card, .card {
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}
.table-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .07); }

/* Tactile buttons: gentle press + hover */
.btn, .btn-sm, .btn-login, .btn-primary, .mon-action-btn {
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover, .btn-sm:hover, .btn-primary:hover, .mon-action-btn:hover { filter: brightness(1.04); }
.btn:active, .btn-sm:active, .btn-login:active, .btn-primary:active,
.mon-action-btn:active { transform: scale(.97); }

/* Accessible, modern focus rings (keyboard users) */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 184, .14);
}

/* Frosted-glass modal backdrop */
.modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-overlay .modal, .modal {
  animation: kb-modal-in .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes kb-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pages fade in gently when you navigate */
.page.active { animation: kb-page-in .22s ease; }
@keyframes kb-page-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav: smoother hover + a modern active indicator bar */
.nav-item { transition: background .15s ease, color .15s ease, padding-left .15s ease, transform .16s ease, box-shadow .16s ease; }
.nav-item.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

/* Topbar avatar: subtle ring like modern SaaS apps */
.topbar-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 87, 184, .25); }

/* Tables: comfortable row hover */
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(0, 87, 184, .03); }

/* Login card: a touch more depth and polish */
.login-card { box-shadow: 0 32px 80px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .15); }
.btn-login { box-shadow: 0 4px 14px rgba(0, 87, 184, .35); }
.btn-login:hover { box-shadow: 0 6px 20px rgba(0, 87, 184, .45); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}