/* Application custom styles */

/* =========================================================
   Bootstrap 5 color palette — based on Viñeteros brand
   ========================================================= */
:root {
    /* Main theme colors */
    --bs-primary:         #252422;
    --bs-primary-rgb:     37, 36, 34;

    --bs-secondary:       #eb5e28;
    --bs-secondary-rgb:   235, 94, 40;

    --bs-success:         #588157;
    --bs-success-rgb:     88, 129, 87;

    --bs-info:            #457b9d;
    --bs-info-rgb:        69, 123, 157;

    --bs-warning:         #c6994c;
    --bs-warning-rgb:     204, 197, 185;

    --bs-danger:          #d00000;
    --bs-danger-rgb:      208, 0, 0;

    --bs-light:           #fffcf2;
    --bs-light-rgb:       255, 252, 242;

    --bs-dark:            #403d39;
    --bs-dark-rgb:        64, 61, 57;

    /* Additional brand colors */
    --color-comic-beige:  #fffcf2;
    --color-comic-cream:  #f2e9e4;
    --color-comic-brown:  #6c5f5b;
    --color-comic-green:  #edf1eb;
    --color-comic-accent: #eb5e28;

    /* Reading status colors */
    --color-comic-pending:     #fcdede;
    --color-comic-in_progress: #fef3c7;
    --color-comic-read:        #d4edda;

    /* Body defaults */
    --bs-body-bg:         #fffcf2;
    --bs-body-color:      #252422;

    /* Management fixed shell */
    --navbar-height:      56px;
    --sidebar-width:      260px;
    --z-navbar:           1030;
    --z-selection-bar:    1035;
}

/* =========================================================
   Disable pinch-to-zoom for native app behaviour.
   Safari iOS ignores the viewport user-scalable=no meta tag
   since iOS 10; touch-action: pan-x pan-y is the reliable fix
   (supported from iOS 13). The viewport meta tag is kept as
   a fallback for older devices.
   cropper-canvas manages its own touch-action internally so
   the avatar cropper still receives all pointer events.
   ========================================================= */
html {
    touch-action: pan-x pan-y;
}

/* =========================================================
   Bootstrap component overrides — brand palette
   Bootstrap compiles btn/form/pagination styles with hardcoded
   values. Overriding their CSS variables here makes every
   Bootstrap component use the Viñeteros colour scheme.
   ========================================================= */

/* --- Buttons -------------------------------------------- */
.btn-primary {
    --bs-btn-color:              var(--color-comic-beige);
    --bs-btn-bg:                 var(--bs-primary);
    --bs-btn-border-color:       var(--bs-primary);
    --bs-btn-hover-color:        var(--color-comic-beige);
    --bs-btn-hover-bg:           #1a1917;
    --bs-btn-hover-border-color: #1a1917;
    --bs-btn-active-color:       var(--color-comic-beige);
    --bs-btn-active-bg:          #111;
    --bs-btn-active-border-color:#111;
    --bs-btn-focus-shadow-rgb:   37, 36, 34;
}

/* All outline buttons share cream background */
[class*="btn-outline-"] {
    --bs-btn-bg: var(--color-comic-beige);
}

.btn-outline-primary {
    --bs-btn-color:              var(--bs-primary);
    --bs-btn-border-color:       var(--bs-primary);
    --bs-btn-hover-color:        var(--color-comic-beige);
    --bs-btn-hover-bg:           var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color:       var(--color-comic-beige);
    --bs-btn-active-bg:          var(--bs-primary);
    --bs-btn-active-border-color:var(--bs-primary);
    --bs-btn-focus-shadow-rgb:   37, 36, 34;
}

.btn-secondary {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 var(--bs-secondary);
    --bs-btn-border-color:       var(--bs-secondary);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           #d4541f;
    --bs-btn-hover-border-color: #c94e1d;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          #c94e1d;
    --bs-btn-active-border-color:#bd491b;
    --bs-btn-focus-shadow-rgb:   235, 94, 40;
}

