* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html,
body {
    height: 100%;
    overflow: hidden
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 13px;
    background: #f0f2f5;
    display: flex;
    flex-direction: column
}

.fixed-header {
    flex-shrink: 0;
    background: #f0f2f5;
    padding: 8px 8px 0 8px;
    z-index: 100
}

.scrollable-content {
    flex: 1;
    min-height:0;
    overflow: hidden;
    padding: 0 8px 8px 8px;
    display: flex;
    flex-direction: column
}














.fixed-footer {
    flex-shrink: 0;
    background: #b8bfc6;
    padding: 0 8px;
    z-index: 100;
    border-top: 2px solid #a0a8b0;
    overflow: hidden
}

.fixed-footer table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px
}

.fixed-footer td {
    border: 1px solid #a0a8b0;
    padding: 5px 6px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #b8bfc6;
    color: #212529;
    font-weight: 700
}

.fixed-footer .footer-label {
    font-size: 13px;
    font-weight: 700;
    color: #212529
}

.fixed-footer .footer-sum {
    font-weight: 700;
    color: #1a5c1a
}

.top-controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap
}

.tab-links {
    display: flex;
    gap: 1px;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.tab-link {
    flex: 0 0 165px;            /* minimal width */
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 202px;
    max-width: 135px; /* CHANGE 9 */
    text-align: left
}






.tab-link:hover {
    background: #e9ecef;
    transform: translateY(-1px)
}

.tab-link.active {
    background: #007bff;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, .3)
}

.tab-link.hidden {
    display: none
}

.flag {
    transform: rotate(90deg);
    width: 18px;
    height: 27px;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    flex-shrink: 0
}










.flag-it {
    background: linear-gradient(to bottom, #009246 0, #009246 33%, #fff 33%, #fff 66%, #ce2b37 66%)
}

.flag-se {
    background: linear-gradient(to right, #006AA7 0, #006AA7 40%, #FECC00 40%, #FECC00 60%, #006AA7 60%)
}

.flag-es {
    background: linear-gradient(to right, #AA151B 0, #AA151B 30%, #F1BF00 30%, #F1BF00 70%, #AA151B 70%)
}

.flag-fr {
    background: linear-gradient(to bottom, #002654 0, #002654 33%, #fff 33%, #fff 66%, #ED2939 66%)
}

.flag-de {
    background: linear-gradient(to right, #000 0, #000 33%, #D00 33%, #D00 66%, #FFCE00 66%)
}

/* FIX 7: ALL tab — globe emoji as flag, no background gradient needed */
.flag-all {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 22px;
    height: 15px;
}

/* CHANGE 1: ALL tab Mkt col removed — this override is no longer needed */






.flag-country-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    width: 22px;
    margin: 0;
}








.tab-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
    max-height: 56px;
    overflow: hidden
}

.tab-country {
    font-size: 14px;
    font-weight: 700
}

.tab-info-line {
    whitespace: nowrap;
    font-size: 13px;
    font-weight: 600
}

.tab-info-pct {
    color: #dc3545;
    font-weight: 600
}

/* FIX 5: % must remain visible when tab is active (blue background) */
.tab-link.active .tab-info-pct {
    color: #ffe066;
    font-weight: 700
}

.tab-info-msg {
    font-size: 10px;
    opacity: 0.9
}

.tab-info-timestamp {
    font-size: 10px;
    opacity: 0.9;
    margin-top: 3px
}

.right-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}



.tab-content {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    overflow: hidden;
    min-height: 0;        /* ← questa riga */
    display: flex;
    flex-direction: column;
    flex: 1
}




.tab-content-inner {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.button-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.add-row-btn,
.clear-all-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    color: #fff;
    white-space: nowrap
}

.add-row-btn {
    background: #28a745
}

.add-row-btn:hover {
    background: #218838
}

.clear-all-btn {
    background: #dc3545;
    font-size: 20px;
    padding: 2px 6px;
}

.clear-all-btn:hover {
    background: #c82333
}

.search-container {
    position: relative;
    display: inline-flex;
    align-items: center
}

.search-input {
    padding: 6px 24px 6px 10px;
    font-size: 12px;
    border: 2px solid #ced4da;
    border-radius: 4px;
    width: 150px; /* FIX 21: -40% (was 250px) */
    transition: border-color .2s
}

.search-input:focus {
    outline: none;
    border-color: #007bff
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;         /* FIX 3: vertically centered */
    transform: translateY(-50%);
    bottom: auto;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    display: none;
    line-height: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all .2s
}

.search-clear:hover {
    background: #e9ecef;
    color: #dc3545
}

.search-clear.visible {
    display: block
}

.btn-tooltip {
    visibility: hidden;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 99999;
    font-weight: 400;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.btn-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.add-row-btn:hover .btn-tooltip,
.clear-all-btn:hover .btn-tooltip {
    visibility: visible
}

.btn {
    position: relative
}

.btn-track .btn-tooltip {
    visibility: hidden;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 99999;
    font-weight: 400;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.btn-track .btn-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.btn-track:hover .btn-tooltip {
    visibility: visible
}

.photo-cell {
    position: relative
}

.photo-cell .photo-tooltip {
    visibility: hidden;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.photo-cell .photo-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.photo-cell:hover .photo-tooltip {
    visibility: visible
}

.product-img-cell {
    width: 40px; /* CHANGE NEW-2 (v51): 40px confirmed */
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 0 !important;  /* CHANGE NEW-3: no padding — photo fills cell */
    overflow: hidden;
    height: 40px; /* CHANGE NEW-2 (v53): square cell — height matches width */
    /* border intentionally omitted — uses table default border */
}

.link-btn-cell {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 2px !important
}

.product-photo-cell {
    position: relative;
    cursor: pointer;
    padding: 0 !important  /* CHANGE NEW-3: no padding; border from table rule */
}

.product-thumb {
    width: auto;            /* auto width preserves proportions — no stretching */
    height: 40px;           /* CHANGE NEW-2 (v53): 40px to fill square 40×40 cell */
    max-width: 40px;        /* CHANGE NEW-2 (v53): constrain width to cell width */
    object-fit: contain;    /* contain keeps proportions, no crop */
    border-radius: 0;
    border: none;           /* no border on the img element itself */
    display: block;
    margin: 0 auto          /* center horizontally if narrower than cell */
}

/* CHANGE NEW-3 (v46): product-photo-cell td must be isolated from row-hover multiply blend. */
td.product-photo-cell,
td:nth-child(19) {
    mix-blend-mode: normal !important;
    isolation: isolate !important;
}

/* CHANGE NEW-2 (v47): product-preview — absolute top z-index, fully opaque, isolated from ALL blend modes */
/* CHANGE NEW-2 (v48): also force will-change:transform to promote to its own compositor layer */
.product-preview {
    display: none;
    position: fixed;
    z-index: 2147483647; /* maximum possible z-index — absolute top of z-order */
    max-width: 200px;
    max-height: 200px;
    border: 3px solid #007bff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    pointer-events: none;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
    opacity: 1 !important;
    background: #fff !important; /* solid white — prevents any bleed-through */
    will-change: transform;      /* CHANGE NEW-2 (v48): own compositor layer — bypasses parent blend context */
    transform: translateZ(0)     /* CHANGE NEW-2 (v48): force GPU layer, fully outside table blend stack */
}

/* CHANGE NEW-6 (v52): completely remove all blend/filter effects from photo cell on hover.
   The product-preview popup must NEVER be affected by any row hover styles. */
tbody tr:hover td.product-photo-cell,
tbody tr:hover td:nth-child(19) {
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
    isolation: isolate !important;
}

.product-photo-cell:hover .product-preview {
    display: block
}

.photo-upload-btn {
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 4px 8px;
    font-size: 9px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    margin-top: 2px
}

.photo-upload-btn:hover {
    background: #138496
}

.no-photo {
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
    margin: 0 auto
}

.btn-icon {
    font-size: 14px;
    padding: 4px 8px;
    min-width: auto;
    margin: 0
}

.no-link {
    text-align: center;
    color: #ccc;
    font-size: 12px
}

select.status-ordered {
    background: #fff3cd !important
}

select.status-receivedtowrite {
    background: #d4edda !important
}

select.status-returned {
    background: #f8d7da !important
}

select.status-refunded {
    background: #d1ecf1 !important
}

select.status-gotitfree {
    background: #d4edda !important;
    font-weight: 600
}

/* CHANGE 8: Free/returned same color as Got it free */
select[class*="status-free"] {
    background: #d4edda !important;
    font-weight: 600
}

select.status-wait {
    background: #fff3cd !important
}

select.status-write {
    background: #e7f5ff !important
}

select.status-cancelled {
    background: #f8d7da !important
}

select.status-topickup {
    background: #ff0000 !important;
    color: #fff !important;
    font-weight: 700
}

select.status-toreturn {
    background: #ff0000 !important;
    color: #fff !important;
    font-weight: 700
}

.stats-panel {
    background: #4a5568;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.stats-grid {
    display: flex;          /* ITEM 4: flex so buttons fill the full bar */
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    align-items: stretch
}

.stat-box {
    background: rgba(255, 255, 255, .12);
    padding: 4px 8px;
    border-radius: 4px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
    position: relative;
    display: flex;
    flex-direction: column;  /* req item 7: label top, then icon+values row */
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 120px;        /* ITEM 4: grow to fill bar */
    min-width: 0
}

.stat-box:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.stat-box.active-filter {
    background: rgba(76, 175, 80, .3);
    border: 2px solid #4caf50;
    box-shadow: 0 0 10px rgba(76, 175, 80, .5)
}

.stat-box.active-filter-not {
    background: rgba(244, 67, 54, .3);
    border: 2px solid #f44336;
    box-shadow: 0 0 10px rgba(244, 67, 54, .5)
}

/* req item 7: stat-box 2-row layout — label top, icon+values bottom */
.stat-box {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important
}

.stat-box .stat-label {
    font-size: 11px;
    font-weight: 700;
    opacity: .95;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.stat-box-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%
}

.stat-box .icon {
    font-size: 20px; /* FIX 13: reduced by ~30% (was 32px) */
    flex-shrink: 0
}

.stat-box .stat-values {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0
}

.stat-box .value {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2
}

.stat-box .subvalue {
    font-size: 11px;
    opacity: .9;
    line-height: 1.2
}

.stat-box .filter-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    white-space: pre-line;
    z-index: 10000;
    pointer-events: none;
    min-width: 150px;
    max-width: 250px
}

.stat-box .filter-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.stat-box:hover .filter-tooltip {
    visibility: visible
}

.stat-box-total {
    min-width: 140px
}

.amazon-icon {
    font-size: 14px
}

.seller-icon {
    font-size: 14px
}
.stat-box-archived-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%
}

.clear-archived-btn {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 2px;
    width: 100%;
    text-align: center;
    font-weight: 600;
    white-space: nowrap
}

.clear-archived-btn-small {
    position: absolute;
    right: 4px;
    bottom: 4px;  /* FIX 10: bottom-right corner of archived button */
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    width: 36%;
    max-width: 48px
}

.clear-archived-btn:hover {
    background: rgba(255, 255, 255, .4)
}

.stat-box-remove-filters {
    background: rgba(255, 165, 0, .25);
    border: 1px solid rgba(255, 165, 0, .5);
    cursor: pointer
}

.stat-box-remove-filters:hover {
    background: rgba(255, 165, 0, .4)
}








.stat-box-remove-filters .subvalue,
.stat-box-remove-filters .value,
.stat-box-remove-filters .stat-text > div:not(.label) {
  display: none !important;
}

.stat-box-remove-filters .stat-text {
  margin-left: 6px;
}









.table-container {
    overflow-y: scroll !important;
    overflow-x: hidden;
    position: relative;
    flex: 1;
    min-height: 0;
    scroll-behavior: auto !important
}

.table-wrapper {
    position: relative;
    width: 100%
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    table-layout: fixed
}

/* req18: reduced cell padding — 2px top/bot, 2px left/right */
th,
td {
    border: 1px solid #dee2e6;
    padding: 2px 2px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis
}

th:nth-child(1),
td:nth-child(1) {
    width: 32px;
    min-width: 32px;
    max-width: 32px; /* CHANGE 9 */
    text-align: center;
    font-weight: 700;
    white-space: nowrap
}

/* ITEM 7: Marketplace country column — 2-digit country code */
/* CHANGE 2: width +20% (22px → 27px) */
th:nth-child(2),
td:nth-child(2) {
    width: 20px; /* CHANGE NEW-2 (v56): was 27px → 20px */
    min-width: 20px;
    max-width: 20px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap
}

th:nth-child(3),
td:nth-child(3) {
    width: 36px;
    min-width: 36px;
    max-width: 36px; /* CHANGE 9 */
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer
}

th:nth-child(4),
td:nth-child(4) {
    width: 38px;
    min-width: 38px;
    max-width: 38px; /* CHANGE 16 */
    text-align: center;
    font-size: 10px;
    font-weight: 600
}

th:nth-child(5),
td:nth-child(5) {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    text-align: center;
    font-size: 10px;
    font-weight: 600
}

th:nth-child(6),
td:nth-child(6) {
    width: 55px;
    min-width: 55px;
    max-width: 55px;
    white-space: nowrap
}

th:nth-child(7),
td:nth-child(7) {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    text-align: center;
    font-size: 10px
}

th:nth-child(8),
td:nth-child(8) {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    font-size: 9px;
    white-space: nowrap;
    text-align: center
}

th:nth-child(9),
td:nth-child(9) {
    width: 98px;
    min-width: 98px;
    max-width: 98px; /* CHANGE 16 */
    font-size: 9px
}

td:nth-child(10) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    min-width: 120px;
    flex: 1
}

td:nth-child(10):hover {
    /* req 4: no single-cell background highlight; keep overflow expand for long descriptions */
    overflow: visible;
    white-space: normal;
    z-index: 100
}

th:nth-child(11),
td:nth-child(11) {
    width: 20px; /* CHANGE NEW-2 (v56): was 27px → 20px matching mkt col */
    min-width: 20px;
    max-width: 20px;
    font-size: 9px
}

/* CHANGE 16: Delivery Status column */
th:nth-child(12),
td:nth-child(12) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    font-size: 9px;
    white-space: nowrap
}

th:nth-child(13),
td:nth-child(13) {
    width: 45px;
    min-width: 45px;
    max-width: 45px; /* CHANGE 9 */
    font-size: 9px;
    white-space: nowrap
}

th:nth-child(14),
td:nth-child(14) {
    width: 45px;
    min-width: 45px;
    max-width: 45px; /* CHANGE 9 */
    font-size: 9px;
    white-space: nowrap
}

th:nth-child(15),
td:nth-child(15) {
    width: 98px;
    min-width: 98px;
    max-width: 98px; /* CHANGE 16 */
    white-space: nowrap;
    font-size: 9px
}

th:nth-child(16),
td:nth-child(16) {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    white-space: nowrap;
    text-align: center
}

th:nth-child(17),
td:nth-child(17) {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    white-space: nowrap;
    text-align: center
}

th:nth-child(18),
td:nth-child(18) {
    width: 100px;   /* req 5: doubled from 50px */
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap
}

/* CHANGE NEW-1 (v53): Product Photo = nth-child(19) — 40px, no padding, cell border RESTORED */
th:nth-child(19),
td:nth-child(19) {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 0 !important
    /* border: removed border:none so cell gets normal table border like all other cells */
}

/* CHANGE NEW-1 (v52): New Msg = nth-child(20) — restored to 25px with normal border */
th:nth-child(20),
td:nth-child(20) {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    text-align: center;
    padding: 2px /* border uses table default — restored */
}

th:nth-child(21),
td:nth-child(21) {
    width: 25px;
    min-width: 25px;
    max-width: 25px; /* CHANGE 9 */
    text-align: center;
    padding: 2px;
    white-space: nowrap
}

th:nth-child(22),
td:nth-child(22) {
    width: 90px; /* CHANGE NEW-3: was 70px, now 90px as requested */
    min-width: 90px;
    max-width: 90px; /* CHANGE 16 */
    font-size: 9px;
    padding: 2px;
    white-space: nowrap
}

/* CHANGE 9: Action column */
th:nth-child(23),
td:nth-child(23) {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    padding: 2px;
    white-space: nowrap
}

/* req7: Action column fixed 31px */
th:nth-child(24),
td:nth-child(24) {
    width: 31px;
    min-width: 31px;
    max-width: 31px;
    text-align: center;
    padding: 2px
}

th:nth-child(25),
td:nth-child(25) {
    width: 90px;
    min-width: 90px;
    max-width: 90px; /* CHANGE 16 */
    white-space: nowrap;
    font-size: 9px
}

th:nth-child(26),
td:nth-child(26) {
    width: 45px;
    min-width: 45px;
    max-width: 45px; /* CHANGE 5: now Notes column */
    padding: 2px;
    white-space: nowrap;
    font-size: 9px
}

th:nth-child(27),
td:nth-child(27),
th:nth-child(28),
td:nth-child(28),
th:nth-child(29),
td:nth-child(29),
th:nth-child(30),
td:nth-child(30) {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 2px;
    font-size: 9px
}

th:nth-child(31),
td:nth-child(31) {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 2px;
    font-size: 9px
}

/* FIX 8: Delete Order col (32nd) — fixed width, not resizable */
th:nth-child(32),
td:nth-child(32) {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 2px;
    font-size: 9px
}

.price-match-green {
    background: #00e676 !important;
    color: #000 !important;
    font-weight: 700
}

/* req9: price-mismatch-red — red bg/text but default border, no extra red border */
td.price-mismatch-red {
    background: #ff0000 !important;
    color: #fff !important;
    font-weight: 700 !important
}

td.price-refund-zero-red {
    /* CHANGE 3: zero-refund red formatting removed — class kept for JS compatibility */
}

.row-cancelled,
.row-cancelled * {
    background: #ebebeb !important; /* FIX 2: even lighter grey */
    color: #666 !important;
    opacity: 1;
    text-decoration: line-through
}

.row-cancelled td {
    position: relative
}

.filter-cancelled-active .row-cancelled td::before,
.filter-cancelled-active .row-cancelled-full td::before {
    display: none !important
}

.row-cancelled-full,
.row-cancelled-full * {
    background: #ebebeb !important; /* FIX 2: even lighter grey */
    color: #666 !important;
    opacity: 1;
    text-decoration: line-through
}

.row-cancelled-full td {
    position: relative
}

.row-cancelled td.price-match-green,
.row-cancelled-full td.price-match-green {
    background: #00e676 !important;
    color: #000 !important;
    font-weight: 700
}

/* CHANGE 8: Removed old blue hover for cancelled rows — now handled by global override above */

.cell-hover-tip {
    pointer-events: none;
    position: fixed;
    z-index: 2147483647; /* maximum z-index — always on top */
    background: #222 !important; /* CHANGE NEW-7 (v51): !important to prevent any blend override */
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 11px;
    white-space: pre-wrap;
    max-width: 380px;
    word-wrap: break-word;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    line-height: 1.4;
    display: none;
    mix-blend-mode: normal !important; /* prevent row hover multiply blend from affecting tip */
    isolation: isolate !important;     /* own stacking context */
    opacity: 1 !important;             /* always fully opaque */
    will-change: transform;            /* own compositor layer */
    transform: translateZ(0)           /* force GPU layer — bypasses all parent blend contexts */
}

.cell-tooltip {
    position: relative
}

.cell-tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: normal;
    max-width: 300px;
    word-wrap: break-word;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.cell-tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.cell-tooltip:hover .tooltip-text {
    visibility: visible
}

thead {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff
}

th {
    background: #b8bfc6;
    color: #212529;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap
}

th:hover {
    background: #a0a8b0
}

tbody tr {
    background: #fff;
    /* CHANGE NEW-1 (v48): max-height on tr is ignored by browsers for table rows.
       Height is controlled by td padding + line-height + select height + product-thumb height.
       All those are set to produce ~20px total row height. */
}

/* CHANGE NEW-1 (v48): force all td to height 20px via line-height and overflow */
/* CHANGE NEW-2 (v53): photo cell (nth-child 19) is 40px square — exclude from 20px constraint */
tbody td:not(:nth-child(19)) {
    height: 20px !important;
    max-height: 20px !important;
    overflow: hidden !important;
    line-height: 16px !important;
    vertical-align: middle !important;
}
tbody td:nth-child(19) {
    height: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

/* CHANGE NEW-7b/7c: row hover — blue tint overlay.
   For plain cells (no special background): rgba overlay + multiply.
   For cells with inline background-color (year rainbow) OR price CSS classes: use ::before overlay
   so the original color is never overridden. */
/* CHANGE NEW-4 (v52): exclude price-class cells AND inline-background cells from the blue override */
tbody tr:hover td:not([style*="background-color"]):not(.price-match-green):not(.price-mismatch-red):not(.price-overpaid-yellow):not(.price-both-zero-green):not(.price-partial-refund-red) {
    background-color: rgba(0, 123, 255, 0.20) !important;
    mix-blend-mode: multiply;
}
/* CHANGE NEW-4 (v51+v52): ::before overlay for rainbow-colored cells (inline background-color) */
tbody tr:hover td[style*="background-color"] {
    position: relative !important;
}
tbody tr:hover td[style*="background-color"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 123, 255, 0.20);
    pointer-events: none;
    z-index: 1;
}
/* CHANGE NEW-4 (v52): ::before overlay for price-class cells (Total/Refunded cols) */
tbody tr:hover td.price-match-green,
tbody tr:hover td.price-mismatch-red,
tbody tr:hover td.price-overpaid-yellow,
tbody tr:hover td.price-both-zero-green,
tbody tr:hover td.price-partial-refund-red {
    position: relative !important;
}
tbody tr:hover td.price-match-green::before,
tbody tr:hover td.price-mismatch-red::before,
tbody tr:hover td.price-overpaid-yellow::before,
tbody tr:hover td.price-both-zero-green::before,
tbody tr:hover td.price-partial-refund-red::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 123, 255, 0.20);
    pointer-events: none;
    z-index: 1;
}
tbody tr:hover {
    outline: 2px solid rgba(0, 123, 255, 0.5);
    outline-offset: -1px;
}
/* CHANGE NEW-7d/9: preserve msg-indicator circle color on row hover */
/* CHANGE NEW-10 (v49): circle uses inline style color — preserve it with mix-blend-mode:normal */
/* CHANGE NEW-14 (v53): explicitly keep whatever inline background color was set by cMsgInd() */
tbody tr:hover td .msg-indicator.has-msg {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    /* Note: background is set via inline style by cMsgInd() — preserved by :not(.msg-indicator) above */
}
tbody tr:hover td .msg-indicator:not(.has-msg) {
    background: transparent !important;
    mix-blend-mode: normal;
}
/* CHANGE NEW-7a: cols 27-30 (View Details, Problem, Track, Return) — preserve button icon bg colors.
   The nth-child(n+16) * rule clears children, but we must re-preserve specific button colors.
   CHANGE NEW-14 (v53): exclude .msg-indicator.has-msg so its inline background is never wiped. */
tbody tr:hover td:nth-child(n+16) *:not(.msg-indicator) {
    background: transparent !important;
    mix-blend-mode: normal;
}
/* CHANGE NEW-7a: restore button background colors for action buttons in cols 27-30.
   btn-info=blue(#17a2b8), btn-danger=red(#dc3545), btn-success=green(#28a745), btn-warning=orange(#ffc107) */
tbody tr:hover td .btn-info {
    background: #17a2b8 !important;
    mix-blend-mode: normal !important;
    color: #fff !important;
}
tbody tr:hover td .btn-danger {
    background: #dc3545 !important;
    mix-blend-mode: normal !important;
    color: #fff !important;
}
tbody tr:hover td .btn-success {
    background: #28a745 !important;
    mix-blend-mode: normal !important;
    color: #fff !important;
}
tbody tr:hover td .btn-warning {
    background: #ffc107 !important;
    mix-blend-mode: normal !important;
    color: #000 !important;
}
/* CHANGE NEW-7a: also preserve icon/clickable elements' backgrounds */
tbody tr:hover td .clickable-icon,
tbody tr:hover td .act-btn,
tbody tr:hover td .act-btn.act-active,
tbody tr:hover td .icon-yes,
tbody tr:hover td .icon-no,
tbody tr:hover td .icon-amazon,
tbody tr:hover td .icon-seller {
    mix-blend-mode: normal !important;
}
tbody tr:hover td .act-btn.act-active {
    background: #007bff !important;
}

