/* ====== Global Variables ====== */
:root {
    --color-primary: #19527C;
    --color-primary-dark: #163E5E;
    --color-primary-text: #ffffff;
    --color-secondary: #1D61C9;
    --color-secondary-dark: #174FA5;
    --color-secondary-text: #ffffff;
    --color-tertiary: #1F8E4D;
    --color-surface-text: #A3A3A3;
    --color-border: #E0E0E0;
    --color-custom-border: #CDCDCD;
    --color-hover-border: rgba(0, 0, 0, 0.08);
    --color-muted: #929292;
    --color-muted-dark: #555;
    --color-bg-body: #F6F8FA;
    --color-bg-paper: #FFFFFF;
    --color-bg-tabs: #EEF0F3;
    --color-text-primary: #19527C;
    --color-text-secondary: #171717;
    --color-text-tertiary: #1F8E4D;
    --color-valid: #26b050;
    --color-invalid: #e50000;
    --color-error-bg: #b32121;
    --color-tab-active: #192A56;
    --color-tab-inactive: #00000080;
    --color-tab-border-inactive: #0000001A;
    --color-tab-border-active: #1976d2;
    --color-hover-ripple-light: rgba(255, 255, 255, 1);
    --color-hover-ripple-dark: rgba(25, 42, 86, 0.2);
    --color-hover-ripple-secondary: rgba(29, 97, 201, 0.2);
    --color-table-bg-hover: rgba(0, 0, 0, 0.08);
    --color-header-cell: #353535;
    --color-background-cell: #F8FAFC;
    --color-chip-blue-background: #19527C1A;
    --color-chip-orange-background: #FFC1071A;
    --color-chip-orange-text: #FFC107;
    --color-chip-red-background: #FF0B0B2E;
    --color-chip-red-text: #5E0404;
    --color-chip-green-background: #E0F0E4;
    --color-chip-green-text: #045E22;
    --color-count-background: #E0F0FF;
    --color-chip-gray-text: #555;
    --color-chip-gray-background: #0000001A;
    --color-count-text: #007BFF;
    --font-small: 0.75rem; /* 12px */
    --font-medium: 0.875rem; /* 14px */
    --font-large: 1rem; /* 16px */
    --font-xlarge: 1.125rem; /* 18px */
    --padding-xsmall: 0.125rem; /* 2px */
    --padding-small: 0.25rem; /* 4px */
    --padding-mid: 0.375rem; /* 6px */
    --padding-medium: 0.5rem; /* 8px */
    --padding-large: 0.75rem; /* 12px */
    --padding-xlarge: 0.875rem; /* 14px */
    --padding-huge: 1rem; /* 16px */
    --padding-max: 1.125rem; /* 18px */
    --border-xsmall: 0.25rem; /* 4px */
    --border-small: 0.375rem; /* 6px */
    --border-medium: 0.5rem; /* 8px */
    --border-large: 0.75rem; /* 12px */
    --border-xlarge: 0.875rem; /* 14px */
    --border-huge: 1rem; /* 16px */
    --border-max: 1.25rem; /* 20px */
    --margin-mini: 0.25rem; /* 4px */
    --margin-small: 0.5rem; /* 8px */
    --margin-large: 1rem; /* 16px */
    --margin-xlarge: 1.25rem; /* 20px */
    --gap-mini: 0.25rem; /* 4px */
    --gap-small: 0.5rem; /* 8px */
    --gap-medium: 0.625rem; /* 10px */
    --gap-large: 1rem; /* 16px */
    --gap-xlarge: 1.25rem; /* 20px */
    --font-weight-small: 400;
    --font-weight-medium: 500;
    --font-weight-large: 600;
    --inspect-width: 7.5rem;
    --button-box-shadow: box-shadow: -1px -1px 1.9px 0px #839CED26 inset;
}

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

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

.btn-primary {
    color: var(--color-primary-text);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.custom-border {
    background-color: var(--color-custom-border);
    height: 1px;
    border-color: var(--color-custom-border);
}
.custom-paper {
    box-shadow: 0px 0px 40px 0px #0000001A;
    border-radius: var(--border-huge);
    background: var(--color-bg-paper);
    padding:var(--padding-huge);
    gap: var(--gap-large);
    display: flex;
    flex-direction: column;
    opacity: 1;
}
.custom-count {
    background-color: var(--color-count-background);
    color: var(--color-count-text);
    border-radius: var(--border-small);
}
.custom-small-paper {
    border-radius: var(--border-xlarge);
    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-secondary);
}

