/**
 * RedCRM global UI polish — slim scrollbars + modal widths
 */

/* ── Slim scrollbars (Firefox + WebKit) ─────────────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}

.dark html {
    scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}

.dark * {
    scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.38);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.55);
}

.dark *::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.32);
}

.dark *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.48);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Modal panel widths (use on inner panel div) ───────────────── */
.redcrm-modal-panel--wide {
    width: 100%;
    max-width: min(96vw, 72rem); /* ~max-w-6xl — ledger / summary tables */
}

.redcrm-modal-panel--xl {
    width: 100%;
    max-width: min(96vw, 80rem); /* ~max-w-7xl — very wide grids */
}

.redcrm-modal-panel--lg {
    width: 100%;
    max-width: min(92vw, 56rem); /* ~max-w-4xl */
}

.redcrm-modal-panel--md {
    width: 100%;
    max-width: min(90vw, 42rem); /* ~max-w-2xl — forms */
}

.redcrm-modal-body-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tall panel for embedded PDF iframes (flex child needs a definite parent height) */
.redcrm-modal-panel--pdf-preview {
    height: min(92vh, 920px);
    min-height: min(78vh, 720px);
}

.redcrm-modal-panel--pdf-preview .redcrm-modal-pdf-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: min(68vh, 640px);
    border: 0;
}

/* ── Modal list tables (payment summary, allocation trail, ledgers) ─ */
.redcrm-modal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
}

.dark .redcrm-modal-table-wrap {
    border-color: rgb(55 65 81);
}

.redcrm-modal-table {
    width: 100%;
    min-width: min(100%, 40rem);
    border-collapse: collapse;
    table-layout: fixed;
}

.redcrm-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: rgb(255 255 255);
    box-shadow: 0 1px 0 rgb(229 231 235);
}

.dark .redcrm-modal-table thead th {
    background-color: rgb(17 24 39);
    box-shadow: 0 1px 0 rgb(55 65 81);
}

.redcrm-modal-table tbody tr:hover {
    background-color: rgb(249 250 251);
}

.dark .redcrm-modal-table tbody tr:hover {
    background-color: rgb(31 41 55 / 0.45);
}

.redcrm-cell-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.redcrm-modal-table .redcrm-col-sticky-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 7.5rem;
    min-width: 7.5rem;
    background-color: rgb(255 255 255);
    box-shadow: -8px 0 14px -10px rgba(15, 23, 42, 0.22);
}

.redcrm-modal-table .redcrm-col-sticky-actions--pay {
    width: 5.75rem;
    min-width: 5.75rem;
}

.redcrm-modal-table .redcrm-col-sticky-actions--wide {
    width: 7.5rem;
    min-width: 7.5rem;
}

.redcrm-ps-actions {
    display: inline-flex;
    flex-flow: row nowrap;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    white-space: nowrap;
}

.redcrm-ps-icon-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.redcrm-ps-icon-btn--edit {
    color: rgb(67 56 202);
    border-color: rgb(199 210 254);
    background-color: rgb(238 242 255);
}

.redcrm-ps-icon-btn--edit:hover {
    color: rgb(55 48 163);
    border-color: rgb(165 180 252);
    background-color: rgb(224 231 255);
}

.redcrm-ps-icon-btn--delete {
    color: rgb(185 28 28);
    border-color: rgb(254 202 202);
    background-color: rgb(254 242 242);
}

.redcrm-ps-icon-btn--delete:hover {
    color: rgb(153 27 27);
    border-color: rgb(252 165 165);
    background-color: rgb(254 226 226);
}

.dark .redcrm-ps-icon-btn--edit {
    color: rgb(199 210 254);
    border-color: rgb(67 56 202);
    background-color: rgb(49 46 129);
}

.dark .redcrm-ps-icon-btn--edit:hover {
    color: rgb(224 231 255);
    border-color: rgb(99 102 241);
    background-color: rgb(55 48 163);
}

.dark .redcrm-ps-icon-btn--delete {
    color: rgb(252 165 165);
    border-color: rgb(127 29 29);
    background-color: rgb(69 10 10);
}

.dark .redcrm-ps-icon-btn--delete:hover {
    color: rgb(254 202 202);
    border-color: rgb(153 27 27);
    background-color: rgb(127 29 29);
}

.dark .redcrm-modal-table .redcrm-col-sticky-actions {
    background-color: rgb(17 24 39);
    box-shadow: -8px 0 14px -10px rgba(0, 0, 0, 0.45);
}

.redcrm-modal-table tbody tr:hover .redcrm-col-sticky-actions {
    background-color: rgb(249 250 251);
}

.dark .redcrm-modal-table tbody tr:hover .redcrm-col-sticky-actions {
    background-color: rgb(31 41 55);
}

/* Travel invoice wide tables — remove control pinned right (always visible / clickable) */
.redcrm-travel-table-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-padding-right: 3.25rem;
}

.redcrm-travel-table-scroll tbody tr {
    position: relative;
}

.redcrm-travel-table-scroll .redcrm-travel-row-remove,
.redcrm-travel-table-scroll .redcrm-travel-row-actions {
    position: sticky;
    right: 0;
    left: auto;
    z-index: 6;
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    background-color: rgb(255 255 255);
    box-shadow: -4px 0 10px -6px rgba(15, 23, 42, 0.18);
    vertical-align: top;
}

.dark .redcrm-travel-table-scroll .redcrm-travel-row-remove,
.dark .redcrm-travel-table-scroll .redcrm-travel-row-actions {
    background-color: rgb(17 24 39);
    box-shadow: -4px 0 10px -6px rgba(0, 0, 0, 0.4);
}

.redcrm-travel-table-scroll tbody tr:hover .redcrm-travel-row-remove,
.redcrm-travel-table-scroll tbody tr:hover .redcrm-travel-row-actions {
    background-color: rgb(249 250 251);
}

.dark .redcrm-travel-table-scroll tbody tr:hover .redcrm-travel-row-remove,
.dark .redcrm-travel-table-scroll tbody tr:hover .redcrm-travel-row-actions {
    background-color: rgb(31 41 55);
}

.redcrm-travel-table-scroll .js-travel-remove-row,
.redcrm-travel-table-scroll .redcrm-travel-remove-btn {
    position: relative;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    touch-action: manipulation;
    cursor: pointer !important;
    pointer-events: auto;
}

/* Refund actions — explicit colors so light theme always shows label + fill */
.redcrm-btn-refund {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    border: 1px solid rgb(190 18 60);
    background-color: rgb(255 228 230);
    color: rgb(136 19 55) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.redcrm-btn-refund:hover {
    background-color: rgb(254 205 211);
    border-color: rgb(159 18 57);
    color: rgb(127 29 29) !important;
}

.dark .redcrm-btn-refund {
    border-color: rgb(251 113 133);
    background-color: rgb(76 5 25);
    color: rgb(254 205 211) !important;
}

.dark .redcrm-btn-refund:hover {
    background-color: rgb(136 19 55);
    color: rgb(255 255 255) !important;
}

.redcrm-btn-refund-process {
    border-color: rgb(217 119 6);
    background-color: rgb(254 243 199);
    color: rgb(120 53 15) !important;
}

.redcrm-btn-refund-process:hover {
    background-color: rgb(253 230 138);
    color: rgb(69 26 3) !important;
}

.dark .redcrm-btn-refund-process {
    border-color: rgb(245 158 11);
    background-color: rgb(69 26 3);
    color: rgb(254 243 199) !important;
}

.dark .redcrm-btn-refund-process:hover {
    background-color: rgb(120 53 15);
}