.btn-outline-secondary {
    --bs-btn-color:              var(--bs-secondary);
    --bs-btn-border-color:       var(--bs-secondary);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--bs-secondary);
    --bs-btn-active-border-color:var(--bs-secondary);
    --bs-btn-focus-shadow-rgb:   235, 94, 40;
}

/* Solid button using brand dark */
.btn-dark {
    --bs-btn-color:              var(--color-comic-beige);
    --bs-btn-bg:                 var(--bs-dark);
    --bs-btn-border-color:       var(--bs-dark);
    --bs-btn-hover-color:        var(--color-comic-beige);
    --bs-btn-hover-bg:           #332f2b;
    --bs-btn-hover-border-color: #332f2b;
    --bs-btn-active-color:       var(--color-comic-beige);
    --bs-btn-active-bg:          #332f2b;
    --bs-btn-active-border-color:#332f2b;
    --bs-btn-focus-shadow-rgb:   64, 61, 57;
}

/* Neutral outline button using brand dark */
.btn-outline-dark {
    --bs-btn-color:              var(--bs-dark);
    --bs-btn-border-color:       var(--bs-dark);
    --bs-btn-hover-color:        var(--color-comic-beige);
    --bs-btn-hover-bg:           var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-color:       var(--color-comic-beige);
    --bs-btn-active-bg:          var(--bs-dark);
    --bs-btn-active-border-color:var(--bs-dark);
    --bs-btn-focus-shadow-rgb:   64, 61, 57;
}

/* --- Form focus ring ------------------------------------ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(235, 94, 40, 0.25);
    outline: none;
}

/* --- Pagination ----------------------------------------- */
.pagination {
    --bs-pagination-color:              var(--bs-secondary);
    --bs-pagination-hover-color:        var(--bs-secondary);
    --bs-pagination-focus-color:        var(--bs-secondary);
    --bs-pagination-focus-box-shadow:   0 0 0 0.25rem rgba(235, 94, 40, 0.25);
    --bs-pagination-active-bg:          var(--bs-secondary);
    --bs-pagination-active-border-color:var(--bs-secondary);
}

/* =========================================================
   Navbar active link
   ========================================================= */
.navbar .nav-link.nav-active {
    border-bottom: 2px solid var(--bs-secondary);
    padding-bottom: calc(0.5rem - 2px);
}

/* =========================================================
   Management sidebar navigation + offcanvas
   ========================================================= */
#managementOffcanvas {
    background-color: var(--bs-body-bg);
}

.management-sidebar .nav-link {
    color: var(--bs-primary);
    font-size: 0.9rem;
}

.management-sidebar .nav-link:hover {
    background-color: var(--color-comic-cream);
}

.management-sidebar .nav-link.active {
    background-color: var(--color-comic-cream);
    color: var(--bs-secondary);
    font-weight: 600;
}

/* =========================================================
   Management fixed shell — navbar + page header + sidebar
   stay fixed to the viewport; only .management-shell__scroll
   scrolls. Scoped to body.management-shell-active so pages
   outside /management (comicteca, stats, profile, login) are
   completely unaffected.
   Do not add transform/filter/contain to any ancestor of
   <main>/.management-shell__body/#managementOffcanvas — it
   would create a containing block that breaks their real
   position: fixed behaviour relative to the viewport.
   ========================================================= */
body.management-shell-active {
    height: 100dvh;
    overflow: hidden;
}

body.management-shell-active > nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
}

body.management-shell-active > main {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.management-shell__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.management-shell__sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    overflow-y: auto;
}

/* Content column: stacks the optional toolbar and the scroll area */
.management-shell__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.management-shell__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* =========================================================
   Table dark header — matches navbar colour exactly
   ========================================================= */
.table-dark {
    --bs-table-bg: var(--bs-dark);
}

.table-dark th {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.table-dark th:last-child {
    border-right: none;
}

.table-dark th a,
.table-dark th a:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff;
}

.table-dark th a:hover {
    color: var(--bs-secondary);
}

.table th {
    white-space: nowrap;
    border-right: 1px solid rgba(64, 61, 57, 0.12);
}