/* ====== MudBlazor Buttons (Primary & Secondary) ====== */
.mud-button-filled.mud-button-filled-primary {
    color: var(--color-primary-text);
    background-color: var(--color-primary);
    --mud-ripple-color: var(--color-hover-ripple-light);
}

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

.mud-button-text.mud-button-text-primary {
    color: var(--color-primary);
    --mud-ripple-color: var(--color-primary);
}

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

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

.mud-button-outlined.mud-button-outlined-primary {
    color: var(--color-tab-active);
    border-color: var(--color-tab-active);
    background-color: transparent;
    --mud-ripple-color: var(--color-hover-ripple-dark);
}

    .mud-button-outlined.mud-button-outlined-primary:hover {
        background-color: rgba(25, 42, 86, 0.08);
    }

.mud-button-outlined.mud-button-outlined-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background-color: transparent;
    --mud-ripple-color: var(--color-hover-ripple-secondary);
}

    .mud-button-outlined.mud-button-outlined-secondary:hover {
        background-color: rgba(29, 97, 201, 0.08);
    }

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

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

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

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

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

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

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

.mud-tab-slider {
    background: var(--color-tab-active);
}

.mud-tabs-tabbar-content {
    background-color: var(--color-bg-tabs);
}

.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 var(--color-valid);
}

.invalid {
    outline: 1px solid var(--color-invalid);
}

.validation-message {
    color: var(--color-invalid);
}

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

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

.mud-button-text {
    border-radius: var(--border-medium) !important;
    background-color: transparent !important;
    padding: var(--padding-small) !important;
}
.mud-input {
    position: relative;
    color: var(--mud-palette-text-primary);
    cursor: text;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    color-scheme: var(--mud-native-html-color-scheme);
    max-width: 460px !important;
    max-height: 40px !important;
    border-radius: 8px !important;
}
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ====== Error Boundary Styling ====== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,...yourData...) no-repeat 1rem/1.8rem, var(--color-error-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* ====== Table / Action Button Styling ====== */
.action-cell {
    padding: var(--padding-medium) !important;
    text-align: center;
}

.action-rounded-wrapper {
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-huge);
    padding: var(--padding-small) var(--padding-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .action-rounded-wrapper .mud-icon-button {
        padding: var(--padding-small);
        font-size: 20px;
        color: var(--color-muted-dark);
    }

    .action-rounded-wrapper:hover {
        box-shadow: 0 0 6px var(--color-hover-border);
    }

/* Fixed Table */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
}

.fixed-actions-table .mud-table-container {
    display: block;
    overflow-x: auto;
    position: relative;
    white-space: nowrap;
}

.fixed-actions-table .mud-table-root {
    table-layout: fixed;
    min-width: 1000px;
}

.fixed-action-column-cell {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mud-table-row:hover .fixed-action-column-cell {
    opacity: 1;
}

.action-icon {
    transition: transform 0.2s ease;
}

    .action-icon:hover {
        transform: scale(1.1);
    }

.fixed-action-column {
    min-width: 100px !important;
    width: 100px !important;
}

.action-icons {
    display: flex;
    gap: var(--gap-small);
}

/* ====== Tabs Custom ====== */
.tab-button {
    border-radius: 0 !important;
    text-transform: none;
    font-weight: var(--font-weight-medium);
    justify-content: center;
    border-bottom: 2px solid transparent;
}

    .tab-button.active-tab {
        border-bottom: 2px solid var(--color-tab-border-active);
        color: var(--color-tab-border-active) !important;
    }

    .tab-button.inactive-tab {
        border-bottom: 2px solid var(--color-tab-border-inactive);
        color: var(--color-tab-inactive) !important;
    }

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: var(--margin-small);
    border-radius: 50%;
    font-size: var(--font-small);
}

.active-count {
    background-color: #EAF1FB;
    color: #12709B;
}

.inactive-count {
    background-color: var(--color-tab-border-inactive);
    color: var(--color-tab-inactive);
}

/* ====== Hover Utility ====== */
.mud-secondary-hover:hover,
.hover\:mud-secondary-hover:hover {
    background-color: var(--color-secondary) !important;
    color: white !important;
    opacity: 0.1 !important;
}
.mud-alert-filled-warning
Specificity: (0,1,0) {
    color: var(--mud-palette-warning-text);
    font-weight: 500;
    background-color: var(--color-chip-red-background);
}