/* ==========================================================================
   Qrved — tools.css
   QR generator, QR scanner, barcode generator, barcode scanner
   ========================================================================== */

.tool-page {
    padding-top: 2rem;
    padding-bottom: 6rem;
}

.tool-shutdown-notice {
    margin-bottom: 2.5rem;
}


/* ==========================================================================
   Heading
   ========================================================================== */

.tool-heading {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.tool-heading h1 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -.055em;
}

.tool-heading p {
    max-width: 650px;
    margin: .55rem 0 0;
    font-size: .88rem;
}


/* ==========================================================================
   Tool layout
   ========================================================================== */

.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(380px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.tool-layout-qr {
    grid-template-columns: minmax(0, 620px) minmax(380px, 1fr);
}

.tool-controls {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .85rem;
}

.tool-preview-column {
    min-width: 0;
}

.sticky-preview {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}


/* ==========================================================================
   Panels
   ========================================================================== */

.tool-panel,
.tool-preview-panel,
.scanner-panel,
.scanner-result-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tool-panel {
    padding: 1.25rem;
}

.tool-panel-heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.tool-panel-heading > div {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.tool-panel-heading h2 {
    margin: 0;
    font-size: .95rem;
}

.tool-panel-heading p {
    max-width: 260px;
    margin: .05rem 0 0;
    color: var(--text-faint);
    font-size: .67rem;
    text-align: right;
}

.tool-step {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 7px;
    font-size: .62rem;
    font-weight: 700;
}


/* ==========================================================================
   Fields
   ========================================================================== */

.tool-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.tool-help {
    display: block;
    margin-top: .35rem;
    color: var(--text-faint);
    font-size: .65rem;
}

.tool-error {
    padding: .72rem .8rem;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
    border-radius: var(--radius-sm);
    font-size: .72rem;
}

.range-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}

.range-row label {
    color: var(--text);
    font-size: .76rem;
    font-weight: 650;
}

.range-row output {
    color: var(--text-faint);
    font-size: .68rem;
}

.form-range::-webkit-slider-thumb {
    background: var(--accent);
}

.form-range::-moz-range-thumb {
    background: var(--accent);
    border: 0;
}


/* ==========================================================================
   QR type selector
   ========================================================================== */

.qr-type-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .4rem;
}

.qr-type-button {
    display: flex;
    min-height: 62px;
    gap: .35rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: .55rem .35rem;
    color: var(--text-soft);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .66rem;
    font-weight: 650;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.qr-type-button i {
    font-size: .85rem;
}

.qr-type-button:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.qr-type-button.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.qr-fields {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}


/* ==========================================================================
   Option chips
   ========================================================================== */

.option-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.option-chip {
    padding: .45rem .65rem;
    color: var(--text-soft);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .68rem;
    font-weight: 650;
}

.option-chip:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.option-chip.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}


/* ==========================================================================
   Colors
   ========================================================================== */

.color-field {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: .5rem;
}

.color-field input[type="color"],
.form-control-color {
    width: 48px;
    height: 43px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}


/* ==========================================================================
   Upload
   ========================================================================== */

.tool-upload {
    position: relative;
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}

.tool-upload input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.tool-upload > i {
    color: var(--accent);
    font-size: 1rem;
}

.tool-upload strong {
    display: block;
    color: var(--text);
    font-size: .74rem;
}

.tool-upload span {
    display: block;
    margin-top: .08rem;
    color: var(--text-faint);
    font-size: .63rem;
}


/* ==========================================================================
   Preview
   ========================================================================== */

.tool-preview-panel {
    padding: 1rem;
}

.tool-preview-heading {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .15rem 1rem;
}

.tool-preview-heading > div {
    display: flex;
    flex-direction: column;
}

.tool-preview-heading > div > span {
    color: var(--text-faint);
    font-size: .62rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.tool-preview-heading strong {
    margin-top: .05rem;
    font-size: .82rem;
}

.preview-status {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    color: var(--text-faint);
    font-size: .61rem;
}

.preview-status > span {
    width: 6px;
    height: 6px;
    background: var(--positive);
    border-radius: 50%;
}

.qr-preview-stage,
.barcode-preview-stage {
    display: flex;
    min-height: 430px;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #f3f3ef;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: auto;
}

[data-theme="dark"] .qr-preview-stage,
[data-theme="dark"] .barcode-preview-stage {
    background: #111310;
}

#qrPreview {
    line-height: 0;
}

#qrPreview canvas,
#qrPreview svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.preview-empty {
    display: flex;
    gap: .3rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-faint);
    text-align: center;
}

.preview-empty i {
    margin-bottom: .45rem;
    font-size: 2rem;
}

.preview-empty strong {
    color: var(--text-soft);
    font-size: .78rem;
}

.preview-empty span {
    font-size: .67rem;
}

.preview-advice {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .75rem;
    padding: .7rem .75rem;
    color: var(--text-soft);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
    font-size: .65rem;
    line-height: 1.5;
}

.preview-advice i {
    margin-top: .15rem;
    color: var(--accent);
}

.tool-download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .75rem;
}

.tool-reset-button {
    width: 100%;
    margin-top: .5rem;
    color: var(--text-soft);
    background: transparent;
    border: 0;
    font-size: .68rem;
}

.tool-reset-button:hover {
    color: var(--text);
    background: var(--surface-subtle);
}

.preview-footnote {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .8rem;
    padding-top: .8rem;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
    font-size: .61rem;
    line-height: 1.5;
}

.preview-footnote i {
    margin-top: .15rem;
}


/* ==========================================================================
   Barcode generator
   ========================================================================== */

