/*
 * Metronic supplement — utilities the shipped bundle does not contain.
 *
 * `assets/css/styles.css` is byte-identical to the prebuilt Metronic demo9
 * bundle and there is no Tailwind build step in this project (no package.json,
 * no tailwind.config.js). Tailwind only emits the utilities the demo's own
 * markup used, so every class our views invented beyond that set resolves to
 * nothing and is silently dropped by the browser.
 *
 * That failure is invisible in review — the markup reads correctly — but it
 * broke real layout: `md:grid-cols-3`, `lg:grid-cols-4` and friends never
 * existed, so those grids stayed at their base column count at every width,
 * and `text-success` / `font-mono` / `rounded` / `py-8` were no-ops.
 *
 * This file closes that gap. Every rule below is a faithful reimplementation
 * of the stock Tailwind/Metronic utility of the same name, expressed with
 * Metronic's own tokens (--spacing, --radius, --color-*, --muted, …) so the
 * result is indistinguishable from a real build. It defines only names our
 * views already use — it is not a general-purpose Tailwind shim, and it never
 * overrides a utility styles.css already provides.
 *
 * Load order matters: this must come AFTER styles.css.
 *
 * Breakpoints match the bundle: sm 40rem · md 48rem · lg 64rem · xl 80rem.
 * Dark variants match the bundle's `:is(.dark *)` descendant strategy.
 *
 * Adding a new utility to an admin view? Check it resolves in styles.css
 * first; if it does not, add it here rather than hand-rolling a page-local
 * <style> block.
 */

/* ── Card header: breathing room when it wraps ────────────────────────────
 * Stock .kt-card-header sets `padding-inline` only and relies on
 * `min-height: 3.5rem` + `align-items: center` to space a single row. Metronic's
 * own headers are one line, so that holds there — but ours carry a two-line
 * title beside a button group (period pickers, filters, date ranges). The
 * moment `flex-wrap` puts those on separate rows the content outgrows the
 * min-height and, with no block padding, runs straight into the bottom border.
 * That is the "broken header" on admin/vendors → Vendor Hits Over Time.
 *
 * A single row is unaffected: tallest single-row content is a .kt-btn-sm at
 * 1.75rem, so 1.75 + 1 = 2.75rem still sits inside the 3.5rem min-height and
 * nothing shifts. The padding only becomes visible once a header actually
 * wraps, which is exactly when it is needed.
 * ─────────────────────────────────────────────────────────────────────── */
.kt-card-header { padding-block: calc(var(--spacing) * 2); }

/* ── Layout / display ─────────────────────────────────────────────────── */
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.flex-shrink-0 { flex-shrink: 0; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.select-all { -webkit-user-select: all; user-select: all; }
.select-none { -webkit-user-select: none; user-select: none; }
.pointer-events-none { pointer-events: none; }
.order-last { order: 9999; }
.z-30 { z-index: 30; }
.top-full { top: 100%; }
.top-\[10\%\] { top: 10%; }
.left-3 { left: calc(var(--spacing) * 3); }
.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }

/* ── Spacing ──────────────────────────────────────────────────────────── */
.p-6 { padding: calc(var(--spacing) * 6); }
.px-1 { padding-inline: calc(var(--spacing) * 1); }
.pl-10 { padding-left: calc(var(--spacing) * 10); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.py-8 { padding-block: calc(var(--spacing) * 8); }
.py-16 { padding-block: calc(var(--spacing) * 16); }
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.my-4 { margin-block: calc(var(--spacing) * 4); }
.ml-1 { margin-left: calc(var(--spacing) * 1); }
.ms-0\.5 { margin-inline-start: calc(var(--spacing) * 0.5); }
.ms-1\.5 { margin-inline-start: calc(var(--spacing) * 1.5); }
.mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }
.mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
.mt-px { margin-top: 1px; }
.mt-auto { margin-top: auto; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(var(--spacing) * 1); }

