/* QAZYNA BUSINESS — a calm, confident workspace for finance teams. */
:root {
  --canvas: #f5f4ee;
  --ink: #192a23;
  --ink-soft: #53665a;
  --muted: #89978d;
  --line: #e5e7dd;
  --white: #fffefa;
  --green: #1d6248;
  --green-dark: #164d39;
  --mint: #e8f1e8;
  --serif: "Montserrat", sans-serif;
  --sans: "Montserrat", sans-serif;
}

body { background: var(--canvas); }
.sidebar {
  width: 264px;
  padding: 28px 18px 18px;
  color: #f3f3e9;
  background: #173b2f;
  border-right: 0;
  box-shadow: 8px 0 28px #142e2510;
}
.brand { color: #fffdf5; padding: 0 10px 31px; }
.brand-mark { width: 38px; height: 38px; box-shadow: none; }
.brand-mark img { filter: brightness(0) invert(1); }
.brand-name { font-size:17px; letter-spacing: 1.2px; }
.brand-name span { color: #b5c9b6; }
.workspace-switch {
  margin-bottom: 31px;
  padding: 10px;
  border-color: #527160;
  background: #244b3c;
  color: #fbfcf5;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}
.workspace-avatar { background: #d4a95f; color: #20382c; }
.workspace-info b, .profile b { color: #fbfcf5; }
.workspace-info small, .profile small { color: #adc0b0; }
.chevron { color: #bacbbb; }
.nav-label { color: #9bb19f; letter-spacing: 1.5px; }
.nav-menu { gap: 5px; }
.nav-item {
  height: 43px;
  padding: 0 12px;
  color: #c2d0c4;
  border-radius: 10px;
  font-size:13.5px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-item:hover { background: #234a3b; color: #fff; transform: translateX(2px); }
.nav-item.active {
  color: #20392e;
  background: #e5c17d;
  box-shadow: 0 5px 14px #0c241a30;
}
.nav-icon, .active .nav-icon { color: inherit; opacity: .8; }
.nav-count { background: #3d624f; color: #eaf0e6; }
.sidebar-bottom > .nav-item { color: #c2d0c4; }
.sidebar-bottom > .nav-item:hover { color: white; }
.profile { border-color: #42604f; }
.profile-avatar { background: #dce6d9; color: #224632; }
.more { color: #b2c4b3; }

.main-content { margin-left: 264px; }
.topbar {
  height: 72px;
  padding: 0 48px;
  background: #fbfaf6;
  border-color: #e9e8df;
}
.breadcrumb { color: #89978d; font-size:12.5px; }
.breadcrumb b { color: #243a2f; font-weight: 700; }
.today { color: #75877b; font-size:12.5px; text-transform: capitalize; }
.theme-toggle {
  height: 35px;
  padding: 0 12px;
  border-radius: 9px;
  background: #f3f2eb;
  color: #53665a;
}
.page-content { max-width: 1510px; padding: 42px 48px 28px; }
.page-heading { margin-bottom: 28px; }
.eyebrow { color: #73877a; letter-spacing: 1.6px; }
.eyebrow-line { width: 22px; height: 2px; background: #bd9450; }
.page-heading h1 { font-size: 32px; letter-spacing: -1.3px; margin-top: 11px; }
.subtitle { color: #78877d; font-size:14.5px; }
.button { height: 42px; border-radius: 10px; font-size:13.5px; }
.button-primary { background: #1d6248; box-shadow: 0 5px 12px #1b5d4429; }
.button-primary:hover { background: #164d39; box-shadow: 0 7px 17px #1b5d4434; }
.button-secondary { border-radius: 10px; }
.stats-grid { gap: 15px; margin-bottom: 28px; }
.stat-card {
  min-height: 150px;
  padding: 19px 19px 15px;
  border-color: #e7e8df;
  border-radius: 15px;
  box-shadow: 0 6px 20px #1f34270a;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #a6c0a6;
  opacity: .85;
}
.stat-card:nth-child(2)::before { background: #d4aa5b; }
.stat-card:nth-child(3)::before { background: #91a9c6; }
.stat-card:nth-child(4)::before { background: #7da28a; }
.stat-card-sage { background: #eef2e9; }
.stat-top { color: #66766c; font-size:12.5px; }
.stat-icon { width: 28px; height: 28px; border-radius: 9px; font-size:13.5px; }
.stat-value { margin-top: 13px; font-size: 24px; letter-spacing: -.8px; }
.stat-foot { color: #89968d; font-size:11.5px; margin-top: 7px; }
.stat-card-link:hover, .stat-card-link:focus-visible {
  transform: translateY(-3px);
  border-color: #bdcdbd;
  box-shadow: 0 12px 28px #1f342711;
}
.work-panel {
  border-color: #e7e8df;
  border-radius: 15px;
  box-shadow: 0 6px 22px #1f342709;
}
.panel-heading { padding: 22px 24px 17px; }
.panel-heading h2 { font-size:17px; }
.panel-heading p { color: #87948a; font-size:12.5px; }
.search-box, .filter-button, .type-filter {
  height: 38px;
  border-color: #e4e7df;
  border-radius: 9px;
  background: #fffefa;
}
.search-box { padding: 0 12px; }
.table-wrap { border-color: #e8e9e1; }
.table-wrap thead { background: #f5f6f0; }
th { color: #77857a; letter-spacing: .07em; }
td { color: #405247; }
tbody tr:hover { background: #f7f8f2; }
.page-footer { padding-top: 18px; color: #8b988e; }

/* Sign in and registration share the same forest and warm-paper palette. */
.auth-screen { background: #fbfaf6; }
.auth-art {
  background:
    radial-gradient(ellipse at 78% 24%, #3c7656 0, transparent 37%),
    linear-gradient(150deg, #214d3a 0%, #153c2e 54%, #102e24 100%);
}
.auth-art:before, .auth-art:after { border-color: #d8bd7a35; }
.auth-art:after { border-color: #d8bd7a24; }
.auth-art-copy h1 { letter-spacing: -2.4px; }
.auth-kicker { color: #d3b46e; }
.auth-panel { background: #fbfaf6; }
.auth-form-wrap h2 { color: #1e382b; }
.auth-intro { color: #7c8a80; }
.auth-field { color: #405448; font-size:12.5px; }
.auth-field > input, .auth-password-wrap input {
  height: 48px;
  border-color: #e0e4da;
  border-radius: 10px;
  background: #fffefa;
  font-size:14.5px;
}
.auth-field > input:focus, .auth-password-wrap input:focus {
  border-color: #70937a;
  box-shadow: 0 0 0 4px #e7efe5;
}
.auth-form { gap: 19px; }
.auth-submit { height: 48px; border-radius: 10px; }
.auth-mobile-brand { color: #173b2f; }

[data-theme="dark"] .sidebar { background: #10271e; }
[data-theme="dark"] .nav-item.active { color: #20392e; background: #d8bd7a; }
[data-theme="dark"] .nav-item:hover { background: #234433; color: #fff; }
[data-theme="dark"] .brand-mark img { filter: brightness(0) invert(1); }
[data-theme="dark"] .page-heading h1 { color: #f2f6f1; }
[data-theme="dark"] .auth-kicker { color: #d3b46e; }

@media (max-width: 1120px) {
  .sidebar { width: 228px; }
  .main-content { margin-left: 228px; }
  .topbar { padding: 0 30px; }
  .page-content { padding: 34px 30px 24px; }
}
@media (max-width: 760px) {
  .sidebar { width: 65px; padding: 20px 9px 12px; }
  .brand-mark { width: 35px; height: 35px; }
  .nav-item.active { color: #20392e; background: #e5c17d; }
  .main-content { margin-left: 65px; }
  .topbar { height: 58px; padding: 0 15px; }
  .page-content { padding: 25px 15px 20px; }
  .page-heading h1 { font-size: 26px; }
  .stat-card { min-height: 132px; padding: 15px 13px 12px; border-radius: 12px; }
  .stat-value { font-size: 18px; }
  .work-panel { border-radius: 12px; }
  .panel-heading { padding: 16px 14px 13px; }
  .auth-panel { background: #fbfaf6; }
}

/* Navigation and overview refinement */
.nav-icon{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;color:#829188}
.nav-icon svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-item{gap:10px;transition:background-color .16s ease,color .16s ease}
.nav-item.active .nav-icon{color:var(--green)}
.nav-item:focus-visible{outline:2px solid #7dab8e;outline-offset:2px}
.stat-icon{flex:none}
.stat-icon svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
#overviewPage{padding-top:32px}
#overviewPage .page-heading{align-items:center;margin-bottom:22px}
#overviewPage .page-heading h1{font-size:32px;margin-top:10px}
#overviewPage .page-heading .button{height:40px;padding:0 16px;box-shadow:0 5px 12px #14563f20}
#overviewPage .stats-grid{gap:14px;margin-bottom:22px}
#overviewPage .stat-card{min-height:132px;padding:17px 18px 15px;border-radius:13px;box-shadow:0 5px 18px #19252207}
#overviewPage .stat-top{font-size:12.5px;color:#718078}
#overviewPage .stat-icon{width:27px;height:27px;border-radius:9px}
#overviewPage .stat-value{font-size:23px;margin-top:11px;font-variant-numeric:tabular-nums}
#overviewPage .stat-foot{font-size:11.5px;margin-top:7px;color:#929e96}
#overviewPage .overview-chart-panel{border-radius:14px;box-shadow:0 5px 18px #19252207}
#overviewPage .overview-chart-panel .panel-heading{padding:21px 22px 14px;align-items:center}
#overviewPage .overview-chart-panel .panel-heading h2{font-size:17px}
#overviewPage .overview-chart-panel .panel-heading p{font-size:12.5px;line-height:1.5}
.overview-year-label{display:flex;align-items:center;gap:9px;color:#89968e;font-size:11.5px}
.overview-year-label .type-filter{min-width:118px;height:36px;padding:0 11px;font-size:12.5px}
#overviewPage .chart-container{padding:12px 22px 2px;min-height:245px}
#overviewPage .chart-legend{padding:5px 0 17px;font-size:12.5px}
[data-theme="dark"] #overviewPage .overview-year-label{color:#a2b5a7}
[data-theme="dark"] #overviewPage .stat-top{color:#a2b5a7}
@media(max-width:760px){
  #overviewPage{padding-top:24px}
  #overviewPage .page-heading{align-items:flex-start;margin-bottom:19px}
  #overviewPage .page-heading h1{font-size:27px}
  #overviewPage .page-heading .button{width:auto;height:36px;padding:0 10px;font-size:10.5px}
  #overviewPage .stats-grid{gap:10px;margin-bottom:16px}
  #overviewPage .stat-card{min-height:120px;padding:13px 12px}
  #overviewPage .stat-top{font-size:10.5px}
  #overviewPage .stat-value{font-size:17px;margin-top:9px}
  #overviewPage .stat-foot{font-size:9px;line-height:1.4}
  #overviewPage .overview-chart-panel .panel-heading{align-items:flex-start;padding:16px 14px 12px}
  #overviewPage .overview-chart-panel .panel-heading h2{font-size:14.5px}
  #overviewPage .overview-chart-panel .panel-heading p{max-width:190px;font-size:10.5px}
  .overview-year-label{gap:5px;font-size:10.5px}
  .overview-year-label .type-filter{min-width:78px;width:82px;height:32px;padding:0 6px;font-size:10.5px}
  #overviewPage .chart-container{padding:10px 6px 0;min-height:205px}
  #overviewPage .chart-label{font-size:10.5px}
}

/* Keep the design palette in sync with the selected theme. */
:root[data-theme="dark"]{
  --canvas:#0d211a;
  --ink:#eff5ef;
  --ink-soft:#c1d0c5;
  --muted:#91a699;
  --line:#294439;
  --white:#142d23;
  --green:#a8cfaa;
  --green-dark:#b9dbb9;
  --mint:#1d3b2d;
  color-scheme:dark;
}
.brand-lockup{display:block;width:160px;max-width:100%;height:auto;object-fit:contain;flex:none}
.brand-symbol{display:none}
.sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#456652 transparent}
.sidebar>.brand,.sidebar>.workspace-switch,.sidebar>.nav-label,.sidebar>.nav-menu,.sidebar>.sidebar-bottom{flex-shrink:0}
.brand{padding-bottom:22px}
.workspace-switch{margin-bottom:22px}
.nav-menu{gap:3px}
.nav-item{height:39px}
.nav-label-second{margin-top:19px}
.nav-label-third{margin-top:17px}
.sidebar-bottom>.nav-item{margin-bottom:8px}
.report-drilldown-link{display:inline;padding:0;border:0;background:none;color:var(--green-dark);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.report-drilldown-link:hover,.report-drilldown-link:focus-visible{text-decoration:underline;text-underline-offset:3px;outline:none}
.report-drilldown-list{display:grid;gap:9px;max-height:min(55vh,520px);overflow:auto;margin:20px 0 8px}
.report-drilldown-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 15px;border:1px solid var(--line);border-radius:11px;background:var(--canvas)}
.report-drilldown-row>div:first-child{display:grid;gap:4px;min-width:0}
.report-drilldown-row small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.report-drilldown-status{display:grid;gap:5px;text-align:right;white-space:nowrap}
.report-drilldown-status span{color:var(--muted);font-size:11.5px}
.report-drilldown-actions{display:flex;gap:10px;white-space:nowrap}
.report-drilldown-modal{width:min(960px,calc(100vw - 34px))}
[data-theme="dark"] .report-drilldown-link{color:#c0dfbd}
[data-theme="dark"] .report-drilldown-row{background:#19352a;border-color:#294439}
@media(max-width:650px){.report-drilldown-row{grid-template-columns:minmax(0,1fr) auto;gap:9px}.report-drilldown-status{text-align:right}.report-drilldown-actions{grid-column:1/-1;justify-content:flex-end}}
.profile{padding-top:13px}
[data-theme="dark"] .sidebar{scrollbar-color:#456652 transparent}
@media(max-width:760px){
  .brand{width:100%;justify-content:center;padding:0 0 25px}
  .sidebar{padding-top:20px}
  .nav-label-third{display:none}
  .brand-lockup{display:none}
  .brand-symbol{width:36px;height:36px;display:grid;place-items:center;flex:none}
  .brand-symbol img{display:block;width:100%;height:100%;object-fit:contain}
}