/* CHANGE NEW-7c: white rows (row-error = #fff) — hover must work the same as colored rows.
   With multiply, white*blue-overlay = light blue — this is correct and consistent.
   No special treatment needed; the rule above handles all rows uniformly. */


/* CHANGE NEW-7: no single-cell highlight on td hover — only full row hover applies */
td:hover {
    background: transparent !important
}

tr.free-item {
    background: #91c483 !important;
    font-weight: 600
}

tr.collapsed {
    display: none
}

tr.search-hidden {
    display: none !important
}

tr.filter-hidden {
    display: none !important
}

tr.archived-hidden {
    display: none !important
}

/* FIX 5: year-filter-hidden — hide rows whose year is deselected in the year filter button */
tr.year-filter-hidden {
    display: none !important
}

/* FIX 5: Prio column cell — compact, centered, pointer cursor, no text select */
.prio-cell {
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-width: 28px;
}

.row-ordered {
    background: #77e4d4 !important
}

.row-partial-refund {
    background: #ffebee !important
}

.row-received-no-refund {
    background: #c92a2a !important;
    color: #fff !important;
    font-weight: 700
}

.row-received-full-refund {
    background: #91c483 !important;
    color: #000 !important;
    font-weight: 700
}
.row-error {
    background: #fff !important
}