.gap-x-3 { column-gap: calc(var(--spacing) * 3); }
.gap-x-6 { column-gap: calc(var(--spacing) * 6); }
.gap-y-0\.5 { row-gap: calc(var(--spacing) * 0.5); }
.gap-y-1 { row-gap: calc(var(--spacing) * 1); }
.gap-y-1\.5 { row-gap: calc(var(--spacing) * 1.5); }
.gap-y-2 { row-gap: calc(var(--spacing) * 2); }

/* ── Sizing ───────────────────────────────────────────────────────────── */
.w-3 { width: calc(var(--spacing) * 3); }
.w-3\.5 { width: calc(var(--spacing) * 3.5); }
.w-44 { width: calc(var(--spacing) * 44); }
.w-\[140px\] { width: 140px; }
.h-3 { height: calc(var(--spacing) * 3); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-14 { height: calc(var(--spacing) * 14); }
.h-\[38px\] { height: 38px; }

.min-h-\[48px\] { min-height: 48px; }
.min-h-\[80px\] { min-height: 80px; }
.min-w-\[210px\] { min-width: 210px; }

.max-h-24 { max-height: calc(var(--spacing) * 24); }
.max-h-64 { max-height: calc(var(--spacing) * 64); }
.max-h-72 { max-height: calc(var(--spacing) * 72); }
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[70vh\] { max-height: 70vh; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-\[160px\] { max-width: 160px; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[240px\] { max-width: 240px; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[280px\] { max-width: 280px; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[560px\] { max-width: 560px; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[700px\] { max-width: 700px; }

/* ── Typography ───────────────────────────────────────────────────────── */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); font-feature-settings: normal; font-variation-settings: normal; }
.font-bold { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
/* OTP / PIN entry fields — wide tracking makes the digits read as separate boxes. */
.tracking-\[0\.4em\] { letter-spacing: 0.4em; }
.break-all { word-break: break-all; }
.break-words { overflow-wrap: break-word; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ── Borders & radius ─────────────────────────────────────────────────── */
.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-tl-sm { border-top-left-radius: calc(var(--radius) - 4px); }

.border-current { border-color: currentColor; }
.border-t-2 { border-top-style: var(--tw-border-style, solid); border-top-width: 2px; }
.border-t-transparent { border-top-color: transparent; }

/* Start-edge accent rule used by the dashboard/audit status cards. */
.border-s-4 { border-inline-start-style: var(--tw-border-style, solid); border-inline-start-width: 4px; }
.border-s-primary { border-inline-start-color: var(--primary); }
.border-s-destructive { border-inline-start-color: var(--destructive); }
.border-s-success { border-inline-start-color: var(--color-green-500); }
.border-s-warning { border-inline-start-color: var(--color-yellow-400); }

.border-primary\/20 { border-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.border-destructive\/20 { border-color: color-mix(in oklab, var(--destructive) 20%, transparent); }
.border-warning\/30 { border-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); }

/* ── Semantic colours ─────────────────────────────────────────────────────
 * styles.css carries the semantic palette only inside components
 * (.kt-badge-success, .kt-alert-warning, …); the bare text-/bg- utilities
 * were never emitted. These mirror the exact token each component uses, so a
 * `text-success` label matches a `kt-badge-success` beside it.
 * ─────────────────────────────────────────────────────────────────────── */
.text-success { color: var(--color-green-500); }
.text-warning { color: var(--color-yellow-500); }
.text-info { color: var(--color-violet-500); }
.text-warning-foreground { color: var(--color-yellow-700); }

/* Solid fills — used for the meter bars on the merchant usage page. */
.bg-success { background-color: var(--color-green-500); }
.bg-warning { background-color: var(--color-yellow-400); }
.bg-secondary { background-color: var(--secondary); }

.bg-success\/5 { background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent); }
.bg-warning\/5 { background-color: color-mix(in oklab, var(--color-yellow-400) 5%, transparent); }
.border-success\/20 { border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent); }
.border-warning\/20 { border-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent); }

.bg-success\/10 { background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent); }
.bg-success\/20 { background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent); }
.bg-warning\/10 { background-color: color-mix(in oklab, var(--color-yellow-400) 10%, transparent); }
.bg-info\/10 { background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent); }
.bg-destructive\/10 { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.bg-destructive\/20 { background-color: color-mix(in oklab, var(--destructive) 20%, transparent); }

/* ── Transitions & interaction states ─────────────────────────────────── */
.transition-colors {
    transition-property: color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke;
    transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--tw-duration, 150ms);
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--tw-duration, 150ms);
}
.hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
        0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.hover\:underline:hover { text-decoration-line: underline; }