.table-detail th {
    width: 1%;
}

.table td {
    border-right: 1px solid rgba(64, 61, 57, 0.12);
}

.table td:last-child {
    border-right: none;
}

/* --- Table striped rows — brand cream background --- */
.table-striped {
    --bs-table-striped-bg: var(--color-comic-beige);
}

/* --- Table row hover — matches sidebar active background --- */
.table-hover > tbody > tr:hover > td {
    --bs-table-color-state: var(--bs-body-color);
    --bs-table-bg-state: var(--color-comic-cream);
}

/* =========================================================
   Flatpickr date range picker — brand colour overrides
   ========================================================= */

/* Widget background */
.flatpickr-calendar {
    background: #fff;
}

/* Days within the selected range (between start and end) */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--bs-secondary);
    border-color: var(--bs-secondary);
    box-shadow: -5px 0 0 var(--bs-secondary), 5px 0 0 var(--bs-secondary);
    color: #fff;
}

/* Start, end, and all their state combinations (covers hover preview) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}

/* Box-shadow connector between startRange and endRange */
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--bs-secondary);
}

/* Week mode selected */
.flatpickr-day.week.selected {
    box-shadow: -5px 0 0 var(--bs-secondary), 5px 0 0 var(--bs-secondary);
}

/* Hover on unselected days */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--color-comic-cream);
    border-color: var(--color-comic-cream);
}

/* Today highlight — keep it readable against the secondary */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border-bottom-color: var(--bs-secondary);
}

/* =========================================================
   Form switch — brand colour
   ========================================================= */
.form-check-input:checked {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.form-check-input:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(235, 94, 40, 0.25);
}

.form-switch .form-check-input--lg {
    width: 2.5em;
    height: 1.5em;
    cursor: pointer;
}

/* Remove Bootstrap's float and negative margin so the switch stays in flow */
.form-check.form-switch .form-check-input {
    float: right !important;
    margin-left: 0.75em !important;
    margin-top: 0 !important;
}

/* Remove the padding-left that form-check adds inside a switch row */
.switch-row .form-check {
    padding-left: 0;
}

/* =========================================================
   Card background — brand green
   ========================================================= */
.card {
    background-color: var(--color-comic-green);
}

.card .table {
    --bs-table-bg: transparent;
}

/* =========================================================
   Dropdown menu — brand colours to match sidebar nav
   Bootstrap uses CSS variables on .dropdown-menu for hover/active.
   Overriding them here applies to every dropdown in the app.
   ========================================================= */
.dropdown-menu {
    --bs-dropdown-link-hover-bg:     var(--color-comic-cream);
    --bs-dropdown-link-hover-color:  var(--bs-secondary);
    --bs-dropdown-link-active-bg:    var(--color-comic-cream);
    --bs-dropdown-link-active-color: var(--bs-secondary);
}

/* =========================================================
   Avatar with hover edit overlay
   ========================================================= */
.avatar-wrapper {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

/* =========================================================
   Tom Select — contain to its parent container
   ========================================================= */
.ts-wrapper,
.ts-dropdown {
    max-width: 100%;
}

/* =========================================================
   Tom Select — Viñeteros brand overrides
   ========================================================= */

/* Control (field) background — white, like other form inputs.
   When bootstrap_5_layout.html.twig is active it adds 'form-select' to the <select>;
   Tom Select copies that class to .ts-wrapper, which then gets Bootstrap's body-bg (beige).
   Resetting it here keeps the visible control white. */
.ts-control,
.full .ts-control {
    background-color: #fff !important;
}

.ts-wrapper.form-select {
    background-color: #fff !important;
    background-image: none !important;
}

/* Focus ring matching other form fields */
.focus .ts-control {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(235, 94, 40, 0.25);
}

/* Dropdown option hover/active */
.ts-dropdown .active {
    background-color: var(--color-comic-cream);
}

/* Multi-select item chips — brown background */
.ts-wrapper.multi .ts-control > div,
.ts-wrapper.multi .ts-control > div.active {
    background: var(--color-comic-cream);
    border-color: transparent;
}

/* Remove button (×) on chips — secondary background, white icon */
.ts-wrapper.plugin-remove_button .item .remove {
    background-color: var(--bs-secondary);
    color: #fff;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background-color: var(--bs-secondary);
    color: #fff;
}

/* Separator between chip text and remove button */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove,
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
    border-left-color: rgba(0, 0, 0, 0.2);
}


