/* 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;
}

/* =========================================================
   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;
}

/* =========================================================
   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 — publishers field locked by collection
   When a collection defines its own publishers, the TomSelect
   is locked (disabled) and the control gets a gray background
   matching Bootstrap's disabled form-control.
   ========================================================= */
.publishers-locked .ts-control,
.publishers-locked .full .ts-control {
    background-color: #e9ecef !important;
    cursor: not-allowed;
    opacity: 0.85;
}

.publishers-locked .ts-wrapper.form-select {
    background-color: #e9ecef !important;
}

/* =========================================================
   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 — sticky input below navbar
   ========================================================= */
.comic-search-input {
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    color:         var(--bs-light);
    outline:       none;
    min-width:     0;
}
.comic-search-input::placeholder         { color: rgba(255, 255, 255, 0.4); }
.comic-search-input::-webkit-search-cancel-button { display: none; }
.comic-search-input:focus                { border-bottom-color: rgba(255, 255, 255, 0.7); }

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;
}

/* Increase scroll-margin-top to clear both navbar and search bar */
body.has-comic-search tr[id^="comic-"] { scroll-margin-top: 120px; }

/* =========================================================
   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%; }
}

/* =========================================================
   Sticky navbar — scroll offset for anchor links and scrollIntoView()
   ========================================================= */
tr[id^="comic-"] { scroll-margin-top: 70px; }

/* =========================================================
   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; }