/* Professional banking palette (light theme) */
:root{
	--bg: #f6f9fc;          /* page background */
	--surface: #ffffff;      /* cards */
	--surface-2: #f2f6fb;    /* headers/inputs */
	--text: #172b4d;         /* primary text */
	--muted: #6b778c;        /* secondary text */
	--brand-1:#0b5ed7;       /* primary brand (blue) */
	--brand-2:#2b6cb0;       /* gradient partner */
	--border:#d8e2ee;        /* borders */
}
body{background:var(--bg);color:var(--text)}
.navbar{background:linear-gradient(90deg,var(--brand-2),var(--brand-1))}
.card{background:var(--surface);border-color:var(--border)}
.card-header{background:var(--surface-2);border-bottom-color:var(--border)}
.table{color:var(--text)}
.table thead.table-light{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border)!important}
.table thead{color:#2b3e55}
.table tbody tr:hover{background:#f7fbff}
.list-group-item{background:var(--surface);color:var(--text);border-color:var(--border)}
.form-control,.form-select{background:#fff;color:var(--text);border-color:var(--border)}
.form-control::placeholder{color:#8aa0b5}
.form-control:focus,.form-select:focus{border-color:var(--brand-1);box-shadow:0 0 0 .25rem rgba(11,94,215,.25)}
footer{border-top:1px solid var(--border)}
.badge{font-weight:600}
#selectedAgentsEmpty{display:none}
.text-muted{color:var(--muted)!important}

/* Subtle animations */
.animate-in{animation:fadeIn .35s ease both}
.fade-in-up{animation:fadeInUp .45s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.lift-on-hover{transition:transform .15s ease, box-shadow .15s ease}
.lift-on-hover:hover{transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(0,0,0,.08)}

/* Simple avatar circle for agents */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e8eef7;color:#2b3e55;font-weight:700;font-size:.75rem}

/* Brand logo in navbar */
.brand-logo{display:inline-block;width:28px;height:28px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.12)}

/* Mobile polish */
@media (max-width: 576px){
	.navbar .badge{font-size:.65rem;padding:.25rem .4rem}
	.brand-logo{width:24px;height:24px}
	.avatar{width:24px;height:24px;font-size:.7rem}
	.card-header h5, .card-header h6{font-size:1rem}
	.table{font-size:.9rem}
	.btn{font-size:.9rem}
	.lift-on-hover:hover{transform:none;box-shadow:none}
}
/* Better table wrapping on narrow screens */
.table td, .table th{vertical-align:middle}
.table .text-nowrap{white-space:nowrap}
.table-responsive{overflow-x:auto}