/*
 * vaccination-card-paper.css — the vaccination card, in IAGD's own language.
 *
 * The paper booklet gives the STRUCTURE: the certificate face, the ruled
 * table, the legend strip. It does not give the look. The printed card is
 * pink ink on cream stock because that is what a cheap press does; IAGD is
 * violet and gold on near-black, the palette style_m_iagd.css already sets
 * (#be93ff into #ffd400, over #0b0a1d).
 *
 * So: same boxes, same columns, same legend, rendered as an official digital
 * document rather than a photocopy.
 */

.vc-paper {
    --vc-ink: #f2eefb;
    --vc-dim: #b9aee0;
    --vc-dim-2: #8479ad;
    --vc-violet: #be93ff;
    --vc-violet-soft: rgba(190, 147, 255, 0.14);
    --vc-gold: #ffd400;
    --vc-gold-soft: rgba(255, 212, 0, 0.30);
    --vc-panel: #120f27;
    --vc-line: rgba(255, 255, 255, 0.08);
    --vc-line-2: rgba(255, 255, 255, 0.14);
    --vc-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto 38px;
    max-width: 980px;
    color: var(--vc-ink);
}

.vc-sheet {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--vc-line-2);
    background:
        radial-gradient(120% 85% at 8% -10%, rgba(190, 147, 255, 0.16), transparent 58%),
        radial-gradient(90% 70% at 100% 0%, rgba(255, 212, 0, 0.07), transparent 60%),
        var(--vc-panel);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* A gold hairline along the top edge: the mark of an issued document. */
.vc-sheet::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vc-gold), #ffa500, transparent);
    opacity: 0.85;
}

/* ---------- Certificate face ---------- */

.vc-sheet__banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 26px 18px;
    border-bottom: 1px solid var(--vc-line);
}

.vc-sheet__banner img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: none;
}

.vc-sheet__banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vc-sheet__title {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    background: linear-gradient(74deg, #be93ff 0, #db9efd 22%, #ffd333 62%, #ffcf86 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vc-sheet__issuer {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--vc-dim-2);
}

.vc-sheet__serial {
    margin-left: auto;
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--vc-gold-soft);
    background: rgba(255, 212, 0, 0.06);
    font-family: var(--vc-mono);
    font-size: 0.74rem;
    letter-spacing: 0.6px;
    color: #ffe07a;
    white-space: nowrap;
}

.vc-face__photo {
    margin: 22px 26px 0;
    height: 220px;
    border-radius: 14px;
    border: 1px solid var(--vc-line-2);
    background:
        radial-gradient(80% 80% at 50% 0%, rgba(190, 147, 255, 0.16), transparent 70%),
        rgba(255, 255, 255, 0.02);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vc-face__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-face__rows {
    margin: 20px 26px 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
}

.vc-face__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 0;
    border-bottom: 1px solid var(--vc-line);
}

/* The wide rows (name, owner, address) take the full width. */
.vc-face__row:nth-child(1),
.vc-face__row:nth-child(2),
.vc-face__row:nth-child(5),
.vc-face__row:nth-child(6),
.vc-face__row:nth-child(7) { grid-column: 1 / -1; }

/* Species+Age and Sex+Markings each split their line, as on the paper. */
.vc-face__row--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
.vc-face__row--split dt:nth-of-type(2),
.vc-face__row--split dd:nth-of-type(2) { grid-column: 2; }
.vc-face__row--split dt:nth-of-type(1) { grid-row: 1; }
.vc-face__row--split dd:nth-of-type(1) { grid-row: 2; }
.vc-face__row--split dt:nth-of-type(2) { grid-row: 1; }
.vc-face__row--split dd:nth-of-type(2) { grid-row: 2; }

.vc-face__row dt {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--vc-dim-2);
}

.vc-face__row dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--vc-ink);
    overflow-wrap: anywhere;
}

.vc-face__row dd:empty::after {
    content: "Not recorded";
    color: var(--vc-dim-2);
    font-size: 0.86rem;
}

/* ---------- The ruled table ---------- */

.vc-sheet__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--vc-line);
}

.vc-sheet__head-left,
.vc-sheet__head-right {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--vc-dim-2);
}

.vc-sheet__head-value { font-size: 1.05rem; font-weight: 600; color: var(--vc-ink); }
.vc-sheet__head-right { margin-left: auto; color: var(--vc-violet); }

.vc-tablewrap { margin: 0 26px; }

/* No min-width and no sideways scroll. A six-column table forced into a phone
   clips "MSD Animal Health" to "MSD Heal" and makes the reader drag a box to
   read one shot. Below 860px the same rows become one card each; see the
   stacked block further down. */
.vc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    table-layout: fixed;
}

.vc-table th,
.vc-table td {
    padding: 13px 12px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--vc-line);
}

