/* ==========================================================================
   PATHASHALA — Extra polish: navigation, entrance animation, playful touches
   Custom additions on top of the vendored theme + bootstrap-bridge, kept in
   their own file so the "as delivered" theme files stay untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Back button — used at the top of every content page that isn't a       */
/* top-level landing page (dashboards, home). A pill, not a tiny link, so  */
/* it reads clearly for younger students too.                             */
/* ---------------------------------------------------------------------- */

.ps-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  background: var(--bg-surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 12px;
  margin-bottom: var(--sp-4);
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.ps-back-btn i { font-size: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.ps-back-btn:hover {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(-3px);
}
.ps-back-btn:hover i { transform: translateX(-2px); }

/* ---------------------------------------------------------------------- */
/* Page-enter — every page fades/rises in on load, not just chapter cards */
/* ---------------------------------------------------------------------- */

main[role="main"] > * {
  animation: psPageEnter .45s var(--ease-out) both;
}
@keyframes psPageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------- */
/* Playful icon interactions — small delight, not distraction              */
/* ---------------------------------------------------------------------- */

.ps-icon-bounce { display: inline-block; transition: transform .2s var(--ease-out); }
a:hover > .ps-icon-bounce,
button:hover > .ps-icon-bounce {
  animation: psBounce .5s var(--ease-out);
}
@keyframes psBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px) rotate(-6deg); }
  60% { transform: translateY(0) rotate(4deg); }
}

/* Button press feedback app-wide */
.btn, .ps-btn { transition: transform .12s var(--ease-out), background .15s ease, box-shadow .15s ease; }
.btn:active, .ps-btn:active { transform: scale(.96); }

/* Card hover lift for anything using .card (admin tables' action cards, etc.) */
.card { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

/* Celebration badge / success states get a little extra pop */
.badge { transition: transform .15s var(--ease-out); }

/* ---------------------------------------------------------------------- */
/* Dashboard stat tiles — friendlier than plain bordered boxes            */
/* ---------------------------------------------------------------------- */

.ps-stat-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ps-stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.ps-stat-tile .ps-stat-icon { font-size: 1.75rem; line-height: 1; margin-bottom: 4px; }
.ps-stat-tile .ps-stat-number { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xxl); color: var(--primary); }
.ps-stat-tile .ps-stat-label { font-size: var(--fs-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }

/* An earned achievement gets a warm gold treatment instead of the plain neutral tile, so
   "unlocked" reads at a glance without relying on the badge text alone. */
.ps-stat-tile--earned {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-tint), var(--bg-surface) 65%);
}
.ps-stat-tile--earned .ps-stat-icon { color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* Achievements page hero                                                 */
/* ---------------------------------------------------------------------- */
.ps-achievements-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--gold-tint), var(--bg-surface) 65%);
}
.ps-achievements-hero-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: var(--shadow-raised);
}
@media (max-width: 575.98px) {
  .ps-achievements-hero { padding: var(--sp-4); gap: var(--sp-3); }
  .ps-achievements-hero-icon { width: 52px; height: 52px; font-size: 24px; }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion respect (matches loaders.css convention)                 */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Drag-and-drop reorderable table rows (see wwwroot/js/reorder.js)       */
/* ---------------------------------------------------------------------- */

tr[draggable="true"] {
  cursor: grab;
}
tr[draggable="true"].ps-dragging {
  opacity: .4;
}
.ps-drag-handle {
  cursor: grab;
  color: var(--ink-muted, #999);
  width: 1px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  main[role="main"] > *,
  .ps-icon-bounce,
  .ps-back-btn,
  .ps-stat-tile {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Toast-style notices — TempData Message/Error float top-right and       */
/* auto-dismiss (see the script in _Layout.cshtml) instead of pushing     */
/* page content down like a classic inline banner.                       */
/* ---------------------------------------------------------------------- */

.ps-toast-stack {
  position: fixed;
  top: 76px;
  right: var(--sp-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
}
.ps-toast {
  box-shadow: var(--shadow-overlay);
  border-radius: var(--radius-md);
}
@media (max-width: 575.98px) {
  .ps-toast-stack { left: var(--sp-3); right: var(--sp-3); width: auto; top: 68px; }
}

/* ---------------------------------------------------------------------- */
/* Focus visibility — WCAG 2.2 AA requires a visible keyboard-focus        */
/* indicator; this makes it consistent and on-brand everywhere (including  */
/* elements Bootstrap doesn't already ring, like .ps-btn/.ps-tab/.nav-link)*/
/* instead of relying on each browser's inconsistent default outline.      */
/* Deliberately :focus-visible, not :focus, so a mouse click doesn't show  */
/* a ring — only keyboard/programmatic focus does.                        */
/* ---------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link — hidden until keyboard-focused (Bootstrap's
   .visually-hidden-focusable handles the show/hide; this just makes it
   readable and on-brand once visible). */
.visually-hidden-focusable:focus {
  background: var(--bg-surface);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2000;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  font-weight: 600;
}