.button-bg-maroon {
    background-color: #d81b60;
    color: #fff;
    border: 2px solid transparent; /* Transparent border to prevent layout shift */
    outline: none; /* Remove default browser focus outline */
    transition: all 0.3s ease;
}

    .button-bg-maroon:hover {
        background-color: #b61651;
        color: #fff;
    }

    /* Add blue border on keyboard focus (tab selection) */
    .button-bg-maroon:focus {
        border: solid #0078D7 2px; /* Blue border */
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3); /* Optional: soft glow */
    }

/* Custom Control Styles */
.custom-control-input-maroon:checked ~ .custom-control-label::before {
    border-color: #b61651;
    background-color: #b61651;
}

.custom-control-input-maroon.custom-control-input-outline:checked[type="checkbox"] ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23dc3545' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !important;
}

.custom-control-input-maroon.custom-control-input-outline:checked[type="radio"] ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23dc3545'/%3E%3C/svg%3E") !important;
}

.custom-control-input-maroon:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.custom-control-input-maroon:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #efa2a9;
}

.custom-control-input-maroon:not(:disabled):active ~ .custom-control-label::before {
    background-color: #b61651;
    border-color: #b61651;
}

/* Table Styles */
.table.table-dt thead {
    background-color: #d81b60 !important;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-dt tbody a.btn-delete,
.table-dt tbody a.btn-Edit {
    background-color: #d81b60 !important;
    color: #fff;
    cursor: pointer;
}

.table.table-dt thead tr th:first-child {
    border-radius: 10px 0 0 0;
}

.table.table-dt thead tr th:last-child {
    border-radius: 0 10px 0 0;
}

.table.table-dt {
    border-radius: 10px;
    overflow: hidden;
}

/* Header Styles */
.content-header h1.fm-header {
    font-weight: 600;
    color: #d81b60 !important;
    font-family: sans-serif;
}

.card-header .fm-fmheader {
    font-weight: 600;
    font-family: sans-serif;
    font-size: 21px;
    color: #d81b60 !important;
}

/* Table Text Styles */
.table.table-dt thead th {
    font-size: 15px;
    font-weight: 600;
    font-family: sans-serif;
}

.fm-form label.form-label {
    color: #000000 !important;
    font-size: 14px;
    font-family: sans-serif;
}

.table-dt tbody tr .form-control {
    height: 28px;
    font-size: 13px;
    width: 100%;
    font-weight: 600;
}

/* Card Styles */
.card-maroon:not(.card-outline) > .card-header {
    background-color: #d81b60;
}

    .card-maroon:not(.card-outline) > .card-header,
    .card-maroon:not(.card-outline) > .card-header a {
        color: #fff;
    }

        .card-maroon:not(.card-outline) > .card-header a.active {
            color: #1f2d3d;
        }

.card-maroon.card-outline {
    border-top: 3px solid #d81b60;
}

.card-maroon.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #b61651;
}

.card-maroon.card-outline-tabs > .card-header a.active,
.card-maroon.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid #b61651;
}

/* Tool Button Styles */
.bg-maroon > .card-header .btn-tool,
.bg-gradient-maroon > .card-header .btn-tool,
.card-maroon:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255, 255, 255, 0.8);
}

    .bg-maroon > .card-header .btn-tool:hover,
    .bg-gradient-maroon > .card-header .btn-tool:hover,
    .card-maroon:not(.card-outline) > .card-header .btn-tool:hover {
        color: #fff;
    }

/* Date Picker Styles */
.card.bg-maroon .bootstrap-datetimepicker-widget .table td,
.card.bg-maroon .bootstrap-datetimepicker-widget .table th,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table td,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget .table th {
    border: none;
}

.card.bg-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-maroon .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-maroon .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-maroon .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-maroon .bootstrap-datetimepicker-widget table td.second:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.second:hover {
    background-color: #b61651;
    color: #fff;
}

.card.bg-maroon .bootstrap-datetimepicker-widget table td.today::before,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff;
}

.card.bg-maroon .bootstrap-datetimepicker-widget table td.active,
.card.bg-maroon .bootstrap-datetimepicker-widget table td.active:hover,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active,
.card.bg-gradient-maroon .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #b61651;
    color: #fff;
}


.date-filter-container {
    position: absolute;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 4px 8px rgba(128, 0, 0, 0.3);
    border-radius: 5px;
    width: 200px;
}


