/* 
    Citi-Inspired Design System for ViserBank
    Colors: Blue (#003b70), Light Blue (#0076c0), Gray (#f4f4f4)
    Typography: Clean Sans-Serif
*/

:root {
    --citi-blue: #003b70;
    --citi-light-blue: #0076c0;
    --citi-red: #d92128;
    --citi-gray-bg: #f4f4f4;
    --citi-gray-text: #666666;
    --citi-dark-text: #333333;
    --citi-border: #e0e0e0;
    
    /* Override Template Variables */
    --base-h: 209;
    --base-s: 100%;
    --base-l: 22%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    
    --base-two-h: 203;
    --base-two-s: 100%;
    --base-two-l: 38%;
    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);

    --heading-font: "Roboto", sans-serif;
    --body-font: "Roboto", sans-serif;
}

body {
    background-color: var(--citi-gray-bg) !important;
    color: var(--citi-dark-text) !important;
    font-family: var(--body-font) !important;
}

/* Header & Navigation */
header, .header, .header-bottom {
    background-color: #fff !important;
    border-bottom: 3px solid var(--citi-blue) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.header-top {
    background-color: var(--citi-blue) !important;
    color: #fff !important;
}

.navbar-nav .nav-link {
    color: var(--citi-dark-text) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 14px;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--citi-light-blue) !important;
}

/* Cards & Containers */
.card, .custom--card {
    background-color: #fff !important;
    border: 1px solid var(--citi-border) !important;
    border-radius: 0px !important; /* Professional sharp corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    margin-bottom: 25px;
}

.card-header, .card-title {
    background-color: transparent !important;
    border-bottom: 1px solid var(--citi-border) !important;
    color: var(--citi-blue) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 15px 20px !important;
}

/* Buttons */
.btn--base, .btn-primary, .citi-btn {
    background-color: var(--citi-blue) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 2px !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn--base:hover {
    background-color: var(--citi-light-blue) !important;
    transform: translateY(-1px);
}

.btn--secondary {
    background-color: #fff !important;
    color: var(--citi-blue) !important;
    border: 1px solid var(--citi-blue) !important;
}

/* Inputs */
.form-control, .form--control {
    border: 1px solid var(--citi-border) !important;
    border-radius: 2px !important;
    padding: 12px 15px !important;
    background-color: #fff !important;
}

.form-control:focus {
    border-color: var(--citi-light-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 118, 192, 0.1) !important;
}

/* Dashboard Sidebar */
.sidebar-menu-wrapper {
    background-color: #fff !important;
    border-right: 1px solid var(--citi-border) !important;
}

.sidebar-menu .menu-item a {
    color: var(--citi-dark-text) !important;
    border-left: 4px solid transparent;
}

.sidebar-menu .menu-item.active a, .sidebar-menu .menu-item a:hover {
    background-color: var(--citi-gray-bg) !important;
    color: var(--citi-blue) !important;
    border-left: 4px solid var(--citi-blue);
}

/* Tables */
.table, .custom--table {
    background-color: #fff !important;
}

.table thead th {
    background-color: var(--citi-gray-bg) !important;
    color: var(--citi-blue) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-bottom: 2px solid var(--citi-border) !important;
}

.table tbody td {
    border-bottom: 1px solid var(--citi-border) !important;
    padding: 15px !important;
}

/* Badges */
.badge {
    border-radius: 2px !important;
    padding: 5px 10px !important;
    font-weight: 500 !important;
}

.badge--success { background-color: #28a745 !important; }
.badge--warning { background-color: #ffc107 !important; color: #000 !important; }
.badge--danger { background-color: var(--citi-red) !important; }

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
}

.breadcrumb-item.active {
    color: var(--citi-light-blue) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
    color: var(--citi-blue) !important;
    font-weight: 700 !important;
}

/* Custom Citi Bar */
.citi-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--citi-blue) 0%, var(--citi-light-blue) 100%);
    width: 100%;
}