.row-received-x {
    background: #ff6464 !important;
    color: #fff !important;
    font-weight: 700
}

.row-received-v {
    background: #fff !important
}

.row-transit {
    background: #77e4d4 !important
}

.row-arriving {
    background: #77e4d4 !important
}

.row-cancelled-partial {
    background: #ebebeb !important; /* FIX 2: lighter grey */
    color: #666 !important;
    text-decoration: line-through
}

.row-return-request {
    background: #ffe162 !important
}

.row-return-completed {
    background: #998ceb !important
}

.row-refunded {
    background: #998ceb !important
}
.row-returned-full-refund-purple {
    background: #8b5cf6 !important;
    color: #fff !important;
    font-weight: 700
}

.row-consegnato-free {
    background: #91c483 !important;
    color: #000 !important;
    font-weight: 700
}

.row-return-incomplete {
    background: #ffe162 !important
}

.row-refunded-incomplete {
    background: #ffe162 !important
}

.row-delivered-action-x {
    background: #ff6464 !important;
    color: #fff !important;
    font-weight: 700
}

.row-to-pickup {
    background: #ff6464 !important;
    color: #fff !important;
    font-weight: 700
}

.row-to-return {
    background: #ff6464 !important;
    color: #fff !important;
    font-weight: 700
}