.ag-theme-maroon {
    --ag-header-background-color: #d81b60;
    --ag-header-foreground-color: #fff;
    --ag-header-cell-hover-background-color: #b61651;
    --ag-header-cell-moving-background-color: #b61651;
    --ag-odd-row-background-color: rgba(0, 0, 0, 0.03);
    --ag-row-hover-color: rgba(216, 27, 96, 0.1);
    --ag-selected-row-background-color: rgba(216, 27, 96, 0.2);
    --ag-font-size: 14px;
    --ag-font-family: 'Segoe UI', sans-serif;
    --ag-border-radius: 8px;
    --ag-grid-border: 1px solid #e0e0e0;
    --ag-border-color: #e0e0e0;
    --ag-row-height: 40px;
    --ag-header-height: 45px;
    --ag-cell-horizontal-padding: 15px;
    --ag-cell-horizontal-border: 1px solid #f5f5f5;
}

    /* Root container */
    .ag-theme-maroon .ag-root-wrapper {
        border-radius: 10px;
        border: 1px solid var(--ag-border-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Header styling */
    .ag-theme-maroon .ag-header {
        font-weight: 600;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .ag-theme-maroon .ag-header-cell {
        padding-top: 0 !important;
    }

    .ag-theme-maroon .ag-header-cell-label {
        padding: 12px 0;
    }

    .ag-theme-maroon .ag-header-cell-text {
        font-weight: 600;
        color: var(--ag-header-foreground-color);
    }

    /* Hide filters */
    .ag-theme-maroon .ag-floating-filter-body,
    .ag-theme-maroon .ag-floating-filter-button,
    .ag-theme-maroon .ag-filter-toolpanel-header,
    .ag-theme-maroon .ag-filter-toolpanel-search {
        display: none !important;
    }

    /* Cell styling */
    .ag-theme-maroon .ag-cell {
        display: flex;
        align-items: center;
        color: #333;
        border-right: var(--ag-cell-horizontal-border);
        border-bottom: var(--ag-cell-horizontal-border);
    }

    .ag-theme-maroon .ag-cell-text {
        font-weight: 600;
        color: #333;
    }

    /* Selected row */
    .ag-theme-maroon .ag-row.ag-row-selected {
        background-color: var(--ag-selected-row-background-color);
    }

    /* Hover row */
    .ag-theme-maroon .ag-row:hover {
        background-color: var(--ag-row-hover-color);
    }

    /* No data overlay */
    .ag-theme-maroon .ag-overlay-no-rows-wrapper {
        font-size: 16px;
        padding: 20px;
        color: #666;
    }

    /* Status bar */
    .ag-theme-maroon .ag-status-bar {
        background-color: #f8f9fa;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 8px 15px;
        font-size: 13px;
        color: #555;
    }

    /* Sort icon colors */
    .ag-theme-maroon .ag-header-cell-sorted-asc .ag-icon.ag-icon-asc,
    .ag-theme-maroon .ag-header-cell-sorted-desc .ag-icon.ag-icon-desc {
        color: #fff;
        opacity: 0.8;
    }

    /* Action Buttons */
    .ag-theme-maroon .ag-cell-value .action-buttons-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .ag-theme-maroon .ag-cell-value .editbtn,
    .ag-theme-maroon .ag-cell-value .deletebtn,
    .ag-theme-maroon .ag-cell-value .printbtn,
    .ag-theme-maroon .ag-cell-value .pdfbtn,
    .ag-theme-maroon .ag-cell-value .whatsappbtn,
    .ag-theme-maroon .ag-cell-value .telegrambtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 16px;
        transition: all 0.2s ease;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    /* Specific Button Colors */
    .ag-theme-maroon .ag-cell-value .editbtn,
    .ag-theme-maroon .ag-cell-value .deletebtn,
    .ag-theme-maroon .ag-cell-value .pdfbtn {
        color: #d81b60;
    }

        .ag-theme-maroon .ag-cell-value .editbtn:hover,
        .ag-theme-maroon .ag-cell-value .deletebtn:hover,
        .ag-theme-maroon .ag-cell-value .pdfbtn:hover {
            color: #b61651;
            transform: scale(1.1);
        }

        .ag-theme-maroon .ag-cell-value .editbtn:hover,
        .ag-theme-maroon .ag-cell-value .deletebtn:hover,
        .ag-theme-maroon .ag-cell-value .pdfbtn:hover {
            color: #b61651;
            transform: scale(1.1);
        }


        .ag-theme-maroon .ag-cell-value .editbtn:focus,
        .ag-theme-maroon .ag-cell-value .deletebtn:focus,
        .ag-theme-maroon .ag-cell-value .pdfbtn:focus {
            border: solid #0078D7 2px; /* Blue border */
            transform: scale(1.1);
        }


    .ag-theme-maroon .ag-cell-value .printbtn {
        color: #555;
    }

        .ag-theme-maroon .ag-cell-value .printbtn:hover {
            color: #333;
            transform: scale(1.1);
        }

    .ag-theme-maroon .ag-cell-value .whatsappbtn {
        color: #25D366;
    }

        .ag-theme-maroon .ag-cell-value .whatsappbtn:hover {
            color: #128C7E;
            transform: scale(1.1);
        }

    .ag-theme-maroon .ag-cell-value .telegrambtn {
        color: #0088cc;
    }

        .ag-theme-maroon .ag-cell-value .telegrambtn:hover {
            color: #005f8c;
            transform: scale(1.1);
        }

    /* Text link style */
    .ag-theme-maroon .ag-cell-value .text-maroon {
        color: #d81b60;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .ag-theme-maroon .ag-cell-value .text-maroon:hover {
            color: #b61651;
            text-decoration: underline;
        }

    .ag-theme-maroon .ag-cell-default-style {
        font-weight: 600;
        text-align: center;
        color: #404040;
        font-family: sans-serif;
    }

.deletebtn, .editbtn, .printbtn, .pdfbtn, .whatsappbtn, .telgrambtn {
    font-size: 1.2em;
    margin-right: 10px;
    cursor: pointer;
}


.excel-table-container {
    overflow-x: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.excel-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: white;
}

    .excel-table th,
    .excel-table td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
        vertical-align: middle;
    }

    .excel-table th {
        background-color: #f1f1f1;
        color: #333;
        font-weight: bold;
    }

    .excel-table tbody tr:nth-child(odd) {
        background-color: #f7f7f7;
    }

    .excel-table tbody tr:hover {
        background-color: #eaf3ff;
    }

    .excel-table tfoot td {
        background-color: #f1f1f1;
        font-weight: bold;
        text-align: right;
    }

    .excel-table .text-end {
        text-align: right;
    }