/* ============================================================
   style/barcode-generator.css
   Page-scoped styles for frontend/barcode-generator.html.

   Prefixed .bcg- or scoped under body.bcg-page, so nothing leaks
   into the tool pages that share main.css. Panels, controls and
   buttons keep the treatment the rest of the site uses — white
   cards on #e2e8f0 borders, the orange accent, slate text.

   The layout is a picker beside a working area: the picker holds
   the search and the categories, and the working area holds the
   preview with tabbed settings under it, so a page covering eighty
   barcode types never shows more than one group of controls at a
   time.
   ============================================================ */

body.bcg-page .pagebox { align-items: flex-start; }

body.bcg-page .backtohome {
    position: relative;
    margin: 0 0 18px;
}

body.bcg-page .tool-area {
    padding-top: 12px;
    min-width: 0;
}

/* Used where a label has to exist for a screen reader but would be
   noise on screen. */
.bcg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Page header ───────────────────────────────────────── */
.bcg-header { margin-bottom: 24px; }

.bcg-title {
    font-size: 34px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
}

.bcg-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
}

.bcg-sub {
    font-size: 16px;
    line-height: 1.65;
    color: #475569;
    max-width: 72ch;
}

/* ── Shell ─────────────────────────────────────────────── */
.bcg-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.bcg-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.bcg-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.bcg-group-title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 12px;
}

.bcg-group-title:not(:first-child) { margin-top: 24px; }

.bcg-help {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 6px 0 0;
}

