:root{
	/* Light mode gradients and colors — restricted to requested families */
	/* PRIMARY BRAND */
	--navy-deep: #041226;        /* Deep Navy Blue (sidebar top) */
	--indigo-blue: #2E4EA1;     /* Indigo Blue (sidebar middle / header left) */
	--royal-muted: #2266A8;     /* Royal Blue (muted) */

	/* SECONDARY BLUES */
	--steel-blue: #4A7A9A;      /* Steel Blue (header right) */
	--slate-blue: #6E7C97;      /* Slate Blue (sidebar bottom) */
	--cool-blue-gray: #F3F7FA;  /* Cool blue-gray (content light) */

	/* ACCENTS (limited) */
	--soft-teal: #2AA89B;       /* Soft Teal (sparingly) */
	--muted-cyan: #2FA8B8;      /* Muted Cyan (sparingly) */
	--emerald-green: #2E8B57;   /* Emerald Green (success only) */

	/* STATUS */
	--success: #2E8B57;         /* Emerald */
	--warning: #E6A400;         /* Amber / soft */
	--error: #B33A3A;           /* Muted / rose red */

	/* UI surfaces */
	--bg-main: linear-gradient(180deg, #F3F7FA 0%, #FFFFFF 50%, #EEF6FB 100%); /* Cool Gray -> Off white -> Very light blue */
	--bg-sidebar: linear-gradient(180deg, var(--navy-deep) 0%, var(--indigo-blue) 55%, var(--slate-blue) 100%);
	--bg-header: linear-gradient(90deg, var(--indigo-blue) 0%, var(--steel-blue) 100%);
	--card-bg: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%); /* pure / frosted white */
	--card-bg-solid: #FFFFFF;

	--text-primary: #06263F;    /* deep slate for headings/body */
	--muted: #6C757D;
	--primary-500: var(--royal-muted);
	--primary-600: #155a87;
	--radius: 14px;

	/* subtle content overlays using allowed blue family (very low opacity) */
	--content-overlay: radial-gradient(1000px 300px at 8% 8%, rgba(46,78,161,0.03), transparent 18%), radial-gradient(800px 240px at 92% 92%, rgba(74,122,154,0.02), transparent 10%);
}

