/* ============================================================
   miniPIM — „Leltárkönyv" dizájnrendszer
   Szerkesztőségi-nyomdai réteg a Tailwind utility-k fölött:
   papír, tinta, vermilion margó, pecsétek, léniák.
   ============================================================ */

:root {
    --paper: #f6f1e6;
    --paper-bright: #fdfaf2;
    --hairline: #ddd3bf;
    --hairline-strong: #c9bda4;
    --ink: #221c15;
    --ink-soft: #71675a;
    --verm: #c0391b;
    --verm-deep: #9c2e14;
    --stamp-green: #33682f;
    --stamp-ochre: #91650b;
}

::selection { background: var(--verm); color: var(--paper-bright); }

:focus-visible { outline: 2px solid var(--verm); outline-offset: 2px; }

/* Vékony, papírhoz hangolt görgetősávok */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Papírszemcse: az egész oldalt finom nyomdai zaj fedi --- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* --- A leltárkönyv piros margóvonala (csak nagy képernyőn) --- */
@media (min-width: 1100px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        left: clamp(20px, 3.5vw, 56px);
        width: 1px;
        background: color-mix(in srgb, var(--verm) 45%, transparent);
        z-index: 1;
        pointer-events: none;
    }
}

/* ============ Tipográfiai segédek ============ */

/* Mono "kicker" feliratok: szekciócímkék, táblafejléc, meta sorok */
.kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.kicker .knum { color: var(--verm); }

/* Dupla lénia — főkönyvi szekciónyitó */
.ruled { border-top: 4px double var(--ink); }

/* Felület (lap a papíron) */
.sheet {
    background: var(--paper-bright);
    border: 1px solid var(--hairline-strong);
    border-radius: 2px;
    box-shadow: 0 2px 0 rgba(34, 28, 21, .05);
}

/* Pontozott kitöltősor: címke …… érték */
.leaders { display: flex; align-items: baseline; gap: .9ch; }
.leaders-fill {
    flex: 1 1 2ch;
    min-width: 2ch;
    border-bottom: 2px dotted var(--hairline-strong);
    transform: translateY(-.35em);
}

/* ============ Pecsétek (állapotjelzők) ============ */
.stamp {
    display: inline-flex;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .35em .75em;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    white-space: nowrap;
}
.stamp--ok      { color: var(--stamp-green); background: rgba(51, 104, 47, .07); }
.stamp--no      { color: var(--verm);        background: rgba(192, 57, 27, .07); }
.stamp--temp    { color: var(--stamp-ochre); background: rgba(145, 101, 11, .08); }
.stamp--unknown { color: var(--ink-soft);    background: rgba(113, 103, 90, .08); }
.stamp--big {
    font-size: .82rem;
    padding: .5em 1.1em;
    border-width: 2px;
    transform: rotate(-2deg);
    box-shadow: 1px 2px 0 rgba(34, 28, 21, .12);
}

/* Fizikai pecsételés: hoverre megjelenik a pecsétnyomó (nyeles gumipecsét),
   lendületet vesz, villámgyorsan lecsap, a gumi összenyomódik, tinta fröccsen,
   a papír belerándul — majd a nyomó nyomva tartás után felemelkedik.
   A lenyomat az ütésre mélyen benyomódik, és táguló tintagyűrűt hagy. */
.stamp-zone { position: relative; }
.stamp-zone::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: 96px;
    height: 92px;
    margin-left: -48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 60'%3E%3Ccircle cx='32' cy='11' r='9' fill='%23221c15'/%3E%3Crect x='28' y='17' width='8' height='13' fill='%23221c15'/%3E%3Cpath d='M18 41c0-6.5 4.5-12 10-12h8c5.5 0 10 5.5 10 12v2H18v-2z' fill='%23221c15'/%3E%3Crect x='12' y='43' width='40' height='7' rx='2' fill='%23c0391b'/%3E%3C/svg%3E") no-repeat center bottom / contain;
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(0 4px 3px rgba(34, 28, 21, .3));
}