.row-pink {
    background: #ffc0cb !important
}

/* CHANGE NEW-11 (v49): delivered + total != refunded → brown/dark-khaki "received(to write)" */
.row-delivered-not-refunded {
    background: #8B6914 !important;
    color: #fff !important;
    font-weight: 600
}

/* CHANGE NEW-9 (v56): return-due urgency levels — warning=orange<14d, critical=red+blink<7d */
.return-due-warning {
    color: #fd7e14 !important; /* bold orange — less than 2 weeks */
    font-weight: 700 !important
}
.return-due-critical {
    color: #dc3545 !important; /* red blinking — less than 1 week */
    font-weight: 700 !important;
    animation: blink-anim 1s step-start infinite !important
}
/* Keep old class as alias for backward compatibility */
.return-due-urgent {
    color: #dc3545 !important;
    font-weight: 700;
    animation: blink-anim 1s step-start infinite
}

@keyframes pulse {

    0%,
    100% {
        background: #ffeb3b
    }

    50% {
        background: #ffd700
    }
}

td[contenteditable=true] {
    cursor: default;
    min-width: 50px
}

/* CHANGE NEW-10: hovering a single cell must NOT change its color — only the full-row blue overlay applies.
   Remove the yellow highlight on contenteditable cells. Focus still shows the blue outline. */
