/*
 * Batch Upscaler -- Stylesheet
 * ElevatedPrintables.com
 *
 * Everything is scoped under .bup-root so these
 * styles never bleed out onto the rest of the page.
 *
 * Colours all come from the variables in the next block.
 * Nothing below that block names a colour directly, so
 * restyling the whole tool means editing that one list.
 */


/* ============================================================
   RESET
   Scoped, so it only flattens margins inside the tool and
   never touches the theme.
   ============================================================ */

.bup-root,
.bup-root *,
.bup-root *::before,
.bup-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ============================================================
   THE COLOUR LIST -- the only block you need to touch

   Every colour further down is painted from one of these.
   Change what a name holds and everything using it changes.

   Elevated Printables palette:
     #313F4B  ink navy   (body text, headings)
     #575F4B  olive      (secondary text, filled buttons)
     #DDCEBA  sand       (the accent, borders, active states)
     #FFFFFF  white      (panels)

   An 8 digit hex is a colour plus opacity, same trick as
   #DDCEBA50 in the palette generator sheet.
   ============================================================ */

.bup-root {
    /* Fonts come from the theme rather than from this tool. */
    font-family: inherit;
    color: var(--ink);

    /* --- The accent -------------------------------------- */
    --sage: #DDCEBA;         /* sand: borders, edges, the rule under the header */
    --sage-dark: #575F4B;    /* olive: section labels, filled buttons */
    --sage-deeper: #313F4B;  /* ink navy: headings */
    --sage-light: #DDCEBA55; /* soft sand: marks the option you PICKED */
    --sage-pale: #DDCEBA1A;  /* faintest sand: passive tinted areas */

    /* --- Text -------------------------------------------- */
    --ink: #313F4B;          /* body text */
    --ink-mid: #575F4B;      /* secondary text */
    --ink-light: #313F4B99;  /* captions and fine print */

    /* --- Surfaces ---------------------------------------- */
    --cream: #FDFBF7;
    --card: #FFFFFF;         /* panel backgrounds */
    --border: #DDCEBA80;     /* everyday outlines */
    --border-strong: #DDCEBA;/* hover outlines only, so changes here look like nothing until you mouse over */

    /* --- Status colours ----------------------------------
       Amber and red stay loud on purpose. A warning that
       blends into the page is a warning nobody reads.
       Success is tinted to the olive so the common case
       still matches the site. */
    --warn-bg: #FEF9E7;
    --warn-text: #92400E;
    --warn-border: #FDE68A;

    --err-bg: #FFF0F0;
    --err-text: #B91C1C;
    --err-border: #FECACA;

    --ok-bg: #575F4B14;
    --ok-text: #575F4B;
    --ok-border: #575F4B40;

    /* --- Shape and size ---------------------------------- */
    --r: 6px;                                /* corner radius, matches the other tools */
    --shadow: 0 2px 8px rgba(49,63,75,.08);
    --wrap: 960px;                          /* same width as the palette generator */
}


/* ============================================================
   OUTER WRAPPER
   ============================================================ */

.bup-root .app {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 24px 20px 40px;
}



/* Honour Gutenberg's Wide and Full width settings. */

.bup-root.alignwide .app {
    max-width: 960px;
}

.bup-root.alignfull .app {
    max-width: none;
}



/* ============================================================
   HEADER STRIP
   The tool's own title bar: icon tile, name, and the rule underneath.
   ============================================================ */

.bup-root .hdr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--sage);
}

.bup-root .hdr-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.bup-root .hdr h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sage-deeper);
    letter-spacing: -.02em;
}

.bup-root .hdr p {
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 2px;
}



/* ============================================================
   PANELS
   Each bordered white box on the page, plus its little uppercase label.
   ============================================================ */

.bup-root .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 14px;
}

.bup-root .card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sage-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bup-root .cl-bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--sage);
    flex-shrink: 0;
    display: inline-block;
}



/* ============================================================
   DROP ZONE
   The dashed box you drop image files onto.
   ============================================================ */

.bup-root .drop-zone {
    display: block;
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s,background .2s;
    background: var(--sage-pale);
}

.bup-root .drop-zone:hover,
.bup-root .drop-zone.dragover {
    border-color: var(--sage);
    background: var(--sage-light);
}

.bup-root .drop-zone input {
    display: none;
}

.bup-root .drop-zone .dz-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.bup-root .drop-zone .dz-main {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.bup-root .drop-zone .dz-sub {
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 3px;
}



/* ============================================================
   SIZE PICKER
   The grid of print size buttons. .active is the one currently chosen.
   ============================================================ */

.bup-root .sz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.bup-root .sz-btn {
    padding: 8px 6px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--card);
    cursor: pointer;
    text-align: center;
    transition: all .12s;
    font-family: inherit;
}

.bup-root .sz-btn:hover {
    border-color: var(--sage);
}

.bup-root .sz-btn.active {
    border-color: var(--sage-dark);
    background: var(--sage-light);
}

