* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f4f6f9; color: #333; }

/* ===== Login ===== */
#login-screen {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 100vh; gap: 24px;
}
#login-screen h1 { font-size: 1.8rem; color: #1a73e8; }
#login-screen p { color: #666; }

.hidden { display: none !important; }

/* ===== Header ===== */
header {
    background: #1a73e8; color: white; padding: 12px 24px;
    display: flex; align-items: center; gap: 16px;
}
header h1 { font-size: 1.3rem; flex: 1; }
.btn-profile {
    background: rgba(255,255,255,.18); border: none; color: white;
    padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.btn-profile:hover { background: rgba(255,255,255,.32); }
#user-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; display: inline-block; vertical-align: middle; }

/* ===== Notifikácie ===== */
#notif-bar {
    min-height: 0; background: #1a73e8;
    padding: 0 24px; display: flex; flex-direction: column; gap: 4px;
}
#notif-bar:empty { display: none; }
.notif-item {
    background: rgba(255,255,255,.15); color: white; border-radius: 6px;
    padding: 7px 12px; font-size: 0.82rem; display: flex; align-items: center;
    gap: 8px; animation: toastIn .3s ease-out;
}

/* ===== Controls ===== */
#controls {
    padding: 16px 24px; background: white; border-bottom: 1px solid #e0e0e0;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
/* Transparent wrappers on desktop — children behave as direct flex children */
.controls-filters, .controls-actions { display: contents; }
/* QR button is primary action — slightly larger */
#btn-qr { padding: 9px 20px; font-size: 0.95rem; }
select, input {
    padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 0.9rem; background: white;
}
input[type=search] { flex: 1; min-width: 200px; }

