/* ej2-custom-theme.css */

/* 1. Define your brand palette as CSS variables */
:root {
    --brand-dark-blue: #083e70;
    --brand-blue: #1070de;
    --brand-dark-grey: #2d4047;
    --brand-grey: #547785;
    --black: #000000;
    --white: #ffffff;
}

/* 2. Syncfusion “primary” overrides */
.e-theme-override .e-primary,
.e-appbar.e-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--white) !important;
}

/* 3. AppBar title and user info */
.appbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
}

.user-info {
    margin-left: .5rem;
    color: var(--white);
}

/* 4. Sidebar styling */
.sidebar-theme {
    background-color: var(--white);
}

    .sidebar-theme .e-sidebar-item {
        color: var(--brand-dark-grey);
        font-weight: 500;
    }

        .sidebar-theme .e-sidebar-item.e-active,
        .sidebar-theme .e-sidebar-item:hover {
            background-color: var(--brand-blue);
            color: var(--white);
        }

    .sidebar-theme .e-icons {
        font-size: 1rem;
        color: var(--brand-dark-blue);
    }

/* 5. Main content area */
.content-area {
    padding: 1.5rem;
    background-color: var(--white);
    min-height: 100vh;
}

/* 6. Button overrides */
.e-btn.e-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: var(--white) !important;
}

/* 7. Typography & links */
body {
    font-family: 'Segoe UI', sans-serif;
    color: var(--black);
}

a {
    color: var(--brand-blue);
}

    a:hover {
        color: var(--brand-dark-blue);
    }

/* 8. DataTable (if still used) */
table.dataTable thead th {
    background-color: var(--brand-dark-blue) !important;
    color: var(--white) !important;
}

/* 9. Card headers for Syncfusion Cards */
.e-card .e-card-header.e-primary {
    background-color: var(--brand-dark-blue) !important;
    color: var(--white) !important;
}