/* =========================================================
   Reading status — colored select backgrounds
   ========================================================= */
.reading-status-select[data-status="pending"]     { background-color: var(--color-comic-pending); }
.reading-status-select[data-status="in_progress"] { background-color: var(--color-comic-in_progress); }
.reading-status-select[data-status="read"]        { background-color: var(--color-comic-read); }


/* =========================================================
   Comic form — publisher field locked by collection
   When the selected collection defines a publisher, the select
   becomes non-interactive and gets a gray background matching
   Bootstrap's disabled form-control appearance.
   ========================================================= */
.publishers-locked select {
    background-color: #e9ecef !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.85;
}

/* =========================================================
   Comic form — collection-number field locked by collection
   When the selected collection is complete, the number is fixed
   and the input becomes readonly with the same gray treatment
   as the locked publishers field above.
   ========================================================= */
.collection-number-locked {
    background-color: #e9ecef !important;
    cursor: not-allowed;
    opacity: 0.85;
}

/* =========================================================
   Comic form — available collection-number badges (clickable)
   ========================================================= */
.badge-available:hover {
    background-color: rgba(235, 94, 40, 0.12) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-secondary) !important;
}

/* =========================================================
   Comic search bar — lives in the fixed page header
   ========================================================= */
.comic-search-bar {
    background-color: #fff;
    border:           1px solid var(--bs-border-color);
    border-radius:    var(--bs-border-radius);
}
.comic-search-bar:focus-within { border-color: var(--bs-secondary); }

.comic-search-input {
    background: transparent;
    border:     none;
    color:      var(--bs-body-color);
    outline:    none;
    min-width:  0;
}
.comic-search-input::placeholder         { color: var(--bs-secondary-color); }
.comic-search-input::-webkit-search-cancel-button { display: none; }

mark.search-hit {
    background-color: rgba(255, 220, 0, 0.45);
    color:            inherit;
    padding:          0 1px;
    border-radius:    2px;
}
mark.search-hit-active {
    background-color: var(--bs-secondary);
    color:            #fff;
}

/* =========================================================
   Page header — limit action buttons width on small screens
   so they wrap internally instead of overflowing the viewport
   ========================================================= */
@media (max-width: 767.98px) {
    .page-header-actions { max-width: 55%; }
}

/* =========================================================
   Scroll offset for anchor links and scrollIntoView(). The fixed
   header never overlaps the scroll area, so only a small gap is needed.
   ========================================================= */
html { scroll-behavior: smooth; }

tr[id^="comic-"],
tr[id^="furniture-"],
tr[id^="shelf-"] { scroll-margin-top: 12px; }

/* =========================================================
   Comic list — drag & drop & selection mode
   ========================================================= */
.comic-row-ghost { background-color: var(--color-comic-cream) !important; }

.js-select-checkbox                             { display: none; pointer-events: none; }
.selection-mode .js-grip-icon                   { display: none; }
.selection-mode .js-select-checkbox             { display: inline-block; }
.selection-mode .js-drag-handle                     { cursor: pointer; }
.selection-mode .comic-list-actions-col             { display: none !important; }
.selection-mode tr:has(.js-select-checkbox:checked) { background-color: var(--color-comic-cream) !important; }

/* =========================================================
   Tags — chips with a per-instance color (set inline via
   the --chip-color custom property, since the color comes
   from the admin-chosen TagGroup.color, not a fixed palette)
   ========================================================= */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 50rem;
    border: 3px solid var(--chip-color, var(--color-comic-brown));
    background-color: transparent;
    color: var(--color-comic-brown);
    font-size: 0.875rem;
    line-height: 1.2;
    min-height: calc(24px + 0.6rem + 3px);
}