td[contenteditable=true]:hover {
    background: transparent;
    outline: none
}

td[contenteditable=true]:focus {
    background: #fff;
    outline: 2px solid #007bff;
    cursor: text
}

td:nth-child(1) {
    cursor: default;
    user-select: none
}

td:nth-child(1):hover {
    /* req 4: no single-cell highlight — background handled by row hover */
    outline: none !important
}

td:nth-child(2):hover {
    /* req 4: no single-cell highlight */
    text-decoration: underline
}

select {
    width: 100%;
    padding: 0 2px; /* CHANGE NEW-3 (v47): was 2px 4px — reduce vertical padding for 20px rows */
    font-size: 10px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background: 0 0;
    height: 18px; /* CHANGE NEW-3 (v47): explicit height keeps rows at 20px */
    line-height: 1
}

select:focus {
    outline: 2px solid #007bff;
    border-color: #007bff
}

tr.free-item select {
    background: 0 0;
    font-weight: 600
}

.photo-cell {
    position: relative;
    cursor: pointer;
    padding: 2px !important
}

.photo-thumbnail {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    display: block;
    margin: 0 auto
}

.photo-preview {
    display: none;
    position: fixed;
    z-index: 9999;
    max-width: 200px;
    max-height: 200px;
    border: 3px solid #007bff;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    pointer-events: none
}

.photo-cell:hover .photo-preview {
    display: block
}

.photo-upload-btn {
    background: #17a2b8;
    color: #fff;
    border: none;
    padding: 4px 8px;
    font-size: 9px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    margin-top: 2px
}

.photo-upload-btn:hover {
    background: #138496
}
.no-photo {
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
    margin: 0 auto
}

.btn {
    font-size: 11px;
    padding: 3px 6px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 1px;
    white-space: nowrap
}

.btn:hover {
    background: #0056b3
}

.btn-success {
    background: #28a745
}

.btn-success:hover {
    background: #1e7e34
}

.btn-danger {
    background: #dc3545
}

.btn-danger:hover {
    background: #c82333
}

.btn-link {
    background: #6c757d
}

.btn-info {
    background: #17a2b8
}

.btn-info:hover {
    background: #138496
}

.btn-warning {
    background: #ffc107;
    color: #000
}

.btn-warning:hover {
    background: #e0a800
}

.action-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap
}

/* ITEM 10: action icon buttons — compact emoji/icon buttons for the Action column */
.act-btn {
    background: none;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    padding: 1px 3px;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0
}

.act-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd
}

.act-btn.act-active {
    background: #007bff;
    border-color: #0056b3;
    color: #fff
}

.action-btn-x {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0
}

.action-btn-x:hover {
    background: #c82333
}

.action-btn-v {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0
}

.action-btn-v:hover {
    background: #218838
}

.action-comment {
    flex: 1;
    padding: 2px 4px;
    font-size: 9px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    min-width: 60px;
    max-width: 100px
}

.action-wait {
    flex: 1;
    padding: 2px 4px;
    font-size: 9px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background: #fff3cd;
    min-width: 60px;
    max-width: 100px
}

.save-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    display: none;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.version-banner {
    background: #6c757d;
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap
}

.version-banner .version-info {
    font-weight: 600
}

.version-banner .deploy-date {
    opacity: 0.9;
    font-size: 10px
}

.sortable.asc::after {
    content: ' ▲';
    font-size: 10px
}

.sortable.desc::after {
    content: ' ▼';
    font-size: 10px
}

.link-buttons {
    display: flex;
    gap: 2px;
    flex-wrap: wrap
}

/* req14: new-msg indicator — not clickable, default cursor */
.msg-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #666;
    cursor: default
}

.msg-indicator.has-msg {
    background: #e80000; /* CHANGE NEW-9: bright red (was black #000) */
    border-color: #e80000 /* CHANGE NEW-9: bright red */
}

.msg-icon {
    font-size: 16px;
    cursor: pointer;
    color: #007bff;
    transition: all .2s
}

.msg-icon:hover {
    transform: scale(1.2);
    color: #0056b3
}

.clickable-icon {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all .2s;
    position: relative
}

.clickable-icon:hover {
    transform: scale(1.2)
}

.clickable-icon .icon-tooltip {
    visibility: hidden;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 99999;
    font-weight: 400;
    pointer-events: none;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.clickable-icon .icon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent
}

.icon-yes {
    color: #28a745
}

.icon-no {
    color: #dc3545
}

.icon-amazon {
    color: #17a2b8
}

.icon-seller {
    color: #ffc107
}

.clear-all-btn .btn-tooltip {
    visibility: hidden;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 99999;
    font-weight: 400;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.clear-all-btn .btn-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent
}

.clear-all-btn:hover .btn-tooltip {
    visibility: visible;
    bottom: calc(100% + 8px);
    top: auto
}

.archive-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer
}

