/*
  Shop Admin - shared styles for all admin pages (loaded after Pico CSS v2).

  Type scale (1rem = 16px, fixed - Pico would scale the root font up to 125 % on wide screens,
  far too large for a data-heavy admin):
    h1 1.75rem/1.2 700   h2 1.25rem/1.3 650   h3 1rem/1.4 650
    body 1rem/1.55       tables .875rem       small / meta .8125rem       labels .75rem caps
  Spacing: 4px steps (.25rem). Sections 2.5rem apart, headings keep .75rem to their content.
*/

:root,
:root[data-theme="dark"] {
    --pico-font-size: 100%;
    --pico-line-height: 1.55;
    --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pico-typography-spacing-vertical: 1rem;
    --pico-spacing: 1rem;
    --pico-border-radius: .375rem;
    --pico-form-element-spacing-vertical: .5rem;
    --pico-form-element-spacing-horizontal: .875rem;

    --admin-muted: #8b95a5;
    --admin-faint: #5f6b7c;
    --admin-border: rgba(255, 255, 255, .08);
    --admin-surface: rgba(255, 255, 255, .025);
    --admin-good: #4cc38a;
    --admin-bad: #f47067;
    --admin-warn: #e3b341;
    --admin-info: #6cb6ff;
}

body { background: #11151c; }
/* Pico drops the container's side padding from 576px up and relies on its own max-widths staying
   below the viewport; with our wider max-width the content would touch the edges between ~576px
   and 1240px, so the padding stays at every width (content max. 1240px) */
main.container {
    max-width: calc(1240px + 2 * var(--pico-spacing));
    padding: 0 var(--pico-spacing) 4rem;
}

/* ---- type ---- */

h1, h2, h3 { color: #f0f3f6; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin: 0; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; margin: 0 0 .75rem; }
h3 { font-size: 1rem; line-height: 1.4; font-weight: 650; margin: 0 0 .5rem; }
p { margin-bottom: 1rem; }
small, .meta { font-size: .8125rem; color: var(--admin-muted); }
code { font-size: .8125rem; padding: .1rem .35rem; background: rgba(255, 255, 255, .06); color: #cdd6e0; border-radius: .25rem; }
pre { font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; background: rgba(0, 0, 0, .25); padding: .75rem 1rem; border-radius: var(--pico-border-radius); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- navigation (nav.ascx) ---- */

.admin-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 0; margin-bottom: 2rem; border-bottom: 1px solid var(--admin-border);
}
/* Pico gives nav lists and links negative margins; the bar aligns with the content edge instead */
.admin-nav ul, .admin-nav ul:first-of-type, .admin-nav ul:last-of-type { margin: 0; padding: 0; gap: .25rem; }
.admin-nav li { padding: 0; }
.admin-nav li a, .admin-nav li a:not(.brand) { margin: 0; text-decoration: none; }
.admin-nav a.brand { color: #f0f3f6; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin-right: 1rem; padding: .375rem 0; }
.admin-nav a.brand span { color: var(--admin-muted); font-weight: 500; }
.admin-nav a:not(.brand) {
    display: inline-block; padding: .375rem .75rem; border-radius: var(--pico-border-radius);
    color: var(--admin-muted); font-size: .9375rem; font-weight: 500;
}
.admin-nav a:not(.brand):hover { color: #f0f3f6; background: rgba(255, 255, 255, .05); }
.admin-nav a[aria-current="page"] { color: #f0f3f6; background: rgba(255, 255, 255, .08); }
.admin-nav form.jump { margin: 0; }
.admin-nav form.jump input {
    margin: 0; width: 8.5rem; height: 2.125rem; font-size: .875rem;
    padding: .375rem .75rem .375rem 2rem; border-radius: var(--pico-border-radius);
    background-position: .625rem 50%; background-size: 1rem;
}
.admin-nav a.signout { margin-left: .25rem; }

/* ---- login.aspx ---- */

main.login { max-width: 24rem; padding-top: 18vh; }
main.login .brand { margin: 0 0 .5rem; font-weight: 700; color: #f0f3f6; }
main.login .brand span { color: var(--admin-muted); font-weight: 500; }
main.login button { width: 100%; margin-top: .5rem; }

/* ---- page header ---- */

.page-head { margin: 0 0 2rem; }
.page-head .back { display: inline-block; margin-bottom: .75rem; font-size: .875rem; color: var(--admin-muted); text-decoration: none; }
.page-head .back:hover { color: #f0f3f6; }
.page-head h1 + .lead, .page-head h1 + .badges { margin-top: .5rem; }
.lead { max-width: 68ch; margin: 0; color: var(--admin-muted); font-size: 1rem; line-height: 1.6; }
.lead strong { color: #cdd6e0; font-weight: 600; }
.badges { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; }

section { margin: 0 0 2.5rem; }
section > h2, .section-head { padding-bottom: .5rem; border-bottom: 1px solid var(--admin-border); margin-bottom: 1rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-head h2 { margin: 0; }

/* ---- buttons ---- */

button, [role="button"] { font-size: .9375rem; font-weight: 550; }
.btn-sm, button.edit, a.impose, .doc-actions a[role="button"] {
    --pico-form-element-spacing-vertical: .3rem; --pico-form-element-spacing-horizontal: .75rem;
    width: auto; font-size: .8125rem; font-weight: 550;
}
.actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 2rem; }
.actions button, .actions select { width: auto; margin: 0; }

/* ---- tables ---- */

.table-wrap { overflow-x: auto; }
table { font-size: .875rem; margin-bottom: 0; }
thead th {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--admin-muted); background: transparent; border-bottom: 1px solid var(--admin-border);
    padding: .5rem .75rem; white-space: nowrap;
}
tbody td, tfoot td { padding: .625rem .75rem; vertical-align: top; border-bottom: 1px solid var(--admin-border); background: transparent; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 0; border-bottom: 0; padding-top: .375rem; padding-bottom: .375rem; color: var(--admin-muted); }
tfoot tr:first-child td { padding-top: .75rem; }
tfoot .total td { color: #f0f3f6; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: .625rem; }
tr.extra td { color: var(--admin-muted); }
td.empty { text-align: center; color: var(--admin-muted); padding: 2.5rem 0; }

/* order list */
.orders td, .orders th { white-space: nowrap; }
.orders td { vertical-align: middle; }
.orders td.id { font-weight: 650; }
.orders td.id a { text-decoration: none; }
.orders tbody tr[data-href] { cursor: pointer; }
.orders tbody tr[data-href]:hover td { background: rgba(255, 255, 255, .035); }
.orders tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--admin-warn); }
.orders tr.archived { opacity: .5; }
td.comment { width: 1.5rem; padding-left: 0; padding-right: 0; text-align: center; }
.comment-flag { display: inline-flex; cursor: help; color: var(--admin-faint); }
.comment-flag.client { color: var(--admin-warn); }
.comment-flag svg { width: 1rem; height: 1rem; }

/* ---- badges: tinted, not solid ---- */

.badge {
    display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    color: #c5cedb; background: rgba(139, 149, 165, .14); box-shadow: inset 0 0 0 1px rgba(139, 149, 165, .28);
}
.badge.paid           { color: #56d364; background: rgba(46, 160, 67, .15);  box-shadow: inset 0 0 0 1px rgba(46, 160, 67, .4); }
.badge.unpaid         { color: #ff7b72; background: rgba(248, 81, 73, .14);  box-shadow: inset 0 0 0 1px rgba(248, 81, 73, .4); }
.badge.flag           { color: #e3b341; background: rgba(187, 128, 9, .15);  box-shadow: inset 0 0 0 1px rgba(187, 128, 9, .45); }
.badge.status-0       { color: #c5cedb; background: rgba(139, 149, 165, .14); box-shadow: inset 0 0 0 1px rgba(139, 149, 165, .3); } /* Empfangen */
.badge.status-1       { color: #6cb6ff; background: rgba(56, 139, 253, .15);  box-shadow: inset 0 0 0 1px rgba(56, 139, 253, .4); } /* Geprüft OK */
.badge.status-2       { color: #e3b341; background: rgba(187, 128, 9, .15);   box-shadow: inset 0 0 0 1px rgba(187, 128, 9, .45); } /* Übermittelt an Produktion */
.badge.status-3       { color: #56d364; background: rgba(46, 160, 67, .15);   box-shadow: inset 0 0 0 1px rgba(46, 160, 67, .4); }  /* Produziert und Versendet */
.badge.status-4       { color: #d2a8ff; background: rgba(163, 113, 247, .15); box-shadow: inset 0 0 0 1px rgba(163, 113, 247, .4); } /* Hold */
.badge.status-10      { color: #ffa657; background: rgba(219, 109, 40, .15);  box-shadow: inset 0 0 0 1px rgba(219, 109, 40, .45); } /* Ok, warte auf Zahlung */
.badge.status-500     { color: #3fb9a0; background: rgba(35, 150, 125, .15);  box-shadow: inset 0 0 0 1px rgba(35, 150, 125, .4); } /* Abgeschlossen */
.badge.status-99999   { color: #ff7b72; background: rgba(248, 81, 73, .14);  box-shadow: inset 0 0 0 1px rgba(248, 81, 73, .4); }  /* Storno */
.badge.state-Running          { color: #6cb6ff; background: rgba(56, 139, 253, .15); box-shadow: inset 0 0 0 1px rgba(56, 139, 253, .4); }
.badge.state-Succeeded        { color: #56d364; background: rgba(46, 160, 67, .15);  box-shadow: inset 0 0 0 1px rgba(46, 160, 67, .4); }
.badge.state-NothingToDo      { color: #c5cedb; }
.badge.state-Failed,
.badge.state-FailedRollbackIncomplete { color: #ff7b72; background: rgba(248, 81, 73, .14); box-shadow: inset 0 0 0 1px rgba(248, 81, 73, .4); }

/* ---- notices ---- */

.notice, article.notice {
    margin: 0 0 1.5rem; padding: .75rem 1rem; border-radius: var(--pico-border-radius);
    border: 1px solid var(--admin-border); border-left: 3px solid var(--admin-info);
    background: rgba(56, 139, 253, .07); font-size: .9375rem; box-shadow: none;
}
.notice.good { border-left-color: var(--admin-good); background: rgba(46, 160, 67, .08); }
.notice.warn { border-left-color: #bb8009; background: rgba(187, 128, 9, .1); }
.notice.warn ul { margin: .5rem 0 0; }
.notice.bad, article.error { border-left-color: var(--admin-bad); background: rgba(248, 81, 73, .08); }
article.error { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--admin-border); border-left: 3px solid var(--admin-bad); box-shadow: none; }
article.error p { margin: .25rem 0 0; }

/* ---- pager (default.aspx) ---- */

.pager { margin: 0 0 1rem; }
.pager [role="group"] {
    --pico-form-element-spacing-horizontal: .625rem; --pico-form-element-spacing-vertical: .3rem;
    width: auto; margin: 0; font-size: .8125rem; box-shadow: none;
}
.pager [role="group"] > * { min-width: 2.25rem; font-size: .8125rem; padding: .3rem .625rem; line-height: 1.4; }
.pager [role="group"] > .gap { padding: .3rem .375rem; min-width: 0; }
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar-row .pager, .toolbar-row p { margin: 0; }

/* ---- order.aspx ---- */
.order-head-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.order-head-top .back { margin-bottom: 0; }
.order-nav { display: flex; gap: .5rem; }
.order-nav [role="button"] { margin: 0; }

.order-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0 0 2.5rem; }
.statusbar { margin: 0; }
.statusbar [role="group"] {
    --pico-form-element-spacing-horizontal: .75rem; --pico-form-element-spacing-vertical: .35rem;
    width: auto; margin: 0; font-size: .8125rem; box-shadow: none;
}
.statusbar [role="group"] button { font-size: .8125rem; font-weight: 550; padding: .375rem .875rem; line-height: 1.4; }
.doc-actions { margin: 0; }

.kvlist { margin: 0; }
.kv { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--admin-border); font-size: .9375rem; }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--admin-muted); font-weight: 400; }
.kv dd { margin: 0; }

.grid > div > h3 { color: var(--admin-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.grid > div > p { line-height: 1.6; }
.addr-form label { font-size: .8125rem; margin-bottom: .5rem; color: var(--admin-muted); }
.addr-form input, .addr-form select { --pico-form-element-spacing-vertical: .4rem; margin: .2rem 0 0; font-size: .9375rem; }
.addr-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.addr-actions button { width: auto; margin: 0; --pico-form-element-spacing-vertical: .4rem; font-size: .875rem; }

.comment-alert {
    padding: 1rem 1.25rem; border-radius: var(--pico-border-radius);
    border: 1px solid rgba(187, 128, 9, .35); border-left: 3px solid var(--admin-warn); background: rgba(187, 128, 9, .08);
}
.comment-alert > h2 { border: 0; padding: 0; color: #e3b341; }
.comment-alert h3 { color: #e3b341; }
.comment-alert p:last-child { margin-bottom: 0; }

td.thumb { width: 196px; }
td.thumb img { display: block; width: 180px; height: auto; background: #fff; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
td.thumb a { display: block; }
img.zoomable { cursor: zoom-in; }
.positions strong { font-weight: 650; }
.positions small { display: block; margin-top: .25rem; line-height: 1.5; }
a.impose { margin-top: .625rem; }
#zoomLayer {
    position: fixed; z-index: 100; pointer-events: none; padding: .375rem;
    background: #1b212b; border-radius: var(--pico-border-radius);
    border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
#zoomLayer[hidden] { display: none; }
#zoomLayer img { display: block; width: 600px; max-width: 80vw; height: auto; background: #fff; border-radius: .25rem; }

details { margin: 0 0 .75rem; border-bottom: 1px solid var(--admin-border); padding-bottom: .75rem; }
details summary { font-size: .9375rem; font-weight: 550; color: #cdd6e0; }
details[open] summary { margin-bottom: .75rem; }
.props td { word-break: break-word; }
.props td:first-child { width: 16rem; color: var(--admin-muted); }

/* ---- production.aspx ---- */

.run {
    margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; border-radius: .5rem;
    background: var(--admin-surface); border: 1px solid var(--admin-border); box-shadow: none;
}
.run.good { border-left: 3px solid var(--admin-good); }
.run.bad { border-left: 3px solid var(--admin-bad); }
.run-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .25rem; }
.run-head h2 { margin: 0; border: 0; padding: 0; font-size: 1.125rem; }
.run .meta { margin: 0 0 1rem; }
.run .result { margin: 0 0 1rem; font-weight: 550; }
.run h3 { margin-top: 1.25rem; color: var(--admin-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.run details { border: 0; margin: 1rem 0 0; padding: 0; }
.run progress { margin: .5rem 0 1rem; height: .375rem; }
.run ul { margin: 0; padding-left: 1.1rem; }
.run li { font-size: .9375rem; margin-bottom: .25rem; }
tr.bad td { color: #ff9b9b; }
.files td { vertical-align: middle; }
.files td .meta { display: block; }
a.download { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; font-weight: 550; }
a.download:hover { text-decoration: underline; text-underline-offset: .2rem; }
a.download svg { width: .875rem; height: .875rem; flex: none; }
a.download .meta { display: inline; font-weight: 400; }
.collapsible { margin-top: 1.5rem; }
.purge { margin: 1rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.purge button { margin: 0; }

/* ---- small screens ---- */

@media (max-width: 640px) {
    .admin-nav { flex-wrap: wrap; row-gap: .625rem; }
    .admin-nav a.brand { white-space: nowrap; margin-right: .5rem; }
    .admin-nav a.brand span { display: none; }
    .admin-nav ul:last-of-type, .admin-nav form.jump, .admin-nav form.jump input { width: 100%; }
    .admin-nav ul:last-of-type li:first-child { flex: 1; }
    main.login { padding-top: 8vh; }
    h1 { font-size: 1.5rem; }
    /* button groups scroll sideways instead of widening the page */
    .pager, .statusbar, .pager [role="group"], .statusbar [role="group"] { max-width: 100%; }
    .pager [role="group"], .statusbar [role="group"] { overflow-x: auto; }
}

/* printfile.aspx: size inputs, drop zone, result with PDF preview */
.printfile .size-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.printfile .size-row label { width: 9rem; margin: 0; }
.printfile .size-row input { margin: .25rem 0 0; }
.printfile .presets { display: flex; flex-wrap: wrap; gap: .375rem; }
.printfile .presets button { width: auto; margin: 0; padding: .375rem .75rem; font-size: .875rem; }
.dropzone { display: flex; align-items: center; justify-content: center; min-height: 9rem; margin: 1rem 0 1.5rem; padding: 1.5rem;
    border: 2px dashed var(--admin-muted); border-radius: var(--pico-border-radius); text-align: center; cursor: pointer; color: var(--admin-muted); }
.dropzone input[type=file] { display: none; }
.dropzone.over { border-color: var(--admin-good); color: #f0f3f6; background: rgba(46, 160, 67, .08); }
.dropzone.busy { cursor: progress; opacity: .7; border-style: solid; }
.dropzone.loaded { min-height: 0; margin: .5rem 0 1rem; padding: .625rem 1rem; }   /* pdftext.aspx: a PDF is loaded, the zone stays for the next one */
#pf-result h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
#pf-result .actions { margin: .75rem 0 0; }
.pdf-preview { width: 100%; height: 34rem; border: 0; border-radius: var(--pico-border-radius); background: #fff; margin-top: 1rem; }
#pf-result .sheet-row { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
#pf-result .sheet-row input { width: 14rem; margin: 0; }
#pf-result .sheet-row button { width: auto; margin: 0; }

/* pdftext.aspx: substitution rows (search / replace / remove), rendered pages */
.subst-rows { display: grid; gap: .5rem; margin-bottom: 1rem; }
.subst-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: center; }
.subst-row input { margin: 0; }
.subst-row button { width: auto; margin: 0; padding: .375rem .75rem; }
.pdftext .actions { align-items: center; margin-bottom: 1rem; }
.pdftext .actions label.inline { display: flex; align-items: center; gap: .375rem; margin: 0; }
.pdftext .actions label.inline input { margin: 0; }
.pdf-pages { display: grid; gap: 1rem; justify-items: center; margin-top: .5rem; }
.pdf-pages canvas { max-width: 100%; height: auto; background: #fff; border-radius: var(--pico-border-radius); box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
/* desktop: controls left, preview right - the preview stays in view (own scrolling for long PDFs) */
@media (min-width: 1024px) {
    main.container.wide { max-width: calc(1600px + 2 * var(--pico-spacing)); }
    .pt-layout:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
    .pt-preview { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
    .pt-preview #pt-showing { margin-top: 0; }
}
@media (max-width: 640px) { .subst-row { grid-template-columns: 1fr auto; } .subst-row .s-replace { grid-column: 1; } }

/* ---- mail.aspx: e-mail preview ---- */
.mail-send { margin: 1rem 0 0; }
.mail-send small { margin-left: .5rem; }
/* batch (mail.aspx?email=confirmation&batch=1) */
.page-head.with-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head.with-action h1 { margin: 0; }
.page-head.with-action [role="button"] { margin: 0; }
ul.batch-log { margin: 1rem 0 0; padding-left: 1.25rem; font-size: .875rem; font-family: var(--pico-font-family-monospace); }
ul.batch-log li { margin: 0 0 .25rem; list-style: disc; }
pre.batch-link { padding: .75rem 1rem; font-size: .8125rem; white-space: pre-wrap; word-break: break-all; }
iframe.mail-preview {
    /* height = the e-mail's own height, set by the script in mail.aspx; 80vh until it has loaded */
    display: block; width: 100%; height: 80vh; min-height: 30rem; overflow: hidden;
    border: 1px solid var(--admin-border); border-radius: var(--pico-border-radius); background: #f2f2f2;
}

/* ---- default.aspx: quick Storno per row ---- */
.orders td.row-action { text-align: right; width: 1%; }
/* icon only, like a link: no Pico button box, so the row keeps its height */
.orders td.row-action button.storno {
    display: inline-flex; align-items: center; vertical-align: middle;
    margin: 0; padding: .125rem; border: 0; border-radius: 0; background: none; box-shadow: none;
    width: auto; line-height: 0; color: var(--admin-faint); cursor: pointer;
}
.orders td.row-action button.storno svg { width: 1rem; height: 1rem; }
.orders td.row-action button.storno:hover,
.orders td.row-action button.storno:focus-visible { color: var(--admin-bad); }
/* first click arms the icon (red box), the second sets Storno */
.orders td.row-action button.storno.armed {
    color: #fff; background: var(--admin-bad); border-radius: var(--pico-border-radius);
}
.orders tr.busy { opacity: .5; }
.orders tbody tr { transition: opacity .4s; }
.orders tr.gone { opacity: 0; pointer-events: none; }
.orders tr.busy button { cursor: progress; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }