.views-account {
}

    /* Main white card */
    .views-account .content {
        background-color: #ffffff;
        border-radius: 14px;
        margin: 18px auto 24px;
        max-width: 1050px;
        padding: 28px;
        box-shadow: 0 10px 35px rgba(42, 21, 21, 0.12);
    }

    /* Inner content width */
    .views-account .PageContent {
        max-width: 900px;
        margin: 0 auto;
    }

    /* Totals row */
    .views-account .Rows > div:first-child {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .views-account .TotalBalance,
    .views-account .TotalSelected {
        background: #fff8f5;
        border: 1px solid #f0d1c6;
        border-radius: 12px;
        padding: 10px 16px;
        font-size: 16px;
        color: #2a1515;
        min-width: 180px;
        text-align: right;
    }

        .views-account .TotalBalance span,
        .views-account .TotalSelected span {
            font-weight: 700;
            color: #dc6b4a;
        }

    /* Info note */
    .views-account .AccountInfoNote {
        background: #fff8f5;
        border-right: 5px solid #dc6b4a;
        padding: 12px 16px;
        margin: 14px 0 20px;
        font-size: 14px;
        color: #3a2525;
        border-radius: 10px;
        line-height: 1.6;
    }

        .views-account .AccountInfoNote .note-icon {
            color: #dc6b4a;
            font-weight: bold;
            margin-left: 6px;
        }

    /* Table wrapper */
    .views-account .data-table-container {
        overflow-x: auto;
    }

    /* Desktop table */
    .views-account .hc-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid #ead7d2;
        border-radius: 14px;
        overflow: hidden;
    }

        /* Table header */
        .views-account .hc-table thead th {
            background: #2a1515;
            color: #ffffff;
            font-weight: 600;
            font-size: 15px;
            padding: 13px 12px;
            text-align: center;
            border-bottom: none;
        }

        /* Table body */
        .views-account .hc-table tbody td {
            padding: 12px 12px;
            font-size: 15px;
            color: #2a1515;
            text-align: center;
            border-bottom: 1px solid #f0e4e1;
            vertical-align: middle;
        }

        .views-account .hc-table tbody tr:last-child td {
            border-bottom: none;
        }

        .views-account .hc-table tbody tr:hover {
            background: #fff8f5;
        }

        /* Checkbox column */
        .views-account .hc-table tbody tr td:first-child {
            width: 44px;
        }

        .views-account .hc-table .fa-check-square,
        .views-account .hc-table .fa-square {
            font-size: 17px;
            cursor: pointer;
        }

        .views-account .hc-table .fa-check-square {
            color: #dc6b4a;
        }

        .views-account .hc-table .fa-square {
            color: #d9c8c4;
        }

    /* Clickable document reference */
    .views-account .Link,
    .views-account .clickable-document {
        color: #2a1515;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid rgba(220, 107, 74, 0.55);
    }

        .views-account .Link:hover,
        .views-account .clickable-document:hover {
            color: #dc6b4a;
            border-bottom-color: #dc6b4a;
        }

    /* Mobile cards */
    .views-account .CustomerOrderRowXS {
        background: #ffffff;
        border: 1px solid #ead7d2;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(42, 21, 21, 0.08);
    }

        .views-account .CustomerOrderRowXS .text-left {
            margin-bottom: 6px;
        }

        .views-account .CustomerOrderRowXS .fa-check-square-o,
        .views-account .CustomerOrderRowXS .fa-square-o {
            font-size: 20px;
            cursor: pointer;
        }

        .views-account .CustomerOrderRowXS .fa-check-square-o {
            color: #dc6b4a;
        }

        .views-account .CustomerOrderRowXS .fa-square-o {
            color: #d9c8c4;
        }

        .views-account .CustomerOrderRowXS .ReferenceDate {
            font-size: 15px;
            font-weight: 700;
            color: #dc6b4a;
            margin-bottom: 10px;
        }

        .views-account .CustomerOrderRowXS .DebitCredit {
            background: #fff8f5;
            border-radius: 12px;
            padding: 10px;
            margin-bottom: 12px;
        }

        .views-account .CustomerOrderRowXS .Amount {
            font-size: 17px;
            font-weight: 700;
            color: #2a1515;
        }

        .views-account .CustomerOrderRowXS .DebitOrCredit {
            font-size: 13px;
            color: #7a6460;
            margin-top: 4px;
        }

        .views-account .CustomerOrderRowXS .ReferenceBalance {
            border-top: 1px solid #f0e4e1;
            padding-top: 10px;
            margin-top: 10px;
        }

        .views-account .CustomerOrderRowXS .Title {
            font-size: 13px;
            color: #7a6460;
            margin-bottom: 4px;
        }

        .views-account .CustomerOrderRowXS .Reference {
            display: inline-block;
            color: #2a1515;
            font-weight: 700;
            cursor: pointer;
            border-bottom: 1px solid rgba(220, 107, 74, 0.55);
        }

            .views-account .CustomerOrderRowXS .Reference:hover {
                color: #dc6b4a;
                border-bottom-color: #dc6b4a;
            }

        .views-account .CustomerOrderRowXS .Details {
            background: #fff8f5;
            border-radius: 10px;
            padding: 10px;
            margin-top: 12px;
            font-size: 14px;
            color: #3a2525;
            line-height: 1.5;
        }

            .views-account .CustomerOrderRowXS .Details > div:first-child {
                font-weight: 700;
                color: #dc6b4a;
                margin-bottom: 4px;
            }

/* Responsive */
@media (max-width: 767px) {
    .views-account .content {
        margin: 10px;
        padding: 16px;
        border-radius: 12px;
    }

    .views-account .Rows > div:first-child {
        justify-content: stretch;
        gap: 10px;
    }

    .views-account .TotalBalance,
    .views-account .TotalSelected {
        width: 100%;
        min-width: 0;
        font-size: 15px;
    }

    .views-account .AccountInfoNote {
        font-size: 13px;
        padding: 10px 12px;
        margin: 12px 0 16px;
    }
}