.duplicate-seller {
    background: #ffeb3b !important;
    font-weight: bold
}
/* FIX 4: ensure yellow overrides even on cancelled/colored rows */
tr.row-cancelled .duplicate-seller,
tr.row-cancelled-full .duplicate-seller,
tr.row-cancelled-seller .duplicate-seller,
tr.row-cancelled-me .duplicate-seller,
tr.row-delivered-action-x .duplicate-seller,
tr.row-transit .duplicate-seller,
tr.row-arriving .duplicate-seller,
tr.row-consegnato-free .duplicate-seller,
tr.row-returned-full-refund-purple .duplicate-seller,
tr.row-to-pickup .duplicate-seller,
tr.row-return-request .duplicate-seller,
tr.row-return-completed .duplicate-seller,
tr.row-pink .duplicate-seller {
    background: #ffeb3b !important;
    color: #212529 !important;
    font-weight: bold
}

.copy-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #28a745;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    animation: fadeInOut 1.5s ease-in-out
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8)
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8)
    }
}

tfoot tr {
    background: #b8bfc6 !important;
    color: #212529 !important;
    font-weight: 700;
    font-size: 13px
}

tfoot td {
    background: #b8bfc6 !important;
    color: #212529 !important;
    border-color: #a0a8b0 !important;
    padding: 5px 6px !important
}

tfoot .footer-label {
    font-size: 13px;
    font-weight: 700;
    color: #212529 !important
}

.footer-sum {
    font-weight: 700;
    color: #1a5c1a !important
}













/* WhatsApp send button — same base style as add-row-btn/clear-all-btn */
.whatsapp-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    white-space: nowrap;
    background: #25d366
}

.whatsapp-btn:hover {
    background: #1da851
}

/* ── CHANGE 1: Telegram silent-send button ── */
.telegram-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    white-space: nowrap;
    background: #229ed9
}

.telegram-btn:hover {
    background: #1a7db0
}

.telegram-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed
}

/* ── CHANGE 2: Hard refresh button ── */
.refresh-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    white-space: nowrap;
    background: #6c757d
}

.refresh-btn:hover {
    background: #545b62
}

/* CHANGE A (item 2): Settings icon button — same size/style as refresh-btn */
.settings-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    white-space: nowrap;
    background: #5a6268
}

.settings-btn:hover {
    background: #3d4246
}

/* ITEM 2: icon-action — bare icon spans replacing button wrappers for refresh/settings/clear.
   Font size 24px = ~2× the default 12px button icon size. Cursor pointer, hover darkens. */
.icon-action {
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    user-select: none;
    transition: background 0.15s;
}

.icon-action:hover {
    background: rgba(0,0,0,0.08);
}

/* ── CHANGE 3: Parse / trigger extension button ── */
.parse-btn {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    white-space: nowrap;
    background: #fd7e14
}

.parse-btn:hover {
    background: #dc6502
}

.parse-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed
}

/* FIX #2: Parse button hover tooltip */
.parse-hover-tip {
    line-height: 1.5;
    text-align: left;
}

/* FIX #2: Parse progress bar shown below button row during active parsing */
#_parseProgressBar {
    margin-top: 4px;
    min-width: 120px;
}

/* CHANGE 6: Answer Assistant panel */
#_answerPanel {
    max-height: 260px;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

/* CHANGE NEW-3: price-overpaid — refunded > total → dark green (was yellow) */
td.price-overpaid-yellow {
    background: #1a7a1a !important;
    color: #fff !important;
    font-weight: 700
}

/* CHANGE 3: price-both-zero-green — both total and refunded are 0 */
td.price-both-zero-green {
    background: #00e676 !important;
    color: #000 !important;
    font-weight: 700
}

/* CHANGE 9: Reset button — compact, icon same size as others, width -40% */
.stat-box-remove-filters {
    min-width: 0 !important;
    max-width: 55px !important;
    padding: 4px 6px !important;
    flex: 0 0 auto !important;
}
.stat-box-remove-filters .stat-text {
    display: none !important;
}

/* CHANGE 13: Cancelled by seller — slightly different shade of dark grey */
.row-cancelled-seller,
.row-cancelled-seller * {
    background: #e0e0e0 !important; /* FIX 2: even lighter grey for seller cancelled */
    color: #555 !important;
    opacity: 1;
    text-decoration: line-through
}
.row-cancelled-seller td.price-match-green {
    background: #00e676 !important;
    color: #000 !important;
    font-weight: 700
}

/* CHANGE 5: Mobile view — hides all table columns except the key ones */
body.mobile-view table {
    font-size: 11px;
}
body.mobile-view th,
body.mobile-view td {
    display: none;
}
/* CHANGE NEW-4: Visible columns: Mkt=2, Order#=6, Address=11, Total=13, Refunded=14, Photo=19, NewMsg=20, Msg=21, Seller=25
   (Photo col was missing — now added as nth-child(19)) */
body.mobile-view th:nth-child(2),  body.mobile-view td:nth-child(2),
body.mobile-view th:nth-child(6),  body.mobile-view td:nth-child(6),
body.mobile-view th:nth-child(11), body.mobile-view td:nth-child(11),
body.mobile-view th:nth-child(13), body.mobile-view td:nth-child(13),
body.mobile-view th:nth-child(14), body.mobile-view td:nth-child(14),
body.mobile-view th:nth-child(19), body.mobile-view td:nth-child(19), /* CHANGE NEW-4: Product Photo col */
body.mobile-view th:nth-child(20), body.mobile-view td:nth-child(20),
body.mobile-view th:nth-child(21), body.mobile-view td:nth-child(21),
body.mobile-view th:nth-child(25), body.mobile-view td:nth-child(25) {
    display: table-cell;
}