.format-note {
    margin-top: .4rem;
    color: var(--text-faint);
    font-size: .66rem;
}

.tool-generate-button {
    min-height: 46px;
}

.barcode-preview-stage {
    min-height: 330px;
}

#barcodeOutput {
    max-width: 100%;
    overflow-x: auto;
    padding: 1rem;
    background: #ffffff;
    border-radius: 6px;
    line-height: 0;
}

#barcodeSvg {
    display: block;
    max-width: none;
}


/* ==========================================================================
   Scanner
   ========================================================================== */

.scanner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: 1rem;
    align-items: start;
}

.scanner-panel,
.scanner-result-panel {
    padding: 1rem;
}

.scanner-panel-heading,
.scanner-result-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.scanner-panel-heading > div {
    display: flex;
    gap: .45rem;
    align-items: center;
}

.scanner-panel-heading strong,
.scanner-result-header strong {
    font-size: .75rem;
}

.scanner-panel-heading > span,
.scanner-result-header > span {
    color: var(--text-faint);
    font-size: .62rem;
}

.scanner-status-dot {
    width: 7px;
    height: 7px;
    background: var(--positive);
    border-radius: 50%;
}

.scanner-view {
    position: relative;
    display: flex;
    min-height: 470px;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: var(--radius);
    overflow: hidden;
}

.scanner-view video {
    width: 100% !important;
    height: 100% !important;
    min-height: 470px;
    object-fit: cover;
}

.scanner-view #qr-shaded-region {
    border-width: 45px !important;
}

.scanner-placeholder {
    display: flex;
    gap: .3rem;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    color: rgba(255,255,255,.58);
    text-align: center;
}

.scanner-placeholder span {
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin-bottom: .55rem;
    color: #ffffff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
}

.scanner-placeholder strong {
    color: #ffffff;
    font-size: .8rem;
}

.scanner-placeholder p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: .68rem;
}

.scanner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .75rem;
}

.scanner-actions button:only-child {
    grid-column: 1 / -1;
}

.scanner-dropzone {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: .65rem;
    padding: .85rem;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
}

.scanner-dropzone:hover,
.scanner-dropzone:focus,
.scanner-dropzone.drag-active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.scanner-dropzone-icon {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
}

.scanner-dropzone strong {
    display: block;
    font-size: .72rem;
}

.scanner-dropzone p {
    margin: .1rem 0 0;
    color: var(--text-faint);
    font-size: .62rem;
}

.scanner-result-panel {
    min-height: 350px;
}

.scanner-result-empty {
    display: flex;
    min-height: 260px;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-faint);
    text-align: center;
}

.scanner-result-empty i {
    font-size: 1.8rem;
}

.scanner-result-empty p {
    max-width: 230px;
    margin: 0;
    font-size: .68rem;
}

.scanner-result-value {
    min-height: 150px;
    max-height: 350px;
    padding: 1rem;
    overflow: auto;
    color: var(--text);
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.scanner-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.scanner-safety-note {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .85rem;
    color: var(--text-faint);
    font-size: .62rem;
    line-height: 1.5;
}

.scanner-safety-note i {
    margin-top: .15rem;
    color: var(--accent);
}

.scanner-safety-note p {
    margin: 0;
    font-size: inherit;
}


/* ==========================================================================
   Reference sections
   ========================================================================== */

.tool-reference {
    display: grid;
    grid-template-columns: minmax(220px, .6fr) 1.4fr;
    gap: 3rem;
    align-items: start;
    margin-top: 5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}

.tool-reference h2 {
    margin: 0;
    font-size: 1.5rem;
}

.tool-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.tool-reference-grid > div {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: 1rem;
    color: var(--text-soft);
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: .7rem;
}

.tool-reference-grid i {
    margin-top: .15rem;
    color: var(--accent);
}

.format-reference-table {
    border-top: 1px solid var(--line);
}

.format-reference-table > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}

.format-reference-table strong {
    font-size: .69rem;
}

.format-reference-table span {
    color: var(--text-soft);
    font-size: .68rem;
}

.format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.format-tags span {
    padding: .42rem .65rem;
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .66rem;
    font-weight: 650;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .tool-layout,
    .tool-layout-qr,
    .scanner-layout {
        grid-template-columns: 1fr;
    }

    .sticky-preview {
        position: static;
    }

    .tool-preview-column {
        order: -1;
    }

    .qr-preview-stage {
        min-height: 390px;
    }

    .scanner-result-panel {
        min-height: auto;
    }

    .scanner-result-empty {
        min-height: 180px;
    }
}


@media (max-width: 767px) {
    .tool-page {
        padding-top: 1.5rem;
        padding-bottom: 4rem;
    }

    .tool-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tool-heading h1 {
        font-size: 2.65rem;
    }

    .qr-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tool-field-grid {
        grid-template-columns: 1fr;
    }

    .tool-panel-heading {
        flex-direction: column;
        gap: .3rem;
    }

    .tool-panel-heading p {
        max-width: none;
        margin-left: 35px;
        text-align: left;
    }

    .qr-preview-stage,
    .barcode-preview-stage {
        min-height: 310px;
        padding: 1.25rem;
    }

    .scanner-view,
    .scanner-view video {
        min-height: 380px;
    }

    .tool-reference {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tool-reference-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 480px) {
    .qr-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .scanner-actions,
    .tool-download-grid {
        grid-template-columns: 1fr;
    }

    .scanner-view,
    .scanner-view video {
        min-height: 330px;
    }

    .format-reference-table > div {
        grid-template-columns: 85px 1fr;
    }
}