/**
 * AL BAYAN HIDAYATULLAH MAKASSAR — Feature Page Styles
 */

/* ==========================================================================
   1. Dashboard Page
   ========================================================================== */
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 24px 28px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #102a43 0%, #1769aa 58%, #148f8a 100%);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.dash-head:after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -70px;
  top: -120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.dash-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #d6e7f5;
  margin-bottom: 6px;
}
.dash-head h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.dash-head p {
  margin: 7px 0 0;
  color: #ffffff;
  opacity: 0.82;
  font-size: 13px;
}
.dash-period {
  min-width: 150px;
  text-align: right;
  padding: 10px 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
}
.dash-period span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  color: #cfe0ef;
  letter-spacing: 0.1em;
}
.dash-period b {
  font-size: 14px;
  color: #ffffff;
}

/* Dashboard KPIs */
.kpi-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.dash-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}
.kpi {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e5ebf2;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(16, 42, 67, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16, 42, 67, 0.1);
}
.kpi-primary {
  background: linear-gradient(145deg, #edf6ff, #ffffff);
  border-color: #cfe2f5;
}
.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kpi .icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  font-size: 17px;
  color: var(--ab-blue);
}
.kpi-primary .icon {
  background: #dceeff;
}
.kpi-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a9bad;
}
.kpi .label {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #68798d;
}
.kpi .value {
  font-size: 21px;
  line-height: 1.2;
  margin-top: 5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ab-navy);
}
.kpi .value.small {
  font-size: 17px;
}
.kpi .trend {
  margin-top: 6px;
  font-size: 10px;
  color: #8292a5;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 16px;
}
.chart-box {
  height: 235px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-box.tall {
  height: 270px;
}
canvas {
  max-width: 100%;
}

/* Finance Mix */
.finance-mix {
  padding-top: 8px;
}
.mix-item {
  margin: 16px 0;
}
.mix-item > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #667085;
}
.mix-item b {
  color: var(--ab-navy);
}
.mix-track {
  height: 10px;
  background: #f2f4f7;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 7px;
}
.mix-fill {
  height: 100%;
  border-radius: 99px;
}
.mix-fill.receive {
  background: linear-gradient(90deg, #1769aa, #3b82c4);
}
.mix-fill.expense {
  background: linear-gradient(90deg, #c99a3b, #e0b75c);
}
.mix-result {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed #d0d5dd;
  font-size: 12px;
  color: #667085;
}
.mix-result strong {
  color: var(--ab-navy);
}

/* Rankings */
.ranking-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ranking-card {
  min-height: 330px;
}
.rank-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f0f2f5;
}
.rank-row:last-child {
  border-bottom: 0;
}
.rank-num {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #f2f4f7;
  color: #475467;
  font-size: 10px;
  font-weight: 800;
}
.rank-main {
  min-width: 0;
}
.rank-name {
  font-size: 11px;
  font-weight: 700;
  color: #344054;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-code {
  font-size: 9px;
  color: #98a2b3;
  margin-top: 2px;
}
.rank-track {
  height: 6px;
  background: #f2f4f7;
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
.rank-fill {
  height: 100%;
  border-radius: 99px;
}
.rank-fill.income, .bar-rank-fill.income {
  background: linear-gradient(90deg, #1769aa, #3b82c4);
}
.rank-fill.expense, .bar-rank-fill.expense {
  background: linear-gradient(90deg, #c99a3b, #e0b75c);
}
.rank-value {
  text-align: right;
}
.rank-value b {
  display: block;
  font-size: 10px;
  color: var(--ab-navy);
}
.rank-value span {
  font-size: 9px;
  color: #98a2b3;
}
.empty-ranking {
  padding: 40px 10px;
  text-align: center;
  color: #98a2b3;
  font-size: 12px;
}

/* Horizontal Ranking Bars */
.bar-rank {
  margin: 11px 0;
}
.bar-rank-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  color: #667085;
}
.bar-rank-head span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-rank-head b {
  white-space: nowrap;
  color: #344054;
}
.bar-rank-track {
  height: 10px;
  background: #f2f4f7;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
.bar-rank-fill {
  height: 100%;
  border-radius: 99px;
}

/* Summary & Activity Rows */
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f0f2f5;
  font-size: 11px;
  color: #667085;
}
.summary-row:last-child {
  border-bottom: 0;
}
.summary-row b {
  color: var(--ab-navy);
}
.activity {
  display: grid;
  gap: 9px;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.activity-label {
  width: 120px;
}
.activity-track {
  flex: 1;
  height: 9px;
  background: #eaecf0;
  border-radius: 20px;
  overflow: hidden;
}
.activity-fill {
  height: 100%;
  border-radius: 20px;
  background: #1769aa;
}
.activity-note {
  font-size: 10px;
  color: #98a2b3;
  margin-top: 12px;
}

/* Central Info Grid */
.central-info-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.central-stat {
  padding: 13px;
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #f9fbfd;
}
.central-stat span {
  display: block;
  font-size: 9px;
  color: #8191a5;
  font-weight: 700;
}
.central-stat b {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  color: var(--ab-navy);
}
.central-stat small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: #98a2b3;
}

/* ==========================================================================
   2. Budget & Spreadsheet Styles
   ========================================================================== */
.budget-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.budget-bar-row {
  padding: 12px 0;
  border-bottom: 1px solid #eef2f5;
}
.budget-bar-row:last-child {
  border-bottom: 0;
}
.budget-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #667085;
}
.budget-bar-head b {
  color: var(--ab-ink);
}
.budget-track {
  height: 16px;
  background: #eef2f6;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
.budget-plan {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #d9e5ef;
  border-radius: 99px;
}
.budget-actual {
  position: absolute;
  left: 0;
  top: 3px;
  height: 10px;
  background: linear-gradient(90deg, #1769aa, #148f8a);
  border-radius: 99px;
}
.budget-percent {
  font-size: 9px;
  color: #98a2b3;
  margin-top: 5px;
}
.budget-donut-wrap {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.budget-donut {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#148f8a 0 var(--p), #dfe7ed var(--p) 100%);
  position: relative;
}
.budget-donut:after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: #ffffff;
}
.budget-donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}
.budget-donut b {
  display: block;
  font-size: 23px;
  color: var(--ab-ink);
}
.budget-donut span {
  font-size: 9px;
  color: #98a2b3;
}
.budget-legend {
  min-width: 155px;
}
.budget-legend p {
  font-size: 10px;
  color: #667085;
  display: grid;
  grid-template-columns: 9px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 12px 0;
}
.budget-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.budget-legend i.plan { background: #d9e5ef; }
.budget-legend i.actual { background: #148f8a; }
.budget-legend i.remain { background: #c99a3b; }
.budget-legend i.over { background: #d92d20; }
.budget-legend b { color: var(--ab-ink); }

/* Spreadsheet Editor for Budget */
.budget-spreadsheet-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f7fafc;
  border: 1px solid #e4ebf1;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.budget-spreadsheet-toolbar b {
  display: block;
  font-size: 12px;
  color: var(--ab-navy);
}
.budget-spreadsheet-toolbar span {
  display: block;
  font-size: 9px;
  color: #8191a5;
  margin-top: 3px;
}
.budget-spreadsheet {
  overflow: auto;
  max-height: 620px;
  border: 1px solid #e4ebf1;
  border-radius: 0 0 12px 12px;
  background: #ffffff;
}
.budget-spreadsheet table {
  min-width: 1350px;
  border-collapse: separate;
  border-spacing: 0;
}
.budget-spreadsheet thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ab-navy);
  color: #ffffff;
  white-space: nowrap;
  font-size: 9px;
  padding: 10px 8px;
}
.budget-spreadsheet tbody td,
.budget-spreadsheet tfoot td {
  padding: 7px 8px;
  border-bottom: 1px solid #edf1f4;
  vertical-align: middle;
  font-size: 10px;
}
.budget-spreadsheet tbody tr:hover { background: #f8fbfd; }
.budget-spreadsheet tbody tr:nth-child(even) { background: #fcfdfe; }
.budget-spreadsheet tbody tr:nth-child(even):hover { background: #f6fafc; }

.cell-input {
  width: 100%;
  min-width: 110px;
  box-sizing: border-box;
  border: 1px solid #dce5ec;
  border-radius: 7px;
  padding: 7px 8px;
  background: #ffffff;
  font-size: 11px;
  color: var(--ab-ink);
}
.cell-input.wide {
  min-width: 260px;
}
.cell-input:focus {
  outline: none;
  border-color: #148f8a;
  box-shadow: 0 0 0 2px rgba(20, 143, 138, 0.12);
}
.num-input {
  text-align: right;
}
.row-no {
  text-align: center;
  font-weight: 800;
  color: var(--ab-blue);
}
.money-cell {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ab-ink);
}
.pct-cell {
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
}
.action-cell {
  white-space: nowrap;
}
.action-cell .btn {
  font-size: 9px;
  padding: 5px 8px;
  margin: 2px;
}
.budget-total-row {
  position: sticky;
  bottom: 0;
  background: #eef6f7;
  z-index: 2;
}
.budget-total-row td {
  border-top: 2px solid #148f8a !important;
  color: var(--ab-navy);
}

.badge-over { background: #fee2e2 !important; color: #b42318 !important; }
.badge-done { background: #dcfce7 !important; color: #166534 !important; }
.badge-run { background: #e0f2fe !important; color: #075985 !important; }
.badge-zero { background: #f1f5f9 !important; color: #64748b !important; }

/* Dashboard Budget Card */
.dashboard-budget-card {
  margin-top: 16px;
}
.budget-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 18px;
}
.budget-dash-kpis > div {
  padding: 13px 15px;
  border: 1px solid #e6edf3;
  border-radius: 13px;
  background: #f9fbfd;
}
.budget-dash-kpis span {
  display: block;
  font-size: 9px;
  color: #8191a5;
  font-weight: 700;
}
.budget-dash-kpis b {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: var(--ab-navy);
}
.budget-dash-grid {
  gap: 25px;
}
.budget-dash-title {
  font-size: 11px;
  font-weight: 800;
  color: #52667a;
  margin-bottom: 10px;
}
.dash-budget-row {
  padding: 9px 0;
  border-bottom: 1px solid #eef2f5;
}
.dash-budget-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #667085;
}
.dash-budget-head span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-budget-head b {
  white-space: nowrap;
  color: var(--ab-ink);
}
.dash-budget-track {
  height: 13px;
  background: #edf2f6;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin-top: 6px;
}
.dash-budget-plan {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #d5e1ea;
  border-radius: 99px;
}
.dash-budget-actual {
  position: absolute;
  left: 0;
  top: 2px;
  height: 9px;
  background: linear-gradient(90deg, #1769aa, #148f8a);
  border-radius: 99px;
}
.dash-budget-pct {
  font-size: 8px;
  color: #98a2b3;
  margin-top: 4px;
}
.dash-budget-donut-wrap {
  min-height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.dash-budget-donut {
  width: 155px;
  height: 155px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#148f8a 0 var(--p), #e1e8ed var(--p) 100%);
  position: relative;
}
.dash-budget-donut:after {
  content: "";
  position: absolute;
  width: 99px;
  height: 99px;
  border-radius: 50%;
  background: #ffffff;
}
.dash-budget-donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}
.dash-budget-donut b {
  display: block;
  font-size: 21px;
  color: var(--ab-navy);
}
.dash-budget-donut span {
  font-size: 9px;
  color: #98a2b3;
}
.budget-dash-legend {
  min-width: 155px;
}
.budget-dash-legend div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 10px 0;
  font-size: 9px;
  color: #667085;
}
.budget-dash-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.budget-dash-legend i.plan { background: #d5e1ea; }
.budget-dash-legend i.actual { background: #148f8a; }
.budget-dash-legend i.remain { background: #c99a3b; }
.budget-dash-legend b { color: var(--ab-ink); }

/* ==========================================================================
   3. Cash Flow & Equity Visuals
   ========================================================================== */
.cashflow-visuals {
  margin-top: 16px;
}
.cf-row {
  margin: 18px 0;
}
.cf-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #667085;
}
.cf-head b {
  color: var(--ab-navy);
}
.cf-track {
  height: 11px;
  background: #f2f4f7;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.cf-fill {
  height: 100%;
  border-radius: 99px;
}
.cf-fill.in { background: linear-gradient(90deg, #1769aa, #148f8a); }
.cf-fill.out { background: linear-gradient(90deg, #c99a3b, #d9a441); }
.cf-net {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #d0d5dd;
  padding-top: 14px;
  margin-top: 20px;
  font-size: 12px;
  color: #667085;
}
.cf-net strong { color: var(--ab-navy); }

.cash-percent-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 190px;
}
.cf-donut {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    #1769aa 0 var(--in),
    #c99a3b var(--in) calc(var(--in) + var(--out)),
    #dce3ea calc(var(--in) + var(--out)) 100%
  );
  position: relative;
}
.cf-donut:after {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #ffffff;
}
.cf-donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cf-donut b {
  display: block;
  font-size: 20px;
  color: var(--ab-navy);
}
.cf-donut span {
  font-size: 9px;
  color: #98a2b3;
}
.cf-legend {
  min-width: 130px;
}
.cf-legend div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 12px 0;
  font-size: 10px;
  color: #667085;
}
.cf-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
.cf-legend i.in { background: #1769aa; }
.cf-legend i.out { background: #c99a3b; }
.cf-legend b { color: var(--ab-navy); }

/* Equity Visuals */
.equity-visuals {
  margin-top: 16px;
}
.eq-row {
  padding: 11px 0;
  border-bottom: 1px solid #f0f2f5;
}
.eq-row:last-child {
  border-bottom: 0;
}
.eq-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 11px;
  color: #667085;
}
.eq-head b:last-child {
  color: var(--ab-navy);
}
.eq-code {
  font-size: 9px;
  color: #98a2b3;
  margin-top: 3px;
}
.eq-track {
  height: 9px;
  background: #f2f4f7;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 7px;
}
.eq-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #148f8a, #2e9d68);
}
.equity-percent-chart {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.eq-donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#148f8a, #1769aa, #c99a3b, #2e9d68, #3b82c4, #148f8a);
  position: relative;
}
.eq-donut:after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  background: #ffffff;
  border-radius: 50%;
}
.eq-donut > div {
  position: relative;
  z-index: 1;
  text-align: center;
}
.eq-donut b {
  display: block;
  font-size: 22px;
  color: var(--ab-navy);
}
.eq-donut span {
  font-size: 9px;
  color: #98a2b3;
}
.eq-legend {
  max-height: 190px;
  overflow-y: auto;
  min-width: 150px;
}
.eq-legend div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 7px;
  align-items: center;
  margin: 9px 0;
  font-size: 9px;
  color: #667085;
}
.eq-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #148f8a;
}
.eq-legend b {
  color: var(--ab-navy);
}

/* ==========================================================================
   4. Fixed Asset Management Styles
   ========================================================================== */
.asset-kpis {
  margin-bottom: 4px;
}
.asset-kpis .kpi {
  min-height: 118px;
}
.asset-table-wrap {
  overflow-x: auto;
}
.asset-table {
  min-width: 1500px;
}
.asset-table input, .asset-table select {
  width: 100%;
  min-width: 90px;
}
.asset-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5f7;
  color: #1769aa;
  font-size: 9px;
  font-weight: 800;
}
.asset-badge.bad { background: #fff1f0; color: #b42318; }
.asset-badge.good { background: #ecfdf3; color: #067647; }
.asset-mini {
  font-size: 9px;
  color: #667085;
}
.asset-progress {
  height: 8px;
  background: #edf2f6;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 5px;
}
.asset-progress > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1769aa, #148f8a);
  border-radius: 99px;
}
.asset-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.asset-summary-grid > div {
  padding: 12px;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  background: #f9fbfd;
}
.asset-summary-grid span {
  display: block;
  font-size: 9px;
  color: #8191a5;
}
.asset-summary-grid b {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  color: var(--ab-navy);
}
.asset-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.asset-form-grid .full {
  grid-column: 1 / -1;
}
.asset-policy {
  font-size: 11px;
  line-height: 1.55;
  color: #667085;
}

/* Responsive Overrides for Pages */
@media (max-width: 1200px) {
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
  .central-info-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 850px) {
  .budget-kpis { grid-template-columns: repeat(2, 1fr); }
  .budget-dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .asset-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .asset-form-grid { grid-template-columns: 1fr; }
  .ranking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dash-head { align-items: flex-start; flex-direction: column; }
  .dash-period { text-align: left; }
  .dash-kpis, .dashboard-grid { grid-template-columns: 1fr; }
  .kpi .value { font-size: 19px; }
  .budget-donut-wrap, .dash-budget-donut-wrap,
  .cash-percent-chart, .equity-percent-chart { flex-direction: column; }
}
@media (max-width: 600px) {
  .budget-kpis, .budget-dash-kpis { grid-template-columns: 1fr; }
  .central-info-grid { grid-template-columns: repeat(2, 1fr); }
}