/* ============================================================
   components.css — PREMIUM UI COMPONENTS + polish (Phase 2, additive).
   Styles the reusable Button/Card/Dialog/Toolbar/BottomNav components
   and elevates the dashboard, cards and placeholder pages to an
   "iPad premium education app" feel. Loaded after app.css so it
   enhances without editing existing stylesheets.
   ============================================================ */

/* =============== Button (ui-btn) =============== */
.ui-btn {
  font-family: var(--font); font-weight: var(--fw-bold); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: none; border-radius: var(--r-pill); color: #fff;
  padding: 12px 22px; font-size: var(--fs-md); line-height: 1;
  box-shadow: var(--sh-1), var(--sh-inset);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.ui-btn:hover { filter: brightness(1.04); }
.ui-btn:active { transform: translateY(2px) scale(.98); box-shadow: var(--sh-1); }
.ui-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-primary) 55%, transparent); outline-offset: 2px; }

.ui-btn--primary { background: var(--c-primary); color: var(--c-primary-ink); }
.ui-btn--accent  { background: var(--c-accent); }
.ui-btn--success { background: var(--c-success); }
.ui-btn--danger  { background: var(--c-danger); }
.ui-btn--ghost   { background: var(--c-surface); color: var(--c-primary); border: 2px solid var(--c-border); box-shadow: none; }

.ui-btn--sm { padding: 8px 15px; font-size: var(--fs-sm); }
.ui-btn--lg { padding: 15px 28px; font-size: var(--fs-lg); }
.ui-btn--pill { border-radius: var(--r-pill); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 20px; }
.ui-btn__emoji { font-size: 1.15em; }

/* =============== Card (ui-card) =============== */
.ui-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ui-card--interactive { cursor: pointer; }
.ui-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.ui-card--gradient { color: #fff; border: none; background: var(--grad-brand); }
.ui-card__header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ui-card__icon {
  width: 56px; height: 56px; border-radius: var(--r-md); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: color-mix(in srgb, var(--card-color, var(--c-primary)) 16%, transparent);
}
.ui-card__title { font-weight: var(--fw-bold); font-size: var(--fs-lg); margin: 0; }
.ui-card__body { color: var(--c-muted); font-size: var(--fs-sm); line-height: var(--lh); }

/* =============== Toolbar (ui-toolbar) =============== */
.ui-toolbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--sh-1);
}
.ui-toolbar--block { border-radius: var(--r-lg); }
.ui-toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.ui-toolbar__divider { width: 1px; align-self: stretch; background: var(--c-border); margin: 4px 2px; }
.ui-toolbar__spacer { flex: 1; }
.ui-toolbar__title { font-weight: var(--fw-bold); color: var(--c-muted); font-size: var(--fs-sm); }

/* =============== Dialog (ui-dialog) =============== */
.ui-dialog-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(20, 20, 40, .5); opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.ui-dialog-backdrop.is-open { opacity: 1; }
.ui-dialog {
  width: 100%; max-width: 460px; background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden;
  transform: translateY(16px) scale(.96); transition: transform var(--dur) var(--ease-bounce);
}
.ui-dialog-backdrop.is-open .ui-dialog { transform: none; }
.ui-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.ui-dialog__title { margin: 0; color: var(--c-accent); font-size: var(--fs-lg); }
.ui-dialog__emoji { font-size: 40px; text-align: center; margin-top: var(--sp-4); }
.ui-dialog__body { padding: var(--sp-3) var(--sp-5); color: var(--c-text); line-height: var(--lh); }
.ui-dialog__footer { display: flex; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-3) var(--sp-5) var(--sp-5); }

/* =============== Bottom navigation (mobile) =============== */
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bottomnav);
  display: none; /* shown only on small screens (below) */
  justify-content: space-around; align-items: stretch;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px var(--c-shadow);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: var(--r-md); color: var(--c-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bottom-nav__icon { font-size: 22px; line-height: 1; transition: transform var(--dur-fast) var(--ease-bounce); }
.bottom-nav__item.is-active { color: var(--c-primary); }
.bottom-nav__item.is-active .bottom-nav__icon { transform: translateY(-2px) scale(1.18); }

/* =============== Dashboard / feature card premium polish =============== */
.dashboard__title {
  background: linear-gradient(90deg, var(--c-accent), var(--c-primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature-card { position: relative; overflow: hidden; }
.feature-card::before {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -30%;
  width: 160px; height: 160px; border-radius: 50%;
  background: color-mix(in srgb, var(--card-color) 12%, transparent);
}
.feature-card:hover .feature-card__icon { animation: kcs-wiggle .5s var(--ease-in-out); }
.feature-card__icon { box-shadow: var(--sh-inset); }

/* =============== Placeholder pages premium look =============== */
.module-placeholder { background: var(--grad-soft); box-shadow: var(--sh-1); border-color: transparent; }
.module-placeholder__icon { animation: kcs-float 3s var(--ease-in-out) infinite; }

/* navbar elevation on scroll (toggled by foundation.js) */
.navbar { transition: box-shadow var(--dur) var(--ease-out); }
.navbar.is-scrolled { box-shadow: 0 6px 18px var(--c-shadow); }

/* keep content clear of the mobile bottom nav */
@media (max-width: 820px) {
  .app-body .sidebar { display: none; }   /* higher specificity: replaced by bottom nav */
  .bottom-nav { display: flex; }
  .app-outlet { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* section heading used by empty pages */
.empty-hero { text-align: center; max-width: 560px; margin: var(--sp-10) auto; }
.empty-hero__badge {
  display: inline-block; background: var(--c-surface-2); color: var(--c-muted);
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}