.bup-root .sz-btn .sz-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.bup-root .sz-btn .sz-dim {
    font-size: 10px;
    color: var(--ink-light);
    font-family: 'Cascadia Code','Fira Code',monospace;
}

.bup-root .sz-btn.active .sz-name {
    color: var(--sage-deeper);
}

.bup-root .sz-btn.active .sz-dim {
    color: var(--sage-dark);
}



/* ============================================================
   CUSTOM AND LONG EDGE ROWS
   Hidden until their mode is picked. The .visible class is what shows them.
   ============================================================ */

.bup-root .custom-row {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--sage-pale);
    border-radius: 8px;
}

.bup-root .custom-row.visible {
    display: flex;
}

.bup-root .custom-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mid);
}

.bup-root .custom-row input[type=number] {
    width: 70px;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: monospace;
    text-align: center;
    outline: none;
    background: var(--card);
    color: var(--ink);
}

.bup-root .custom-row input[type=number]:focus {
    border-color: var(--sage);
}



/* ============================================================
   FILE QUEUE
   One row per image waiting its turn, with its status pill.
   ============================================================ */

.bup-root .queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
    background: var(--card);
    transition: background .15s;
}

.bup-root .qi-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.bup-root .qi-info {
    flex: 1;
    min-width: 0;
}

.bup-root .qi-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bup-root .qi-meta {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 2px;
}

.bup-root .qi-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.bup-root .qi-status.pending {
    background: var(--sage-pale);
    color: var(--ink-light);
}

.bup-root .qi-status.processing {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.bup-root .qi-status.done {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.bup-root .qi-status.error {
    background: var(--err-bg);
    color: var(--err-text);
}

.bup-root .qi-status.warning {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.bup-root .qi-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-light);
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
}

.bup-root .qi-remove:hover {
    color: var(--err-text);
}



/* ============================================================
   PROGRESS BARS
   The thin bar under each queued file.
   ============================================================ */

.bup-root .progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.bup-root .progress-fill {
    height: 100%;
    background: var(--sage);
    border-radius: 3px;
    transition: width .3s;
    width: 0%;
}

.bup-root .progress-text {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 4px;
    font-weight: 600;
}



/* ============================================================
   BUTTONS
   Primary is the filled one, secondary is the outlined one.
   ============================================================ */

.bup-root .btn {
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity .15s,transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bup-root .btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.bup-root .btn:active {
    transform: scale(.98);
}

.bup-root .btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.bup-root .btn-primary {
    background: var(--sage-dark);
    color: var(--card);
}

.bup-root .btn-secondary {
    background: var(--sage-light);
    color: var(--sage-deeper);
    border: 1px solid var(--border);
}

.bup-root .btn-sm {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 8px;
}

.bup-root .btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}



/* ============================================================
   STATUS MESSAGES
   The coloured message strip. Hidden until .visible is added.
   ============================================================ */

.bup-root .status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bup-root .status.visible {
    display: flex;
}

.bup-root .status.info {
    background: var(--sage-light);
    color: var(--sage-dark);
}

.bup-root .status.error {
    background: var(--err-bg);
    color: var(--err-text);
    border: 1px solid var(--err-border);
}

.bup-root .status.success {
    background: var(--ok-bg);
    color: var(--ok-text);
    border: 1px solid var(--ok-border);
}

/* Rotation for the little spinner below. */
@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

.bup-root .spinner {
    width: 14px;
    height: 14px;
    border: 2.5px solid var(--border);
    border-top-color: var(--sage-dark);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    flex-shrink: 0;
}



/* ============================================================
   NOTE STRIPS
   Tinted explanation strips with a coloured bar down the left edge.
   ============================================================ */

.bup-root .engine-note {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 8px;
    line-height: 1.6;
    padding: 8px 12px;
    background: var(--sage-pale);
    border-radius: 8px;
    border-left: 3px solid var(--sage);
}

.bup-root .engine-note strong {
    color: var(--sage-dark);
}



/* ============================================================
   RESULTS LIST
   Finished images, shown once a batch completes.
   ============================================================ */

.bup-root .result-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--ok-border);
    background: var(--ok-bg);
    margin-bottom: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bup-root .ri-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    cursor: pointer;
}

.bup-root .ri-info {
    flex: 1;
    min-width: 140px;
}

.bup-root .ri-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.bup-root .ri-meta {
    font-size: 11px;
    color: var(--ok-text);
    margin-top: 2px;
    line-height: 1.6;
}



/* ============================================================
   FOOTER
   
   ============================================================ */

.bup-root .bup-footer {
    text-align: center;
    padding: 16px;
    font-size: 10px;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-weight: 700;
}



/* ============================================================
   BATCH PROGRESS
   The whole-batch readout that sits above the queue.
   ============================================================ */

.bup-root .overall-progress {
    display: none;
    padding: 14px 16px;
    background: var(--sage-light);
    border-radius: 10px;
    margin-bottom: 14px;
}

.bup-root .overall-progress.visible {
    display: block;
}

.bup-root .op-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--sage-deeper);
    margin-bottom: 6px;
}