/* VSaumi-specific additions on top of the Metronic theme (styles.css).
   Only things the theme doesn't already provide live here. */

/* ---- Tailwind utility shims -----------------------------------------
   styles.css is an ahead-of-time compiled build: only class combinations
   that literally appear in the original demo HTML exist in it. These
   utilities are used by VSaumi views but weren't in the demo pages we
   copied from, so they're defined here by hand (same names/behavior as
   the Tailwind utilities they stand in for). */
.mt-1\.5 { margin-top: 0.375rem; }
.mt-7\.5 { margin-top: 1.875rem; }
.p-6 { padding: 1.5rem; }
.pb-16 { padding-bottom: 4rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.w-auto { width: auto; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[960px\] { max-width: 960px; }
.max-h-\[30px\] { max-height: 30px; }
.has-\[\:checked\]\:border-primary:has(:checked) { border-color: var(--primary); }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.leading-tight { line-height: 1.25; }
.tracking-wide { letter-spacing: 0.025em; }
@media (min-width: 40rem) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .md\:inline-flex { display: inline-flex; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:mt-7\.5 { margin-top: 1.875rem; }
  .lg\:text-5xl { font-size: 3rem; line-height: 1; }
}

/* ---- Public nav mobile drawer: native <details> accordion ---- */
.kt-drawer-content details > summary { list-style: none; }
.kt-drawer-content details > summary::-webkit-details-marker { display: none; }
.kt-drawer-content details > summary i { transition: transform 150ms ease; }
.kt-drawer-content details[open] > summary i { transform: rotate(180deg); }

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
}

.credential-box {
  background: color-mix(in oklab, var(--primary) 8%, var(--background));
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  border-radius: var(--radius);
  padding: 16px;
}
.credential-box .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 12px; }
.credential-box .row + .row { border-top: 1px dashed var(--border); }

.phone-mock {
  max-width: 320px;
  margin: 0 auto;
  border: 8px solid var(--foreground);
  border-radius: 28px;
  padding: 20px 16px;
  background: var(--card);
}
.phone-mock .carrier { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; margin-bottom: 12px; }
.phone-mock .prompt-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--background);
}