:root {
  --font: "Noto Sans Thai", sans-serif;
  --ink: #20252b;
  --muted: #66717d;
  --line: #e2e6eb;
  --paper: #fff;
  --bg: #fafbfc;
  --primary: #15755c;
  --sidebar: 232px;
}
* {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
a,
button {
  touch-action: manipulation;
}
button,
a {
  transition:
    background 0.15s,
    color 0.15s;
}
svg.lucide {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.7;
}
h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.5;
}
h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
}
h2 {
  font-size: 17px;
}
p {
  line-height: 1.7;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #1c8eae;
  outline-offset: 3px;
}
button {
  cursor: pointer;
}
a,
button {
  overflow-wrap: anywhere;
}
button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: white;
  padding: 12px;
}
.skip-link:focus {
  top: 10px;
}
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: white;
  border-right: 1px solid var(--line);
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 30px;
  font-size: 27px;
  font-weight: 800;
}
.app-brand img {
  border-radius: 8px;
}
.app-brand small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.nav-caption {
  font-size: 11px;
  color: #84909a;
  margin: 4px 12px 12px;
}
.app-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-nav a,
.app-secondary a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  color: #59636f;
  font-size: 14px;
  font-weight: 500;
}
.app-nav a:hover,
.app-secondary a:hover {
  background: #f0f4f2;
}
.app-nav a[aria-current] {
  background: #e7f3ed;
  color: #126145;
  font-weight: 700;
}
.app-secondary {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.app-secondary a {
  font-size: 13px;
}
.sidebar-user {
  margin-top: auto;
  padding: 18px 4px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.sidebar-user > a {
  margin-left: auto;
  padding: 8px;
}
.user-avatar {
  padding: 8px;
  border-radius: 50%;
  background: #eef0f4;
}
.app-topbar {
  margin-left: var(--sidebar);
  height: 70px;
  border-bottom: 1px solid var(--line);
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
}
.topbar-title {
  font-size: 13px;
  color: var(--muted);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.topbar-actions a {
  padding: 8px;
}
.app-main,
.app-footer {
  width: calc(100% - var(--sidebar));
  max-width: 1280px;
  margin-left: calc(var(--sidebar) + max(0px, (100% - var(--sidebar) - 1280px) / 2));
}
.app-main {
  padding: 32px 36px 48px;
  min-height: calc(100vh - 120px);
}
.app-main > [class*="max-w-"] {
  margin-inline: auto;
}
.app-footer {
  padding: 12px 36px 24px;
  color: #82909b;
  font-size: 11px;
  text-align: center;
}
.app-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid;
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.flash-success {
  color: #156344;
  background: #ecf7ef;
  border-color: #c9e5d1;
}
.flash-error {
  color: #a52d40;
  background: #fff0f2;
  border-color: #f1cbd2;
}
.app-shell .rounded-xl,
.app-shell .rounded-2xl {
  border-radius: 8px;
}
.app-shell .text-slate-500,
.app-shell .text-slate-600 {
  color: var(--muted);
}
.app-shell .border-slate-200 {
  border-color: var(--line);
}
.app-shell .bg-slate-50 {
  background: #f5f7f9;
}
.app-shell .bg-slate-900 {
  background: var(--primary);
  color: white;
}
.app-shell button.bg-slate-900:hover,
.app-shell a.bg-slate-900:hover {
  background: #0f5d49;
}
.app-shell .text-rose-700,
.app-shell .text-rose-800 {
  color: #a92944;
}
.app-shell .bg-rose-600 {
  background: #bc3451;
  color: white;
}
.app-shell .bg-orange-500 {
  background: #ac6311;
  color: white;
}
.app-shell a.underline {
  text-underline-offset: 4px;
}
.app-main > section,
.app-main > .rounded-2xl,
.app-main > div > section {
  box-shadow: none;
}
.app-main > section {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 24px 0 !important;
}
.app-main > .grid > section {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 20px 0;
}
.app-main > .grid > section + section {
  padding-left: 24px;
}
.app-main .grid > div {
  min-width: 0;
}
.app-main > .grid > .bg-white,
.app-main > div > .grid > .bg-white {
  box-shadow: none;
  border-width: 0 0 0 3px;
  border-radius: 0;
  padding: 18px 22px;
  background: white;
}
.app-main > .grid > .bg-white:nth-child(1) {
  border-left-color: #168262;
}
.app-main > .grid > .bg-white:nth-child(2) {
  border-left-color: #cc8b25;
}
.app-main > .grid > .bg-white:nth-child(3) {
  border-left-color: #bc4b63;
}
.app-main > .grid > .bg-white:nth-child(4) {
  border-left-color: #498baa;
}
.app-main .text-2xl {
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.app-main form .text-2xl {
  font-size: 22px;
}
.app-main article {
  box-shadow: none;
  border-color: var(--line);
}
.app-main article:hover {
  border-color: #bac9c0;
}
.app-main article h2 {
  font-size: 16px;
}
.app-main .flex {
  min-width: 0;
}
.app-main .flex > * {
  min-width: 0;
}
.app-main .flex.gap-2 {
  flex-wrap: wrap;
}
.app-shell
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.app-shell select,
.app-shell textarea {
  max-width: 100%;
  min-width: 0;
  border: 1px solid #ccd4dc;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  min-height: 44px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px #20252b04;
}
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  outline: 2px solid #15755c3b;
  outline-offset: 1px;
  border-color: #15755c;
}
.app-shell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.app-shell button {
  min-height: 40px;
}
.app-shell .copy-amount {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.app-shell .copy-amount:hover,
.app-shell .copy-amount:active {
  background: #15755c12;
  color: var(--primary);
}
.copy-amount svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.copy-notice {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  box-shadow: 0 4px 18px #20252b26;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}
.app-shell .copy-clipboard-field {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.app-shell label {
  font-size: 13px;
  font-weight: 500;
}
.company-expense-form > * {
  min-width: 0;
}
.company-date-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.app-shell .flatpickr-input[readonly] {
  cursor: pointer;
  background: white;
}
.flatpickr-calendar {
  font-family: var(--font);
  box-shadow: 0 10px 35px #20252b26;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  width: 324px;
  max-width: calc(100vw - 16px);
}
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar .dayContainer {
  max-width: 100%;
}
.flatpickr-day.selected,
.flatpickr-monthSelect-month.selected {
  background: var(--primary);
  border-color: var(--primary);
}
.flatpickr-calendar input,
.flatpickr-calendar select {
  padding: 0 !important;
  min-height: 28px !important;
  border: 0 !important;
  box-shadow: none !important;
}
.flatpickr-calendar .numInputWrapper {
  min-width: 65px;
}
.flatpickr-months {
  margin-bottom: 8px;
}
.flatpickr-monthSelect-month {
  border-radius: 6px;
  padding: 14px 6px;
}
.app-shell table {
  width: 100%;
  border-collapse: collapse;
}
.app-shell th {
  font-size: 11px;
  font-weight: 600;
  color: #6c7987;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  white-space: nowrap;
}
.app-shell td {
  padding: 16px 10px;
  border-bottom: 1px solid #edf0f3;
  vertical-align: middle;
}
.app-shell tbody tr:hover {
  background: #f7faf8;
}
.app-shell td .text-xs {
  line-height: 1.7;
}
.app-shell pre {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.app-shell canvas {
  max-height: 300px;
  width: 100% !important;
}
.app-shell .max-w-xl,
.app-shell .max-w-2xl {
  max-width: 760px;
}
.app-guest .app-sidebar {
  position: static;
  width: auto;
  border: 0;
  padding: 32px;
  align-items: center;
  background: transparent;
}
.app-guest .app-brand {
  padding: 0;
}
.app-guest .app-topbar {
  display: none;
}
.app-guest .app-main {
  margin: 0;
  width: 100%;
  max-width: none;
  padding-top: 24px;
  min-height: 60vh;
}
.app-guest .app-footer {
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: center;
}
.app-guest .max-w-md {
  max-width: 410px;
}
.app-guest form {
  border: 0 !important;
  padding: 24px 0 !important;
  background: transparent !important;
}
.app-guest h1 {
  text-align: center;
}
.app-main .toolbar-search {
  margin: 18px 0;
  width: 100%;
  max-width: 380px;
}
.empty-search {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.settings-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.settings-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: white;
}
@media (max-width: 1100px) {
  :root {
    --sidebar: 200px;
  }
  .app-main {
    padding: 24px;
  }
  .app-topbar {
    padding: 0 24px;
  }
  .app-main > .lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  .app-main > .grid > section + section {
    padding-left: 0;
  }
  .app-main > .grid > section {
    grid-column: span 1;
  }
  .app-main .overview-cycle-table {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  :root {
    --sidebar: 0px;
  }
  .app-sidebar {
    position: static;
    width: 100%;
    height: 0;
    padding: 0;
    border: 0;
  }
  .app-sidebar > .app-brand,
  .nav-caption,
  .app-secondary,
  .sidebar-user {
    display: none;
  }
  .app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 6px 4px calc(7px + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid var(--line);
    z-index: 50;
  }
  .app-nav a {
    flex-direction: column;
    gap: 4px;
    padding: 8px 2px;
    font-size: 10px;
    text-align: center;
    border-radius: 6px;
    line-height: 1.4;
  }
  .app-nav svg {
    width: 21px;
    height: 21px;
  }
  .app-topbar {
    height: 58px;
    padding: 0 16px;
  }
  .topbar-title {
    font-size: 12px;
  }
  .topbar-actions {
    gap: 2px;
  }
  .topbar-actions > span {
    display: none;
  }
  .app-main {
    padding: 22px 16px 100px;
    min-height: calc(100vh - 110px);
  }
  .app-footer {
    padding: 0 16px 100px;
  }
  .app-main h1 {
    font-size: 22px !important;
  }
  .app-main h1 + p {
    font-size: 13px;
  }
  .app-main .text-2xl {
    font-size: 23px;
  }
  .app-main > .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .app-main > .grid > .bg-white,
  .app-main > div > .grid > .bg-white {
    padding: 14px 12px;
  }
  .app-main .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  .app-main > div.flex.items-end {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .app-shell input:not([type="checkbox"]):not([type="radio"]),
  .app-shell select,
  .app-shell textarea {
    font-size: 16px;
  }
  .app-shell .max-w-xl,
  .app-shell .max-w-2xl {
    width: 100%;
  }
  .app-main > .grid > section + section {
    padding-left: 0;
  }
  .app-main .overflow-x-auto {
    overflow: visible;
  }
  .app-shell table,
  .app-shell table tbody {
    display: block;
    min-width: 0 !important;
    width: 100%;
  }
  .app-shell table thead {
    display: none;
  }
  .app-shell table tbody {
    display: grid;
    gap: 12px;
  }
  .app-shell table tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
  }
  .app-shell table td {
    display: block;
    padding: 0 !important;
    border: 0;
    width: 100%;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .app-shell table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .app-shell .overview-cycle-table {
    font-size: 14px;
  }
  .overview-cycle-table td:nth-child(2) {
    order: -1;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px !important;
  }
  .overview-cycle-table td:nth-child(2) .font-medium {
    font-size: 17px;
  }
  .overview-cycle-table td:nth-child(3) {
    font-size: 21px;
    font-weight: 700;
  }
  .overview-cycle-table td:last-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
  .overview-cycle-table td .space-y-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .app-shell table tr.bg-rose-50 {
    border-left: 3px solid #c64460;
    background: #fffafb;
  }
  .app-shell table tr.bg-amber-50 {
    border-left: 3px solid #c88b26;
    background: #fffdfa;
  }
  .app-shell table .text-right {
    text-align: left;
  }
  .app-main article .flex.items-start {
    flex-wrap: wrap;
  }
  .app-main article .text-2xl {
    font-size: 24px;
  }
  .app-main .reimburse-form label {
    min-height: 44px;
  }
  .app-main .flex.justify-between {
    flex-wrap: wrap;
  }
  .app-main .flatpickr-input {
    max-width: 100%;
    min-width: 0;
  }
  .flatpickr-calendar {
    font-size: 13px;
  }
  .app-guest .app-sidebar {
    height: auto;
  }
  .app-guest .app-sidebar > .app-brand {
    display: flex;
  }
  .app-guest .app-main {
    padding-bottom: 32px;
  }
  .app-guest .app-footer {
    padding-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}