:root {
    /* Base Dialog Variables */
    --zseb-card-bg: #f4f6f9;
    --zseb-card-border: #e0e5ed;
    --zseb-owner-color: #f94c80;
    --zseb-balance-color: #1c1c1e;
    --zseb-watermark-color: rgba(0, 0, 0, 0.03);
    /* Pocket State Colors */
    --zseb-color-daily: #10b981;
    --zseb-color-monthly-rolling: #3b82f6;
    --zseb-color-monthly-zero: #f59e0b;
    --zseb-color-standard: #64748b;
    --zseb-card-bg-opacity: 0.1;
    /* Transfer Selection Colors */
    --zseb-transfer-empty-border: #cbd5e1;
    --zseb-transfer-empty-bg: #f8fafc;
    --zseb-transfer-active-border: #3b82f6;
    --zseb-transfer-active-bg: #eff6ff;
}

/* ========================================= */
/* BASE MODAL & MOBILE STACK LAYOUT          */
/* ========================================= */

div.mud-dialog.zseb-dialog-modal {
    display: flex;
    flex-direction: column;
}

.zseb-dialog-modal .mud-dialog-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}

.zseb-dialog-grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
    height: 100%;
    overflow: hidden;
}

.zseb-dialog-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.zseb-dialog-scroll-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .zseb-dialog-scroll-body::-webkit-scrollbar {
        display: none;
    }

/* ========================================= */
/* MAIN PAGE (Zsebek.razor) LAYOUT STYLES    */
/* ========================================= */

.zseb-selection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

.zseb-elevated-zindex {
    position: relative;
    z-index: 105;
}

.zseb-card {
    --zseb-active-color: var(--zseb-color-standard);
    min-width: 200px;
    height: 100px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid color-mix(in srgb, var(--zseb-active-color) 30%, transparent);
    background-color: color-mix(in srgb, var(--zseb-active-color) calc(var(--zseb-card-bg-opacity) * 100%), #ffffff);
}

    .zseb-card:hover:not(.zseb-disabled) {
        transform: translateY(-2px);
    }

.zseb-daily {
    --zseb-active-color: var(--zseb-color-daily);
}

.zseb-monthly.zseb-rollover-rolling {
    --zseb-active-color: var(--zseb-color-monthly-rolling);
}

.zseb-monthly.zseb-rollover-zero {
    --zseb-active-color: var(--zseb-color-monthly-zero);
}

.zseb-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(80%);
}

.zseb-bg-icon-watermark {
    position: absolute;
    bottom: -15px;
    right: -10px;
    font-size: 5rem;
    color: var(--zseb-active-color);
    opacity: 0.15;
    transform: rotate(-15deg);
    pointer-events: none;
}

.zseb-transfer-box-empty {
    height: 100px;
    border: 2px dashed var(--zseb-transfer-empty-border);
    background-color: var(--zseb-transfer-empty-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Chaining classes increases specificity, removing the need for !important */
div.zseb-transfer-box-empty:hover,
div.zseb-transfer-box-empty.zseb-active-selection {
    border-color: var(--zseb-transfer-active-border);
    background-color: var(--zseb-transfer-active-bg);
}

/* Utility sizing replacements from inline styles */
.zseb-skeleton-card {
    min-width: 200px;
}

.zseb-transfer-box-wrapper {
    max-width: 350px;
}

.zseb-transfer-controls {
    min-width: 100px;
}

.zseb-transfer-input {
    min-width: 140px;
}

/* ========================================= */
/* CARD TRANSFER COMPONENT                   */
/* ========================================= */
.zseb-transfer-select-container {
    max-width: 240px;
    min-width: 240px;
}

.zseb-transfer-title {
    letter-spacing: 1px;
}
/* ========================================= */
/* ZSEBCARD COMPONENT                        */
/* ========================================= */
.zseb-card-title {
    line-height: 1.2;
}

.zseb-remove-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .zseb-remove-btn:hover {
        opacity: 1;
    }

/* ========================================= */
/* HEADER CARD COMPONENT                     */
/* ========================================= */

.zseb-header-card {
    background-color: var(--zseb-card-bg);
    border: 1px solid var(--zseb-card-border);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.zseb-owner-name {
    color: var(--zseb-owner-color);
}

.zseb-balance-text {
    color: var(--zseb-balance-color);
    letter-spacing: -0.5px;
}

.zseb-badge-chip {
    height: 24px;
    font-size: 0.75rem;
    border-radius: 6px;
}

.zseb-header-watermark {
    position: absolute;
    right: -10px;
    bottom: -15px;
    font-size: 100px;
    color: var(--zseb-watermark-color);
    transform: rotate(-10deg);
    pointer-events: none;
}

/* ========================================= */
/* RESPONSIVE QUERIES                        */
/* ========================================= */

@media (max-width: 767px) {
    div.mud-dialog-container:has(.zseb-dialog-modal) {
        overflow: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        div.mud-dialog-container:has(.zseb-dialog-modal)::-webkit-scrollbar {
            display: none;
        }

        div.mud-dialog-container:has(.zseb-dialog-modal)::before {
            content: '';
            display: block;
            min-height: 60dvh;
            width: 100%;
            flex-shrink: 0;
            scroll-snap-align: start;
        }

    div.mud-dialog.zseb-dialog-modal {
        margin-top: 0;
        flex-shrink: 0;
        height: calc(100dvh - 20px);
        max-height: none;
        width: 100vw;
        max-width: 100vw;
        padding-bottom: env(safe-area-inset-bottom);
        animation: slideUp 0.3s cubic-bezier(0.2, 1, 0.3, 1) forwards;
        scroll-snap-align: start;
    }

    @keyframes slideUp {
        from {
            transform: translateY(40px);
        }

        to {
            transform: translateY(0);
        }
    }
}

@media (min-width: 768px) {
    .zseb-dialog-grid-wrapper {
        display: grid;
        grid-template-columns: 4fr 6fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header transactions"
            "termekek transactions";
        column-gap: 24px;
        row-gap: 16px;
    }

    .zseb-dialog-scroll-body {
        display: contents;
    }

    .zseb-dialog-header {
        grid-area: header;
    }

    .zseb-sticky-header {
        position: sticky;
        top: -1px;
        z-index: 10;
        background-color: var(--mud-palette-surface);
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .zseb-dialog-items {
        overflow-x: hidden;
        grid-area: termekek;
        overflow-y: auto;
        padding-right: 8px;
    }

        .zseb-dialog-items .mud-chip {
            max-width: 100%;
        }

        .zseb-dialog-items .mud-chip-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

    .zseb-dialog-transactions {
        grid-area: transactions;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;
        border-left: 1px solid var(--mud-palette-divider);
        padding-left: 24px;
        padding-right: 8px;
    }

        .zseb-dialog-items::-webkit-scrollbar,
        .zseb-dialog-transactions::-webkit-scrollbar {
            width: 6px;
        }

        .zseb-dialog-items::-webkit-scrollbar-track,
        .zseb-dialog-transactions::-webkit-scrollbar-track {
            background: transparent;
        }

        .zseb-dialog-items::-webkit-scrollbar-thumb,
        .zseb-dialog-transactions::-webkit-scrollbar-thumb {
            background-color: var(--mud-palette-divider);
            border-radius: 4px;
        }
}