:root {
  --nr-brand: #0f4c81;
  --nr-brand-dark: #0b3559;
  --nr-soft: #f3f5f8;
  --bs-body-font-family: "Sarabun", "Thonburi", system-ui, sans-serif;
  --bs-body-font-size: .95rem;
}
body { background: var(--nr-soft); }
.sidebar { width: 232px; flex-shrink: 0; min-height: 100vh; background: linear-gradient(180deg, var(--nr-brand), var(--nr-brand-dark)); }
.sidebar .brand { color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: .3px; }
.sidebar .nav-link { color: rgba(255,255,255,.82); border-radius: .5rem; padding: .45rem .75rem; display: flex; gap: .6rem; align-items: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar .nav-link.active { background: #fff; color: var(--nr-brand); font-weight: 600; }
.sidebar .section { color: rgba(255,255,255,.5); font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; padding: .75rem .75rem .25rem; }
main { min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid #e3e7ee; }
.card { border: 1px solid #e3e7ee; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.card-header { background: #fff; font-weight: 600; }
.table thead th { background: #eef3f8; color: #233; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .value { font-size: 1.6rem; font-weight: 700; color: var(--nr-brand); line-height: 1.1; }
.kpi .label { color: #667085; font-size: .85rem; }
.form-label { font-size: .85rem; color: #475467; margin-bottom: .2rem; }
.form-section-title { font-weight: 600; color: var(--nr-brand); border-bottom: 2px solid var(--nr-brand); padding-bottom: .25rem; margin: 1.25rem 0 .75rem; }
.badge-status-ACTIVE, .badge-status-APPROVED, .badge-status-NORMAL { background: #dff3e8; color: #0f6b3e; }
.badge-status-PENDING, .badge-status-NEED_DOCS, .badge-status-WAIT_DISBURSE, .badge-status-APPT { background: #fbefd2; color: #8a6100; }
.badge-status-REJECTED, .badge-status-CANCELLED, .badge-status-POSTPONED { background: #fde4e1; color: #b42318; }
.badge-status-CONTRACTED, .badge-status-CLOSE, .badge-status-DONE, .badge-status-USED { background: #e7eff7; color: var(--nr-brand); }
.badge-status { font-weight: 600; padding: .3em .6em; border-radius: 1rem; font-size: .78rem; }
.row-paid td { color: #98a2b3; }
.row-overdue td { background: #fff4f2 !important; }
.ts-wrapper.form-select { padding: 0; }
@media (max-width: 991px) {
  .sidebar { width: 100%; min-height: auto; position: sticky; top: 0; z-index: 1030; padding: .6rem 1rem !important; }
  #sideMenu { max-height: calc(100vh - 60px); overflow-y: auto; }
  .topbar { flex-wrap: wrap; gap: .25rem; }
  main > .p-4 { padding: 1rem !important; }
}
@media print {
  .no-print, .sidebar, .topbar { display: none !important; }
  body { background: #fff; }
  main { padding: 0 !important; }
}
#preview table, .table-compact { font-size: .82rem; }
#preview td, #preview th { white-space: nowrap; }

/* Closed contracts are shown in red (badge and whole row). */
.badge-status-CLOSED { background: #fde4e1; color: #c0161b; font-weight: 600; }
.row-closed td, .row-closed td a { color: #c0161b !important; }

/* Full-screen pages (every page): the side menu is hidden on a desktop and opens over the page from the เมนู
   button in the top bar, so lists have the whole width; the หน้าหลัก button leads home. */
@media (min-width: 992px) {
  .full-page .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045; overflow-y: auto;
                        transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  .full-page.menu-open .sidebar { transform: none; box-shadow: .5rem 0 2rem rgba(0,0,0,.25); }
  .full-page.menu-open .menu-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(15,23,42,.35); }
}
.full-page main > .p-4 { padding: 1rem 1.25rem !important; }


/* The legacy system's look (storage pages): its table, badges and side menu of big grey buttons. */
.legacy-table { font-size: .78rem; border: 1px solid #d5d5d5; }
.legacy-table th, .legacy-table td { border: 1px solid #d5d5d5; padding: .3rem .45rem; vertical-align: middle; }
.legacy-table thead th { background: #f3f6ff !important; color: #0f172a; font-weight: 700; text-align: center; white-space: nowrap; }
.legacy-table tbody tr:nth-child(even) > td { background: #fbfcff; }
.lg-badge { display: inline-block; padding: .15em .7em; border-radius: 9999px; font-weight: 600; font-size: .95em; white-space: nowrap; }
.lg-green { background: #dcfce7; color: #166534; } .lg-red { background: #fee2e2; color: #991b1b; }
.lg-gray { background: #f3f4f6; color: #1f2937; } .lg-blue { background: #dbeafe; color: #1e40af; }
.lg-amber { background: #fef3c7; color: #92400e; } .lg-purple { background: #f3e8ff; color: #6b21a8; }
.lg-btn { display: inline-flex; align-items: center; gap: .25rem; border: 0; border-radius: .35rem; padding: .25rem .5rem;
          color: #fff !important; font-size: .78rem; text-decoration: none; white-space: nowrap; }
.lg-btn-green { background: #15803d; } .lg-btn-blue { background: #3b82f6; } .lg-btn-gray { background: #6b7280; }
.lg-btn:hover { filter: brightness(1.1); }
.st-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1rem; align-items: start; }
.st-menu { display: flex; flex-direction: column; gap: .6rem; position: sticky; top: .5rem; }
.st-menu a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; height: 90px;
             background: #d1d5db; color: #000; border-radius: .5rem; text-decoration: none; font-size: .85rem; text-align: center;
             padding: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.st-menu a i { font-size: 1.6rem; line-height: 1; }
.st-menu a:hover { background: #c5cad1; }
.st-menu a.active { background: #6b7280; color: #fff; }
.st-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.st-titlebar h1 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
@media (max-width: 991px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-menu { flex-direction: row; overflow-x: auto; position: static; }
  .st-menu a { min-width: 120px; height: 70px; flex: 0 0 auto; }
}