@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap");

:root {
  --font-app: "Sarabun", Tahoma, sans-serif;
}

html,
:is(body[data-role], body.local-auth-page, body.print-work-order-page),
:is(body[data-role], body.local-auth-page, body.print-work-order-page) *,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) button,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) input,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) select,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) textarea,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) optgroup,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) option {
  font-family: var(--font-app) !important;
}

body[data-role] #sidebar *,
body[data-role] #topbar *,
body[data-role] #app * {
  font-family: var(--font-app) !important;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) {
  color: #1a1a1a !important;
  font-size: 16px;
  font-weight: 500;
  text-rendering: optimizeLegibility;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) * {
  font-weight: 500 !important;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(h1, h2) {
  --tw-font-weight: 700 !important;
  font-weight: 700 !important;
}

body[data-role] #sidebar :is(h1, h2),
body[data-role] #topbar :is(h1, h2),
body[data-role] #app :is(h1, h2) {
  --tw-font-weight: 700 !important;
  font-weight: 700 !important;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(h3, h4, h5, h6, label, th, dt, legend, button),
:is(body[data-role], body.local-auth-page, body.print-work-order-page) [class*="label"],
:is(body[data-role], body.local-auth-page, body.print-work-order-page) .meta-item small,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) .field small {
  font-weight: 600 !important;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(input, select, textarea, option, td, dd),
:is(body[data-role], body.local-auth-page, body.print-work-order-page) .meta-item strong,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) .field strong,
:is(body[data-role], body.local-auth-page, body.print-work-order-page) .detail b {
  font-weight: 500 !important;
}

:is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(.stat strong, .mini b, .report-kpis b, .counter) {
  font-weight: 700 !important;
}

/* Tailwind important utilities live in a cascade layer. Keep the typography
   contract in its earliest layer so semantic weights stay consistent. */
@layer properties {
  :is(body[data-role], body.local-auth-page, body.print-work-order-page) * {
    --tw-font-weight: 500 !important;
    font-weight: 500 !important;
  }

  :is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(h1, h2),
  body[data-role] #sidebar :is(h1, h2),
  body[data-role] #topbar :is(h1, h2),
  body[data-role] #app :is(h1, h2),
  :is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(.stat strong, .mini b, .report-kpis b, .counter) {
    --tw-font-weight: 700 !important;
    font-weight: 700 !important;
  }

  :is(body[data-role], body.local-auth-page, body.print-work-order-page) :is(h3, h4, h5, h6, label, th, dt, legend, button),
  :is(body[data-role], body.local-auth-page, body.print-work-order-page) [class*="label"],
  :is(body[data-role], body.local-auth-page, body.print-work-order-page) .meta-item small,
  :is(body[data-role], body.local-auth-page, body.print-work-order-page) .field small {
    --tw-font-weight: 600 !important;
    font-weight: 600 !important;
  }
}