/* public/assets/css/master.css */

:root {
    /* =========================================
       1. THEME CONTROL CENTER (Edit these only)
       ========================================= */
    
    /* Main Branding Color (Buttons, Highlights, Links) */
    --brand-primary: #093F89;       /* Current Blue */
    --brand-primary-hover: #224abe; /* Darker Blue for hover */
     --brand-primary-text: #fff; 
    
    /* Sidebar Colors */
    --sidebar-bg: #031732;          /* Dark Navy */
    --sidebar-text: #94a3b8;        /* Muted Text */
    --sidebar-active: #3b82f6;      /* Active Menu Color */
    --sidebar-active-bg: rgba(59, 130, 246, 0.1);

    /* Header & Layout */
    --header-bg: #ffffff;
    --body-bg: #f8fafc;
    --title-color: #1e293b;         /* Dark text for headings */
	
	--cardheader-bg:#f1f1f1
}

/* =========================================
   2. APPLYING THEME TO BOOTSTRAP
   (This forces Bootstrap to use your colors)
   ========================================= */

/* Override Bootstrap Primary Button */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-text) !important;
}

.btn-primary:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

/* Override Bootstrap Text & Backgrounds */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

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

/* Headings */
h1, h2, h3, h4, h5, h6, .fw-bold {
    color: var(--title-color);
}

/* =========================================
   3. LAYOUT SPECIFIC OVERRIDES
   ========================================= */

/* Sidebar */
#sidebar {
    background: var(--sidebar-bg) !important;
}

#sidebar ul li a {
    color: var(--sidebar-text) !important;
}

#sidebar ul li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

#sidebar ul li.active > a {
    color: #ffffff !important;
    background: var(--sidebar-active-bg) !important;
    border-right: 4px solid var(--sidebar-active) !important;
}

/* Top Header */
.top-header-bar {
    background: var(--header-bg) !important;
}

 .card-header { background: var(--cardheader-bg); }