/* theme-blue.css - Soft Blue Theme for Attex */

:root {
    /* === Base Colors === */
    --ct-primary: #5b9bd5;
    --ct-primary-rgb: 91, 155, 213;
    --ct-link-color: #5b9bd5;
    --ct-link-hover-color: #1e88e5;

    --ct-success: #81c784;
    --ct-success-rgb: 129, 199, 132;
    --ct-info: #4fc3f7;
    --ct-info-rgb: 79, 195, 247;
    --ct-warning: #ffd54f;
    --ct-warning-rgb: 255, 213, 79;
    --ct-danger: #e57373;
    --ct-danger-rgb: 229, 115, 115;

    --ct-body-bg: #f4f9ff;
    --ct-body-color: #3c4a5b;
    --ct-heading-color: #2a3b4c;

    /* === Topbar === */
    --ct-topbar-bg: #dceeff;
    --ct-topbar-item-color: #3c4a5b;
    --ct-topbar-item-hover-color: #1e88e5;
    --ct-topbar-user-bg: #eaf4ff;
    --ct-topbar-user-border: #d0e8ff;

    /* === Sidebar Menu === */
    --ct-menu-bg: #e3f2fd;
    --ct-menu-item-color: #3c4a5b;
    --ct-menu-item-hover-color: #1e88e5;
    --ct-menu-item-active-color: #1565c0;
    --ct-menu-condensed-link-bg: #bbdefb;
    --ct-help-box-bg: #5b9bd5;

    /* === Buttons === */
    --ct-btn-bg: var(--ct-primary);
    --ct-btn-hover-bg: #1e88e5;
    --ct-btn-border-color: #5b9bd5;
    --ct-btn-hover-border-color: #1e88e5;
    --ct-btn-color: #fff;

    /* === Cards, Alerts, Tables === */
    --ct-card-bg: #f0f8ff;
    --ct-card-border: #c9e2f5;
    --ct-alert-bg: #e3f2fd;
    --ct-alert-border: #bbdefb;
    --ct-alert-color: #3c4a5b;
    --ct-table-header-bg: #d0e8ff;
    --ct-table-row-hover: #edf7ff;

    /* === Forms === */
    --ct-input-bg: #f5faff;
    --ct-input-border: #c9e2f5;
    --ct-input-focus: #1e88e5;
    --ct-input-color: #2a3b4c;

    /* === Misc === */
    --ct-border-color: #c9e2f5;
    --ct-box-shadow: 0 0 15px rgba(91, 155, 213, 0.2);
    --ct-focus-ring-color: rgba(91, 155, 213, 0.3);
}

/* Optional override classes */
.btn-primary {
    background-color: var(--ct-btn-bg);
    border-color: var(--ct-btn-border-color);
    color: var(--ct-btn-color);
}
.btn-primary:hover {
    background-color: var(--ct-btn-hover-bg);
    border-color: var(--ct-btn-hover-border-color);
}

.alert-primary {
    background-color: var(--ct-alert-bg);
    color: var(--ct-alert-color);
    border-color: var(--ct-alert-border);
}

.card {
    background-color: var(--ct-card-bg);
    border-color: var(--ct-card-border);
    box-shadow: var(--ct-box-shadow);
}

.table thead {
    background-color: var(--ct-table-header-bg);
    color: #2a3b4c;
}
.table-hover tbody tr:hover {
    background-color: var(--ct-table-row-hover);
}

input.form-control,
select.form-control,
textarea.form-control {
    background-color: var(--ct-input-bg);
    border-color: var(--ct-input-border);
    color: var(--ct-input-color);
}
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--ct-input-focus);
    box-shadow: 0 0 0 0.2rem var(--ct-focus-ring-color);
}

html[data-menu-color="light"],
html[data-menu-color="dark"],
html[data-menu-color="brand"] {
    --ct-menu-bg: #1565c0;  /*左侧导航背景*/
    /*--ct-menu-bg: #0d47a1;*/
    /*--ct-menu-bg: #0a2e75;*/
    --ct-menu-item-color: #e3f2fd;
    --ct-menu-item-hover-color: #90caf9;
    --ct-menu-item-active-color: #ffffff;
}
