/* ====== Global Font and Background ====== */
html, body, * {
    font-family: "Noto Kufi Arabic", sans-serif !important;
    font-optical-sizing: auto;
}

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

:root {
    --primary-color: #aeca37;
    --primary-hover: #99b52e; /* darker shade for hover */
    --secondary-color: #1D61C9;
    --secondary-hover: #1550a3; /* darker shade for hover */
    --paper-bg: #171717;
    --paper-border: #313131;
    --text-primary: #FFFFFF;
    --text-secondary: #A3A3A3;
    --active-bg: #444444;
    --active-text: #FFFFFF;
    --body-bg: #0D0D0D;
    --success-color: #1F8E4D;
    --chip-bg: #1C1C1C;
    --table-striped: red;
    --divider-color: #828282;
    --mud-palette-table-striped: red !important;
    --scroll-shadow-color: rgba(13, 13, 13, 0.8); /* default (dark fallback) */
}

.light-theme {
    --primary-color: #006bb7;
    --primary-hover: #005a9c; /* darker blue */
    --secondary-color: #ff5722;
    --secondary-hover: #e64a19; /* deeper orange */
    --paper-bg: #FFFFFF;
    --paper-border: #E0E0E0;
    --text-primary: #0D0D0D;
    --text-secondary: #555555;
    --active-bg: #E6F0FA;
    --active-text: #0D0D0D;
    --body-bg: #F5F5F5;
    --success-color: #2E7D32;
    --chip-bg: #F0F0F0;
    --table-striped: rgba(0, 0, 0, 0.03);
    --divider-color: #666666;
    --mud-palette-table-striped: var(--body-bg) !important;
    --scroll-shadow-color: rgba(200, 200, 200, 0.8);
}

.dark-theme {
    --primary-color: #aeca37;
    --primary-hover: #93a42d; /* deeper lime green */
    --secondary-color: #1D61C9;
    --secondary-hover: #154a9e; /* darker royal blue */
    --paper-bg: #171717;
    --paper-border: #313131;
    --text-primary: #FFFFFF;
    --text-secondary: #A3A3A3;
    --active-bg: #444444;
    --active-text: #FFFFFF;
    --body-bg: #0D0D0D;
    --success-color: #1F8E4D;
    --chip-bg: #1C1C1C;
    --mud-palette-table-striped: var(--body-bg) !important;
    --divider-color: #828282;
    --scroll-shadow-color: rgba(13, 13, 13, 0.8);
}

/* ====== Links and Buttons ====== */
a, .btn-link {
    color: var(--primary-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* ====== Custom Paper ====== */
.custom-paper {
    color: var(--text-primary) !important;
    box-shadow: 0px 4px 13.6px 0px #0015420D;
    border-radius: 16px;
    background: var(--paper-bg);
    border: 1px solid var(--paper-border);
    padding: 16px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    opacity: 1;
}


/* ====== MudBlazor Buttons ====== */
.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--primary-color);
}

    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--primary-hover);
    }

.mud-button-filled.mud-button-filled-secondary {
    color: var(--mud-palette-primary-text);
    background-color: var(--secondary-color);
}

    .mud-button-filled.mud-button-filled-secondary:hover {
        background-color: var(--secondary-hover);
    }

.mud-button-outlined.mud-button-outlined-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
    --mud-ripple-color: rgba(25, 42, 86, 0.2);
}

.mud-button-outlined.mud-button-outlined-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: transparent;
    --mud-ripple-color: rgba(29, 97, 201, 0.2);
}

/* ====== Pickers ====== */
.mud-picker-calendar-container {
    background-color: var(--paper-bg);
}

.mud-picker-content {
    background-color: var(--paper-bg);
    color: var(--text-primary);
}

/* ====== MudBlazor Color Utilities ====== */
.mud-primary-text {
    color: var(--primary-color) !important;
}

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

.mud-tertiary-text,
.root.mud-palette-tertiary {
    color: var(--secondary-color) !important;
}

.mud-surface-text {
    color: var(--text-secondary) !important;
}

.mud-primary {
    background-color: var(--primary-color) !important;
}

/* ====== MudBlazor Tabs ====== */
.mud-tab.mud-tab-active {
    color: var(--secondary-color) !important;
    font-weight: bold;
}

.mud-tab-slider {
    position: absolute;
    background: var(--secondary-color);
}

.mud-tabs-tabbar-content {
    width: 100%;
    flex: 1 1 auto;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    background-color: #EEF0F3; /* can add var if themed */
}

.mud-tabs-transparent {
    background-color: transparent !important;
    box-shadow: none !important;
}

    .mud-tabs-transparent .mud-tabs-toolbar,
    .mud-tabs-transparent .mud-tabs-toolbar-inner,
    .mud-tabs-transparent .mud-tabpanel {
        background-color: transparent !important;
        box-shadow: none !important;
    }

/* ====== Content ====== */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ====== Validation States ====== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ====== Miscellaneous ====== */
.h-100 {
    height: 100%;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--text-secondary);
}



.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-color: #4a4a4a;
}
.mud-drawer .mud-drawer-content {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    background:var(--body-bg);
}

.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
div.mud-input-slot.mud-input-root {
    color: var(--text-primary);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--text-primary);
}

.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--text-secondary);
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--text-secondary);
}

/* ====== Icon Colors ====== */
.icon-green {
    color: var(--primary-color);
    width: 24px;
    height: 24px;
}

/* ====== Dialog ====== */
.mud-dialog {
    background-color: var(--paper-border) !important;
    border-radius: 12px;
    color: var(--text-primary) !important;
    padding: 16px;
}

/* ====== Action Buttons ====== */
.action-cell {
    padding: 8px !important;
    text-align: center;
}

.action-rounded-wrapper {
    background-color: var(--paper-bg);
    border: 1px solid var(--paper-border);
    border-radius: 16px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .action-rounded-wrapper .mud-icon-button {
        padding: 4px;
        font-size: 20px;
        color: var(--text-secondary);
    }