[data-theme='dark']{
	/* Dark mode equivalents — using requested dark families */
	--navy-midnight: #02101a;    /* Midnight Blue */
	--dark-navy: #061428;       /* Dark Navy */
	--charcoal-blue: #0B1B2B;   /* Charcoal Blue */

	--bg-main: linear-gradient(180deg, #0B1016 0%, #071018 55%, #041018 100%); /* Charcoal Gray / near-black (not #000) */
	--bg-sidebar: linear-gradient(180deg, #02101a 0%, #061428 55%, #0B1B2B 100%); /* Midnight -> dark navy -> charcoal blue */
	--bg-header: linear-gradient(90deg, #13161a 0%, #2B2F36 100%); /* Slate black -> Gunmetal gray */
	--card-bg: linear-gradient(180deg, #0B141A 0%, #0F1922 100%);
	--card-bg-solid: #0B141A;

	--text-primary: #E6F0FF;    /* soft white */
	--muted: #AAB6C0;           /* light gray */
	--primary-500: #4A86D8;     /* softer primary for dark */
	--primary-600: #2B5EAA;
	--radius: 14px;
	--content-overlay: none;
}

html, body {
    height: 100%;
    margin: 0;
}

*{box-sizing:border-box}
.app-topbar{height:63px; backdrop-filter: blur(6px); background:linear-gradient(90deg, #a3a5a7 0%, var(--indigo-blue) 55%, var(--slate-blue) 100%); border-bottom:1px solid rgba(11,35,64,0.04); transition:background .3s ease}
[data-theme='dark'] .app-topbar{background:var(--bg-header); border-bottom:1px solid rgba(255,255,255,0.03)}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg-main); color:var(--text-primary); transition:background .25s ease,color .25s ease}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));box-shadow:0 6px 18px rgba(30,126,214,0.18)}
.brand-logo{width:180px;height:57px;border-radius:6px;object-fit:contain;display:inline-block}
.brand-text{font-weight:600;color:#d5d5d5}
.app-container{padding:20px}
.sidebar-panel{background:var(--bg-sidebar); border-radius:0px; min-height:100%; box-shadow: inset 0 -8px 24px rgba(14,52,100,0.02); color: #fff}
[data-theme='dark'] .sidebar-panel{background:var(--bg-sidebar); box-shadow:0 6px 24px rgba(2,8,20,0.6); color: #fff}
.sidebar-panel .nav-link{border-radius:10px; margin-bottom:6px; padding-left:14px}
.sidebar-panel .nav-link i{font-size:1.05rem}
.sidebar-panel .nav-link:hover{background:rgba(30,126,214,0.06); transform:translateX(6px)}
.sidebar-panel .nav-link.active{background:linear-gradient(90deg,var(--primary-500),var(--primary-600)); color:#fff}
.sidebar-brand .brand-name{font-weight:600}
.card{border-radius:16px; background:var(--card-bg); box-shadow:0 10px 30px rgba(11,35,64,0.06); transition:transform .2s ease, box-shadow .2s ease}
.card.hover-card:hover{transform:translateY(-8px); box-shadow:0 18px 40px rgba(11,35,64,0.12)}
.score-card{display:flex; gap:1rem; align-items:center}
.meter{width:220px; height:120px; position:relative; display:inline-block}
.meter .dial{width:100%; height:100%; border-radius:120px 120px 0 0; overflow:hidden; position:relative; display:flex; align-items:end; justify-content:center}
.meter .dial::before{content:''; position:absolute; inset:0; background: conic-gradient(#e55353 0deg, #f0b429 120deg, #2fcc71 210deg); transform: rotate(180deg)}
.meter .mask{position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:78%; height:60%; background:var(--card-bg-solid); border-radius:60px 60px 0 0}
.needle{position:absolute; left:50%; bottom:18px; width:3px; height:62px; background:var(--primary-600); transform-origin:bottom center; border-radius:2px; box-shadow:0 4px 10px rgba(30,126,214,0.24)}
.score-text{font-weight:700; color:var(--primary-600)}
.scroll-announcements{max-height:220px; overflow:auto; padding:0.75rem}
.small-muted{font-size:.85rem; color:var(--muted)}
.badge-status{padding:.45rem .6rem; border-radius:10px; font-weight:600}
.btn-ghost{background:transparent; border:1px solid rgba(11,35,64,0.06); color:var(--text-primary); padding:.3rem .6rem}
.btn-ghost:hover{box-shadow:0 6px 18px rgba(30,126,214,0.06)}
.table thead th{border-bottom:0}
.ticket-row:hover{background:rgba(30,126,214,0.03); transform:translateX(6px)}

/* animations */
.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* responsiveness */
@media(max-width:767px){ .sidebar-col{display:none} .app-container{padding:12px} }

.app-container{height: calc(100% - 63px); padding:0px; background-image: var(--content-overlay); background-repeat:no-repeat}

/* Sidebar link states (refined for gradient sidebar) */
.sidebar-panel .nav-link{color:rgba(255,255,255,0.95)}
.sidebar-panel .nav-link:hover{transform:translateX(6px); box-shadow:0 8px 20px rgba(16,56,100,0.08); background:rgba(255,255,255,0.04)}
.sidebar-panel .nav-link.active{background:rgba(255,255,255,0.12); color:#fff}

/* Card borders and subtle elevation */
.card{border:1px solid rgba(11,35,64,0.04)}
[data-theme='dark'] .card{border:1px solid rgba(255,255,255,0.03)}

/* Ensure text color uses variable */
body, .sidebar-panel, .card, .nav-link, .brand-text{transition:color .25s ease}

/* Credit score module styles */
.cs-gauge { display:flex; align-items:center; justify-content:center }
.cs-score { font-size:28px; font-weight:700 }
.cs-small { font-size:12px; color:var(--muted) }
.cs-tab-card .card { border-radius:12px }