/* ── The picker ────────────────────────────────────────── */
.bcg-picker {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
    position: sticky;
    top: 14px;
    /* Eighty types will not fit on a screen, so the picker scrolls
       inside itself and the page does not grow to match. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.bcg-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bcg-search-wrap > i {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.bcg-search {
    width: 100%;
    padding: 10px 30px 10px 31px;
    font-family: inherit;
    font-size: 13.5px;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
}

.bcg-search:focus {
    outline: 2px solid #ff7a1a;
    outline-offset: 1px;
    background: #fff;
}

.bcg-search::-webkit-search-cancel-button { display: none; }

.bcg-search-clear {
    position: absolute;
    right: 6px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    cursor: pointer;
}

.bcg-search-clear:hover { background: #cbd5e1; }

.bcg-search-count {
    font-size: 12px;
    color: #64748b;
    margin: 8px 2px 0;
}

.bcg-cats { margin-top: 10px; }

.bcg-cat + .bcg-cat { margin-top: 2px; }

.bcg-cat-head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.bcg-cat-head:hover { background: #f1f5f9; }

.bcg-cat-head:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: -2px;
}

.bcg-cat-head > i:first-child {
    width: 15px;
    text-align: center;
    color: #ff7a1a;
    font-size: 12.5px;
}

.bcg-cat-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

.bcg-cat-head::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 9px;
    color: #cbd5e1;
    transition: transform 0.15s ease;
}

.bcg-cat.is-open .bcg-cat-head::after { transform: rotate(180deg); }

.bcg-cat-body { padding: 2px 0 8px 6px; }
.bcg-cat:not(.is-open) .bcg-cat-body { display: none; }

.bcg-cat-blurb {
    font-size: 11.5px;
    line-height: 1.55;
    color: #64748b;
    padding: 2px 8px 8px;
}

.bcg-type {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    color: #475569;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.bcg-type:hover { background: #f1f5f9; color: #0f172a; }

.bcg-type.is-on {
    background: #fff3e8;
    color: #c2410c;
    font-weight: 700;
}

.bcg-type:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: -2px;
}

.bcg-type-star {
    margin-left: auto;
    font-size: 10px;
    color: #f59e0b;
}

.bcg-no-hits {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    padding: 14px 8px;
}

/* ── Preview ───────────────────────────────────────────── */
.bcg-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bcg-type-name {
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.bcg-type-cat {
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 600;
    margin: 2px 0 0;
}

.bcg-star {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.bcg-star:hover { color: #f59e0b; border-color: #fcd34d; }
.bcg-star[aria-pressed="true"] { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.bcg-star:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

.bcg-stage {
    display: grid;
    place-items: center;
    min-height: 210px;
    padding: 20px;
    border-radius: 12px;
    /* A chequerboard, so a transparent background reads as transparent
       rather than as white. */
    background-color: #f8fafc;
    background-image:
        linear-gradient(45deg, #eef2f6 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f6 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border: 1px solid #e2e8f0;
    overflow: auto;
}

.bcg-stage svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.bcg-stage img { display: block; max-width: 100%; height: auto; }

.bcg-empty {
    font-size: 13.5px;
    color: #94a3b8;
    text-align: center;
    margin: 0;
}

.bcg-meta {
    margin: 10px 0 0;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bcg-meta:empty { display: none; }

/* ── Problems and warnings ─────────────────────────────── */
.bcg-problem {
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.bcg-problem-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: #b91c1c;
}

.bcg-problem-why {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #7f1d1d;
}

.bcg-problem-allowed {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #991b1b;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
}

.bcg-problem-allowed:empty { display: none; }

.bcg-warn {
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    line-height: 1.6;
}

.bcg-warn p { margin: 0; }
.bcg-warn p + p { margin-top: 6px; }

.bcg-warn-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.55;
}

.bcg-warn-inline i { margin-top: 2px; }

/* The result of reading the finished code back. This is a statement of
   fact about the drawing on screen, not a guess, so it gets its own
   treatment rather than sharing the speculative-warning style. */
.bcg-verdict {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.bcg-verdict.is-ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.bcg-verdict.is-bad { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.bcg-verdict.is-checking { color: #0369a1; }

/* ── Tabs ──────────────────────────────────────────────── */
.bcg-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.bcg-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 10px 15px;
    min-height: 42px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bcg-tab:hover { background: #f1f5f9; color: #0f172a; }

.bcg-tab.is-on {
    color: #fff;
    background: #ff7a1a;
    border-color: #ff7a1a;
}

.bcg-tab:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

/* ── Fields ────────────────────────────────────────────── */
.bcg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 18px;
}

.bcg-field { min-width: 0; }
.bcg-field-narrow { max-width: 300px; }

.bcg-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.bcg-field output {
    font-size: 12px;
    font-weight: 600;
    color: #ff7a1a;
    font-variant-numeric: tabular-nums;
}

.bcg-input,
.bcg-select,
.bcg-textarea {
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 13.5px;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
}

.bcg-textarea {
    resize: vertical;
    line-height: 1.6;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
}

.bcg-input:focus,
.bcg-select:focus,
.bcg-textarea:focus {
    outline: 2px solid #ff7a1a;
    outline-offset: 1px;
}

.bcg-input.is-invalid,
.bcg-textarea.is-invalid { border-color: #dc2626; background: #fef2f2; }

.bcg-input[type="range"],
input[type="range"].bcg-range {
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: #ff7a1a;
}

.bcg-field input[type="range"] {
    width: 100%;
    accent-color: #ff7a1a;
}

.bcg-colour {
    width: 100%;
    height: 40px;
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.bcg-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: #334155;
    cursor: pointer;
}

.bcg-check input { accent-color: #ff7a1a; width: 16px; height: 16px; }
.bcg-check-inline { font-size: 12.5px; }

.bcg-check-row { margin-top: 16px; }

.bcg-validity {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 19px;
}

.bcg-validity.is-ok { color: #15803d; }
.bcg-validity.is-bad { color: #b91c1c; }

.bcg-preset-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
}

.bcg-chip {
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
}

.bcg-chip:hover { background: #e2e8f0; color: #0f172a; }
.bcg-chip:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

/* ── Structured forms ──────────────────────────────────── */
.bcg-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 4px;
}

.bcg-reveal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    cursor: pointer;
}

.bcg-reveal:hover { background: #e2e8f0; }
.bcg-reveal:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

/* ── Buttons ───────────────────────────────────────────── */
.bcg-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.bcg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    min-height: 44px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bcg-btn:hover:not(:disabled) {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

.bcg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.bcg-btn-primary {
    color: #fff;
    background: #ff7a1a;
    border-color: #ff7a1a;
}

.bcg-btn-primary:hover:not(:disabled) {
    background: #ea6a0c;
    border-color: #ea6a0c;
    color: #fff;
}

.bcg-btn-reset:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.bcg-btn-small { min-height: 34px; padding: 7px 12px; font-size: 12.5px; }

.bcg-btn:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

.bcg-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    min-height: 42px;
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    cursor: pointer;
}

.bcg-file-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

/* The file input inside is hidden, so the label carries the focus ring
   on its behalf when the input is tabbed to. */
.bcg-file-btn:focus-within { outline: 2px solid #ff7a1a; outline-offset: 2px; }

.bcg-status {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    min-height: 19px;
    color: #475569;
}

.bcg-status.is-ok { color: #15803d; }
.bcg-status.is-error { color: #b91c1c; }
.bcg-status.is-busy { color: #0369a1; }

/* ── Logo ──────────────────────────────────────────────── */
.bcg-logo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.bcg-logo-name {
    font-size: 12.5px;
    color: #475569;
    overflow-wrap: anywhere;
}

/* ── Batch ─────────────────────────────────────────────── */
.bcg-batch-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.bcg-csv-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #475569;
    min-height: 18px;
}

.bcg-csv-note.is-bad { color: #b91c1c; font-weight: 600; }

.bcg-batch-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
    max-height: 460px;
    overflow-y: auto;
    padding: 4px;
}

.bcg-batch-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    text-align: center;
}

.bcg-batch-item svg,
.bcg-batch-item img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.bcg-batch-item p {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: #475569;
    overflow-wrap: anywhere;
}

.bcg-batch-item.is-bad {
    border-color: #fecaca;
    background: #fef2f2;
}

.bcg-batch-item.is-bad p { color: #b91c1c; }

/* ── History ───────────────────────────────────────────── */
.bcg-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bcg-history-head .bcg-group-title { margin: 0; }

.bcg-history-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.bcg-history-list li + li { margin-top: 6px; }

.bcg-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    cursor: pointer;
}

.bcg-history-item:hover { background: #fff3e8; border-color: #fed7aa; }
.bcg-history-item:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 2px; }

.bcg-history-type {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    color: #c2410c;
    background: #fff3e8;
    border-radius: 5px;
    padding: 2px 7px;
}

.bcg-history-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
}

/* ── Info panel ────────────────────────────────────────── */
.bcg-info-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 14px;
}

.bcg-info-list { margin: 0; }

.bcg-info-list dt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 3px;
}

.bcg-info-list dd {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #334155;
    line-height: 1.55;
}

.bcg-info-list dd:last-child { margin-bottom: 0; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1200px) {
    body.bcg-page .sidebar-ads { display: none; }
}

@media (max-width: 900px) {
    /* The picker stops being a sidebar and becomes a normal block at
       the top, so the preview is not pushed off the bottom of a phone. */
    .bcg-shell { grid-template-columns: minmax(0, 1fr); }

    .bcg-picker {
        position: static;
        max-height: 340px;
    }
}

@media (max-width: 620px) {
    .bcg-title { font-size: 27px; }
    .bcg-sub { font-size: 15px; }
    .bcg-panel { padding: 16px; }
    .bcg-grid { grid-template-columns: minmax(0, 1fr); }
    .bcg-field-narrow { max-width: none; }
    .bcg-btn { flex: 1 1 100%; }
    .bcg-btn-small { flex: 0 0 auto; }
    .bcg-stage { min-height: 170px; padding: 12px; }
    .bcg-batch-results { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
    /* Printing this page means printing the barcode. Everything that is
       page furniture goes, and the code is left alone on the paper at
       the size it was drawn. */
    body.bcg-page #navbar,
    body.bcg-page .backtohome,
    body.bcg-page .ad-horizontal,
    body.bcg-page .sidebar-ads,
    body.bcg-page footer,
    body.bcg-page .bcg-header,
    body.bcg-page .bcg-picker,
    body.bcg-page .bcg-tabs,
    body.bcg-page .bcg-tabpanel,
    body.bcg-page .bcg-info,
    body.bcg-page .bcg-history,
    body.bcg-page .bcg-preview-head,
    body.bcg-page .bcg-meta,
    body.bcg-page .bcg-warn,
    body.bcg-page .bcg-problem { display: none !important; }

    body.bcg-page .bcg-panel {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    body.bcg-page .bcg-stage {
        border: 0;
        background: none;
        min-height: 0;
        padding: 0;
        place-items: start;
    }
}