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