:root {
  --barq-sidebar: 15rem;
  --barq-navy: #061b43;
  --barq-navy-deep: #03122f;
  --barq-blue: #0787ff;
  --barq-blue-bright: #13a2ff;
  --tblr-primary: #0787ff;
  --tblr-primary-rgb: 7, 135, 255;
}
body { background: #f3f7fc; color: #12213b; }
a { color: #087fe9; }
.sidebar { width: var(--barq-sidebar); background: linear-gradient(180deg, var(--barq-navy) 0%, var(--barq-navy-deep) 100%); box-shadow: .5rem 0 2rem rgba(3, 18, 47, .12); }
.sidebar .container-fluid { min-height: 100vh; align-items: stretch; }
.sidebar .navbar-brand { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.sidebar .navbar-brand a { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.sidebar-brand-symbol { display: block; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; filter: drop-shadow(0 .2rem .45rem rgba(7,135,255,.2)); }
.bari-brand-symbol { display: grid; place-items: center; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: .65rem; color: #061b43; background: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: -.06em; box-shadow: 0 .25rem .8rem rgba(0,0,0,.18); }
.bari-full-brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--barq-navy); }
.bari-full-brand .bari-brand-symbol { color: #fff; background: linear-gradient(135deg, var(--barq-blue), var(--barq-blue-bright)); box-shadow: 0 .3rem .8rem rgba(7,135,255,.2); }
.bari-full-brand > span:last-child { display: grid; line-height: 1; }
.bari-full-brand strong { font-size: 1.45rem; letter-spacing: -.03em; }
.bari-full-brand small { margin-top: .35rem; color: #7183a0; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.brand-name { color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.brand-wordmark-frame { position: relative; display: block; width: 11.5rem; height: 3.25rem; overflow: hidden; }
.brand-wordmark { position: absolute; width: 21rem; max-width: none; height: auto; left: -4.9rem; top: -5.8rem; }
.auth-brand.text-center .brand-wordmark-frame, .card-body.text-center .brand-wordmark-frame { margin-inline: auto; }
.auth-brand h1 { color: var(--barq-navy); margin-top: .75rem; }
.sidebar .nav-link { border-radius: .65rem; margin: .16rem .6rem; transition: background-color .16s ease, transform .16s ease; }
.sidebar .nav-link:hover { background: rgba(19,162,255,.1); transform: translateX(2px); }
.sidebar .nav-link.active { background: linear-gradient(90deg, rgba(7,135,255,.28), rgba(19,162,255,.1)); box-shadow: inset 3px 0 0 var(--barq-blue-bright); }
.nav-link-icon { width: 1.75rem; display: inline-block; text-align: center; opacity: .85; }
.sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.top-header { min-height: 5rem; background: rgba(255,255,255,.92); border-bottom: 1px solid #dce7f4; backdrop-filter: blur(10px); }
.page-body { padding-bottom: 3rem; }
.card { border-color: #e0e9f4; border-radius: .8rem; box-shadow: 0 .25rem 1.2rem rgba(6, 27, 67, .055); }
.metric-card { border: 0; box-shadow: 0 .25rem 1.2rem rgba(6,27,67,.07); }
.btn-primary { background: linear-gradient(135deg, var(--barq-blue), var(--barq-blue-bright)); border-color: var(--barq-blue); box-shadow: 0 .3rem .8rem rgba(7,135,255,.2); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #0077e6, #078ee5); border-color: #0077e6; }
.form-control:focus, .form-select:focus { border-color: var(--barq-blue); box-shadow: 0 0 0 .2rem rgba(7,135,255,.12); }
.chart-wrap { position: relative; min-height: 285px; }
.chart-wrap canvas { max-height: 285px; }
.chart-fallback { overflow: auto; font-size: .8125rem; }
.chart-fallback table { width: 100%; border-collapse: collapse; }
.chart-fallback th, .chart-fallback td { padding: .35rem .5rem; border-bottom: 1px solid #e6e9ef; text-align: left; }
.charts-ready .chart-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.run-error { max-height: 32rem; overflow: auto; white-space: pre-wrap; word-break: break-word; color: inherit; }
.error-cell { max-width: 26rem; }
.error-detail td { border-top: 0; padding-top: 0; }
.empty-state { color: #667085; text-align: center; padding: 2.5rem !important; }
.message-content { display: block; max-width: 38rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.login-shell { min-height: 100vh; display: grid; align-items: center; padding: 2rem; background: radial-gradient(circle at 92% 5%, rgba(19,162,255,.13), transparent 30%), #eef4fb; }
.auth-card { border: 1px solid rgba(7,135,255,.13); box-shadow: 0 1.25rem 3rem rgba(6,27,67,.12); }
.login-layout { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(27rem, 1.1fr); width: min(68rem, 100%); min-height: 42rem; margin: auto; overflow: hidden; border: 1px solid rgba(6,27,67,.08); border-radius: 1.25rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(6,27,67,.16); }
.login-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 4rem; color: #fff; background: radial-gradient(circle at 100% 0, rgba(19,162,255,.35), transparent 38%), linear-gradient(145deg, #08285d, var(--barq-navy-deep)); }
.login-q { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 3rem; overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 .75rem 2rem rgba(0,0,0,.22); }
.login-q img { width: 5.2rem; height: 5.2rem; object-fit: contain; }
.bari-login-symbol { color: var(--barq-navy); font-size: 2.8rem; font-weight: 850; letter-spacing: -.08em; }
.login-kicker { margin-bottom: 1rem; color: #77c5ff; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.login-intro h1 { max-width: 26rem; margin: 0 0 1.25rem; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.035em; }
.login-intro p { max-width: 27rem; color: #c9daf2; font-size: 1.05rem; line-height: 1.7; }
.login-intro-footer { color: #9fb4d0; font-size: .78rem; letter-spacing: .04em; }
.login-intro-footer span { display: inline-block; width: 1.5rem; height: 2px; margin-right: .5rem; vertical-align: middle; background: var(--barq-blue-bright); }
.login-form-panel { display: grid; place-items: center; padding: 4rem; }
.login-form-wrap { width: min(24rem, 100%); }
.login-form-wrap h2 { margin-bottom: .5rem; color: var(--barq-navy); font-size: 1.75rem; letter-spacing: -.02em; }
.login-form-wrap .form-label { color: #243858; font-weight: 600; }
.login-security-note { margin: 2rem 0 0; color: #7a8ba5; font-size: .75rem; line-height: 1.5; text-align: center; }
@media (min-width: 992px) { .page-wrapper { margin-left: var(--barq-sidebar); } }
@media (max-width: 991.98px) { .sidebar { width: 100%; } .sidebar .container-fluid { min-height: auto; } .sidebar-footer { margin-top: 1rem !important; } .chart-wrap { min-height: 235px; } .login-layout { grid-template-columns: 1fr; width: min(34rem, 100%); } .login-intro { min-height: auto; padding: 2rem 2.5rem; } .login-intro h1, .login-intro p, .login-intro-footer { display: none; } .login-q { width: 3.25rem; height: 3.25rem; margin: 0 0 1rem; border-radius: .75rem; } .login-q img { width: 3.8rem; height: 3.8rem; } .login-kicker { margin: 0; } .login-form-panel { padding: 2.5rem; } }
@media (max-width: 575.98px) { .login-shell { padding: 0; background: #fff; } .login-layout { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; } .login-intro { padding: 1.5rem; } .login-form-panel { padding: 2rem 1.5rem 3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }