﻿/* JitMail AdminKit Custom CSS - Complete Version with Card Header Fix */

/* Light Theme Overrides */
:root {
    /* Primary Brand Colors */
    --bs-primary: #1b3c4d !important; /* JitMail Primary Blue */
    --bs-primary-rgb: 27, 60, 77 !important;
    --bs-primary-text-emphasis: #ffffff !important;
    --bs-primary-bg-subtle: #d9ecff !important;
    --bs-primary-border-subtle: #bacbe6 !important;
    /* Secondary Brand Colors */
    --bs-secondary: #43614f !important; /* JitMail Primary Green */
    --bs-secondary-rgb: 67, 97, 79 !important;
    --bs-secondary-text-emphasis: #ffffff !important;
    --bs-secondary-bg-subtle: #c8d4c8 !important;
    --bs-secondary-border-subtle: #a8b8a8 !important;
    /* Background and Text */
    --bs-body-bg: #f8f9fa !important; /* Light gray background */
    --bs-body-color: #1b3c4d !important; /* JitMail Primary Blue for text */
    /* Card Colors */
    --bs-card-cap-bg: #ffffff !important;
    --bs-card-bg: #ffffff !important;
    --bs-card-border-color: #dee2e6 !important;
    /* Navbar Colors */
    --bs-navbar-bg: #ffffff !important; /* White navbar */
    --bs-navbar-brand-color: #1b3c4d !important;
    --bs-navbar-color: #1b3c4d !important;
    /* Sidebar Colors for Light Theme */
    --bs-sidebar-bg: #f8f9fa !important; /* Light gray background for sidebar */
    --bs-sidebar-brand-bg: #1b3c4d !important;
    --bs-sidebar-brand-color: #ffffff !important;
    --bs-sidebar-link-color: #1b3c4d !important; /* Dark text for light background */
    --bs-sidebar-link-hover-color: #678ea2 !important;
    --bs-sidebar-link-active-color: #9fc3ad !important;
    /* Button Colors */
    --bs-btn-primary-bg: #1b3c4d !important;
    --bs-btn-primary-border: #1b3c4d !important;
    --bs-btn-primary-hover-bg: #0d2533 !important;
    --bs-btn-primary-hover-border: #0d2533 !important;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    --bs-body-bg: #121212 !important;
    --bs-body-color: #e0e0e0 !important;
    /* Sidebar Colors for Dark Theme */
    --bs-sidebar-bg: #1b3c4d !important; /* JitMail Primary Blue */
    --bs-sidebar-brand-bg: #1b3c4d !important;
    --bs-sidebar-brand-color: #ffffff !important;
    --bs-sidebar-link-color: #e0e0e0 !important; /* Light text for dark background */
    --bs-sidebar-link-hover-color: #678ea2 !important;
    --bs-sidebar-link-active-color: #9fc3ad !important;
    /* Card Colors for Dark Theme */
    --bs-card-bg: #1e1e1e !important;
    --bs-card-border-color: #333333 !important;
}

    /* ======================= */
    /*   TABLES – DARK STRIPE  */
    /* ======================= */

    /* Base background for all Bootstrap tables in dark theme */
    [data-theme="dark"] table.table tbody tr > * {
        background-color: #1b232b;
    }

    /* Striped rows in dark theme (odd rows a bit lighter) */
    [data-theme="dark"] table.table tbody tr:nth-child(odd) > * {
        background-color: #242e33;
    }

/* ======================= */
/*   GENERAL HOVER STYLES  */
/* ======================= */

/* Light theme – hover on full row for tables using hover/table-hover */
[data-theme="light"] table.hover tbody tr:hover > *,
[data-theme="light"] table.table-hover tbody tr:hover > *,
[data-theme="light"] table.dataTable.hover tbody tr:hover > * {
    background-color: rgba(0, 0, 0, 0.04) !important; /* light gray */
    cursor: pointer;
}

/* Dark theme – hover on full row for tables using hover/table-hover */
[data-theme="dark"] table.hover tbody tr:hover > *,
[data-theme="dark"] table.table-hover tbody tr:hover > *,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > * {
    background-color: rgba(255, 255, 255, 0.10) !important; /* light overlay */
    cursor: pointer;
}

/* ======================= */
/*    OTHER COMPONENTS     */
/* ======================= */

/* Light theme – card header text */
[data-theme="light"] .card-header.bg-primary h5 {
    color: #ffffff !important;
}

/* Sidebar */
.sidebar {
    background-color: var(--bs-sidebar-bg) !important;
}

.sidebar-link {
    color: var(--bs-sidebar-link-color) !important;
}

    .sidebar-link:hover {
        color: var(--bs-sidebar-link-hover-color) !important;
    }

    .sidebar-link.active {
        color: var(--bs-sidebar-link-active-color) !important;
        background-color: rgba(159, 195, 173, 0.2) !important;
    }
.sidebar-cta-content {
    background-color: inherit !important;
}
/* Navbar */
/*.navbar {
    background-color: var(--bs-navbar-bg) !important;
}*/

.navbar-brand {
    color: var(--bs-navbar-brand-color) !important;
}

/* Buttons */
/*.btn-primary {
    background-color: var(--bs-btn-primary-bg) !important;
    border-color: var(--bs-btn-primary-border) !important;
}

    .btn-primary:hover {
        background-color: var(--bs-btn-primary-hover-bg) !important;
        border-color: var(--bs-btn-primary-hover-border) !important;
    }*/

/* Typography with Larger Font Sizes */
body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

h1 {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

h2 {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

h3 {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

h4 {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

h5,
h6 {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.sidebar-brand-text {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.sidebar-link {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

.btn-lg.btn-primary {
    font-size: 1.1rem !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Input fields */
.form-control {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
}

/* Buttons (general) */
.btn {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    padding: 8px 16px !important;
}

/* Alerts */
.alert {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
}
/* ===================================== */
/*       GLOBAL TABLE BACKGROUNDS        */
/* ===================================== */

/* LIGHT THEME – table background */
[data-theme="light"] table.table {
    background-color: #ffffff !important;
}

/* DARK THEME – table background */
[data-theme="dark"] table.table {
    background-color: #161c22 !important;
}

/* DARK THEME – table row base (cells) */
[data-theme="dark"] table.table tbody tr > * {
    background-color: #1b232b;
}

/* DARK THEME – striped rows */
[data-theme="dark"] table.table tbody tr:nth-child(odd) > * {
    background-color: #242e33;
}
/* ===================================== */
/*    TABLE HEADERS USE CARD BG COLOR    */
/* ===================================== */
/* Table headers use the same background color as .bg-primary (AdminKit & Bootstrap) */
table.table thead th,
table.table thead td,
table.dataTable thead th,
table.dataTable thead td {
    background-color: rgba(var(--bs-primary-rgb), 1) !important;
    color: #ffffff !important;
}