/* FIX 8: Cancelled by me — slightly lighter shade */
.row-cancelled-me,
.row-cancelled-me * {
    background: #f0f0f0 !important;  /* FIX 2: lightest - cancelled by me */
    color: #777 !important;
    opacity: 1;
    text-decoration: line-through
}
.row-cancelled-me td.price-match-green {
    background: #00e676 !important;
    color: #000 !important;
    font-weight: 700
}

/* FIX 10/11: search bar turns red outline when no results */
.search-input.search-no-results {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.20)
}

/* FIX 15: partial refund after delivery — highlight refund cell */
/* CHANGE NEW-1 (v47): border property removed entirely — refunded col shall NEVER have a red/orange border */
td.price-partial-refund-red {
    background: #ff8c00 !important;
    color: #fff !important;
    font-weight: 700 !important
}

/* CHANGE NEW-1 (v47): belt-and-suspenders — NO red border on refunded/mismatch cells, regardless of row class.
   Applies universally to every table row so nothing can override it. */
td.price-mismatch-red,
td.price-partial-refund-red {
    border-color: #dee2e6 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* FIX 14: Reset button shows ↺ icon + Reset label */
.stat-box-remove-filters .stat-text-reset {
    display: flex !important;
    flex-direction: column
}
.stat-box-remove-filters .stat-text-reset .label {
    font-size: 9px !important;
    opacity: .85
}

/* FIX 19: blinking cursor clearly visible on focus */
.search-input:focus {
    caret-color: #007bff
}

/* CHANGE NEW-4/5: mobile col overrides — main rule above covers all visible cols */

/* CHANGE NEW-8 (v49): totally hide .tab-links container in mobile view */
body.mobile-view .tab-links {
    display: none !important;
}

/* CHANGE NEW-5 (v46): in mobile view, do NOT show cell-hover-tip on photo column hover */
body.mobile-view td:nth-child(19) .product-preview,
body.mobile-view td.product-photo-cell .product-preview {
    display: none !important;
}

/* CHANGE NEW-6 (v46): in mobile view, product photo col min-width = 10vw, never shrinks below */
body.mobile-view th:nth-child(19),
body.mobile-view td:nth-child(19) {
    min-width: 10vw !important;
    width: 10vw !important;
}

/* CHANGE NEW-7 (v46): in mobile view, table rows max-height = 20vh, content clips */
body.mobile-view tbody tr {
    max-height: 20vh;
    overflow: hidden;
}
body.mobile-view tbody td {
    max-height: 20vh;
    overflow: hidden;
}

/* ITEM 3: Mobile view — compact icon-only filter buttons */
body.mobile-view .stats-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px
}
body.mobile-view .stat-box {
    flex: 0 0 auto !important;
    min-width: 38px !important;
    max-width: 50px !important;
    padding: 4px 2px !important;
    justify-content: center;
    gap: 0
}
body.mobile-view .stat-box .icon {
    font-size: 20px !important
}
body.mobile-view .stat-box .stat-text,
body.mobile-view .stat-box .stat-label,
body.mobile-view .stat-box .stat-values,
body.mobile-view .stat-box .stat-box-bottom .stat-values,
body.mobile-view .stat-box .filter-tooltip,
body.mobile-view .clear-archived-btn-small {
    /* req item 7 mobile: hide all text, show only icon */
    display: none !important
}
body.mobile-view .stat-box .stat-box-bottom {
    /* req item 7 mobile: icon-only — collapse the bottom row container */
    gap: 0;
    width: auto
}
body.mobile-view .stat-box-remove-filters {
    flex: 0 0 auto !important;
    min-width: 32px !important;
    max-width: 40px !important
}

.stat-box .stat-text {
    order: -1;
    width: 100%
}
.stat-box .icon {
    order: 0;
    font-size: 20px !important;
    margin-top: 2px
}
.stat-box .label {
    font-size: 11px;
    font-weight: 700;
    display: block;
    width: 100%;
    margin-bottom: 1px
}

/* FIX 8: action column cycling button + mini indicator row */
.act-cycler {
    font-size: 16px !important;
    min-width: 28px;
    padding: 2px 4px !important;
    margin-bottom: 2px
}
.act-mini-row {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 1px
}
.act-mini {
    font-size: 10px;
    cursor: pointer;
    opacity: 0.35;
    padding: 0 1px;
    border-radius: 2px;
    user-select: none;
    transition: opacity .15s
}
.act-mini:hover {
    opacity: 0.75
}
.act-mini.act-mini-on {
    opacity: 1;
    background: rgba(0,0,0,0.1);
    border-radius: 2px
}

/* req13: msg-time-see column — fixed 90px */
.msg-time-see-cell {
    min-width: 90px;
    max-width: 90px;
    width: 90px;
    white-space: nowrap
}

/* CHANGE NEW-6 (v48): A-Z warranty column — fixed 20px, between MsgTimeSee and Prio */
.az-warranty-cell,
th[data-col="azw"],
th[data-col="azw"] + th { /* cascade protection */ }

/* A-Z warranty column uses nth-child(23) since it's inserted after col 21 (MsgTimeSee = nth-child(22)) */
th:nth-child(23),
td:nth-child(23) {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    text-align: center;
    padding: 1px
}

/* req7: action column — fixed 31px cell, no overflow */
.action-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden
}


/* CHANGE NEW-10 (v56): chkd column cell */
.chkd-cell {
    text-align: center;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    padding: 1px !important;
    font-size: 13px;
    user-select: none
}
.chkd-cell:hover {
    /* Only shows pointer cursor when clickable — set inline */
}

/* CHANGE NEW-11 (v56): gold row when chkd is activated */
tr.row-got-it-free-gold {
    background: #FFD700 !important;
    font-weight: 600
}
tr.row-got-it-free-gold td {
    background-color: rgba(255, 215, 0, 0.85) !important
}