.vc-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(190, 147, 255, 0.16), rgba(190, 147, 255, 0.06));
    border-bottom: 1px solid var(--vc-line-2);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vc-dim);
    line-height: 1.3;
}

.vc-table thead th span {
    display: block;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: none;
    color: var(--vc-dim-2);
}

/* Widths add to 100 and every cell wraps rather than clips. The vet cell is
   the widest because it holds four lines: name, licence, expiry, PTR / TIN. */
.vc-col-date    { width: 13%; }
.vc-col-wt      { width: 8%; }
.vc-col-against { width: 20%; }
.vc-col-maker   { width: 17%; }
.vc-col-lot     { width: 13%; }
.vc-col-vet     { width: 29%; }

.vc-table td { overflow-wrap: anywhere; }

.vc-table tbody tr { transition: background 140ms ease; }
.vc-table tbody tr:hover:not(.vc-row--none) { background: rgba(255, 255, 255, 0.025); }

.vc-table .vc-col-date { font-variant-numeric: tabular-nums; color: var(--vc-ink); }

/* The way from one line to the medical record behind it. */
.vc-rowlink {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vc-violet);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.vc-rowlink:hover { color: #d8bcff; border-bottom-color: currentColor; }
.vc-rowlink .bi { font-size: 0.66rem; }
.vc-table .vc-col-wt { font-family: var(--vc-mono); color: var(--vc-dim); }
.vc-table .vc-col-lot { font-family: var(--vc-mono); font-size: 0.78rem; color: var(--vc-dim); }
.vc-table .vc-col-maker { color: var(--vc-dim); }

/* The card's shorthand, as a struck badge. */
.vc-against__code {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--vc-gold-soft);
    background: rgba(255, 212, 0, 0.08);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #ffe07a;
}

.vc-against__full {
    display: block;
    margin-top: 5px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--vc-dim-2);
}

/* A shot off the legend: the product name, not a badge. */
.vc-against__name {
    display: block;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vc-ink);
}

.vc-vet__name { display: block; font-weight: 600; color: var(--vc-ink); }
.vc-vet__name .bi { color: var(--vc-gold); font-size: 0.82rem; }
.vc-vet__line { display: block; font-family: var(--vc-mono); font-size: 0.68rem; line-height: 1.55; color: var(--vc-dim-2); }

.vc-vet__pending {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(190, 147, 255, 0.45);
    font-size: 0.7rem;
    color: var(--vc-violet);
}

.vc-row--unsigned { background: var(--vc-violet-soft); }
.vc-row--unsigned:hover { background: rgba(190, 147, 255, 0.18) !important; }

/* An empty card says so, rather than showing ruled lines nobody can write on. */
.vc-row--none td {
    padding: 34px 12px 38px;
    text-align: center;
    border-bottom: 0;
}

.vc-none__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vc-dim);
}

.vc-none__sub {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--vc-dim-2);
}

/* ---------- Legend ---------- */

.vc-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 30px;
    margin: 18px 26px 24px;
    padding-top: 16px;
    border-top: 1px solid var(--vc-line);
}

.vc-legend dl { margin: 0; }

.vc-legend div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
}

.vc-legend dt {
    font-family: var(--vc-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffe07a;
}

.vc-legend dd { margin: 0; font-size: 0.74rem; color: var(--vc-dim-2); }

/* ---------- The owner fills a line ---------- */

.vc-sheet--add { padding: 22px 26px 24px; }

.vc-add__ok,
.vc-add__errs {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.vc-add__ok {
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.10);
    color: #7ce0b0;
}

.vc-add__errs {
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.10);
    color: #fca5a5;
    padding-left: 32px;
}

.vc-add__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.vc-add label { display: flex; flex-direction: column; gap: 6px; }

.vc-add label span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--vc-dim-2);
}

.vc-add input,
.vc-add select {
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--vc-line-2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--vc-ink);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 140ms ease, background 140ms ease;
}

.vc-add input::placeholder { color: var(--vc-dim-2); }

.vc-add input:focus,
.vc-add select:focus {
    outline: none;
    border-color: var(--vc-violet);
    background: rgba(190, 147, 255, 0.08);
}

.vc-add select option { background: var(--vc-panel); color: var(--vc-ink); }

.vc-add__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--vc-line);
}

.vc-add__foot p { margin: 0; flex: 1 1 260px; font-size: 0.78rem; line-height: 1.5; color: var(--vc-dim-2); }