.chip.active {
    background-color: var(--chip-color, var(--color-comic-brown));
    border-color: var(--chip-color, var(--color-comic-brown));
    color: var(--chip-text-color, #fff);
}

.chip-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.chip-remove {
    display: inline-flex;
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
}
.chip-remove:hover { opacity: 1; }

/* Accordion inside the detail table: override Bootstrap's blue active header
   to match the table's alternating green row color. */
.table-detail .accordion-button:not(.collapsed) {
    background-color: var(--color-comic-green);
    color: inherit;
    box-shadow: none;
}
.table-detail .accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
}

/* Accordion in the comic form: neutral grey headers (matching the file input
   button) with a slightly darker hover, and white body like form fields. */
.tags-accordion .accordion-button,
.tags-accordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-tertiary-bg);
    color: inherit;
    box-shadow: none;
}
.tags-accordion .accordion-button:hover,
.tags-accordion .accordion-button:not(.collapsed):hover {
    background-color: var(--bs-secondary-bg);
}
.tags-accordion .accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon);
}
.tags-accordion .accordion-item,
.tags-accordion .accordion-body {
    background-color: #fff;
}


/* =========================================================
   Comicteca — section tabs
   ========================================================= */
.comicteca-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.12);
    scrollbar-width: none;
}
.comicteca-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-comic-brown);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms;
}
.comicteca-tab:hover { color: var(--bs-primary); }
.comicteca-tab.active {
    color: var(--color-comic-accent);
    border-bottom-color: var(--color-comic-accent);
}


/* =========================================================
   Comicteca — "Muebles" view (furniture → shelves → comics)
   Stays inside the page .container, like the header and tabs.
   ========================================================= */

/* Subheader: furniture name + furniture selector */
.armario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--bs-primary);
}
.armario-header-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.armario-header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-primary);
    margin: 0;
    line-height: 1.2;
}
.armario-header-subtitle { font-size: 13px; color: var(--color-comic-brown); }

/* Furniture selector — chevron + one vertical cell per furniture + chevron */
.armario-sel { display: inline-flex; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.armario-sel-mini { display: inline-flex; align-items: flex-end; gap: 4px; }
.armario-sel-chev,
.shelf-minimap-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 13px;
    color: var(--bs-primary);
    background: var(--color-comic-cream);
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    transition: background 120ms, color 120ms;
}
.armario-sel-chev:hover,
.shelf-minimap-chev:hover {
    color: var(--color-comic-beige);
    background: var(--color-comic-accent);
    border-color: var(--color-comic-accent);
}
.armario-sel-cell {
    width: 12px;
    height: 22px;
    padding: 0;
    background: var(--color-comic-cream);
    border: 1px solid rgba(var(--bs-dark-rgb), 0.30);
    border-radius: 2px;
    transition: background 150ms, width 220ms, height 220ms;
}
.armario-sel-cell:hover { background: var(--color-comic-brown); border-color: var(--color-comic-brown); }
.armario-sel-cell.active {
    width: 16px;
    height: 30px;
    background: var(--color-comic-accent);
    border-color: var(--color-comic-accent);
}

/* Shelves area — fixed height, scrolls vertically */
.armario-stage {
    position: relative;
    /* viewport minus navbar, page header, tabs and furniture subheader */
    height: calc(100dvh - 320px);
    min-height: 460px;
}
.armario-scroller {
    position: relative;   /* offsetTop of shelves is measured against it */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* extra right padding keeps comics clear of the minimap */
    padding: 0 54px 0 0;
}

/* Right-side shelf minimap — floats over the right gutter */
.shelf-minimap-wrap {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-height: 80%;
}
.armario-minimap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    overflow: hidden;
}
.minimap-cell {
    width: 22px;
    height: 12px;
    padding: 0;
    background: var(--color-comic-cream);
    border: 1px solid rgba(var(--bs-dark-rgb), 0.25);
    border-radius: 2px;
    transition: background 120ms;
}
.minimap-cell:hover { background: var(--color-comic-brown); border-color: var(--color-comic-brown); }
.minimap-cell.active {
    width: 30px;
    height: 16px;
    background: var(--color-comic-accent);
    border-color: var(--color-comic-accent);
}

