/*
* rs-header.css — Retail Solutions Unified Header Theme
* -------------------------------------------------------
* Include as the LAST stylesheet in every page's :
*
*
* SAFE DESIGN:
* - Only targets elements and their children
* - !important used ONLY on visual properties (background, shadow, border)
* so appearance is always consistent regardless of page-specific styles
* - Does NOT touch: layout, z-index, padding, JS, forms, tables, modals
* - Adding this file to a page cannot break its functionality
*/
/* ── Brand tokens ─────────────────────────────────────── */
:root {
--rs-blue-900: #0b2e6f;
--rs-blue-700: #0f4fb9;
--rs-blue-600: #1f67d2;
--rs-blue-100: #dbeafe;
}
/* ── Bar: background / shadow / border ONLY (visual-safe) */
header,
header.hero-bar,
header.mie-header,
header.header {
background: linear-gradient(110deg, var(--rs-blue-900), var(--rs-blue-700)) !important;
border-bottom: 1px solid var(--rs-blue-700) !important;
box-shadow: 0 12px 28px rgba(15, 79, 185, 0.16) !important;
}
/* ── Title / heading ──────────────────────────────────── */
header h1,
header h2,
header .hero-h1,
header .rs-hero-title,
header .page-title {
color: #ffffff !important;
}
header h1 i,
header h2 i,
header .hero-h1 i,
header .rs-hero-title i {
color: var(--rs-blue-100) !important;
}
/* ── Subtitle / description ───────────────────────────── */
header .rs-hero-subtitle,
header .hero-subtitle {
color: rgba(255, 255, 255, 0.82) !important;
}
/* ── Stat labels & values (portal/sms-reports pattern) ── */
header .stat-label,
header .hero-stat-label,
header .stat-display .stat-label,
header .header-stats .stat-label {
color: rgba(255, 255, 255, 0.86) !important;
}
header .stat-value,
header .hero-stat-value,
header .header-stats .stat-value {
color: #ffffff !important;
}
/* ── User email / signed-in labels ───────────────────── */
header #userEmailLabel,
header #navUserLabel,
header #userBadgeText {
color: #ffffff !important;
}
/* ── User badge chip ──────────────────────────────────── */
header #userBadge {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
color: #ffffff !important;
}
header #userBadge i {
color: #ffffff !important;
}
/* ── Record summary / pill chips ─────────────────────── */
header .tag,
header #recordSummary,
header .hero-title,
header .header-badge {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
color: #ffffff !important;
}
/* ── Logo size (leave layout to page; only ensure min) ── */
header .header-logo,
header .hero-logo {
height: 80px;
width: auto;
}
/* ── Outline buttons in header ────────────────────────── */
header .btn-outline-light {
border-color: rgba(255, 255, 255, 0.55);
color: #ffffff;
background: transparent;
}
header .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
/* ghost / plain buttons in header (RS_S pages) */
header button.ghost {
border-color: rgba(255, 255, 255, 0.45);
color: #ffffff;
background: transparent;
}
/* ── Nav/anchor links inside header ──────────────────── */
header .header-link,
header a.header-link {
color: rgba(255, 255, 255, 0.78);
}
header .header-link:hover,
header a.header-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
/* ── Status badges in header ──────────────────────────── */
header .badge.bg-secondary {
background: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
/* ── MIE / specialty header text ─────────────────────── */
header.mie-header h1,
header.mie-header span,
header.mie-header p {
color: #ffffff !important;
}