/*
 * Design tokens borrowed from shadcn/ui, composed by hand.
 *
 * shadcn itself is a React + Tailwind + Radix code generator and cannot be used
 * from server-rendered templates. What carries over is its design system: the
 * palette, the radii and the restraint. Values are stored as unwrapped HSL
 * triples so they compose — `hsl(var(--destructive) / 0.1)` is what gives the
 * error rows a tinted background without declaring a second colour.
 */

:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 72.2% 50.6%;
    --success: 142 71% 45%;
    --warning: 38 92% 50%;
    --info: 221 83% 53%;

    --border: 240 5.9% 90%;
    --ring: 240 5% 64.9%;

    --radius: 0.5rem;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;

        --card: 240 10% 5.9%;
        --card-foreground: 0 0% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;

        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 0 72% 58%;
        --success: 142 69% 58%;
        --warning: 38 92% 60%;
        --info: 217 91% 65%;

        --border: 240 3.7% 15.9%;
        --ring: 240 4.9% 45%;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.topbar {
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.brand__mark { width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--foreground)); }
.brand__name { letter-spacing: -0.01em; }

.nav { display: flex; gap: 4px; margin-right: auto; }

.nav__link {
    padding: 6px 10px;
    border-radius: calc(var(--radius) - 2px);
    text-decoration: none;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.nav__link:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.topbar__session { display: flex; align-items: center; gap: 12px; }
.topbar__user { color: hsl(var(--muted-foreground)); font-size: 13px; }

/* ── Page ───────────────────────────────────────────────────────────────── */

.page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }
.page--centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.page__header { margin-bottom: 20px; }
.page__title { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.page__subtitle { margin: 4px 0 0; color: hsl(var(--muted-foreground)); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.muted { color: hsl(var(--muted-foreground)); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.mono--break { overflow-wrap: anywhere; }
.text-danger { color: hsl(var(--destructive)); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Card ───────────────────────────────────────────────────────────────── */

.card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.card--narrow { max-width: 380px; width: 100%; margin-bottom: 0; }

.card__header { padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); }
.card__header--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card__title { margin: 0; font-size: 15px; font-weight: 600; }
.card__subtitle { margin: 4px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.card__body { padding: 20px; }

.empty { text-align: center; color: hsl(var(--foreground)); }
.empty p { margin: 4px 0; }

/* ── Table ──────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }

.table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    white-space: nowrap;
}

.table td { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: hsl(var(--muted) / 0.5); }
.table .num { text-align: right; }

.row--danger { background: hsl(var(--destructive) / 0.06); }
.row--danger:hover { background: hsl(var(--destructive) / 0.1); }

.cell-sub { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.cell-sub--danger { color: hsl(var(--destructive)); }

/* ── Badge ──────────────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge--muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge--ok { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
.badge--info { background: hsl(var(--info) / 0.12); color: hsl(var(--info)); }
.badge--warn { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); }
.badge--danger { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.badge--dashed { border: 1px dashed hsl(var(--border)); color: hsl(var(--muted-foreground)); }

/* ── Button ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn--primary:hover { background: hsl(var(--primary) / 0.9); }

.btn--ghost { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn--ghost:hover { background: hsl(var(--accent)); }

.btn--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn--block { width: 100%; }

/* ── Form controls ──────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--grow { flex: 1 1 260px; }
.field--actions { flex-direction: row; align-items: flex-end; gap: 8px; }
.field__label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }

.input, .select {
    height: 36px;
    width: 100%;
    padding: 0 10px;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    font-size: 14px;
}

.input:focus, .select:focus { outline: 2px solid hsl(var(--ring)); outline-offset: -1px; }

.input-group { display: flex; min-width: 0; }
.select--attached { width: auto; border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); border-right: none; background: hsl(var(--muted)); }
.input--attached { border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 20px; align-items: flex-end; }

/* ── Alerts, details, code ──────────────────────────────────────────────── */

.alert {
    padding: 10px 14px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    margin: 0 0 16px;
}

.alert--ok { background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.3); color: hsl(var(--success)); }
.alert--warn { background: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning) / 0.3); color: hsl(var(--warning)); }
.alert--danger { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); }

.details { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; margin: 0; }
.details--wide { grid-template-columns: minmax(160px, auto) 1fr; }
.details dt { color: hsl(var(--muted-foreground)); font-size: 13px; }
.details dd { margin: 0; overflow-wrap: anywhere; }

.code {
    margin: 0;
    padding: 14px;
    background: hsl(var(--muted));
    border-radius: calc(var(--radius) - 2px);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
}

code { font-family: var(--font-mono); font-size: 0.92em; background: hsl(var(--muted)); padding: 1px 5px; border-radius: 4px; }

/* ── Stats ──────────────────────────────────────────────────────────────── */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }

.stat {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat--danger { border-color: hsl(var(--destructive) / 0.4); }
.stat--warn { border-color: hsl(var(--warning) / 0.4); }
.stat__label { font-size: 12px; color: hsl(var(--muted-foreground)); }
.stat__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Links & pager ──────────────────────────────────────────────────────── */

.link { color: hsl(var(--foreground)); text-decoration: none; border-bottom: 1px solid hsl(var(--border)); }
.link:hover { border-bottom-color: hsl(var(--foreground)); }
.link--strong { font-weight: 500; }
.link--danger { color: hsl(var(--destructive)); border-bottom-color: hsl(var(--destructive) / 0.4); }
.link--back { font-size: 13px; color: hsl(var(--muted-foreground)); border: none; }
.link--back:hover { color: hsl(var(--foreground)); }

.pager { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid hsl(var(--border)); }

/* ── Pandox additions ───────────────────────────────────────────────────── */

/*
 * The KPI tiles on the tenant screen are links into a filtered delivery queue —
 * a count nobody can click is a dead end when the number is not zero.
 */
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { border-color: hsl(var(--ring)); background: hsl(var(--muted) / 0.4); }
a.stat:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/*
 * "omitida" and "rechazada" are not self-explanatory, and guessing wrong about
 * them means telling a customer their purchase was sent when it never was. The
 * legend sits under the queue so the meaning is on the same screen as the word.
 */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 20px; border-top: 1px solid hsl(var(--border)); }
.legend__item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: hsl(var(--muted-foreground)); }

/* Long error strings must wrap inside their cell rather than widen the table. */
.error-text { display: block; max-width: 420px; overflow-wrap: anywhere; }