/* Job Cards (Pages/JobCards.razor): reviewers read, query and approve the cards people send from the Job Cards app. */
.jc-screen {
    --jc-ink: #0f172a;
    --jc-text: #1e293b;
    --jc-muted: #64748b;
    --jc-line: #e2e8f0;
    --jc-card: #ffffff;
    --jc-blue: #2563eb;
    --jc-blue-deep: #1d4ed8;
    --jc-blue-soft: #eff6ff;
    --jc-green: #047857;
    --jc-red: #b91c1c;
    --jc-paper: #fffdf6;
    --jc-rule: #c9dcef;
    --jc-margin: #e8a3a3;
    --jc-pen: #1a3a8f;
    --jc-radius: 1rem;
    --jc-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .04);
    display: grid;
    gap: 1.1rem;
    max-width: 80rem;
    color: var(--jc-text);
}
.jc-kicker { margin: 0; color: var(--jc-blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jc-intro, .jc-state, .jc-panel { border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: var(--jc-card); box-shadow: var(--jc-shadow); }
.jc-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem; }
.jc-intro h1 { margin: .35rem 0 .4rem; color: var(--jc-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.jc-intro p { max-width: 48rem; margin: 0; color: #475569; font-size: .92rem; line-height: 1.6; }
.jc-company { display: grid; gap: .3rem; min-width: min(100%, 16rem); }
.jc-company span, .jc-field > span { color: var(--jc-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.jc-state { display: grid; gap: .35rem; padding: 1.4rem 1.5rem; color: #475569; }
.jc-state strong { color: var(--jc-ink); }
.jc-panel { display: grid; gap: .8rem; padding: 1.1rem 1.25rem; min-width: 0; }
.jc-panel h2 { margin: 0; color: var(--jc-ink); font-size: 1.02rem; font-weight: 800; }
.jc-panel > p { margin: 0; color: #475569; font-size: .88rem; line-height: 1.55; }
.jc-empty { margin: 0; color: var(--jc-muted); font-size: .9rem; }
.jc-panel.jc-empty { padding: 1.2rem 1.25rem; }

.jc-tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border-radius: .9rem; background: #f1f5f9; width: fit-content; max-width: 100%; }
.jc-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 0; border-radius: .65rem; background: transparent; color: #334155; font-size: .88rem; font-weight: 600; cursor: pointer; }
.jc-tab.is-selected { background: var(--jc-card); color: var(--jc-blue-deep); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.jc-tab:focus-visible { outline: 2px solid var(--jc-blue); outline-offset: 1px; }
.jc-count { min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--jc-blue); color: #fff; font-size: .72rem; text-align: center; }

.jc-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.25rem; }
.jc-toolbar.jc-panel { padding: .75rem 1rem; }
.jc-search { flex: 1 1 18rem; max-width: 32rem; }
.jc-field { display: grid; gap: .3rem; margin: 0; }
.jc-month { min-width: 11rem; }
.jc-totals { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: #475569; font-size: .88rem; }
.jc-totals strong { color: var(--jc-ink); }
.jc-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-left: auto; }

.jc-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.jc-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border: 1px solid var(--jc-line); border-radius: .9rem; background: var(--jc-card); color: inherit; text-decoration: none; box-shadow: var(--jc-shadow); }
.jc-row:hover { border-color: #bfdbfe; background: #fafcff; }
.jc-row:focus-visible { outline: 2px solid var(--jc-blue); outline-offset: 2px; }
.jc-row-number { color: var(--jc-pen); font-family: "Ink Free", "Segoe Print", "Bradley Hand", cursive; font-size: 1.15rem; font-weight: 700; }
.jc-row-main { display: grid; min-width: 0; }
.jc-row-customer { overflow: hidden; color: var(--jc-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.jc-row-meta, .jc-row-when { color: var(--jc-muted); font-size: .8rem; }

.jc-back a { color: var(--jc-blue-deep); font-size: .88rem; font-weight: 600; text-decoration: none; }
.jc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.1rem; align-items: start; }

/* The card itself: ruled exam-pad paper with a red margin, values in handwriting. */
.jc-paper {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.6rem 1.6rem 1.2rem 3.4rem;
    border-radius: .35rem;
    background:
        linear-gradient(90deg, transparent 2.4rem, var(--jc-margin) 2.4rem, var(--jc-margin) calc(2.4rem + 1px), transparent calc(2.4rem + 1px), transparent calc(2.4rem + 4px), var(--jc-margin) calc(2.4rem + 4px), var(--jc-margin) calc(2.4rem + 5px), transparent calc(2.4rem + 5px)),
        repeating-linear-gradient(180deg, transparent 0 1.75rem, var(--jc-rule) 1.75rem calc(1.75rem + 1px)),
        var(--jc-paper);
    box-shadow: 0 1px 1px rgba(15, 23, 42, .08), 0 6px 18px rgba(15, 23, 42, .1);
    overflow: hidden;
}
.jc-paper::before { content: ""; position: absolute; inset: 0 0 auto; height: .55rem; background: linear-gradient(180deg, #8b2c2c, #6e1f1f); }
.jc-paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-top: .4rem; }
.jc-paper-title { margin: 0; color: var(--jc-ink); font-size: 1.35rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.jc-paper-sub { margin: .1rem 0 0; color: var(--jc-muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jc-paper-number { margin: 0; color: #b91c1c; font-family: "Ink Free", "Segoe Print", "Bradley Hand", cursive; font-size: 1.7rem; font-weight: 700; white-space: nowrap; }
.jc-paper-number span { color: var(--jc-muted); font-family: inherit; font-size: .9rem; }
.jc-label { margin: 0; color: #64748b; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jc-hand { margin: 0; color: var(--jc-pen); font-family: "Ink Free", "Segoe Print", "Bradley Hand", cursive; font-size: 1.05rem; line-height: 1.75rem; overflow-wrap: anywhere; }
.jc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.4rem; margin: 0; }
.jc-field-line { min-width: 0; padding-bottom: .1rem; }
.jc-field-line dd { margin: 0; }
.jc-checks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; }
.jc-check { position: relative; padding-left: 1.55rem; color: #334155; font-size: .86rem; font-weight: 600; }
.jc-check::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.05rem; height: 1.05rem; border: 1.6px solid #475569; border-radius: 2px; transform: translateY(-50%) rotate(-1.5deg); }
.jc-check.is-on::after { content: "\2713"; position: absolute; left: .08rem; top: 50%; color: var(--jc-pen); font-family: "Ink Free", "Segoe Print", cursive; font-size: 1.3rem; font-weight: 700; transform: translateY(-62%) rotate(-6deg); }
.jc-block { display: grid; gap: .1rem; }
.jc-report { white-space: pre-wrap; }
.jc-parts { margin: 0; padding-left: 1.3rem; color: var(--jc-pen); }
.jc-parts li { line-height: 1.75rem; }
.jc-qty { margin-left: .8rem; color: #b91c1c; }
.jc-none { color: var(--jc-muted); }
.jc-paper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding-top: .6rem; border-top: 1px dashed #cbd5e1; color: var(--jc-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* A rubber stamp: its colour says where the card is. */
.jc-stamp { position: absolute; top: 1.7rem; right: 38%; padding: .25rem .8rem; border: 3px solid currentColor; border-radius: .4rem; font-size: 1.15rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .72; transform: rotate(-9deg); pointer-events: none; mix-blend-mode: multiply; }
.jc-stamp--submitted { color: #1d4ed8; }
.jc-stamp--queried { color: #c2410c; }
.jc-stamp--approved { color: #047857; }

.jc-side { display: grid; gap: 1.1rem; position: sticky; top: 1rem; }
.jc-message { margin: 0; font-size: .84rem; line-height: 1.45; }
.jc-message.is-ok { color: var(--jc-green); }
.jc-message.is-error { color: var(--jc-red); }
.jc-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--jc-blue-deep); font: inherit; font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.jc-history { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; }
.jc-history li { display: grid; gap: .2rem; }
.jc-history-head { color: var(--jc-muted); }
.jc-history-head strong { color: var(--jc-ink); }
.jc-history-text { padding: .5rem .7rem; border-radius: .5rem; background: #f8fafc; color: var(--jc-text); white-space: pre-wrap; overflow-wrap: anywhere; }

.jc-table-wrap { overflow-x: auto; }
.jc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.jc-table th { padding: .5rem .6rem; border-bottom: 2px solid var(--jc-line); color: var(--jc-muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.jc-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--jc-line); }
.jc-table tfoot td { border-bottom: 0; font-weight: 800; }
.jc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.jc-table a { color: var(--jc-blue-deep); font-weight: 700; }
.jc-print-title { display: none; }

.jc-people { display: grid; gap: .15rem; margin: 0; padding: .35rem; border: 1px solid var(--jc-line); border-radius: .75rem; list-style: none; max-height: 26rem; overflow-y: auto; }
.jc-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .7rem; margin: 0; padding: .55rem .6rem; border-radius: .5rem; cursor: pointer; }
.jc-person:hover { background: #f8fafc; }
.jc-person input { grid-row: span 2; width: 1rem; height: 1rem; accent-color: var(--jc-blue); }
.jc-person-name { color: var(--jc-ink); font-weight: 700; font-size: .9rem; }
.jc-person-meta { color: var(--jc-muted); font-size: .78rem; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
    .jc-detail { grid-template-columns: 1fr; }
    .jc-side { position: static; }
}
@media (max-width: 620px) {
    .jc-intro { padding: 1.1rem; }
    .jc-paper { padding: 1.4rem 1rem 1rem 2.6rem; background-size: auto; }
    .jc-paper { background:
        linear-gradient(90deg, transparent 1.7rem, var(--jc-margin) 1.7rem, var(--jc-margin) calc(1.7rem + 1px), transparent calc(1.7rem + 1px)),
        repeating-linear-gradient(180deg, transparent 0 1.75rem, var(--jc-rule) 1.75rem calc(1.75rem + 1px)),
        var(--jc-paper); }
    .jc-fields { grid-template-columns: 1fr; }
    .jc-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .jc-row-when { grid-column: 2; }
    .jc-stamp { top: 4.6rem; right: 1rem; font-size: .95rem; }
}

/* Printing: only the card (or the report), as it looks on screen. */
@media print {
    body * { visibility: hidden; }
    .jc-paper, .jc-paper *, .jc-report-panel, .jc-report-panel * { visibility: visible; }
    .jc-paper, .jc-report-panel { position: absolute; inset: 0 auto auto 0; width: 100%; box-shadow: none; border: 0; }
    .jc-report-panel .jc-toolbar { display: none; }
    .jc-print-title { display: block; }
    .jc-paper { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}