/* ===== Summary ===== */
#summary {
    padding: 12px 24px; background: #e8f0fe;
    display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.9rem;
}
.stat { display: flex; flex-direction: column; }
.stat span:first-child { font-weight: 600; font-size: 1.1rem; }
.stat span:last-child { color: #555; font-size: 0.8rem; }

/* ===== Table ===== */
.table-wrap { overflow-x: auto; padding: 16px 24px; }
table { width: 100%; border-collapse: collapse; background: white;
    border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
th { background: #1a73e8; color: white; padding: 10px 12px;
    text-align: left; font-size: 0.82rem; white-space: nowrap;
    cursor: pointer; user-select: none; }
th:hover { background: #1558c0; }
th.sort-asc::after { content: ' ▲'; font-size: 0.7rem; }
th.sort-desc::after { content: ' ▼'; font-size: 0.7rem; }
td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 0.83rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f0f4ff !important; }

/* Zebra striping */
.row-even td { background: #f7f9ff; }

/* Skupinové separátory */
.group-row > td { border-top: 2px solid #e0e4f0; }

/* Single/item-row: skrátiť dlhý text (napr. bankový popis) */
.item-row td:nth-child(4), tr:not(.group-row):not(.item-row) td:nth-child(4) {
    max-width: 220px; overflow-wrap: break-word; word-break: break-word;
}
/* Obchodník (col 3) — orezať na single riadkoch (bankové transakcie) */
tr:not(.group-row):not(.item-row) td:nth-child(3) {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== Badges ===== */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.cat-Potraviny   { background:#e8f5e9; color:#2e7d32; }
.cat-Elektronika { background:#e3f2fd; color:#1565c0; }
.cat-Domácnosť  { background:#fff3e0; color:#e65100; }
.cat-Drogéria   { background:#f3e5f5; color:#6a1b9a; }
.cat-Služby      { background:#e0f7fa; color:#00695c; }
.cat-default     { background:#f5f5f5; color:#555; }
.ai-cat          { border: 1.5px solid #7c4dff; }

a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

#loading { text-align: center; padding: 40px; color: #888; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    border: none; border-radius: 6px; font-size: 0.9rem; cursor: pointer;
    font-weight: 500; transition: background .2s; }
.btn-primary { background: #1a73e8; color: white; }
.btn-primary:hover { background: #1558c0; }
.btn-secondary { background: #e0e0e0; color: #333; }
.btn-secondary:hover { background: #ccc; }
.btn-success { background: #34a853; color: white; }
.btn-success:hover { background: #2d9249; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-del { background: none; border: none; color: #999; cursor: pointer;
    font-size: 1rem; padding: 4px 8px; border-radius: 4px; transition: all .2s; }
.btn-del:hover { color: #d32f2f; background: #fce4ec; }
.btn-info { background: #0097a7; color: white; }
.btn-info:hover { background: #00796b; }
.btn-ai { background: #7c4dff; color: white; }
.btn-ai:hover { background: #651fff; }
.btn-ai:disabled { background: #b39ddb; }
.btn-danger { background: #d32f2f; color: white; }
.btn-danger:hover { background: #b71c1c; }
.btn-sm { padding: 5px 12px; font-size: 0.82rem; }
.btn-blocek { background: none; border: none; border-radius: 6px;
    font-size: 1.25rem; padding: 4px 6px; cursor: pointer; color: #333;
    transition: background .15s; line-height: 1; display: inline-flex; align-items: center; }
.btn-blocek:hover { background: #f0f0f0; }
.doc-icon { font-size: 1.25rem; padding: 4px 5px; display: inline-flex;
    align-items: center; line-height: 1; border-radius: 6px;
    text-decoration: none; color: inherit; transition: background .15s; }
.doc-icon:hover { background: #f0f0f0; }

/* ===== Accordion ===== */
.group-row { cursor: pointer; background: #f8f9fa; }
.group-row:hover td { background: #e8f0fe; }
.group-row td { font-weight: 600; border-bottom: 2px solid #e0e0e0; }
.group-row .toggle { display: inline-block; width: 18px; font-size: 0.75rem;
    transition: transform .2s; transform: rotate(0deg); }
.group-row.expanded .toggle { transform: rotate(90deg); }
.item-row { display: none; }
.item-row.visible { display: table-row; }
.item-row td { padding-left: 28px; color: #555; font-size: 0.8rem; }
.item-row td:first-child { padding-left: 36px; }
.item-count { font-weight: 400; color: #888; font-size: 0.78rem; margin-left: 6px; }
.group-cats { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ===== Charts ===== */
#charts {
    display: flex; gap: 24px; flex-wrap: wrap;
    padding: 0 24px 32px; justify-content: center;
}
.chart-box {
    background: white; border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    padding: 16px; flex: 1 1 340px; max-width: 480px;
}
.chart-box h3 { font-size: 0.95rem; margin-bottom: 12px; color: #555; text-align: center; }

/* ===== Profile / Upload Modal ===== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1500;
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 52px 12px 16px;
}
.modal-overlay.hidden { display: none !important; }
.modal-overlay-center {
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-box {
    background: white; border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    width: 100%; max-width: 360px; overflow: hidden;
}
.modal-header {
    background: #1a73e8; color: white; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.95rem; font-weight: 600;
}
.modal-close {
    background: none; border: none; color: white; font-size: 1.4rem;
    cursor: pointer; line-height: 1; padding: 0 4px;
}
.modal-close:hover { opacity: .7; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.profile-section { display: flex; flex-direction: column; gap: 8px; }
.profile-label { font-size: 0.73rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.profile-input { padding: 9px 12px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 0.9rem; width: 100%; }
.profile-input:focus { outline: none; border-color: #1a73e8; }
.profile-logout { border-top: 1px solid #eee; padding-top: 12px; }
.support-modal-box { max-width: 420px; }
.support-modal-header { background: #1565c0; }
.support-modal-body { gap: 10px; }
.support-note { font-size: 0.85rem; color: #3b3b3b; }
.support-amounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.support-amount-btn.active {
    background: #1a73e8;
    color: #fff;
}
.support-payme-link {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.support-payme-qr {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    background: #f8fbff;
    border: 1px solid #dbe8ff;
    border-radius: 12px;
    padding: 12px;
}
.support-iban-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.support-iban {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.support-meta {
    color: #5f6368;
    font-size: 0.82rem;
}
.support-sticker-link {
    font-size: 0.82rem;
    color: #1565c0;
    font-weight: 600;
}
.support-disclaimer {
    font-size: 0.74rem;
    color: #8a8a8a;
}
.upload-btn-row { display: flex; gap: 8px; }
.upload-type-btn { flex: 1; justify-content: center; padding: 10px 4px; font-size: 0.85rem; }
.upload-text-section { display: flex; flex-direction: column; gap: 8px; }
#upload-text-input {
    width: 100%; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 0.85rem; resize: vertical; font-family: inherit; min-height: 100px;
}
#upload-text-input:focus { outline: none; border-color: #7c4dff; }
@media (max-width: 480px) {
    .modal-overlay { padding: 48px 0 0; align-items: flex-end; justify-content: center; }
    .modal-box { border-radius: 14px 14px 0 0; max-width: 100%; }
    .modal-overlay-center { align-items: flex-end; }
    .support-modal-box { border-radius: 14px 14px 0 0; }
    .support-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-iban-row { flex-direction: column; align-items: stretch; }
}

/* ===== QR Scanner Modal ===== */
#qr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px; padding: 16px; }
#qr-modal.hidden { display: none !important; }
#qr-reader { width: 280px; max-width: 90vw; border-radius: 8px; overflow: hidden; background: #000; }
#qr-reader video { width: 100%; border-radius: 8px; }
#qr-reader img { display: none !important; } /* schovaj defaultné logo html5-qrcode */
#qr-scan-status { color: #e0f7fa; font-size: 0.88rem; text-align: center;
    max-width: 380px; line-height: 1.4; }
.qr-manual-row { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.qr-manual-row input { flex: 1; font-size: 0.88rem; min-width: 0; }
#btn-qr-close { padding: 12px 24px; font-size: 0.95rem; font-weight: bold; background: #d32f2f; border-color: #d32f2f; color: #fff; }
#btn-qr-close:hover { background: #b71c1c; border-color: #b71c1c; }

/* ===== Receipt Modal ===== */
#receipt-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 16px; }
#receipt-modal.hidden { display: none !important; }
#receipt-content {
    background: #fffef8; border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
    max-width: 360px; width: 100%; max-height: 90vh; overflow-y: auto;
    font-family: 'Courier New', Courier, monospace; font-size: 0.82rem;
    padding: 20px 18px; color: #111; position: relative;
}
.rcpt-close { position: absolute; top: 8px; right: 10px; background: none; border: none;
    font-size: 1.3rem; cursor: pointer; color: #888; line-height: 1; }
.rcpt-close:hover { color: #333; }
.rcpt-center { text-align: center; }
.rcpt-bold { font-weight: 700; }
.rcpt-divider { border: none; border-top: 1px dashed #aaa; margin: 8px 0; }
.rcpt-divider-solid { border: none; border-top: 1px solid #888; margin: 8px 0; }
.rcpt-row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.rcpt-row-name { flex: 1; word-break: break-word; }
.rcpt-row-price { white-space: nowrap; }
.rcpt-indent { padding-left: 10px; color: #555; font-size: 0.77rem; }
.rcpt-total-row { display: flex; justify-content: space-between; font-weight: 700;
    font-size: 1rem; margin: 6px 0 2px; }
.rcpt-meta { font-size: 0.72rem; color: #666; text-align: center; margin: 2px 0; }
.rcpt-uid { font-size: 0.62rem; color: #888; text-align: center;
    word-break: break-all; margin-top: 4px; }
.rcpt-qr { display: flex; justify-content: center; margin: 10px 0 4px; }
.rcpt-qr canvas { border-radius: 4px; }

/* ===== Toast ===== */
#toast-container {
    position: fixed; top: 16px; right: 16px; z-index: 2000;
    display: flex; flex-direction: column; gap: 8px; max-width: 380px;
    pointer-events: none;
}
.toast {
    padding: 12px 16px; border-radius: 8px; color: white;
    font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,.3);
    animation: toastIn .3s ease-out;
    display: flex; align-items: center; gap: 8px; pointer-events: auto;
}
.toast-info    { background: #1a73e8; }
.toast-success { background: #34a853; }
.toast-warn    { background: #e65100; }
.toast-error   { background: #d32f2f; }
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* ===== Dialog ===== */
.dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2500;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialog-box {
    background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.3);
    max-width: 380px; width: 100%; padding: 24px; text-align: center;
}
.dialog-box h3 { margin: 0 0 8px; font-size: 1.1rem; color: #333; }
.dialog-box p { margin: 0 0 18px; font-size: 0.92rem; color: #555; line-height: 1.4; }
.dialog-box input[type="text"] {
    width: 100%; padding: 10px 12px; border: 1.5px solid #ccc; border-radius: 8px;
    font-size: 0.95rem; margin-bottom: 18px; box-sizing: border-box;
}
.dialog-box input[type="text"]:focus { outline: none; border-color: #1a73e8; }
/* Tag quick-select buttons in bulk tag dialog */
.tag-quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag-quick-btn {
    padding: 4px 12px; border: 1.5px solid #1a73e8; border-radius: 14px;
    background: #e8f0fe; color: #1a73e8; font-size: 0.82rem; cursor: pointer;
    transition: all .15s;
}
.tag-quick-btn:hover { background: #1a73e8; color: #fff; }
.dialog-btns { display: flex; gap: 10px; justify-content: center; }
.dialog-btns button {
    padding: 10px 24px; border: none; border-radius: 8px; font-size: 0.9rem;
    cursor: pointer; font-weight: 500;
}
.dialog-btn-ok { background: #1a73e8; color: #fff; }
.dialog-btn-ok:hover { background: #1557b0; }
.dialog-btn-cancel { background: #e0e0e0; color: #333; }
.dialog-btn-cancel:hover { background: #ccc; }

/* ===== Tags ===== */
.tag { display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 500; margin: 0 2px; }
.tag-internal { background: #fff3e0; color: #e65100; }
.tag-default  { background: #e8eaf6; color: #283593; }
.tag-ai       { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

/* ===== Tag filter ===== */
.tag-filter-wrap { position: relative; display: inline-block; }
.tag-filter-btn { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 0.9rem; background: white; cursor: pointer; white-space: nowrap; }
.tag-filter-btn:hover { border-color: #999; }
.tag-filter-drop { display: none; position: absolute; top: 100%; right: 0; z-index: 100;
    background: white; border: 1px solid #ccc; border-radius: 6px; min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 6px 0; margin-top: 4px; }
.tag-filter-drop.open { display: block; }
.tag-filter-drop label { display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.tag-filter-drop label:hover { background: #f5f5f5; }

/* ===== Checkbox / Selection ===== */
th.col-cb, td.col-cb { width: 36px; text-align: center; padding: 8px 4px; }
.row-cb, .group-cb, #selectAll { width: 16px; height: 16px; cursor: pointer; accent-color: #1a73e8; }
tr.selected > td { background: #e3f2fd !important; }
.group-row.selected > td { background: #bbdefb !important; }

/* ===== Bulk action bar ===== */
#bulk-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    background: #1a73e8; color: white; padding: 10px 24px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: 0 -2px 12px rgba(0,0,0,.3);
    animation: bulkBarIn .2s ease-out;
}
#bulk-bar .bulk-count { font-weight: 600; font-size: 0.95rem; margin-right: 8px; }
#bulk-bar .btn { font-size: 0.85rem; padding: 6px 14px; }
.btn-bulk-del { background: #d32f2f; color: white; }
.btn-bulk-del:hover { background: #b71c1c; }
.btn-bulk-tag { background: #f9a825; color: #333; }
.btn-bulk-tag:hover { background: #f57f17; color: white; }
.btn-bulk-clear { background: rgba(255,255,255,.2); color: white; }
.btn-bulk-clear:hover { background: rgba(255,255,255,.35); }
@keyframes bulkBarIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ===== Income section ===== */
#income-section h3 { padding: 16px 24px 0; margin: 0; font-size: 1.05rem; }
#income-summary {
    padding: 12px 24px; background: #e8f5e9;
    display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.9rem;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    /* Header */
    header { padding: 12px 16px; gap: 8px; }
    header h1 { font-size: 1.1rem; flex: 1; }
    .btn-profile { font-size: 0.78rem; padding: 5px 10px; }

    /* Controls */
    #controls { padding: 10px 12px; gap: 8px; }
    #controls select { font-size: 0.82rem; padding: 7px 8px; min-width: 0; flex: 1 1 auto; }
    #controls input[type=search] { min-width: 120px; font-size: 0.82rem; }
    .btn { padding: 7px 10px; font-size: 0.8rem; }

    /* Summary */
    #summary { padding: 8px 12px; gap: 8px; }
    .stat span:first-child { font-size: 0.9rem; }
    .stat span:last-child { font-size: 0.71rem; }

    /* Table */
    .table-wrap { padding: 8px; }
    th, td { padding: 6px 6px; font-size: 0.75rem; }
    .item-row td { font-size: 0.72rem; }
    .item-row td:first-child { padding-left: 22px; }
    /* Skrátiť dlhé popisy na mobile */
    .item-row td:nth-child(4),
    tr:not(.group-row):not(.item-row) td:nth-child(4) {
        max-width: 140px;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Schovaj menej dôležité stĺpce na mobile: Celkom, Zdroj, Tags */
    .col-h-mobile { display: none; }

    /* Charts */
    #charts { padding: 0 8px 24px; gap: 16px; }
    .chart-box { flex: 1 1 100%; max-width: 100%; }

    /* Bulk bar */
    #bulk-bar { padding: 8px 12px; gap: 8px; }
    #bulk-bar .bulk-count { font-size: 0.82rem; }
    #bulk-bar .btn { font-size: 0.78rem; padding: 5px 10px; }

    /* Toast */
    #toast-container { left: 8px; right: 8px; max-width: none; }

    /* Income */
    #income-section h3 { padding: 12px 12px 0; }
    #income-summary { padding: 8px 12px; gap: 8px; }

    /* Section headings */
    h3[style*="padding"] { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 480px) {
    /* Controls: two rows — filters row + actions row */
    #controls { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }

    /* Row 1: month | search | category */
    .controls-filters { display: flex; width: 100%; gap: 6px; align-items: center; }
    #monthSel  { flex: 3 1 0; min-width: 0; width: auto; }
    #search    { flex: 6 1 0; min-width: 0; width: auto; }
    #catFilter { flex: 3 1 0; min-width: 0; width: auto; }

    /* Row 2: QR | Foto | Nahraj | Tagy */
    .controls-actions { display: flex; width: 100%; gap: 6px; align-items: center; }
    .controls-actions .btn { flex: 1; justify-content: center; padding: 8px 4px; font-size: 0.82rem; }
    #btn-qr { flex: 1.4 !important; font-size: 0.88rem !important; padding: 9px 6px !important; }
    .controls-actions .tag-filter-wrap { flex: 1; }
    .tag-filter-btn { width: 100%; text-align: center; padding: 8px 4px; font-size: 0.82rem; }
    .tag-filter-drop { width: 100%; }

    /* Smaller header */
    header h1 { font-size: 1rem; }

    /* Summary: kompaktný horizontálny inline layout */
    #summary { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px; }
    #income-summary { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px; }
    .stat { flex-direction: row; align-items: baseline; gap: 4px; }
    .stat span:first-child { font-size: 0.88rem; }
    .stat span:last-child { font-size: 0.7rem; }
}

/* ===== Expiry badge (header) ===== */
.btn-expiry {
    background: rgba(255,255,255,.18); border: none; color: white;
    padding: 5px 12px; border-radius: 20px; cursor: pointer;
    font-size: 0.88rem; font-weight: 500;
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    transition: background .2s;
}
.btn-expiry:hover { background: rgba(255,255,255,.32); }
.btn-expiry.btn-expiry-urgent { animation: expPulse 2s infinite; }
#expiry-badge-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ff3d00; color: white; border-radius: 10px;
    min-width: 18px; height: 18px; font-size: 0.72rem; font-weight: 700;
    padding: 0 4px;
}
@keyframes expPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,109,0,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(255,109,0,0); }
}

/* ===== Expiry Full-screen Panel ===== */
#expiry-panel {
    position: fixed; inset: 0; z-index: 800;
    background: #f4f6f9; display: flex; flex-direction: column;
    animation: expSlideIn .25s ease-out;
    overflow-y: auto;
}
#expiry-panel.hidden { display: none !important; }
@keyframes expSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.expiry-panel-header {
    background: #e65100; color: white;
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.expiry-panel-header h3 { margin: 0; font-size: 1.05rem; }

/* ===== Expiry table rows ===== */
#expiry-table { user-select: none; }
.exp-row {
    position: relative; overflow: hidden;
    transition: transform .15s, opacity .15s;
    cursor: default;
}
.exp-row:hover td { background: #f0f4ff; }

/* ===== Expiry status badges ===== */
.exp-status {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    cursor: pointer;
}
.exp-status-cell { cursor: pointer; }
.exp-today    { background: #fce4ec; color: #c62828; }
.exp-tomorrow { background: #fff3e0; color: #e65100; }
.exp-soon     { background: #fffde7; color: #f57f17; }
.exp-ok       { background: #e8f5e9; color: #2e7d32; }
.exp-expired  { background: #f5f5f5; color: #9e9e9e; text-decoration: line-through; }

.expiry-empty { text-align: center; padding: 32px; color: #888; }

/* ===== Inline date input ===== */
.exp-date-input {
    font-size: 0.82rem; padding: 4px 6px; border: 1.5px solid #1a73e8;
    border-radius: 6px; width: 140px; outline: none;
}

/* ===== Hover consume button (desktop) ===== */
.btn-exp-consume {
    display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: #34a853; color: white; border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 0.85rem; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: background .15s;
    line-height: 1; padding: 0;
}
.btn-exp-consume:hover { background: #2d9249; }
.exp-row:hover .btn-exp-consume { display: flex; align-items: center; justify-content: center; }

/* ===== Drag & drop ===== */
.exp-dragging { opacity: .35; background: #e3f2fd; }
.exp-drag-placeholder td {
    border: 2px dashed #1a73e8; background: #e8f0fe;
    text-align: center; padding: 6px; color: #1a73e8;
    font-size: 0.82rem; font-weight: 600;
}

@keyframes expRowHighlight {
    0%   { background: #ffe066; outline: 2px solid #f4a700; }
    30%  { background: #fff3cd; outline: 2px solid #f4a700; }
    100% { background: transparent; outline: 2px solid transparent; }
}
.exp-row-highlight { animation: expRowHighlight 5s ease-out forwards; }

/* ===== Mobile: expiry ===== */
@media (max-width: 768px) {
    .expiry-panel-header { padding: 10px 12px; }
    .expiry-panel-header h3 { font-size: 0.95rem; }
    #expiry-table th, #expiry-table td { font-size: 0.75rem; padding: 6px 6px; }
    .exp-merchant { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .exp-item { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}