/* =====================================================
   DU TOAN — Styles
   ===================================================== */

/* ── Tab layout ─────────────────────────────────────── */
#tab-du-toan {
  padding: 0;
  gap: 0;
  height: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}
/* Override base .tab-content padding only, display is managed by .tab-content.active */

/* Allow the Cost Estimate flex branch to shrink to the available viewport width.
   Without this, the 3000px worksheet can enlarge .main-content before the
   worksheet's own overflow container gets a chance to scroll. */
.main-content {
  min-width: 0;
}

.dt-header {
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
  flex-shrink: 0;
}

.dt-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-header h2 .dt-accent { color: #f59e0b; }
.dt-header-sub { font-size: .78rem; color: var(--text-muted, #94a3b8); }

/* ── New project form ───────────────────────────────── */
.dt-new-project {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
  flex-shrink: 0;
}

.dt-new-project-title {
  font-size: .72rem;
  font-weight: 600;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

#dt-new-project-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.dt-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dt-field label {
  font-size: .68rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.dt-inp-proj {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: var(--text-primary, #f1f5f9);
  font-size: .82rem;
  padding: 6px 10px;
  outline: none;
  transition: border-color .15s;
}

.dt-inp-proj:focus { border-color: #f59e0b; }
.dt-inp-proj.wide { width: 220px; }
.dt-inp-proj.narrow { width: 140px; }

.dt-btn-create {
  background: #f59e0b;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.dt-btn-create:hover { opacity: .85; }

/* ── Project list ───────────────────────────────────── */
.dt-body {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dt-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color, rgba(255,255,255,.08));
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-sidebar-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 4px;
}

.dt-project-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.dt-project-card:hover { background: rgba(255,255,255,.07); }
.dt-project-card.active {
  border-color: #f59e0b;
  background: rgba(245,158,11,.08);
}

.dt-project-card-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  margin-bottom: 3px;
  padding-right: 20px;
}

.dt-project-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-muted, #94a3b8);
}

.dt-total { color: #f59e0b; font-weight: 600; }
.dt-rough-cell, .dt-rough-total-label strong { color: #0f766e; font-weight: 700; }
.dt-rough-input { min-width: 110px; background: #ecfdf5 !important; }
.dt-cell-muted { color: #94a3b8; }

.dt-project-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  cursor: pointer;
  font-size: .7rem;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color .15s, background .15s;
}
.dt-project-delete:hover { color: #ef4444; background: rgba(239,68,68,.1); }

.dt-empty-state {
  font-size: .78rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  padding: 20px 8px;
  line-height: 1.5;
}

/* ── Grid area ──────────────────────────────────────── */
.dt-grid-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#dt-grid-section {
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.dt-grid-header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dt-grid-project-name {
  font-size: .9rem;
  font-weight: 700;
  color: #f59e0b;
  flex: 1;
}

.dt-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: var(--text-primary, #f1f5f9);
  font-size: .76rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.dt-btn:hover { background: rgba(255,255,255,.14); }
.dt-btn.primary { background: #f59e0b; color: #000; border-color: transparent; font-weight: 600; }
.dt-btn.primary:hover { opacity: .88; }
.dt-btn.danger { color: #fecaca; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); }
.dt-btn.danger:hover { background: rgba(239,68,68,.22); }
.dt-btn.danger.subtle { font-size: .7rem; padding-inline: 9px; }

.dt-grid-wrap {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

table.dt-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  color: var(--text-primary, #f1f5f9);
}

.dt-grid th {
  position: sticky;
  top: 0;
  background: rgba(30,30,40,.97);
  border-bottom: 2px solid rgba(245,158,11,.4);
  padding: 7px 6px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #f59e0b;
  white-space: nowrap;
  text-align: left;
  z-index: 2;
}

.dt-grid td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
}

.dt-grid tr:hover td { background: rgba(255,255,255,.03); }
.dt-grid tr.dt-row-selected td {
  background: rgba(59,130,246,.10);
  box-shadow: inset 0 1px rgba(96,165,250,.22), inset 0 -1px rgba(96,165,250,.22);
}
.dt-grid tr.dt-row-selected td:first-child { box-shadow: inset 3px 0 #60a5fa; }

.dt-inp {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-primary, #f1f5f9);
  font-size: .78rem;
  padding: 4px 6px;
  width: 100%;
  outline: none;
  transition: border-color .12s, background .12s;
}
.dt-inp:focus, .dt-inp:hover {
  border-color: rgba(245,158,11,.4);
  background: rgba(245,158,11,.06);
}
.dt-inp.dt-inp-wide { min-width: 180px; }
.dt-inp.dt-num     { text-align: right; min-width: 60px; }
.dt-sel            { min-width: 58px; cursor: pointer; }

.dt-cell-no        { text-align: center; color: var(--text-muted, #94a3b8); font-size: .7rem; width: 32px; }
.dt-cell-kl        { background: rgba(245,158,11,.04); }
.dt-auto-kl        { display: block; text-align: right; padding: 4px 6px; color: #94a3b8; font-size: .76rem; }
.dt-cell-thanh-tien{ text-align: right; font-weight: 600; color: #f59e0b; padding-right: 8px; white-space: nowrap; }
.dt-cell-actions   { text-align: center; width: 32px; }

.dt-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  padding: 3px 5px;
  border-radius: 4px;
  opacity: .4;
  transition: opacity .12s;
}
.dt-btn-icon:hover { opacity: 1; }

/* ── Footer total ───────────────────────────────────── */
.dt-grid-footer {
  padding: 10px 16px;
  border-top: 2px solid rgba(245,158,11,.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: rgba(245,158,11,.04);
}

.dt-project-formulas {
  background: rgba(59,130,246,.045);
  border-top: 1px solid rgba(96,165,250,.22);
  padding: 14px 18px;
}
.dt-fixed-costs { padding: 14px 18px; border-top: 1px solid rgba(245,158,11,.25); background: rgba(15,23,42,.38); }
.dt-fixed-costs-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.dt-fixed-costs-head strong { color: #f59e0b; font-size: .82rem; }
.dt-fixed-costs-head small { color: #94a3b8; font-size: .7rem; }
.dt-fixed-cost-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.dt-fixed-cost-table th, .dt-fixed-cost-table td { padding: 7px 9px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.dt-fixed-cost-table th { color: #94a3b8; font-size: .68rem; text-transform: uppercase; }
.dt-fixed-cost-table td:first-child { color: #fbbf24; width: 8%; }
.dt-fixed-cost-table td:nth-child(2) { color: #f8fafc; width: 25%; }
.dt-fixed-cost-table td:last-child { color: #fbbf24; font-weight: 800; text-align: right; white-space: nowrap; }
.dt-fixed-input { width: 110px; padding: 6px 8px; border: 1px solid #334155; border-radius: 6px; background: #080d18; color: #e2e8f0; }
.dt-fixed-input.money { width: 150px; }
.dt-project-formulas-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dt-project-formulas-head strong { color: #f59e0b; display: block; font-size: .82rem; }
.dt-project-formulas-head small { color: #94a3b8; display: block; font-size: .7rem; margin-top: 3px; }
.dt-project-formula-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.dt-project-formula-actions label { align-items: center; color: #cbd5e1; display: inline-flex; font-size: .72rem; gap: 6px; white-space: nowrap; }
.dt-project-formula-table { border-collapse: collapse; font-size: .76rem; width: 100%; }
.dt-project-formula-table th,
.dt-project-formula-table td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 7px 9px; text-align: left; }
.dt-project-formula-table th { color: #94a3b8; font-size: .68rem; text-transform: uppercase; }
.dt-project-formula-table td:first-child { color: #f8fafc; width: 30%; }
.dt-project-formula-table td:first-child b { color: #fbbf24; float: right; }
.dt-project-formula-table td:nth-child(2) { width: 50%; }
.dt-project-formula-table td:last-child { color: #fbbf24; font-size: .82rem; font-weight: 800; text-align: right; white-space: nowrap; }
.dt-project-formula-table .dt-project-formula-total td { background: rgba(245,158,11,.08); border-top: 2px solid rgba(245,158,11,.4); font-size: .86rem; }
.dt-project-formula-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.dt-project-formula-grid label { align-items: center; display: grid; gap: 7px; grid-template-columns: 38px 1fr; }
.dt-project-formula-grid label span { color: #fbbf24; font-size: .76rem; font-weight: 800; }
.dt-formula-input {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 6px;
  color: #dbeafe;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: .76rem;
  min-width: 0;
  padding: 7px 9px;
  width: 100%;
}
.dt-formula-input:focus { border-color: #60a5fa; outline: none; }

.dt-footer-actions { display: flex; gap: 8px; }

.dt-grand-total-label { font-size: .8rem; color: var(--text-muted, #94a3b8); }
.dt-grand-total-value { font-size: 1.05rem; font-weight: 700; color: #f59e0b; }

/* ── Save toast ─────────────────────────────────────── */
.dt-save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #22c55e;
  color: #000;
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  z-index: 9999;
}
.dt-save-toast.visible { opacity: 1; transform: translateY(0); }
.dt-save-toast.error { background: #ef4444; color: #fff; }
.dt-btn:disabled { cursor: wait; opacity: .65; }

/* v1.07 cost basis additions */
.dt-rate-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
  background: rgba(245,158,11,.035);
  flex-wrap: wrap;
}

.dt-rate-note {
  color: var(--text-muted, #94a3b8);
  font-size: .74rem;
  margin-right: auto;
}

.dt-formula-title {
  color: #f59e0b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.dt-formula-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
}
.dt-formula-guide span {
  background: rgba(59,130,246,.09);
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 5px;
  color: #dbeafe;
  padding: 4px 7px;
  white-space: nowrap;
}
.dt-formula-guide b { color: #fbbf24; }
.dt-formula-guide i { color: #bfdbfe; font-family: Consolas, "SFMono-Regular", monospace; font-style: normal; }
.dt-formula-guide em {
  color: #fff;
  font-style: normal;
  font-weight: 800;
  margin-left: 5px;
}

.dt-rate-panel label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary, #f1f5f9);
  font-size: .72rem;
  white-space: nowrap;
}

.dt-rate-input {
  width: 74px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-primary, #f1f5f9);
  border-radius: 6px;
  padding: 5px 7px;
  outline: none;
}

.dt-rate-input:focus {
  border-color: rgba(245,158,11,.75);
}

.dt-cost-grid {
  min-width: 1880px;
}

.dt-cost-grid th,
.dt-cost-grid td {
  white-space: nowrap;
}

.dt-inp.code { min-width: 82px; }
.dt-inp.material { min-width: 310px; max-width: 420px; color: #bfdbfe; cursor: pointer; }
.dt-inp.money { min-width: 92px; }
.dt-inp.note { min-width: 180px; }

.dt-cost-cell {
  color: var(--text-primary, #f1f5f9);
  text-align: right;
  min-width: 92px;
  font-size: .74rem;
}

.dt-cost-cell.muted {
  color: var(--text-muted, #94a3b8);
}

.dt-summary-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--text-muted, #94a3b8);
  font-size: .76rem;
}

.dt-summary-strip strong {
  color: var(--text-primary, #f1f5f9);
  margin-left: 4px;
}

.dt-summary-strip .dt-grand-total-value {
  color: #f59e0b;
  min-width: 120px;
  text-align: right;
}

@media (max-width: 900px) {
  .dt-body { flex-direction: column; }
  .dt-sidebar {
    width: auto;
    max-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
  }
  .dt-rate-note { width: 100%; }
  .dt-grid-footer { align-items: flex-start; gap: 12px; }
  .dt-summary-strip { justify-content: flex-start; }
}

/* v1.08 AiPro dual-engine additions */
.dt-template-select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-primary, #f1f5f9);
  border-radius: 6px;
  font-size: .76rem;
  padding: 5px 10px;
  max-width: 170px;
}

.dt-inp.formula {
  min-width: 140px;
  font-family: Consolas, "SFMono-Regular", monospace;
  color: #fde68a;
}

.dt-cost-grid {
  min-width: 2020px;
}

/* v1.10 AiPro-lite worksheet panels */
.dt-workflow-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow-x: visible;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dt-workflow-tab {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-bottom: 0;
  color: var(--text-muted, #94a3b8);
  border-radius: 8px 8px 0 0;
  padding: 7px 12px;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 650;
  white-space: nowrap;
}

.dt-workflow-tab.active {
  color: #fff;
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.45);
}

.dt-aipro-panels {
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(245,158,11,.025);
  flex-shrink: 0;
}

.dt-aipro-panel {
  display: none;
  max-height: 250px;
  overflow: auto;
  padding: 12px 16px;
}

.dt-aipro-panel.active { display: block; }
.dt-aipro-panel[hidden] { display: none !important; }
.dt-panel-title { color: #f59e0b; font-weight: 750; font-size: .82rem; margin-bottom: 5px; }
.dt-panel-note { color: var(--text-muted, #94a3b8); font-size: .74rem; margin: 0 0 10px; }

.dt-mini-grid, .dt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.dt-mini-row, .dt-kpi-grid > div {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 9px 10px;
}

.dt-mini-row span, .dt-kpi-grid span { color: var(--text-muted, #94a3b8); font-size: .7rem; display: block; }
.dt-mini-row strong, .dt-kpi-grid strong { color: #f8fafc; font-size: .86rem; display: block; margin-top: 3px; }
.dt-mini-row small { color: var(--text-muted, #94a3b8); display: block; margin-top: 4px; line-height: 1.35; }

.dt-dgct-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.dt-dgct-card h4 { margin: 0 0 7px; color: #f8fafc; font-size: .8rem; }
.dt-dgct-card ul { margin: 0; padding-left: 18px; color: var(--text-muted, #94a3b8); font-size: .74rem; }
.dt-dgct-card li { margin: 4px 0; }
.dt-dgct-card li span { color: #f59e0b; float: right; margin-left: 12px; }

.dt-summary-table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.dt-summary-table th, .dt-summary-table td { border-bottom: 1px solid rgba(255,255,255,.07); padding: 6px 8px; text-align: left; }
.dt-summary-table th { color: #f59e0b; }
.dt-summary-table td:last-child { text-align: right; color: #f8fafc; }

.dt-info-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-info-list span { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: var(--text-muted, #94a3b8); padding: 6px 10px; font-size: .74rem; }
.dt-info-list b { color: #fff; }

.dt-row-product td { background: rgba(245,158,11,.095); font-weight: 750; }
.dt-row-product .dt-inp { font-weight: 750; color: #fff; }
.dt-row-child td:first-child { color: #f59e0b; }

/* v1.14 Cost Estimate usability fixes */
.dt-template-select option,
.dt-inp option,
.dt-sel option {
  background: #111318;
  color: #f8fafc;
}

.dt-use-btn {
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.42);
  color: #f8fafc;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}
.dt-use-btn:hover { background: rgba(245,158,11,.28); }


/* v1.15 Cost Estimate worksheet cleanup */
#dt-grid-section { min-height: 0; }
.dt-grid-header { flex-wrap: wrap; gap: 12px; padding: 14px 18px; }
.dt-template-select { max-width: 280px; min-width: 250px; color: #f8fafc; }
.dt-template-select.preset { max-width: 250px; min-width: 210px; }
.dt-rate-panel { gap: 12px 18px; align-items: center; padding: 12px 18px; }
.dt-rate-note { flex: 1 1 520px; color: #bfdbfe; line-height: 1.45; }
.dt-workflow-tabs { padding: 8px 18px 0; gap: 6px; }
.dt-workflow-tab { padding: 7px 10px; font-size: .72rem; }
.dt-aipro-panels { max-height: 150px; overflow: auto; flex-shrink: 0; }
.dt-aipro-panel { max-height: 150px; padding: 10px 18px; }
.dt-panel-note { font-size: .76rem; color: #bfdbfe; }
.dt-empty-state.compact { padding: 8px; }
.dt-mini-grid, .dt-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dt-grid-wrap { flex: 1 1 auto; min-height: 470px; overflow: auto; border-top: 1px solid rgba(245,158,11,.18); }
table.dt-grid { min-width: 2600px; table-layout: auto; font-size: .82rem; }
.dt-grid th { padding: 9px 8px; font-size: .68rem; color: #fbbf24; vertical-align: bottom; }
.dt-grid td { padding: 6px 6px; }
.dt-inp { min-height: 30px; color: #f8fafc; }
.dt-inp.dt-inp-wide { min-width: 310px; }
.dt-inp.code { min-width: 150px; }
.dt-inp.category { min-width: 150px; color: #dbeafe; }
.dt-inp.formula { min-width: 190px; color: #fde68a; }
.dt-inp.money { min-width: 118px; }
.dt-inp.note { min-width: 260px; }
.dt-cost-cell, .dt-cell-thanh-tien { white-space: nowrap; color: #f8fafc; }
.dt-row-product td { background: rgba(245,158,11,.12); }
.dt-row-child td:first-child { color: #fbbf24; font-weight: 700; }
.dt-summary-table { min-width: 1200px; }
.dt-summary-table th, .dt-summary-table td { font-size: .76rem; padding: 8px 10px; }
.dt-grid-footer { gap: 18px; padding: 12px 18px; }
.dt-summary-strip span { color: #cbd5e1; }
.dt-summary-strip strong, .dt-grand-total-value { color: #f8fafc; }
@media (max-width: 900px) { .dt-grid-wrap { min-height: 360px; } .dt-aipro-panels { max-height: 130px; } }

/* v1.15.1 AiPro worksheet readability pass */
.dt-aipro-panels { max-height: 170px; }
.dt-aipro-panel { max-height: 170px; }
#dt-aipro-panels:has(#dt-panel-estimate.active) { max-height: 105px; }
#dt-panel-estimate { max-height: 105px; padding-top: 8px; padding-bottom: 8px; }
.dt-grid-wrap {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #d97706 #24242d;
  scrollbar-width: auto;
}
.dt-grid-wrap::-webkit-scrollbar { width: 12px; height: 14px; }
.dt-grid-wrap::-webkit-scrollbar-track {
  background: #24242d;
  border-top: 1px solid rgba(255,255,255,.08);
}
.dt-grid-wrap::-webkit-scrollbar-thumb {
  background: #d97706;
  border: 3px solid #24242d;
  border-radius: 999px;
}
.dt-grid-wrap::-webkit-scrollbar-thumb:hover { background: #f59e0b; }
.dt-grid-wrap::-webkit-scrollbar-corner { background: #24242d; }
table.dt-grid {
  min-width: 2600px;
}
.dt-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1b1b24;
}
.dt-grid td:nth-child(16),
.dt-grid td:nth-child(17),
.dt-grid td:nth-child(18) {
  color: #fbbf24;
  font-weight: 750;
}
.dt-grid th[title] { cursor: help; }
.dt-grid .dt-cell-no { min-width: 64px; }
.dt-inp.cost-type { min-width: 150px; }
.dt-inp.calc-method { min-width: 190px; }
.dt-summary-table td,
.dt-summary-table th { color: #f8fafc; }
.dt-summary-table td:nth-child(3),
.dt-summary-table td:nth-child(4) { color: #dbeafe; }
.dt-summary-table td:last-child { color: #fbbf24; }
.dt-panel-title,
.dt-panel-note { max-width: 1100px; }
.dt-inp::placeholder { color: rgba(226,232,240,.45); }
@media (max-width: 900px) {
  .dt-aipro-panels,
  .dt-aipro-panel { max-height: 150px; }
  .dt-grid-wrap { height: auto; min-height: 240px; }
}

/* Expanded worksheet inspection mode */
#tab-du-toan.dt-focus-mode .dt-header,
#tab-du-toan.dt-focus-mode .dt-new-project,
#tab-du-toan.dt-focus-mode .dt-sidebar,
#tab-du-toan.dt-focus-mode .dt-rate-panel,
#tab-du-toan.dt-focus-mode .dt-workflow-tabs,
#tab-du-toan.dt-focus-mode .dt-aipro-panels {
  display: none !important;
}
#tab-du-toan.dt-focus-mode .dt-grid-header { padding-block: 10px; }
#tab-du-toan.dt-focus-mode .dt-grid-wrap { min-height: 0; }
#tab-du-toan.dt-focus-mode .dt-grid-area,
#tab-du-toan.dt-focus-mode #dt-grid-section { height: 100%; }

/* v1.21 Excel-like worksheet: the page owns vertical scrolling while the
   worksheet expands to show every row. The grid keeps horizontal scrolling
   only because its cost columns are intentionally wider than the viewport. */
#tab-du-toan {
  flex: 0 0 auto;
  min-height: 100%;
  overflow: visible;
}
.dt-body {
  flex: 0 0 auto;
  min-height: calc(100vh - 310px);
  overflow: visible;
  align-items: stretch;
}
.dt-grid-area,
#dt-grid-section {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.dt-grid-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: 58vh;
  overflow-x: scroll;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}
#dt-aipro-panels:has(#dt-panel-estimate.active),
#dt-panel-estimate {
  max-height: none;
  overflow: visible;
}

/* v1.31 simplified Cost Estimate workflow */
.dt-aipro-panels {
  max-height: 290px;
  overflow: auto;
}
.dt-aipro-panel {
  max-height: 290px;
}
.dt-inline-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: #cbd5e1;
  font-size: .75rem;
}
.dt-inline-summary b {
  color: #fbbf24;
  margin-left: 4px;
}
.dt-library-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, 220px));
  gap: 8px;
  margin: 10px 0;
}
.dt-library-filters input,
.dt-library-filters select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #f8fafc;
  font-size: .75rem;
  padding: 7px 9px;
}
.dt-library-filters option {
  background: #111318;
  color: #f8fafc;
}
.dt-library-table {
  min-width: 1500px;
}
.dt-library-table td:first-child {
  min-width: 126px;
  text-align: left;
}
.dt-use-btn.secondary {
  background: rgba(59,130,246,.14);
  border-color: rgba(96,165,250,.38);
  margin-left: 5px;
}
.dt-footer-actions {
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .dt-library-filters {
    grid-template-columns: 1fr;
  }
  .dt-grid-wrap {
    max-height: 52vh;
  }
}