/* QR Code Page Styles */

/* Override container styles for QR page */
.container {
    display: block !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 30px auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-header h1 {
    color: var(--text-color);
    font-size: var(--h1-size);
    font-weight: 600;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.page-header h1 i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.page-header p {
    color: var(--text-color);
    opacity: 0.8;
    font-size: var(--body-size);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Main Content Layout */
.qr-main-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.qr-form-section,
.qr-preview-section {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents flex items from overflowing */
}

/* QR Cards */
.qr-card {
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    border-radius: var(--neu-radius);
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.qr-card-header {
    /* Was a solid purple gradient bar (matching .btn-primary) capping every
       card — removed at the user's request; now a plain header matching
       the rest of the app's .card-header convention (see
       css/neu-components.css), just text/icon on the card's own surface. */
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qr-card-header h1,
.qr-card-header h2 {
    margin: 0;
    font-size: var(--h3-size);
    font-weight: 600;
    color: var(--neu-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.qr-card-header i {
    font-size: 24px;
    color: var(--neu-primary);
}

.qr-card-subtitle {
    margin: 8px 0 0 0;
    color: var(--neu-text-dim);
    font-size: var(--body-size);
    opacity: 0.85;
}

/* Preview panel's header only (pages/qr.php — the public page's title +
   subtitle moved into this same card-header, and the old page-level
   .page-header removed, so .qr-card-header's shared centered-column
   layout is overridden here to put the title and zoom controls side by
   side instead. Scoped to .qr-preview-header, not .qr-card-header itself,
   so pages/create/qr.php — which still has its own separate .page-header
   and doesn't carry this class — is unaffected. */
.qr-preview-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.qr-preview-header .preview-controls {
    margin-top: 0;
}

.qr-preview-header .preview-controls .btn {
    padding: 4px 8px;
    font-size: 0.65rem;
}

.qr-preview-header .preview-controls .btn i {
    font-size: 16px;
}

.qr-card-body {
    padding: 15px;
    min-height: 610px;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: var(--body-size);
}

/* Was a flat solid-2px-border box (border: 2px solid var(--border-color),
   background-color: var(--container-color)) — an older, pre-neu treatment
   that doesn't match the borderless, inset-shadow look every other
   input/select/textarea on the site uses (css/neu-components.css). Switched
   to that same treatment so this page's dropdown and textarea match the
   rest of the app instead of standing out.

   select and textarea are no longer combined in one rule: select's actual
   box styling (border/background/shadow) is left to neu-components.css's
   own dedicated `select { background-image: <gradient>, <arrow-svg>; ... }`
   rule — a shorthand `background:` here would silently strip that gradient
   + custom arrow back down to a flat color (this class selector outranks
   neu-components.css's bare-element one, so it would win and break the
   arrow). select only needs the sizing/typography tweaks below; textarea
   still gets the full box treatment since it has no such arrow to lose. */
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    color: var(--text-color);
    /* Was var(--body-size), a custom property that isn't actually defined
       anywhere in the codebase — it was silently falling back to the
       inherited font-size rather than doing anything itself. Fixed px
       instead, with an explicit line-height pinned to the previous box
       height. */
    font-size: 17px;
    line-height: 23px;
    transition: box-shadow 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.form-group textarea {
    border: none;
    border-radius: var(--neu-radius-sm);
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}

.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

.form-group textarea {
    min-height: 300px;
    resize: vertical;
}

.form-group textarea::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

.input-info {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: var(--small-size);
    color: var(--text-color);
    opacity: 0.7;
}

#line-count {
    font-weight: 600;
    color: var(--text-color);
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

/* Preview Controls */
.preview-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.btn-small {
    padding: 8px 12px;
    font-size: 0.75rem;
    min-width: auto;
}

/* QR Preview Container */
#qr-preview-scroll-container {
    width: 100%;
    height: 650px;
    overflow-y: auto;
    background-color: var(--container-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

#qr-preview-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
}

.qr-placeholder i {
    font-size: 64px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.qr-placeholder p {
    font-size: var(--body-size);
    margin: 0;
}

/* QR Page Styles */
.qr-page {
    width: 816px;
    min-height: 1056px;
    background-color: white;
    margin: 0 auto 40px auto;
    padding: 0.5in;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transform-origin: top center;
    display: flex;
    flex-direction: column;
}

.page-info {
    text-align: center;
    margin-bottom: 20px;
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.qr-grid {
    display: grid;
    gap: 15px;
    height: auto;
    align-items: start;
    justify-items: center;
}

.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 200px;
}

.qr-item > div:first-child {
    margin-bottom: 8px;
}

.qr-text-caption {
    font-size: 10px;
    color: #000000;
    text-align: center;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: normal;
    line-height: 1.2;
    font-weight: 500;
}

.page-spacer {
    height: 30px;
    width: 100%;
}

/* Statistics Section */
.qr-stats-section {
    margin-top: 2rem;
}

.recent-qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.recent-qr-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recent-qr-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recent-qr-card {
    padding: 1rem;
}

.recent-qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.recent-qr-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
    margin-right: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-qr-actions {
    display: flex;
    gap: 0.25rem;
}

.recent-qr-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-width: auto;
}

.recent-qr-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.qr-count {
    font-weight: 500;
    color: var(--primary-color);
}

.qr-date {
    color: var(--text-muted);
}

.recent-qr-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.recent-qr-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.recent-qr-placeholder p {
    margin: 0;
    font-size: 0.875rem;
}

/* Responsive design for recent QR codes */
@media (max-width: 768px) {
    .recent-qr-grid {
        grid-template-columns: 1fr;
    }

    .recent-qr-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .recent-qr-actions {
        align-self: flex-end;
    }
}

/* Save/Load/Clear/Print row — .form-actions already wraps (it's a shared
   class name used elsewhere on the site too, e.g. css/components/form.css,
   so this is scoped to .qr-form-section specifically rather than a bare
   .form-actions rule that would reach those unrelated forms). At the
   desktop .btn padding, 2-per-row still looked cramped on a narrow phone —
   smaller buttons here so the wrapped rows look proportionate. */
@media (max-width: 480px) {
    .qr-form-section .form-actions {
        gap: 6px;
    }

    .qr-form-section .form-actions .btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}

/* .qr-main-content (the Settings/Preview 2-column grid) never had a mobile
   breakpoint at all — the two cards stayed side-by-side and got crushed
   into illegible half-width columns on phones. */
@media (max-width: 900px) {
    .qr-main-content {
        grid-template-columns: 1fr;
    }

    .qr-card-header {
        flex-wrap: wrap;
    }
}

/* Print styles. printQRCodes() (js/qr.js) used to open a separate popup
   window, write a standalone print document into it, and call .print() on
   that — this printed the QR pages, but also always opened a visible
   second browser window/tab (unwanted) and, since the popup's own CSS gave
   .qr-page a fixed `min-height: 11in` inside an @page with 0.5in margins,
   any single-page print always overflowed to a second, mostly-blank page
   (a 0.5in margin on all sides of an 11in-tall sheet leaves less than 11in
   of usable height). Both are fixed by printing the current page in place
   instead: printQRCodes() now just calls window.print(), and everything
   except the actual QR pages is hidden here — matching the same in-page
   print approach already used by placard.php/bol.php/packingslip.php. No
   fixed min-height on .qr-page this time, so a short print job stays on
   one page. See the print-blank-page investigation in Plan.md/memory for
   why the exclusion below is wrapped in :where() rather than a bare
   :not() chain (bare :not() accumulates specificity that can outrank the
   single-class "show" rules meant to override it). */
@media print {
    @page {
        size: letter;
        margin: 0.5in;
    }

    /* Isolating #qr-preview-container by hiding everything else turned out
       to need more than a CSS-only approach: it's nested 8 levels deep
       (body > .main-container > .content > main > .container >
       .qr-main-content > .qr-preview-section > .qr-card > .qr-card-body >
       #qr-preview-container), and every attempt at hiding-everything-then-
       re-showing-the-ancestor-chain (a fixed chain, a :where()-wrapped
       :not() exclusion, plain visibility+absolute-positioning) either
       missed a level or left enough of the hidden siblings' reserved
       layout space behind to push the real content onto a second/third
       page. printQRCodes() (js/qr.js) now temporarily moves
       #qr-preview-container to be a direct child of <body> right before
       calling window.print(), and moves it back immediately after — so
       the only thing this stylesheet needs to hide is body's *other*
       direct children, one level, no chain to get wrong. */
    body.printing-qr > *:not(#qr-preview-container) {
        display: none !important;
    }

    html,
    body.printing-qr {
        /* css/base.css (loaded globally via main.css) sets an unconditional
           `body { min-height: 100vh; display: grid; grid-template-columns:
           auto 1fr; }` for the app's normal sidebar+content layout — never
           reset for print, so the page kept forcing itself to a full
           viewport height (100vh resolves unreliably during print in
           Chrome, and this app's screens are usually taller than one
           printed page) and treating #qr-preview-container as a grid item
           in a layout meant for something else entirely. Both are what
           was actually causing the persistent blank second page. */
        min-height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important; /* not the app's dark gradient — real ink/toner */
    }

    #qr-preview-container {
        transform: none !important; /* undo any zoomIn()/zoomOut() scale */
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .qr-page {
        width: 100%;
        /* The base (non-print) .qr-page rule fixes min-height: 1056px
           (~11in, sized for the on-screen preview) — unconditional, so it
           still applied here too, forcing every print page to be a full
           11in tall regardless of content and overflowing the ~10in
           usable area left by @page's 0.5in margins onto a spurious
           second page even for a single small QR code. That same base
           rule also has a 1px border, an 8px border-radius, and a drop
           shadow (a card-style mockup, meant for the on-screen multi-page
           preview) — never reset for print, so a thin border/shadow line
           was showing up around the printed page's content. */
        min-height: auto !important;
        page-break-after: always;
        padding: 0;
        margin: 0;
        background: white;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .qr-page:last-child {
        page-break-after: avoid;
    }

    .page-info {
        text-align: center;
        margin-bottom: 20px;
        font-size: 12px;
        color: #000;
        font-weight: bold;
    }

    .qr-grid {
        display: grid;
        gap: 15px;
        align-items: start;
        justify-items: center;
    }

    .qr-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        page-break-inside: avoid;
    }

    /* The QR itself (a <canvas>, or the <img> qrcodejs swaps in from it)
       printed gray instead of black specifically under Chrome's "Black
       and white" print option, but correctly black under "Color" — some
       browsers' grayscale print conversion re-processes canvas/image pixel
       data through a color-management path that doesn't treat opaque
       black as pure black. print-color-adjust: exact tells the browser to
       reproduce colors as authored instead of optimizing/adjusting them
       for print, which is the standard fix for this class of issue. */
    .qr-item canvas,
    .qr-item img {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* No margin-top here (there used to be one) — js/qr.js's renderAllPages()
       decides how many QR codes fit on a page by measuring this same
       element under the *screen* stylesheet (the only time JS can measure
       it), which has no margin-top on .qr-text-caption at all. A print-only
       extra 5px here, multiplied across every row on a page, was enough
       drift between the two measurements to push a page that measured as
       just fitting on-screen over budget once actually printed. */
    .qr-text-caption {
        font-size: 10px;
        color: #000;
        text-align: center;
        word-wrap: break-word;
        max-width: 200px;
    }

    .page-spacer,
    .qr-placeholder {
        display: none !important;
    }
}

/* Animation for QR generation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qr-item {
    animation: fadeIn 0.5s ease-out;
}

.qr-item:nth-child(even) {
    animation-delay: 0.1s;
}

.qr-item:nth-child(3n) {
    animation-delay: 0.2s;
}

/* Button text size override for QR page */
.btn {
    font-size: 0.875rem;
}