/* Tintafröccs: az ütés pillanatában szétrepülő tintapöttyök (box-shadow részecskék) */
.stamp-zone::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.stamp-zone:hover::after { animation: stamperHit 1.05s cubic-bezier(.3, .6, .35, 1) both; }
.stamp-zone:hover::before { animation: inkSplat 1.05s ease-out both; }
.stamp-zone:hover .stamp--big { animation: stampImprint .7s cubic-bezier(.2, .9, .3, 1.4) .3s both; }
.stamp-zone:hover { animation: paperJolt .28s linear .3s; }

/* A pecsétnyomó útja: beúszás → lendületvétel → LECSAPÁS → gumi-összenyomódás
   → nyomva tartás → felemelkedés */
@keyframes stamperHit {
    0%   { opacity: 0; transform: translateY(-64px) rotate(6deg); }
    10%  { opacity: 1; transform: translateY(-54px) rotate(4deg); }
    22%  { transform: translateY(-58px) rotate(5deg); }   /* felhúz, lendületet vesz */
    30%  { transform: translateY(0) rotate(0deg) scaleY(1); }       /* BUMM */
    34%  { transform: translateY(1px) rotate(0deg) scaleY(.92); }   /* a gumi összenyomódik */
    44%  { transform: translateY(0) rotate(0deg) scaleY(.97); }     /* nyomva tartja */
    52%  { transform: translateY(-3px) rotate(0deg) scaleY(1); }
    66%  { opacity: 1; transform: translateY(-50px) rotate(-5deg); }
    100% { opacity: 0; transform: translateY(-72px) rotate(-8deg); }
}

/* A lenyomat: mély benyomódás friss tintával, rugós visszapattanás,
   közben táguló-halványuló tintagyűrű a pecsét saját színében */
@keyframes stampImprint {
    0% {
        transform: rotate(-2deg) scale(1);
        box-shadow: 1px 2px 0 rgba(34, 28, 21, .12);
    }
    12% {
        transform: rotate(-1deg) scale(.82);
        filter: saturate(2.2) brightness(.78);
        box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 50%, transparent), 1px 2px 0 rgba(34, 28, 21, .12);
    }
    30% { transform: rotate(-3.2deg) scale(1.1); }
    48% { transform: rotate(-1.6deg) scale(.96); }
    68% { transform: rotate(-2.3deg) scale(1.03); }
    100% {
        transform: rotate(-2deg) scale(1);
        filter: none;
        box-shadow: 0 0 0 18px transparent, 1px 2px 0 rgba(34, 28, 21, .12);
    }
}

/* Szétrepülő tintapöttyök az ütés pillanatától */
@keyframes inkSplat {
    0%, 29% {
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(34, 28, 21, .9), 0 0 0 0 rgba(192, 57, 27, .85), 0 0 0 0 rgba(34, 28, 21, .8),
                    0 0 0 0 rgba(34, 28, 21, .9), 0 0 0 0 rgba(192, 57, 27, .8), 0 0 0 0 rgba(34, 28, 21, .85),
                    0 0 0 0 rgba(34, 28, 21, .8), 0 0 0 0 rgba(192, 57, 27, .75);
    }
    33% {
        opacity: 1;
        box-shadow: 10px -7px 0 0 rgba(34, 28, 21, .9), 13px 3px 0 0 rgba(192, 57, 27, .85), 8px 9px 0 0 rgba(34, 28, 21, .8),
                    -10px -6px 0 0 rgba(34, 28, 21, .9), -13px 4px 0 0 rgba(192, 57, 27, .8), -7px 10px 0 0 rgba(34, 28, 21, .85),
                    3px -12px 0 0 rgba(34, 28, 21, .8), -3px -13px 0 0 rgba(192, 57, 27, .75);
    }
    72% {
        opacity: .8;
        box-shadow: 30px -22px 0 -1px rgba(34, 28, 21, .5), 38px 8px 0 -1px rgba(192, 57, 27, .45), 24px 26px 0 -1px rgba(34, 28, 21, .4),
                    -30px -18px 0 -1px rgba(34, 28, 21, .5), -38px 11px 0 -1px rgba(192, 57, 27, .4), -22px 28px 0 -1px rgba(34, 28, 21, .45),
                    9px -34px 0 -1px rgba(34, 28, 21, .4), -8px -38px 0 -1px rgba(192, 57, 27, .35);
    }
    100% {
        opacity: 0;
        box-shadow: 36px -27px 0 -2px rgba(34, 28, 21, 0), 46px 10px 0 -2px rgba(192, 57, 27, 0), 29px 32px 0 -2px rgba(34, 28, 21, 0),
                    -36px -22px 0 -2px rgba(34, 28, 21, 0), -46px 14px 0 -2px rgba(192, 57, 27, 0), -27px 34px 0 -2px rgba(34, 28, 21, 0),
                    11px -41px 0 -2px rgba(34, 28, 21, 0), -10px -46px 0 -2px rgba(192, 57, 27, 0);
    }
}

