/* css/style.css - MONASTIC AMBER GOLD ERP THEME */

:root {
  color-scheme: dark;
}

/* 🇲🇲 Site-wide Myanmar webfont (Noto Sans Myanmar, loaded in index.html).
   !important is needed because Tailwind's CDN build injects its own
   `.font-sans` utility, and the two have equal selector specificity --
   this guarantees our font always wins regardless of injection order. */
body.font-myanmar {
  font-family: 'Noto Sans Myanmar', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.text-gold-gradient {
  color: #fbbf24 !important;
  background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f0e0c; }
::-webkit-scrollbar-thumb { background: #261e17; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3d3025; }

.nav-btn {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #a89f91 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 4px solid transparent;
}
.nav-btn:hover {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #fef08a !important;
}
.nav-btn.active {
  background-color: #211912 !important;
  color: #facc15 !important;
  font-weight: 700 !important;
  border-left: 4px solid #f59e0b;
}

.stats-card {
  background: linear-gradient(135deg, #1c1510 0%, #120e0b 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.7) !important;
  padding: 0.85rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #1a1410 !important;
  padding: 12px 16px;
  font-size: 0.725rem !important;
  text-transform: uppercase;
  color: #fbbf24 !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3) !important;
  white-space: nowrap !important;
}

table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.1) !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
  color: #e7dfd5 !important;
}

table tbody tr:hover {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

/* 🔧 Larger text for the Home Dashboard fund summary + Report tables.
   The generic table rules above use !important, so this needs matching
   specificity to actually take effect. */
table.table-lg thead th {
  font-size: 0.85rem !important;
  padding: 14px 18px !important;
}
table.table-lg tbody td {
  font-size: 0.9rem !important;
  padding: 12px 18px !important;
  white-space: normal !important;
}

table th.sticky, table td.sticky, th.right-0, td.right-0 {
  position: sticky !important;
  right: 0 !important;
  background-color: #14100c !important;
  z-index: 25 !important;
  border-left: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* 🔧 Report summary table (12Rep!A1:P15, rendered as plain <tr>/<td> rows
   with no <thead>). table.table-lg forces white-space:normal on every
   cell so long content can wrap -- but that also wraps the header row
   (row 0) onto 2 lines. Target the header row specifically (ID selector
   beats the class-based rule above) so it always stays on one line, and
   give Column B ("ခေါင်းစဉ်ခွဲ/Category") a bit more breathing room since
   it holds the longest labels in the table. */
#report-table-body tr:first-child td {
  white-space: nowrap !important;
}
#report-table-body td:nth-child(2) {
  min-width: 190px;
}

/* 🙏 Mindfulness reflection card typography */
.mindful-card p {
  line-height: 2.1;
  letter-spacing: 0.01em;
}
.mindful-card h2.mindful-title {
  letter-spacing: 0.03em;
}