/* 1. Define CSS Variables (Custom Properties) */
/* Default/Light values as fallback */
:root {
    --bg-main: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-surface: #FFFFFF;
    --text-primary: #2E3238;
    --text-secondary: #536170;
    --brand-primary: #F85149;
    --border-color: #E8E8E8;
    --accordion-bg-color: #F2F4F6;
    --icon-color: #0D1117; /* white icons */
    --border-secondary: #E0E0E0;
    --myagentpanel-bg-surface: #2E3238;
    --table-row__even: #FFFFFF;
    --table-row__odd: #dddddd;
    --footer-bg-color: #0D1117;
    --footer-text-primary: #F0F6FC;
    --footer-text-secondary: #8B949E;
    --modal-bg: #FFFFFF;
    --mdc-text-float-above-color: #FFFFFF;
    --sb-track: #FFFFFF;
    --sb-thumb: #536170;
    --selected-theme: #F2F4F6;
}

/* 2. Dark theme when [data-theme="dark"] is applied by JS */
[data-theme="dark"] {
    --bg-main: #0D1117;
    --bg-surface: #161B22;
    --bg-elevated: #21262D;
    --border-subtle: #30363D;
    --brand-primary: #F85149;
    --text-primary: #F0F6FC;
    --text-secondary: #8B949E;
    /*  Custom Theme */
    --myagentpanel-bg-surface: #161B22;
    --icon-color: #8B949E; /* white icons */
    --mdc-theme-on-surface: #161B22;
    --mdc-typography--headline6: #ffffff;
    --headline6-black: #ffffff;
    --mdc-text-field__bg-color: #8B949E;
    --mdc-typography--body1: #ffff;
    --modal-bg: #1e1e1e;
    --accordion-bg-color: #161B22;
    --border-secondary: #30363D;
    --table-row__even: #161B22;
    --table-row__odd: #0D1117;
    --placeholder-color: #484F58;
    --footer-bg-color: #21262D;
    --footer-text-primary: #F0F6FC;
    --footer-text-secondary: #8B949E;
    --sb-track: #161B22;
    --sb-thumb: #8B949E;
    --selected-theme: #0D1117;
}

/* 4. body Styling */
body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}
header {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
/* Apply to subtitle1 */
.mdc-typography--subtitle1 {
    color: var(--text-primary);
}

.mdc-typography--subtitle2 {
    color: var(--text-primary);
}

.mdc-typography--headline4 {
    color: var(--text-primary);
}
/* Apply to headline6 */
.mdc-typography--headline6 {
    color: var(--text-primary);
}

.mdc-typography--caption {
    color: var(--text-secondary) !important;
}

.backButton {
    --mdc-theme-headline6-primary-on-background: #536170 !important;
}


.mdc-tab .mdc-tab__text-label {
    color: var(--text-secondary); /* default/inactive */
}

.mdc-tab--active .mdc-tab__text-label {
    color: var(--text-primary); /* active tab */
}

.mdc-data-table__header-cell {
    background-color: var(--bg-elevated);
    color: var(--mdc-data-table-header-row-text-color);
    font-weight: 600;
    text-transform: uppercase;
}



.material-icons {
    color: var(--text-secondary);
}

    .material-icons:hover {
        color: var(--text-primary);
    }

.headline6-black {
    color: var(--headline6-black);
}


.mdc-text-field__icon--trailing {
    color: var(--mdc-text-field__icon--trailing); /* orange icon */
}

.mdc-text-field.mdc-text-field--outlined {
    background-color: var(--mdc-text-field__bg-color) !important;
}

.mdc-floating-label--float-above {
    color: var(--text-primary) !important;
}

input[type="radio"] {
    accent-color: var(--text-primary);
}


.mdc-typography--body1 {
    color: var(--mdc-typography--body1) !important;
}

.modal-dialog,
.modal-content {
    background-color: var(--modal-bg) !important;
}


/*-- Card-- */
.mdc-card, .mdc-card__actions {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

.my_card, .AutoPolicyCard, .helpercardmenu {
    border: 1px solid var(--border-secondary) !important;
}

.myagentpanel {
    background-color: var(--myagentpanel-bg-surface) !important;
    border: 1px solid var(--border-secondary) !important;
}

div.dt-container div.dt-layout-cell {
    padding: 0px !important;
}

.accordion {
    background-color: var(--accordion-bg-color) !important;
}

.border-radius-width-256, .border-radius {
    background-color: var(--bg-surface) !important;
}

.transaction-label {
    color: var(--text-secondary) !important
}

a .mdc-typography--subtitle1 {
    color: var(--text-secondary) !important
}

.mdc-list li a:hover .material-icons,
.mdc-list li a:hover .transaction-label {
    color: var(--text-primary) !important;
}

a:hover .material-icons,
a:hover .mdc-typography--subtitle1 {
    color: var(--text-primary) !important;
}
.mdc-list li:hover {
    background-color: var(--bg-elevated) !important;
}

.dt-info {
    color: var(--text-secondary) !important;
   
}

.mdc-card__actions a:hover,
.mdc-card:hover {
    background-color: var(--bg-elevated) !important;
}