/* A papír belerándul az ütésbe */
@keyframes paperJolt {
    0%   { transform: translate(0, 0) rotate(0); }
    30%  { transform: translate(1px, 2px) rotate(.5deg); }
    55%  { transform: translate(-1px, 1px) rotate(-.4deg); }
    80%  { transform: translate(1px, 0) rotate(.2deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* Feed-típus címke: [CSV] */
.typetag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--ink-soft);
}
.typetag::before { content: '['; color: var(--verm); }
.typetag::after  { content: ']'; color: var(--verm); }

/* Webshop-címke zöld jelzőponttal */
.chip {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper-bright);
    border: 1px solid var(--hairline-strong);
    border-radius: 2px;
    padding: .18em .6em;
    white-space: nowrap;
}
.chip::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--stamp-green);
    border-radius: 50%;
    margin-right: .5em;
    flex-shrink: 0;
}

/* ============ Gombok ============ */
.btn-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    background: var(--ink);
    color: var(--paper-bright);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .03em;
    padding: .65em 1.5em;
    border-radius: 2px;
    transition: background .18s ease, transform .12s ease;
}
.btn-ink:hover { background: var(--verm); color: var(--paper-bright); }
.btn-ink:active { transform: translateY(1px); }
.btn-ink:disabled { opacity: .55; cursor: wait; }

.btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--hairline-strong);
    font-weight: 600;
    font-size: .82rem;
    padding: .6em 1.3em;
    border-radius: 2px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.btn-line:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-bright); }

.btn-dashed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    background: transparent;
    color: var(--ink-soft);
    border: 1.5px dashed var(--hairline-strong);
    font-weight: 600;
    font-size: .82rem;
    padding: .6em 1.3em;
    border-radius: 2px;
    transition: color .15s ease, border-color .15s ease;
}
.btn-dashed:hover { color: var(--verm); border-color: var(--verm); }

.btn-sm { font-size: .72rem; padding: .55em 1.1em; }

/* Ikon-gombok (szerkesztés / törlés) */
.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 2px;
    color: var(--ink-soft);
    background: transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.iconbtn:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-bright); }
.iconbtn--danger:hover { color: var(--verm); border-color: var(--verm); background: rgba(192, 57, 27, .06); }

/* ============ Űrlapok: aláhúzásos mezők ============ */
.input-line {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--hairline-strong);
    border-radius: 0;
    padding: .5rem .1rem;
    font-size: .9rem;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.input-line:focus {
    outline: none;
    border-bottom-color: var(--verm);
    box-shadow: 0 1.5px 0 0 var(--verm);
}
.input-line::placeholder { color: #a89c89; font-style: italic; }
.input-line--error { border-bottom-color: var(--verm); }

select.input-line {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371675a' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .3rem center;
    padding-right: 1.6rem;
    cursor: pointer;
}

.field-error {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    color: var(--verm);
    margin-top: .45rem;
}

/* ============ Navigáció (könyvgerinc) ============ */
.navlink {
    position: relative;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #b9aa92;
    padding: .65rem .8rem;
    transition: color .15s ease;
    white-space: nowrap;
}
.navlink:hover { color: var(--paper-bright); }
.navlink--active { color: var(--paper-bright); }
.navlink--active::after {
    content: '';
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .3rem;
    height: 2px;
    background: var(--verm);
}

/* ============ Flash üzenetek: léniás jegyzetek ============ */
.flash {
    display: flex;
    align-items: baseline;
    border-left: 3px solid;
    padding: .8rem 1rem;
    background: var(--paper-bright);
    font-size: .85rem;
    box-shadow: 0 1px 0 var(--hairline);
    animation: fadeRise .4s ease both;
}
.flash-mark {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    margin-right: .7em;
    flex-shrink: 0;
}
.flash--success { border-color: var(--stamp-green); color: #2c4f29; }
.flash--error   { border-color: var(--verm);        color: var(--verm-deep); }
.flash--warning { border-color: var(--stamp-ochre); color: #6f4d06; }
.flash--info    { border-color: var(--ink-soft);    color: var(--ink); }

/* ============ Főkönyvi táblázat ============ */
.ledger-table thead th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--ink);
    text-align: left;
}
.ledger-table thead th.th-right { text-align: right; }
.ledger-row { transition: background .15s ease; }
.ledger-row:hover { background: rgba(192, 57, 27, .035); }
.ledger-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--verm); }