/* Shelf — compact (all but one) and active (dock effect) */
.shelf {
    position: relative;
    border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.12);
    transition: background 200ms;
}
.shelf-compact { height: 152px; cursor: pointer; }
.shelf-compact:hover { background: rgba(var(--bs-secondary-rgb), 0.03); }
.shelf-active  { height: 328px; }

/* Horizontal row of comics inside a shelf */
.shelf-scroll {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-comic-cream) transparent;
}
.shelf-scroll::-webkit-scrollbar { height: 6px; }
.shelf-scroll::-webkit-scrollbar-thumb { background: var(--color-comic-cream); border-radius: 4px; }
.shelf-scroll::-webkit-scrollbar-track { background: transparent; }

.shelf-empty {
    align-self: center;
    font-size: 13px;
    font-style: italic;
    color: var(--color-comic-brown);
}

/* "23/45" tag on the active shelf */
.shelf-pos-tag {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 2;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-comic-brown);
    background: var(--color-comic-cream);
    border: 1px solid rgba(var(--bs-dark-rgb), 0.2);
    border-radius: 4px;
}

/* Shelf slot — a single comic */
.shelf-slot {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0 2px;
    color: inherit;
    text-decoration: none;
}
.shelf-slot:hover { color: inherit; text-decoration: none; }
.slot-cover-area {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px 0 3px;
}
.slot-label-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding-top: 6px;
}
.shelf-compact .shelf-slot { width: 78px; }
.shelf-compact .slot-label-area { height: 22px; justify-content: center; }
.shelf-active .slot-label-area { height: 96px; text-align: center; }

/* Dock magnification — slot widths */
.shelf-active .shelf-slot  { width: 80px; transition: width 280ms cubic-bezier(.2,.7,.2,1); }
.shelf-active .dock-mid    { width: 96px; }
.shelf-active .dock-near   { width: 116px; }
.shelf-active .dock-active { width: 168px; }

/* Dock magnification — cover sizes */
.cover-shelf {
    width: 64px;
    height: 92px;
    overflow: hidden;
    background: var(--color-comic-cream);
    box-shadow: 2px 2px 0 rgba(var(--bs-dark-rgb), 0.25);
    transition: width 280ms cubic-bezier(.2,.7,.2,1),
                height 280ms cubic-bezier(.2,.7,.2,1),
                box-shadow 200ms;
}
.cover-shelf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover-shelf-placeholder {
    display: block;
    padding: 4px 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-comic-brown);
    word-break: break-word;
}
.shelf-active .dock-mid    .cover-shelf { width: 82px;  height: 118px; }
.shelf-active .dock-near   .cover-shelf { width: 102px; height: 148px; }
.shelf-active .dock-active .cover-shelf {
    width: 154px;
    height: 222px;
    box-shadow: 5px 5px 0 var(--bs-primary);
}
.shelf-active .dock-active .cover-shelf-placeholder { padding: 10px 8px; font-size: 16px; }

/* Reading-status dot (every comic except the highlighted one) */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--bs-dark-rgb), 0.35);
}
.status-dot.status-pending     { background: var(--color-comic-pending); }
.status-dot.status-in_progress { background: var(--color-comic-in_progress); }
.status-dot.status-read        { background: var(--color-comic-read); }

/* Highlighted comic: title + collection nº + status badge instead of the dot */
.slot-details { display: none; }
.shelf-active .dock-active .status-dot { display: none; }
.shelf-active .dock-active .slot-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.slot-title {
    max-width: 170px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slot-coll {
    max-width: 170px;
    font-size: 10px;
    color: var(--color-comic-brown);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slot-badge {
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--bs-primary);
}
.badge-status-pending     { background-color: var(--color-comic-pending); }
.badge-status-in_progress { background-color: var(--color-comic-in_progress); }
.badge-status-read        { background-color: var(--color-comic-read); }