/* ================================================
   LM Maikhao WebApp — Typography Patch
   Focus: sharpness, readability, contrast
   Does NOT change color palette or layout
   Add this AFTER existing Bootstrap + Font links
   ================================================ */

/* ── Font rendering ── */
*, *::before, *::after {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

/* ── Replace Cormorant Garamond → Sarabun everywhere ── */
.stat-value,
.topbar-title,
.sidebar-brand-name {
  font-family: 'Sarabun', sans-serif !important;
}

/* ── Stat value ── */
.stat-value {
  font-size:   2.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1 !important;
}

/* ── Topbar title ── */
.topbar-title {
  font-size:   1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* ── Sidebar brand ── */
.sidebar-brand-name {
  font-size:   1rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* ── Body text ── */
body {
  font-family: 'Sarabun', system-ui, sans-serif;
  font-size:   14.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* ── Sidebar nav items — was rgba(.5) too faint ── */
.nav-item {
  color: rgba(255,255,255,.78) !important;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .015em;
}
.nav-item:hover {
  color: rgba(255,255,255,.95) !important;
}
.nav-item.active {
  color: var(--gold) !important;
  font-weight: 600;
}
.nav-item i {
  opacity: 0.85;
}

/* ── Sidebar section labels — was rgba(.25) almost invisible ── */
.nav-section {
  color: rgba(255,255,255,.5) !important;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
}

/* ── Sidebar brand ── */
.sidebar-brand-name {
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.sidebar-module {
  color: rgba(255,255,255,.45) !important;
  font-weight: 600;
  letter-spacing: .12em;
}

/* ── Sidebar user ── */
.s-name {
  font-weight: 600 !important;
  color: rgba(255,255,255,.90) !important;
}
.s-role {
  color: rgba(255,255,255,.45) !important;
  font-weight: 500;
}

/* ── Topbar ── */
.topbar-title {
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.topbar-sub {
  color: #888 !important;
  font-size: .80rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ── Stat cards ── */
.stat-value {
  font-weight: 700 !important;
  letter-spacing: -.01em;
  line-height: 1 !important;
}
.stat-label {
  color: #888 !important;
  font-size: .73rem;
  font-weight: 600 !important;
  letter-spacing: .08em;
}

/* ── Table header — was #aaa too pale ── */
thead th {
  color: #666 !important;
  font-size: .70rem !important;
  font-weight: 700 !important;
  letter-spacing: .10em;
}

/* ── Table body ── */
tbody td {
  font-size: .85rem !important;
  color: #333 !important;
  font-weight: 400;
  line-height: 1.5;
}
.td-name {
  font-weight: 600 !important;
  color: #1a1a18 !important;
  font-size: .88rem !important;
}
.td-eid {
  color: #888 !important;
  font-size: .76rem !important;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 500;
  letter-spacing: .02em;
}
.td-date {
  color: #888 !important;
  font-size: .80rem !important;
  font-weight: 500;
}

/* ── Table card header ── */
.table-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #1a1a18 !important;
}
.table-hint {
  color: #999 !important;
  font-size: .76rem;
  font-weight: 500;
}

/* ── Status badges — sharper text ── */
.sbadge {
  font-size: .70rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
}

/* ── Type badges ── */
.tbadge {
  font-size: .70rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

/* ── Role chips ── */
.role-chip {
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
}

/* ── Search ── */
.search-input {
  font-size: .87rem !important;
  font-weight: 400;
  color: #1a1a18 !important;
}
.search-input::placeholder {
  color: #bbb;
  font-weight: 400;
}
.btn-search {
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
}

/* ── Pending breakdown ── */
.pending-breakdown {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: #777 !important;
}

/* ── Buttons ── */
.btn-new {
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
}
.btn-view {
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}

/* ── Empty state ── */
.empty-row td {
  color: #aaa !important;
  font-size: .85rem;
  font-weight: 500;
}
.search-empty {
  color: #aaa !important;
  font-size: .85rem;
  font-weight: 500;
}