.vc-add__foot button {
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(96deg, #ffd400, #ffa500);
    color: #2a1c00;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: filter 140ms ease, transform 140ms ease;
}

.vc-add__foot button:hover { filter: brightness(1.08); }
.vc-add__foot button:active { transform: scale(0.985); }

/* ---------- Narrow: one card per shot ----------
 *
 * Six columns do not fit a phone. Rather than scroll a box sideways, each row
 * becomes its own card: the date and the code on a header line, then the
 * remaining cells as label-and-value pairs, then the signature block. The
 * markup does not change; `data-label` on each cell supplies the field name.
 */

@media (max-width: 860px) {
    .vc-table,
    .vc-table tbody,
    .vc-table tr,
    .vc-table td { display: block; width: auto; }

    .vc-table { table-layout: auto; }

    /* The header row's labels move onto the cells themselves. */
    .vc-table thead { display: none; }

    /* A grid, so the date and the weight share the card's first line and the
       rest run full width beneath them. */
    .vc-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 14px;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid var(--vc-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.02);
    }

    .vc-table .vc-col-date { grid-column: 1; }
    .vc-table .vc-col-wt   { grid-column: 2; }
    .vc-table .vc-col-against,
    .vc-table .vc-col-maker,
    .vc-table .vc-col-lot,
    .vc-table .vc-col-vet  { grid-column: 1 / -1; }

    .vc-table tr:hover:not(.vc-row--none) { background: rgba(255, 255, 255, 0.035); }

    .vc-table td {
        padding: 7px 0;
        border-bottom: 1px solid var(--vc-line);
    }

    .vc-table td:last-child { border-bottom: 0; padding-bottom: 0; }

    .vc-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--vc-dim-2);
    }

    /* The date leads the card, so it takes the headline rather than a label. */
    .vc-table .vc-col-date {
        padding-top: 0;
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--vc-ink);
    }

    .vc-table .vc-col-date::before { content: none; }

    /* Weight sits beside the date, not on a line of its own. */
    .vc-table .vc-col-wt {
        padding-top: 0;
        border-bottom: 0;
        text-align: right;
        align-self: start;
        font-size: 0.9rem;
        color: var(--vc-dim);
    }

    .vc-table .vc-col-wt::before { content: none; }
    .vc-table .vc-col-wt:empty { display: none; }

    /* A cell with nothing in it would otherwise print a label over blank space. */
    .vc-table .vc-col-maker:empty,
    .vc-table .vc-col-lot:empty { display: none; }

    .vc-table .vc-col-against { padding-top: 10px; }

    /* The empty-card notice keeps its single full-width cell. */
    .vc-table .vc-row--none { display: block; }
    .vc-table .vc-row--none td { grid-column: 1 / -1; padding: 24px 0; }

    .vc-sheet__banner { flex-wrap: wrap; padding: 18px 18px 16px; }
    .vc-sheet__serial { margin-left: 0; }
    .vc-face__photo { margin: 18px; height: 190px; }
    .vc-face__rows { margin: 16px 18px 20px; grid-template-columns: minmax(0, 1fr); }
    .vc-face__row:nth-child(n) { grid-column: 1 / -1; }
    .vc-tablewrap { margin: 0 18px; }
    .vc-legend { grid-template-columns: minmax(0, 1fr); margin: 16px 18px 20px; }
    .vc-sheet--add { padding: 18px; }
}

/* ---------- Print ---------- */

@media print {
    /* On paper the document goes back to ink on white. */
    .vc-paper { max-width: none; margin: 0; gap: 12px; color: #111; }
    .vc-sheet {
        background: #fff;
        border-color: #999;
        box-shadow: none;
        break-inside: avoid;
    }
    .vc-sheet::before { background: #b8860b; }
    .vc-sheet__title { -webkit-text-fill-color: #111; color: #111; background: none; }
    .vc-sheet__issuer,
    .vc-face__row dt,
    .vc-sheet__head-left,
    .vc-sheet__head-right,
    .vc-table thead th { color: #555; }
    .vc-face__row dd,
    .vc-table tbody td,
    .vc-vet__name { color: #111; }
    .vc-table thead th { background: #f2f2f2; }
    .vc-against__code { border-color: #999; background: none; color: #111; }
    .vc-vet__line,
    .vc-against__full,
    .vc-legend dd { color: #555; }
    .vc-legend dt { color: #111; }
    .vc-sheet__serial { border-color: #999; background: none; color: #111; }
    .vc-sheet--add { display: none; }
    .vc-tablewrap { margin: 0 14px; }
    .vc-table thead th { position: static; }

    /* A narrow print sheet would otherwise pick up the stacked card layout.
       On paper the ruled table is the right shape, so it is restored. */
    .vc-table { display: table; table-layout: fixed; }
    .vc-table thead { display: table-header-group; }
    .vc-table tbody { display: table-row-group; }
    .vc-table tr { display: table-row; margin: 0; padding: 0; border: 0; background: none; }
    .vc-table td { display: table-cell; padding: 8px 9px; border-bottom: 1px solid #ccc; }
    .vc-table td::before { content: none; }
}