/*
 * Trykkfil på et vanlig produkt — roll-up, beachflagg, banner
 * (shop/partials/print-file.blade.php + public/js/print-file.js).
 * Portert fra partneradmin (public/css/print-product.css).
 */
.pf { margin: 18px 0 6px; }
.pf-label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.pf-label .req { color: var(--brand); margin-left: 2px; }
.pf-muted { font-size: .75rem; color: #6b7280; }
.pf-err { margin-top: 8px; font-size: .85rem; font-weight: 600; color: #dc2626; }
.pf button { font-family: inherit; cursor: pointer; }
.pf-remove { margin-top: .35rem; font-size: .75rem; color: #6b7280; text-decoration: underline; background: none; border: 0; padding: 0; }
.pf-remove:hover { color: #dc2626; }
.pf-check { margin-top: 10px; }
.pf-note-plain { margin-top: .5rem; font-size: .75rem; color: #374151; }
.pf-drop {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem;
    border: 1.5px dashed #d1d5db; border-radius: .75rem; background: #fafafa;
    padding: .75rem 1rem; cursor: pointer; transition: border-color .15s, background .15s;
    font-size: .875rem; font-weight: 600; color: #374151;
}
.pf-drop:hover, .pf-drop.is-over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, white); }
.pf-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--brand) 45%, white); }
.pf-drop-icon { width: 1.15rem; height: 1.15rem; color: var(--brand); flex-shrink: 0; }
.pf-drop-sub { width: 100%; font-weight: 400; padding-left: 1.75rem; }

/* ── Kortet med flaten og dommen ───────────────────────────────────── */
.pf-card {
    border-radius: .875rem; padding: .875rem 1rem; font-size: .8125rem; color: #374151;
    border: 1px solid #e5e7eb; background: #f9fafb; border-left-width: 4px;
}
.pf-card--plain { border-left-width: 1px; }
.pf-card--ok       { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
.pf-card--advarsel { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; }
.pf-card--feil     { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; }
.pf-card--info, .pf-card--ukjent { background: #f8fafc; border-left-color: #64748b; }

.pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.pf-card > .pf-head:first-child { margin-top: 0; }
.pf-icon {
    width: 1.3rem; height: 1.3rem; border-radius: 9999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: #fff; background: #64748b;
}
.pf-card--ok .pf-icon       { background: #16a34a; }
.pf-card--advarsel .pf-icon { background: #d97706; }
.pf-card--feil .pf-icon     { background: #dc2626; }
.pf-src { margin-left: auto; font-size: .7rem; color: #9ca3af; }
.pf-line { margin-top: .35rem; line-height: 1.45; }
.pf-hint { margin-top: .4rem; font-size: .75rem; color: #6b7280; }
.pf-note { margin-top: .5rem; font-size: .75rem; color: #6b7280; font-style: italic; }
.pf-actions { margin-top: .5rem; }

/* Arket */
.pf-sheet-wrap { display: flex; justify-content: center; }
.pf-sheet {
    position: relative; overflow: hidden; max-height: 320px; margin: 0 auto;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
.pf-sheet:not(.has-art) { background-image: none; outline: 2px dashed #d1d5db; outline-offset: -8px; }

/* Produktbildet med trykkflaten */
.pf-mock { position: relative; max-width: 360px; margin: 0 auto; }
.pf-mock-img { display: block; width: 100%; height: auto; border-radius: .5rem; user-select: none; }
.pf-area {
    position: absolute; overflow: hidden;
    outline: 2px dashed color-mix(in srgb, var(--brand) 70%, white); outline-offset: 0;
    background: rgba(255,255,255,.35);
}
.pf-area.has-art { outline: 1px solid rgba(0,0,0,.15); background: #fff; }

.pf-art {
    position: absolute; max-width: none; cursor: grab; user-select: none; touch-action: none;
}
.pf-art.is-dragging { cursor: grabbing; }

.pf-dimtag {
    position: absolute; right: .4rem; bottom: .4rem; z-index: 2;
    background: rgba(17,24,39,.72); color: #fff; font-size: .65rem; font-weight: 600;
    padding: .15rem .45rem; border-radius: 9999px; pointer-events: none;
}
.pf-badge {
    position: absolute; left: .4rem; top: .4rem; z-index: 2; pointer-events: none;
    font-size: .65rem; font-weight: 700; padding: .15rem .45rem; border-radius: .35rem; color: #fff;
}
.pf-badge--feil { background: #dc2626; }
.pf-badge--advarsel { background: #d97706; }

.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .6rem; }
.pf-tool {
    border: 1px solid #d1d5db; background: #fff; border-radius: 9999px;
    padding: .25rem .7rem; font-size: .75rem; font-weight: 600; color: #374151;
}
.pf-tool:hover { border-color: var(--brand); color: var(--brand); }
.pf-scale { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: #6b7280; }
.pf-scale input { width: 7rem; accent-color: var(--brand); }

.pf-spinner {
    display: inline-block; width: .9rem; height: .9rem; margin-right: .4rem; vertical-align: -2px;
    border: 2px solid #cbd5e1; border-top-color: var(--brand); border-radius: 9999px;
    animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Produksjonsfila (synlig flate + monteringsmarg). På mockupen klippes
   margen bort av .pf-area; på arket vises den som skraverte bånd. */
.pf-prod { position: absolute; left: 0; width: 100%; }
.pf-prod--sheet { top: 0; height: 100%; }
.pf-band {
    position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(220,38,38,.18) 0 6px, rgba(220,38,38,.06) 6px 12px);
}
.pf-band--top { top: 0; border-bottom: 1px dashed rgba(220,38,38,.7); }
.pf-band--bottom { bottom: 0; border-top: 1px dashed rgba(220,38,38,.7); }
.pf-margin-note {
    margin-top: .5rem; font-size: .75rem; line-height: 1.45; color: #374151;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .45rem .6rem;
}

.pf-card + .pf-card { margin-top: 8px; }