.hover\:text-mono:hover { color: var(--mono); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:brightness-95:hover { filter: brightness(0.95); }
.hover\:bg-muted:hover { background-color: var(--muted); }
.hover\:bg-destructive:hover { background-color: var(--destructive); }
.hover\:bg-destructive\/20:hover { background-color: color-mix(in oklab, var(--destructive) 20%, transparent); }
.hover\:bg-muted\/40:hover { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.hover\:bg-primary\/20:hover { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.hover\:bg-destructive\/10:hover { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }

.last\:border-0:last-child { border-style: var(--tw-border-style, solid); border-width: 0; }
.last\:border-b-0:last-child { border-bottom-style: var(--tw-border-style, solid); border-bottom-width: 0; }

/* ── Metronic component variants the bundle omits ─────────────────────────
 * Metronic ships kt-btn in primary/secondary/destructive/mono/outline/ghost
 * and sizes lg/sm only. Our admin needs an xs size plus the success/warning
 * tones the status tables use. Metrics below are derived from .kt-btn-sm so
 * the two sizes sit on the same rhythm.
 * ─────────────────────────────────────────────────────────────────────── */
.kt-btn-xs {
    height: calc(var(--spacing) * 6.5);
    gap: calc(var(--spacing) * 1);
    border-radius: calc(var(--radius) - 4px);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: 1rem;
}
.kt-btn-xs.kt-btn-icon { width: calc(var(--spacing) * 6.5); padding-inline: 0; }
.kt-btn-xs > i { font-size: 0.75rem; }

.kt-btn-success { background-color: var(--color-green-500); color: var(--color-white); border-color: transparent; }
.kt-btn-success:hover, .kt-btn-success.active { background-color: var(--color-green-600); color: var(--color-white); }

.kt-btn-warning { background-color: var(--color-yellow-400); color: var(--color-white); border-color: transparent; }
.kt-btn-warning:hover, .kt-btn-warning.active { background-color: var(--color-yellow-500); color: var(--color-white); }

/* Neutral tertiary action — the "light" tone used for Reset/Cancel controls. */
.kt-btn-light { background-color: var(--muted); color: var(--secondary-foreground); border-color: transparent; }
.kt-btn-light:hover, .kt-btn-light.active { background-color: var(--accent, var(--muted)); color: var(--mono); }

/* Leading icon inside a .kt-input-wrapper-style search field. */
.kt-input-icon {
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
    font-size: 0.875rem;
}

.kt-form-group { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1.5); }

.kt-checkbox-group { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.kt-checkbox-label { font-size: 0.8125rem; line-height: 1.25rem; color: var(--secondary-foreground); cursor: pointer; }
.kt-checkbox-xs { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }

.kt-label-text { font-size: 0.8125rem; line-height: 1.25rem; color: var(--secondary-foreground); }

/* Determinate progress fill (Updater). Width is set inline by the page JS. */
.kt-progress-bar {
    height: 100%;
    border-radius: inherit;
    background-color: var(--primary);
    transition: width 0.25s ease;
}

/* Sticky-ish emphasised table head used by the mail/SMS template tables. */
.kt-table-head-bg { background-color: var(--muted); }
.kt-table-head-custom th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-foreground);
}

/* ── Responsive variants ──────────────────────────────────────────────────
 * The bundle emitted only the handful of breakpoint utilities demo9 used.
 * Everything below is a grid/column rule our admin markup already asks for.
 * ─────────────────────────────────────────────────────────────────────── */
@media (width >= 40rem) {
    .sm\:flex { display: flex; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:w-auto { width: auto; }
    .sm\:max-w-\[150px\] { max-width: 150px; }
}

@media (width >= 48rem) {
    .md\:inline-flex { display: inline-flex; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:dark\:block:is(.dark *) { display: block; }
    .md\:dark\:hidden:is(.dark *) { display: none; }
}

@media (width >= 64rem) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:p-5 { padding: calc(var(--spacing) * 5); }
    .lg\:p-6 { padding: calc(var(--spacing) * 6); }
    .lg\:mt-10 { margin-top: calc(var(--spacing) * 10); }
    .lg\:mt-7\.5 { margin-top: calc(var(--spacing) * 7.5); }
    .lg\:size-14 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); }
    .lg\:top-\[10\%\] { top: 10%; }
}

@media (width >= 80rem) {
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:col-span-1 { grid-column: span 1 / span 1; }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (width >= 96rem) {
    .\32 xl\:bg-center { background-position: center; }
}

/* ── Password-strength meter (admin/profile) ──────────────────────────────
 * A four-step spectrum, not a semantic state, so it keeps raw palette names.
 * yellow-500/green-500 already ship; the two weak steps and the weak-label
 * colour did not, which left the first half of the meter uncoloured.
 * ─────────────────────────────────────────────────────────────────────── */
/* red-500 / orange-500 are not in the bundle's token set — literal values,
   taken from the same Tailwind v4 palette the bundle's other steps use. */
.bg-red-500 { background-color: oklch(63.7% 0.237 25.331); }
.bg-orange-500 { background-color: oklch(70.5% 0.213 47.604); }
.text-red-600 { color: var(--color-red-600); }

/* ── Rendered rich text (admin-authored HTML) ─────────────────────────────
 * `prose`/`prose-sm` come from the Tailwind Typography plugin, which this
 * bundle does not include, so stored rich text rendered as a wall of
 * unstyled markup. This is a minimal stand-in on Metronic tokens — enough
 * for the short remark/description bodies the admin actually stores.
 * ─────────────────────────────────────────────────────────────────────── */
.prose :where(p, ul, ol, blockquote, pre, table) { margin-block: 0.5em; }
.prose :where(h1, h2, h3, h4) { margin-block: 0.8em 0.4em; font-weight: 600; color: var(--mono); }
.prose :where(ul) { list-style: disc; padding-inline-start: 1.4em; }
.prose :where(ol) { list-style: decimal; padding-inline-start: 1.4em; }
.prose :where(a) { color: var(--primary); text-decoration-line: underline; }
.prose :where(strong) { font-weight: 600; color: var(--mono); }
.prose :where(code) { font-family: var(--font-mono); font-size: 0.875em; }
.prose :where(blockquote) {
    border-inline-start: 3px solid var(--border);
    padding-inline-start: 0.9em;
    color: var(--secondary-foreground);
}
.prose :where(:first-child) { margin-block-start: 0; }
.prose :where(:last-child) { margin-block-end: 0; }
.prose-sm { font-size: 0.8125rem; line-height: 1.5rem; }

/* ── Phone field: country picker + national number ────────────────────────
 * `.kt-select` and `.kt-input` are both `width: 100%`, so putting them side
 * by side in a flex row makes the select claim the whole row and squeeze the
 * number input out of sight. The obvious `max-w-[7.5rem]` cap does not exist
 * in the bundle (arbitrary values are only emitted for markup the demo
 * itself used), and a plain `w-32` loses to `.kt-select` on source order.
 *
 * Scoped child selectors instead, so the widths win on specificity rather
 * than on load order. Used by the merchant profile mobile field.
 * ─────────────────────────────────────────────────────────────────────── */
.kt-phone-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}
.kt-phone-group > .kt-select {
    flex: 0 0 8.5rem;
    width: 8.5rem;
    padding-inline: calc(var(--spacing) * 2.5);
}
.kt-phone-group > .kt-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}