/* ====== 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);
    --active-nav: #626262;

    /* --- Dark Theme Chip Colors (Default) --- */
    --chip-create-bg: #1B2E1E; /* Deep muted green */
    --chip-create-text: #A5D6A7;
    --chip-read-bg: #1A2332; /* Deep muted blue */
    --chip-read-text: #90CAF9;
    --chip-update-bg: #2E2A1B; /* Deep muted gold */
    --chip-update-text: #FFF59D;
    --chip-delete-bg: #321A1A; /* Deep muted red */
    --chip-delete-text: #EF9A9A;
    --chip-view-bg: #261A32; /* Deep muted purple */
    --chip-view-text: #CE93D8;
}

.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);
    --active-nav: #aacbd2;

    /* --- Light Theme Chip Colors (Pastel) --- */
    --chip-create-bg: #E8F5E9; /* Very light pastel green */
    --chip-create-text: #2E7D32;
    --chip-read-bg: #E3F2FD; /* Very light pastel blue */
    --chip-read-text: #1976D2;
    --chip-update-bg: #FFFDE7; /* Very light pastel yellow */
    --chip-update-text: #FBC02D;
    --chip-delete-bg: #FFEBEE; /* Very light pastel red */
    --chip-delete-text: #C62828;
    --chip-view-bg: #F3E5F5; /* Very light pastel purple */
    --chip-view-text: #7B1FA2;
}

.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);
    --active-nav: #626262;
}

/* ====== 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);
    border-radius:200px !important;
}

    .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);
    border-radius: 200px !important;
}

    .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);
}

/* ====== MudBlazor Input Overrides ====== */

/* 1. Set the background and border radius of the input container */
.mud-input.mud-input-outlined {
    background-color: var(--paper-bg);
    transition: border-color 0.2s ease-in-out;
    border-radius: 16px !important;
}

/* 2. Target the border color and thickness */
.mud-input-outlined-border {
    border-color: var(--paper-border) !important; /* Or #313131 */
    border-width: 1px !important;
    border-radius: 14px !important;
}


/* 4. Handle the Focus State (Blue/Primary border when clicking) */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--primary-color) !important;
    border-width: 1.5px !important;
}

/* 5. Placeholder and Text Color styling */
.mud-input > input.mud-input-root::placeholder {
    color: var(--text-primary) !important;
}

/* Ensure the text inside matches your theme's primary text */
.mud-input > input.mud-input-root {
    padding-left: 16px !important;
    color: var(--text-primary) !important;
}
.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    color: var(--text-primary) !important;
}

.mud-drawer {
    border: 1px solid var(--paper-border);
    border-radius: 14px;
}

.mud-drawer .mud-drawer-content {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    background: var(--body-bg);
    border: 1px solid var(--paper-border);
    border-radius: 14px;
}


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



/* ====== 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;
    width:20px;
}
.cell-value
{
    width:20px
}

.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);
    }

.create-community-container {
    background: var(--body-bg) !important;
    color: var(--text-primary);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--paper-border);
    font-family: "Noto Kufi Arabic", sans-serif !important;
}
.mud-drawer .mud-drawer-content {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    background: var(--paper-bg);
    color: var(--active-text);
    font-size: 14px;
}

.action-btn-next {
    background: var(--primary-color) !important;
    color: var(--body-bg) !important;
    font-weight: bold;
    border-radius: 200px !important;
}

.action-btn-cancel, .action-btn-prev {
    color: var(--text-primary) !important;
    border: 1px solid var(--paper-border) !important;
    border-radius: 200px !important;
    text-transform: none;
}
.mud-picker-calendar .mud-day {
    color: var(--active-text) !important;
}
.mud-picker-calendar-header-day .mud-day-label {
    color: var(--active-text) !important;
}
.mud-popover.mud-popover-open {
    background-color: var(--body-bg) !important;
    color: var(--text-primary) !important;
}
.mud-list-item-icon {
    color: var(--active-text);
   
}
.mud-input > textarea.mud-input-root {
    color: var(--active-text) !important;
}
.mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed {
    width: 73px !important;
}