/* Distinctive, editorial finance workspace for the first public release. */
:root {
  --finance-ink: #112b49;
  --finance-blue: #547d9f;
  --finance-muted: #75879a;
  --finance-line: #e3eaf0;
  --finance-canvas: #f3f7fa;
  --finance-green: #16845f;
  --finance-red: #bd5d5d;
}

body:has(#tab-income) { background: var(--finance-canvas) !important; }
/* Keep the finance navigation across the top so the workspace uses the full page width. */
body:has(#tab-income) .app-container { display: flex !important; flex-direction: column !important; }
body:has(#tab-income) .sidebar {
  position: sticky !important; z-index: 100; top: 0; width: 100% !important; min-height: 0; height: auto !important;
  padding: 13px clamp(16px,3vw,38px) 10px !important; border-right: 0 !important;
  border-bottom: 1px solid var(--finance-line) !important; box-shadow: 0 5px 18px rgba(16,39,70,.045) !important;
}
body:has(#tab-income) .sidebar .logo { margin: 0 0 9px !important; padding: 0 8px !important; }
body:has(#tab-income) .sidebar .nav-menu { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 5px !important; white-space: nowrap; padding-bottom: 2px; }
body:has(#tab-income) .sidebar .nav-item { flex: 0 0 auto; }
body:has(#tab-income) .sidebar .sub-menu { order: 2; flex: 1 0 100%; flex-direction: row !important; align-items: center; overflow-x: auto; gap: 3px !important; padding: 9px 0 0 !important; margin: 4px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--finance-line) !important; }
body:has(#tab-income) .sidebar [data-auth-logout] { width: auto !important; margin-top: 0 !important; }
body:has(#tab-income) .main-content { width: 100%; max-width: none !important; }
body:has(#tab-income) .main-content {
  position: relative;
  max-width: 1600px;
  background:
    radial-gradient(ellipse at 88% 2%, rgba(191,215,233,.28), transparent 31rem),
    var(--finance-canvas);
}
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; font-size: 12px !important; font-weight: 650; }
.top-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 176px;
  display: flex;
  align-items: center !important;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 27px !important;
  padding: 29px clamp(22px,3vw,38px) !important;
  border: 1px solid #274563;
  border-radius: 21px;
  background: linear-gradient(112deg,#102746 4%,#173958 66%,#285374 100%);
  box-shadow: 0 18px 38px rgba(16,39,70,.15);
  color: #fff;
}
.top-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 47%;
  opacity: .25;
  background: repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.11) 32px), repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.08) 43px);
  mask-image: linear-gradient(90deg,transparent,#000 34%);
}
.top-header::after {
  content: "01 / FINANCE CONTROL";
  position: absolute;
  z-index: -1;
  right: 28px;
  bottom: 17px;
  color: rgba(255,255,255,.34);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .2em;
}
.top-header h1 { max-width: 690px; color: #fff !important; font-size: clamp(27px,2.5vw,37px) !important; line-height: 1.12; }
.top-header p, .top-header small { color: #c8d8e6 !important; font-size: 13px; }
.top-header .header-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-header .btn-secondary { color: #e6f0f7 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.25) !important; }
.top-header .btn-primary { color: var(--finance-ink) !important; background: #e7f3ed !important; border-color: #e7f3ed !important; box-shadow: 0 7px 18px rgba(0,0,0,.13); }
.top-header .btn-primary:hover { background: #d6ebdf !important; }

.tab-view { position: relative; }
#tab-income::before, #tab-expense::before, #tab-fuel::before, #tab-taxes::before, #tab-result::before, #tab-fleet::before, #tab-drivers::before {
  display: block;
  margin: 0 0 13px 2px;
  color: #91a1b1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
#tab-income::before { content: "01  /  ДОХІД · ГРОШОВИЙ ПОТІК"; }
#tab-expense::before { content: "02  /  ВИТРАТИ · КОНТРОЛЬ ВИТРАТ"; }
#tab-fuel::before { content: "03  /  ПАЛИВО · ЕФЕКТИВНІСТЬ"; }
#tab-taxes::before { content: "06  /  ПОДАТКИ · РОЗРАХУНОК"; }
#tab-result::before { content: "07  /  РЕЗУЛЬТАТ · ПІДСУМОК"; }
#tab-fleet::before { content: "04  /  АВТОПАРК · АКТИВИ"; }
#tab-drivers::before { content: "05  /  ПРАЦІВНИКИ · КОМАНДА"; }

.finance-toolbar {
  gap: 13px !important;
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  border-color: #e1e9ef !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(16,39,70,.035) !important;
}
.finance-toolbar label { color: #64788e !important; font-size: 11px !important; font-weight: 650; }
.finance-toolbar > div { min-width: 160px; }
.finance-toolbar[style*="margin-bottom:20px"] { background: linear-gradient(105deg,#fff,#f8fbfd) !important; }
.finance-toolbar[style*="margin-bottom:20px"] .btn-secondary { min-height: 42px; }
.invoice-search-toolbar { align-items: center !important; border-left: 3px solid #86a8c2 !important; background: #f9fbfc !important; }
.invoice-search-toolbar > div { max-width: 440px; }
.invoice-search-toolbar .depreciation-choice { color: #52677d !important; }

.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; margin: 17px 0 14px; }
.stat-card {
  position: relative;
  min-height: 124px;
  overflow: hidden;
  padding: 20px 21px 18px !important;
  border-radius: 15px !important;
  border-color: #e4ebf0 !important;
  box-shadow: 0 9px 25px rgba(16,39,70,.045) !important;
}
.stat-card::after { content: ""; position: absolute; width: 100px; height: 100px; top: -54px; right: -39px; border: 1px solid rgba(84,125,159,.15); border-radius: 50%; box-shadow: 0 0 0 12px rgba(84,125,159,.035),0 0 0 25px rgba(84,125,159,.025); }
.stat-label { max-width: 230px; color: #74869a !important; font-size: 10px !important; font-weight: 650; line-height: 1.5; }
.stat-value { margin-top: 9px; font-size: clamp(21px,2vw,28px) !important; font-weight: 760; letter-spacing: -.035em; }
.stat-value.green { color: var(--finance-green) !important; }
.stat-value.red { color: var(--finance-red) !important; }
#incomePaymentMessage, #expensePaymentMessage { color: #537b99 !important; font-size: 11px; }

.table-container {
  margin: 15px 0 19px;
  border-radius: 15px !important;
  box-shadow: 0 12px 30px rgba(16,39,70,.045) !important;
}
.table-container table { min-width: 1120px; }
.table-container th { padding: 14px 13px !important; white-space: nowrap; }
.table-container td { padding: 13px !important; }
.table-container tbody tr:last-child td { border-bottom: 0 !important; }
.empty-state { padding: 35px 20px !important; color: #8292a3 !important; }
.report-panel {
  margin: 18px 0 0 !important;
  padding: 21px !important;
  border: 1px solid var(--finance-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--finance-ink) !important;
  box-shadow: 0 10px 28px rgba(16,39,70,.04);
}
.report-panel h3 { color: var(--finance-ink) !important; font-size: 15px !important; }
.report-panel .field-help { color: var(--finance-muted) !important; }
.invoice-chart-tabs button { background: #f1f5f8 !important; color: #567087 !important; border-color: #e0e8ee !important; }
.invoice-chart-tabs button[aria-pressed="true"] { color: #fff !important; background: var(--finance-ink) !important; border-color: var(--finance-ink) !important; }
.report-toolbar { gap: 12px; }
.report-badge { color: #446b89 !important; background: #eff5f8; border-color: #dce8ef !important; }
.tax-combined { border-radius: 14px !important; }

.nav-coming-label { margin-left: auto; padding: 4px 6px; border: 1px solid #e2eaf0; border-radius: 999px; color: #8191a1; background: #f6f8fa; font-size: 8px; font-weight: 700; line-height: 1; white-space: nowrap; }
.nav-item:has(.nav-coming-label) { gap: 8px; font-size: 12px !important; }

#ksefModal .ksef-card { color: var(--finance-ink); background: #fff; border: 1px solid #dce6ed; box-shadow: 0 25px 80px rgba(16,39,70,.25); }
#ksefModal .ksef-card h3 { color: var(--finance-ink); }
#ksefModal .ksef-card .field-help { color: var(--finance-muted); }
#ksefModal .ksef-preview-row { color: #405870; border-color: #e6edf2; }
#ksefModal #ksefMessage { color: #257457; }

@media (max-width: 900px) {
  .top-header { min-height: 160px; padding: 24px !important; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 700px) {
  .top-header { align-items: flex-start !important; flex-direction: column; gap: 18px; padding: 23px 20px !important; }
  .top-header .header-actions { width: 100%; }
  .top-header .header-actions button { flex: 1; justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .stat-card { min-height: 110px; padding: 15px !important; }
  .stat-label { font-size: 9px !important; }
  .finance-toolbar { align-items: stretch !important; }
  .finance-toolbar > div { min-width: min(100%,150px); }
  .finance-toolbar[style*="margin-bottom:20px"] { display: grid !important; grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-card { min-height: 100px; }
  .nav-coming-label { font-size: 7px; }
}


/* Invoice workspaces: controls on the left, documents on the right, charts below. */
.finance-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
.finance-workspace-controls {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}
.finance-workspace-controls .stats-grid {
  order: -1;
  grid-template-columns: minmax(0, 1fr) !important;
  margin: 0;
  gap: 8px !important;
}
.finance-workspace-controls .stat-card {
  min-height: 88px;
  padding: 15px 18px !important;
}
.finance-workspace-controls .stat-label { max-width: none; }
.finance-workspace-controls .stat-value { margin-top: 5px; font-size: 25px !important; }
.finance-workspace-controls .finance-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 15px !important;
  gap: 12px !important;
}
.finance-workspace-controls .finance-toolbar > div { min-width: 0 !important; max-width: none; }
.finance-workspace-controls .form-control { width: 100%; min-width: 0; }
.finance-workspace-controls .finance-toolbar .btn { width: 100%; min-width: 0; white-space: normal; }
.finance-workspace-controls .depreciation-choice { align-items: flex-start; line-height: 1.5; }
.finance-workspace-controls .depreciation-choice input { flex: 0 0 auto; margin-top: 2px; }
.finance-workspace-controls > .field-help { margin: -5px 3px 0; font-size: 11px; line-height: 1.55; }
.finance-workspace-controls > .field-help:empty,
.finance-workspace-invoices > p:empty { display: none; }
.finance-workspace-invoices { min-width: 0; }
.finance-workspace-invoices .table-container {
  margin: 0 !important;
  max-height: clamp(460px, 82vh, 920px);
  overflow: auto !important;
  scrollbar-color: #bccbd8 #f1f5f8;
}
.finance-workspace-invoices th { position: sticky; top: 0; z-index: 2; background: #eef3f7 !important; color: #60758a !important; box-shadow: 0 1px 0 var(--finance-line); }
.finance-workspace-invoices > p { margin-bottom: 12px; }
#tab-income > .report-panel,
#tab-expense > .report-panel { margin-top: 22px !important; }
@media (max-width: 1050px) {
  .finance-workspace { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .finance-workspace { grid-template-columns: minmax(0, 1fr); }
  .finance-workspace-controls .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .finance-workspace-controls .stat-card:first-child:last-child { grid-column: 1 / -1; }
  .finance-workspace-invoices .table-container { max-height: 65vh; }
}
@media (max-width: 420px) {
  .finance-workspace-controls .stats-grid { grid-template-columns: minmax(0, 1fr) !important; }
}