/* ============ Statisztika-dobozok (léniadobozok) ============ */
.statbox {
    border: 4px double var(--ink);
    background: var(--paper-bright);
    padding: .9rem 1.2rem;
    border-radius: 1px;
}
.statnum {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ============ Lapozó ============ */
.page-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .45em .75em;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--ink-soft);
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.page-num:hover { border-color: var(--hairline-strong); color: var(--ink); }
.page-num--current { background: var(--verm); color: var(--paper-bright); }
.page-num--current:hover { color: var(--paper-bright); }

/* ============ Kibontható jegyzet (details) ============ */
details.note > summary { list-style: none; cursor: pointer; user-select: none; }
details.note > summary::-webkit-details-marker { display: none; }
details.note > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: .6em;
    color: var(--verm);
    transition: transform .18s ease;
}
details.note[open] > summary::before { transform: rotate(90deg); }

/* ============ Select2 újratémázás (papír + tinta) ============ */
.select2-container { font-family: 'Archivo', sans-serif; }
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--hairline-strong) !important;
    border-radius: 0 !important;
    min-height: 38px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-bottom-color: var(--verm) !important;
    box-shadow: 0 1.5px 0 0 var(--verm) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: var(--ink) !important;
    font-size: .88rem;
    padding-left: .1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ink-soft) transparent transparent transparent !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ink) !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: var(--paper-bright) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem !important;
    font-weight: 500;
    padding: .2em .55em !important;
    margin-top: .45rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--hairline) !important;
    font-weight: 700;
    margin-right: .4em;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--verm) !important; }
.select2-container--default .select2-search--inline .select2-search__field {
    font-family: 'Archivo', sans-serif;
    font-size: .85rem;
    color: var(--ink);
    margin-top: .55rem !important;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder { color: #a89c89; font-style: italic; }
.select2-dropdown {
    background: var(--paper-bright) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 rgba(34, 28, 21, .12);
}
.select2-results__option {
    font-size: .85rem;
    color: var(--ink);
    padding: .45rem .75rem !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--verm) !important;
    color: var(--paper-bright) !important;
}
.select2-container--default .select2-results__option--selected { background: var(--hairline) !important; }
.select2-container--default .select2-selection__clear { color: var(--ink-soft) !important; font-size: 1rem; margin-right: .4rem !important; }

/* ============ Mozgás ============ */
@keyframes fadeRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.rise   { animation: fadeRise .55s cubic-bezier(.22, .8, .36, 1) both; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }
.rise-4 { animation-delay: .28s; }

tr.row-rise { animation: fadeRise .4s cubic-bezier(.22, .8, .36, 1) both; animation-delay: .46s; }
tr.row-rise:nth-child(1)  { animation-delay: .2s; }
tr.row-rise:nth-child(2)  { animation-delay: .22s; }
tr.row-rise:nth-child(3)  { animation-delay: .24s; }
tr.row-rise:nth-child(4)  { animation-delay: .26s; }
tr.row-rise:nth-child(5)  { animation-delay: .28s; }
tr.row-rise:nth-child(6)  { animation-delay: .3s; }
tr.row-rise:nth-child(7)  { animation-delay: .32s; }
tr.row-rise:nth-child(8)  { animation-delay: .34s; }
tr.row-rise:nth-child(9)  { animation-delay: .36s; }
tr.row-rise:nth-child(10) { animation-delay: .38s; }
tr.row-rise:nth-child(11) { animation-delay: .4s; }
tr.row-rise:nth-child(12) { animation-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }
}